32
HIGH TECH HIGH CODE QUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
| Date post: | 23-Jan-2018 |
| Category: |
Technology |
| Upload: | kms-technology |
| View: | 268 times |
| Download: | 2 times |
HIGH TECHHIGH CODE QUALITYHIGH PERFORMANCEHIGH SCALABILITYHIGH MAINTAINABILITY
Single Page
App
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 [email protected]
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
2
34
BETTER PERFORMANCE
PROPS STATE
{/* data */}
Changes trigger a render()
state
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
or
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
FLOW
#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 */}
<!--index.html--><html> <head>
<!--Your head—></head>
<body> <!--Your 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
Q&A
