Sexy React Stack

transcript

HIGH TECHHIGH CODE QUALITYHIGH PERFORMANCEHIGH SCALABILITYHIGH MAINTAINABILITY

Single Page

S E X Y R E A C T S T A C KC U R I O U S C A S E S

b y @ c u o n g t r u o n g

SSE at #KMS Technology

Hello!I am Cuong Truong

I am here because I love to share knowledge

You can contact me at cuongtruong@kms-technology.com

React Redux ES6+ Flow

Linter

UI kit Unit Test Webpack VS Code Take away + Demo

Agenda

#library for building UI Uni-directional data flow Server-side rendering

**VIRTUAL DOM** #Cheat Sheet

REACT.JS

Do events

Repaint the DOMDo layout

Recalculate the CSS

Every time DOM changes, browser needs to

REAL DOMTAKES TIME

Modifies DOM when something changed

VIRTUAL DOM

1CREATEa lightweight description of component UI

BATCHexecute all changes

COMPUTEminimal set of changes

to apply to the DOM

DIFFwith the old version

BETTER PERFORMANCE

PROPS STATE

{/* data */}

Changes trigger a render()

Stateful

Stateless

#Thinking in React

No controllers No models No directives No global event listeners

Everything is <Component/>

THINKING IN REACT

- App - HomePage - Header - SearchBar - EmployeeList - EmployeeListItem

- EmployeePage - Header - EmployeeDetails

A solution for concurrent data modification by multiple actors

A client container for temporary UI state. e.g. wizard, shopping cart, …

A client cache for avoiding excessive HTTP requests

If you need

HOW TO MANAGE FRONTEND LOGIC

APPLICATION STATE EFFECTIVELY?

#Redux application state manager for javascript applications

UNIDIRECTIONAL DATA FLOW IMMUTABLE

MIDDLEWARESAsync API, Logging, Dev Tools, …

ReduxThunk, ReduxApiMiddleware, ReduxObservable, ReduxSaga, …

Let + Const const myObject = {propA, propB}

Arrow function, Default const myFunction = (arg = ‘value’) => {}

Class export class MyClass {constructor(){}}

Module import {MyClass} from ‘my/path’

Template String const tps = `Template string with ${…}`

#ES6 #Mozilla #ES-Next

ECMAScript 6+Destructuring const {propA, propB} = myObject

Rest, Spread …Promise myPromise.then().then().catch()

Async/Await const myFunction = async () => {await…}

Decorator @myDecoratorclass MyClass {…}

Static type checker for Javascript strong/statically typed advantages

Strong tool for LARGE app covers 100% of code catches incorrect assumptions

e.g. numbers represented as strings

Provides advanced autocompletion / intellisense navigation safe refactoring

#WhyFlow

My Recommendation

project does not live for long

people enter or leave your team frequently

project is really simple

there is a chance you will need to refactor the thing

system is very important or even crucial for the success of company

discovers problems with js/jsx code

without executing itCoding conventions

Readability Maintainability

Functionality errors

ESLint

#eslint-plugin-flowtype#ESLint

KARMASpectacular #test runner

for JavaScript

CHAIBBD/TDD

#assertion library

MOCHAFeature-rich JavaScript

#test framework

ENZYMEJavaScript #testing utility for React

SINONTest #spies, stubs & mocks for JavaScript

ISTABULJS #code coverage tool

Front-end Unit Test

React Bootstrap Material UI

Build yourself ?!

#BEM #SMACSS #MVCSS

Bundles your Scripts Styles Assets Images

WEBPACKConfiguration object Resolves dependencies Hot reloading Tree-shaking Cache busting/hashing system

WEBPACK

ENTRY POINTS

single entry

multiple page app

separate app & vendor

MORE INFORMATION

WEBPACK

LOADERS

style | css | sass | scss | …

babel | typescript | flow | …

html | template | pug | …

url | file | raw | …

module | bundle-loader

MORE INFORMATION

WEBPACK

PLUGINS

minimize

deduplication

HtmlWebpackPlugin

CircularDependencyPlugin

CommonsChunk

MORE INFORMATION

// bar.jsexport default const bar () => { /* Your code here */}

<html> <head>

<!--Your head—></head>

<body>  <script src="bundle.js"></script> </body></html>// webpack.config.js

module.exports = { entry: './app.js', output: { filename: 'bundle.js' }}

// app.jsimport bar from './bar';bar();

folder structure?

FOLDER STRUCTURE

take away

ProsFull control/easy to manage coding flow Building reusable code/components Testable Readable Maintainable Performance Developer experience/community Redux ecosystem

Extension points such as #middleware Server-side rendering => SEO React + Redux is small

ConsLearning curve Need to keep conventions/boilerplate Need to care about performance Not easy to create large app without using bunch of libraries

React does not provide An events system (other than vanilla DOM events) AJAX Promise

My Recommendation

People are a part of solution Keep conventions / commitments Strategies for managing dependencies Take care about architecture and configurations Write small & pure functions as much as possible Write meaningful unit test as much as possible Don’t USE if you don’t NEED or UNDERSTAND it

References

#DemoSourceCode #JSCodingStandards #StandardReduxAction #ReactRouter

#Redux #ReduxDevTools #Reselect

#ES6+ #Flow #SASS #BEM & SMACSS #MVCSS

#Babel #ESLint #Karma #Mocha #Chai #Sinon #Webpack

@CuongTruong

facebook/cuongtruong.official

cuongtruong@kms-technology.com

THANK YOU@CuongTruong