The Essence of Front End Development

- SPA development tips and technologies throughout learning history
- the role and use of RESTful APIs, mainly focusing on how developers can
develop and deploy new RESTful APIs in a semi-auto fashion, as well as
implement the functionalities with compact code

Transcript

1. The Essence of Front End Development
2. What I had want to learn ▸ React / Redux / Routing ▸ SSR / Synchronized fetch ▸ Hot module ▸ CSS Module ▸ Bundle App
3. BUT!
4. Front End Back End
5. I decided to make a API for the SPA So,
6. BUT!
7. I’m neglect I don’t like to make API from scratch if it’s simple
8. I decided to make a API to make a API for the SPA So,
9. Interface - express-restful-api app.use('/', require(‘express-restful-api’).router({ mongo: ’mongodb://localhost:27017’, schema: { company: { name: { uniq: true, required: true }, established: { type: ‘date’ } } } })); Generate end point below GET /companies POST /companies DELETE /companies GET /companies/:id POST /companies/:id DELETE /companies/:id
10. How it works? Schema Definition Convert Mongoose Schema Initiate Make models on MongoDB
11. How it works? Schema Definition Make End point with Verbs Return routes Make Restful API Routes and return express
12. Response Example { "offset": 0, "limit": 25, "size": 1, "first": "/companies?offset=0&limit=25", "last": "/companies?offset=0&limit=25", "prev": null, "next": null, "items": [ { "updatedAt": "2017-06-06T13:37:44.000Z", "createdAt": "2017-06-06T13:37:44.000Z", "name": "hoge", "id": "hoge" } ] }
13. ▸ Making Restful API end point ▸ Pagenation ▸ Hypermedia linking ▸ Provide JSON schema ▸ Making Validation end point ▸ API Document generation Features - express-restful-api
14. API is ready. Finally, I can start Front End Application Development
15. Then, I decided to make a SPA to make a API using the API
16. react-redux-universal-hot-example ▸ It was State-of-the-art ▸ It includes what I want to learn. ▸ React / Redux / SSR / CSS module…etc I choice the boilerplate for SPA because of…
17. Example of the Action Creators export function save(widget) { return { types: [SAVE, SAVE_SUCCESS, SAVE_FAIL], id: widget.id, promise: (client) => client.post('/widget/update', { data: widget }) }; } It is different from the action creator which written in redux articles…
18. Adapting redux-middleware The boilerplate has redux middleware (clientMiddleware) to deal with promise for async request Action Creators types promise client Middleware dispatch start, success, fail type following promise status
19. If we make or use middleware, we need to consider “How it can be simplify the code” and “Coupling action creators and the middleware”
20. The boilerplate has many magic spells. I’ve learn a lot of things in the boilerplate. But Everyone can not learn everything. It is better to encapsulation the magic. Developer should focus application development instead.
21. Magic Spells Destruction ▸ create-react-app ▸ facebookincubator ▸ Conceal webpack configuration hell. ▸ But not supported universal javascript and css module ▸ I’ve started to make it…
22. koiki ▸ Based on the boilerplate ▸ Scaffolding ▸ npm script for build, dev ▸ Module sets ▸ Initialization ( client, server ) ▸ API fetcher ▸ Proxy for BFF ▸ i18n ( a bit )
23. koiki-ui Reusable UI components https://sideroad.github.io/koiki-ui/
24. chaus - architecture koiki ( webpack, scaffold, basic modules ) koiki-ui Common UI components FrontEnd - Client entry point - Server entry point - Containers - Components - Reducers - Action Creators BackEnd - Authentication - APIs endpoint - API endpoint to manage APIs endpoint
25. react-autobind ▸ Utility function to Automatically bind methods ▸ Both of Whitelist, Blacklist binding are supported constructor(props) { super(props); autoBind(this); } constructor(props) { super(props);
 this.handleClick = this.handleClick.bind(this); this.handleFocus = this.handleFocus.bind(this); this.handleBlur = this.handleBlur.bind(this); ... } As Is To Be
26. react-helmet ▸ Made by National Football League ▸ React is difficult to control in remote place.
 react-helmet can control tag in document.head ▸ SSR support
27. redux-form ▸ Manage form state in Redux ▸ It can gather elements values when submit ▸ Adapt validation function ▸ touch, active detection ▸ But sometime, I spent a much time to resolve issue 
 related redux-form with SSR rather than what redux-form can be resolved.
28. storybook ▸ React component documentation ▸ Easy to see actual behavior ▸ Many plugins ▸ storyshots - Can be use as snapshot test ▸ react-storybook-addon-info - Props documentation
29. redux-connect ▸ Decorator to wait promise ( API fetching ) then start to render ▸ Fetch logic can be placed what the container needed in the container.
30. vis ▸ Network graph library ( nodes and edges ) ▸ DOT language support
 
 dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }
31. passport ▸ Authentication middleware ( OpenID, OAuth, OAuth2 ) ▸ All famous authenticator are supported
 Facebook, github, twitter… ▸ Easy to adapt
32. Sample SPA architecture - using chaus ▸ Simple usage ( No authentication ) ▸ Access chaus from both of Server side and Client side chaus browser server SPA
33. Sample SPA architecture - using chaus ▸ Complex usage ▸ BFF for Authentication, Orchestration, Adapt business logic ▸ Access chaus from only Server side with API key for chaus chaus browser server SPA BFF
34. Demonstration https://chaus.herokuapp.com
35. Under considering ‣ CSS module v.s. CSS in JS ‣ i18n adaption ‣ More better way
 for Async fetch in universal javascript