Home >Technology >Sexy React Stack

Sexy React Stack

Date post:23-Jan-2018
Category:
View:244 times
Download:1 times
Share this document with a friend
Transcript:
  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 ow 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. Modies 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 arender() state Stateful Stateless
  9. 9. #Thinking in React No controllers No models No directives No global event listeners Everything is
  10. 10. THINKING IN REACT - App - HomePage - Header - SearchBar - EmployeeList - EmployeeListItem - EmployeePage - Header - EmployeeDetails
  11. 11. A solution for concurrent data modication 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-owtype#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 Conguration 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 */ } // 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 ow 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 congurations Write small & pure functions as much as possible Write meaningful unit test as much as possible Dont USE if you dont 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

Click here to load reader

Embed Size (px)
Recommended