Slide 1

Slide 1 text

The Essence of Front End Development

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

BUT!

Slide 4

Slide 4 text

Front End Back End

Slide 5

Slide 5 text

I decided to make a API for the SPA So,

Slide 6

Slide 6 text

BUT!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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…

Slide 17

Slide 17 text

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…

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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…

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Demonstration https://chaus.herokuapp.com

Slide 35

Slide 35 text

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