The front-end is react+mobx+ react-RouterV4 +socket. IO + Styled – Components +flow. The back-end is egg+mongodb+redis

The front end

In fact, it is the graduation project, but the progress is relatively slow, only a relatively simple version to finish the basic functions and chat, more hope is to finish the picture collaboration and form.

TAT: Let’s talk about the harvest. If you’re not interested, you can go straight to the following.

Styled components embrace CSS in JS. Better yet, the code hierarchy is more semantic, and less can also share global themes without the help of Sass. For the styled Components, the style is also used as a public component.

In the overall project construction, the project directly split, layout, public components, public components subdivision, highly reusable similar input components, image upload components, high-order components, these can be extracted.

In terms of data management, relatively free MOBx is used. Combined with MOBx-React-Form, it is actually more comfortable to process forms. However, more efforts are still needed in terms of local data management or global stores management. “, but there is a small problem in practice, sometimes the local variable break when the react-hot-loaderv3 is hot, but when the v4 update is directly jumped. That’s a little awkward.

Mobx react source code read Mobx react source code read Mobx react source code read Mobx react

Mox-react contributed a bit of code as an entry point

Let’s talk about the flow, flow-type and flow-runtime, which are various kinds of pit, personally feel not too friendly, slowly learn to learn to use.

The back-end

Out of the box, egg itself is koA2 based, shares koA’s ecosystem, and has a growing community of its own. Is still more friendly to the new, because of the koA experience, so the overall is relatively quick to get started… Although it is only a training project ~.

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

online

font

server

test account:[email protected] | password:123123123

account:[email protected] | password:123123123