O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
HIGH TECH
HIGH CODE QUALITY
HIGH PERFORMANCE
HIGH SCALABILITY
HIGH MAINTAINABILITY
Single
Page
App
S E X Y R E A C T S TA C K
C 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
cuongtru...
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 DOM
TAKES TIME
Modifies DOM when something changed
VIRTUAL DOM
1
CREATE
a lightweight description
of component UI
BATCH
execute all change...
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
- Employ...
A solution for concurrent
data modification by
multiple actors
A client container for
temporary UI state. e.g.
wizard, shop...
#Redux
application state manager
for javascript applications
UNIDIRECTIONAL DATA FLOW
IMMUTABLE
MIDDLEWARES
Async API, Logging, Dev Tools, …
ReduxThunk, ReduxApiMiddleware,
ReduxObservable, ReduxSaga, …
Let + Const
const myObject = {propA, propB}
Arrow function, Default
const myFunction = (arg = ‘value’) => {}
Class
export ...
Static type checker for Javascript
strong/statically typed advantages
Strong tool for LARGE app
covers 100% of code
catche...
My Recommendation
project does not live for long
people enter or leave your team frequently
project is really simple
there...
discovers problems
with js/jsx code
without executing it
Coding conventions
Readability
Maintainability
Functionality erro...
KARMA
Spectacular #test runner
for JavaScript
CHAI
BBD/TDD
#assertion library
MOCHA
Feature-rich JavaScript
#test framewor...
React Bootstrap Material UI
Build yourself ?!
#BEM #SMACSS #MVCSS
Bundles your
Scripts
Styles
Assets
Images
WEBPACK
Configuration object
Resolves dependencies
Hot reloading
Tree-shaking
Cac...
WEBPACK
ENTRY POINTS
single entry
multiple page app
separate app & vendor
MORE INFORMATION
WEBPACK
LOADERS
style | css | s...
// bar.js
export default const bar () => {
/* Your code here */
}
<!--index.html-->
<html>
<head>
<!--Your head—>
</head>
...
folder structure?
FOLDER
STRUCTURE
take away
Pros
Full control/easy to manage coding flow
Building reusable code/components
Testable
Readable
Maintainable
Performance
D...
Cons
Learning curve
Need to keep conventions/boilerplate
Need to care about performance
Not easy to create large app witho...
My Recommendation
People are a part of solution
Keep conventions / commitments
Strategies for managing dependencies
Take c...
References
#DemoSourceCode
#JSCodingStandards
#StandardReduxAction
#ReactRouter
#Redux
#ReduxDevTools
#Reselect
#ES6+ #Flo...
Q&A
@CuongTruong
facebook/cuongtruong.official
cuongtruong@kms-technology.com
THANK YOU
@CuongTruong
Sexy React Stack
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
What to Upload to SlideShare
Avançar
Próximos SlideShares
What to Upload to SlideShare
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

Sexy React Stack

Baixar para ler offline

Topic: Sexy React Stack
Speaker: Cuong Truong

Sexy React Stack

  1. 1. HIGH TECH HIGH CODE QUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
  2. 2. S E X Y R E A C T S TA C K C U R I O U S C A S E S b y @ c u o n g t r u o n g
  3. 3. 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
  4. 4. React Redux ES6+ Flow Linter UI kit Unit Test Webpack VS Code Take away + Demo Agenda
  5. 5. #library for building UI Uni-directional data flow Server-side rendering **VIRTUAL DOM** #Cheat Sheet REACT.JS
  6. 6. Do events Repaint the DOMDo layout Recalculate the CSS Every time DOM changes, browser needs to REAL DOM TAKES TIME
  7. 7. Modifies DOM when something changed VIRTUAL DOM 1 CREATE a lightweight description of component UI BATCH execute all changes COMPUTE minimal set of changes to apply to the DOM DIFF with the old version 2 34 BETTER PERFORMANCE
  8. 8. PROPS STATE {/* data */} Changes trigger a render() state Stateful Stateless
  9. 9. #Thinking in React No controllers No models No directives No global event listeners Everything is <Component/>
  10. 10. THINKING IN REACT - App - HomePage - Header - SearchBar - EmployeeList - EmployeeListItem - EmployeePage - Header - EmployeeDetails
  11. 11. 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?
  12. 12. #Redux application state manager for javascript applications UNIDIRECTIONAL DATA FLOW IMMUTABLE
  13. 13. MIDDLEWARES Async API, Logging, Dev Tools, … ReduxThunk, ReduxApiMiddleware, ReduxObservable, ReduxSaga, …
  14. 14. 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 @myDecorator class MyClass {…}
  15. 15. 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
  16. 16. 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
  17. 17. discovers problems with js/jsx code without executing it Coding conventions Readability Maintainability Functionality errors ESLint #eslint-plugin-flowtype#ESLint
  18. 18. KARMA Spectacular #test runner for JavaScript CHAI BBD/TDD #assertion library MOCHA Feature-rich JavaScript #test framework ENZYME JavaScript #testing utility for React SINON Test #spies, stubs & mocks for JavaScript ISTABUL JS #code coverage tool Front-end Unit Test
  19. 19. React Bootstrap Material UI Build yourself ?! #BEM #SMACSS #MVCSS
  20. 20. Bundles your Scripts Styles Assets Images WEBPACK Configuration object Resolves dependencies Hot reloading Tree-shaking Cache busting/hashing system
  21. 21. 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
  22. 22. // bar.js export 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.js import bar from './bar'; bar();
  23. 23. folder structure?
  24. 24. FOLDER STRUCTURE
  25. 25. take away
  26. 26. Pros Full 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
  27. 27. Cons Learning 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
  28. 28. 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
  29. 29. References #DemoSourceCode #JSCodingStandards #StandardReduxAction #ReactRouter #Redux #ReduxDevTools #Reselect #ES6+ #Flow #SASS #BEM & SMACSS #MVCSS #Babel #ESLint #Karma #Mocha #Chai #Sinon #Webpack
  30. 30. Q&A
  31. 31. @CuongTruong facebook/cuongtruong.official cuongtruong@kms-technology.com THANK YOU @CuongTruong
  • beeant

    Jun. 1, 2020
  • tspiderx

    Sep. 14, 2017
  • RuiFerro4

    Jul. 20, 2017

Topic: Sexy React Stack Speaker: Cuong Truong

Vistos

Vistos totais

824

No Slideshare

0

De incorporações

0

Número de incorporações

0

Ações

Baixados

21

Compartilhados

0

Comentários

0

Curtir

3

×