React全家桶+Egg 做一個協作聊天室~

sun168發表於2018-03-12

前端主要為:react+mobx+react-routerv4+socket.io+styled-components+flow 後端主要為:egg+mongodb+redis

前端

其實也就是畢業設計,不過目前進展比較緩慢,只出了一個比較簡單的版本把基本功能和聊天的弄完了,比較希望是能把圖片協作和表格的給弄完。

TAT 還是講一下收穫吧 ,不感興趣就可以直接向下面看啦。

基本這個全家桶就是這幾個月用的技術棧了,通過了styled-components 擁抱了css in js,比較好的一點是程式碼層級更加語義化了,不借助sass,less也能做到全域性主題共享。在複用層面上感覺需要一點功底,目前還沒能使用好,但是總體來講,基於styled-components 把樣式也作為公有元件。

在整體專案構建的時候,直接把專案拆分,佈局,公有元件,公有元件細分,高度複用的類似輸入元件,圖片上傳元件,高階元件,這些都是可以提取下來的。

在資料管理方面,使用了相對自由的mobx,結合mobx-react-form其實使用起來處理表單都比較舒服,但是是資料區域性管理還是通過stores全域性管理,這一點上,依舊需要更多打磨。,但是實踐的時候有個小問題,react-hot-loaderV3 的時候區域性變數熱更的時候有時候會直接break掉,而更新到v4的時候直接就蹦了。。 這個倒有點小尷尬。

在使用Mobx的時候深入學習了一波,於是有了 mobx-react原始碼閱讀

(作為切入點趁機還給mobx-react 貢獻了一下程式碼 不過好像挖了個坑 (逃

說一下flow,flow-type 和flow-runtime 是各種坑,個人感覺實在不是太友好,慢慢摸索學習使用吧。

後端

講一下egg吧,開箱即用,本身基於koa2開發,共用koa的生態圈,本身社群也在不斷髮展。對新人還是比較友好,因為有用過koa的經驗所以整體還是比較快上手。。。雖然只是個練手專案~。

basic cover

  • [x] controller
  • [x] service
  • [x] model
  • [x] plugin
  • [x] extend
  • [x] logger
  • [ ] validate params
  • [ ] test

Advanced

  • [x] middleware --check(not)Login and spa redirect
  • [x] socket.io
  • [x] custom plugin --egg-mongolass
  • [x] deploy
  • [ ] err-handler

preview

React全家桶+Egg 做一個協作聊天室~
React全家桶+Egg 做一個協作聊天室~
React全家桶+Egg 做一個協作聊天室~
React全家桶+Egg 做一個協作聊天室~

online

font

server

test account:123456789@qq.com | password:123123123

account:12345678@qq.com | password:123123123

相關文章