The Essence of Front End Development

13e538d2d2d2b2c34cab93d2fcfd8e63?s=47 side road
June 05, 2017
130

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

13e538d2d2d2b2c34cab93d2fcfd8e63?s=128

side road

June 05, 2017
Tweet

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