The Essence of Front End Development 

What I had want to learn ▸ React / Redux / Routing ▸ SSR / Synchronized fetch ▸ Hot module ▸ CSS Module ▸ Bundle App 

BUT! 

Front End Back End 

I decided to make a API for the SPA So, 

BUT! 

I’m neglect I don’t like to make API from scratch if it’s simple 

I decided to make a API to make a API for the SPA So, 

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 

How it works? Schema Definition Convert Mongoose Schema Initiate Make models on MongoDB 

How it works? Schema Definition Make End point with Verbs Return routes Make Restful API Routes and return express 

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" } ] } 

▸ Making Restful API end point ▸ Pagenation ▸ Hypermedia linking ▸ Provide JSON schema ▸ Making Validation end point ▸ API Document generation Features - express-restful-api 

API is ready. Finally, I can start Front End Application Development 

Then, I decided to make a SPA to make a API using the API 

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… 

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… 

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 

If we make or use middleware, we need to consider “How it can be simplify the code” and “Coupling action creators and the middleware” 

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. 

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… 

koiki ▸ Based on the boilerplate ▸ Scaffolding ▸ npm script for build, dev ▸ Module sets ▸ Initialization ( client, server ) ▸ API fetcher ▸ Proxy for BFF ▸ i18n ( a bit ) 

koiki-ui Reusable UI components https://sideroad.github.io/koiki-ui/ 

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 

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 

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 

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. 

storybook ▸ React component documentation ▸ Easy to see actual behavior ▸ Many plugins ▸ storyshots - Can be use as snapshot test ▸ react-storybook-addon-info - Props documentation 

redux-connect ▸ Decorator to wait promise ( API fetching ) then start to render ▸ Fetch logic can be placed what the container needed in the container. 

vis ▸ Network graph library ( nodes and edges ) ▸ DOT language support
 
 dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 } 

passport ▸ Authentication middleware ( OpenID, OAuth, OAuth2 ) ▸ All famous authenticator are supported
 Facebook, github, twitter… ▸ Easy to adapt 

Sample SPA architecture - using chaus ▸ Simple usage ( No authentication ) ▸ Access chaus from both of Server side and Client side chaus browser server SPA 

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 

Demonstration https://chaus.herokuapp.com 

Under considering ‣ CSS module v.s. CSS in JS ‣ i18n adaption ‣ More better way
 for Async fetch in universal javascript