Downloaded 21 times
Uploaded byKMS Technology
Sexy React Stack
High tech, high code quality, high performance, and high scalability were discussed. The presentation covered React, Redux, ES6+, Flow, unit testing, and Webpack. Pros include full control, reusability, testability, and performance. Cons include learning curve and needing to manage conventions and dependencies carefully.
More Related Content
![[Webinar] Test First, Fail Fast - Simplifying the Tester's Transition to DevOps](https://cdn.slidesharecdn.com/ss_thumbnails/testfirstfailfastfinal-170323164615-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...](https://cdn.slidesharecdn.com/ss_thumbnails/binhphanreactjs-170420085708-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Sexy React Stack
- 1. HIGH TECH HIGH CODEQUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
- 2. S E XY 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. SSE at #KMSTechnology Hello! I am Cuong Truong I am here because I love to share knowledge You can contact me at cuongtruong@kms-technology.com
- 5. React Redux ES6+ Flow Linter UI kit Unit Test Webpack VSCode Take away + Demo Agenda
- 6. #library for buildingUI Uni-directional data flow Server-side rendering **VIRTUAL DOM** #Cheat Sheet REACT.JS
- 7. Do events Repaint the DOMDolayout Recalculate the CSS Every time DOM changes, browser needs to REAL DOM TAKES TIME
- 8. Modifies DOM whensomething 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
- 9. PROPS STATE {/* data */} Changestrigger a render() state Stateful Stateless
- 10. #Thinking in React Nocontrollers No models No directives No global event listeners Everything is <Component/>
- 11. THINKING IN REACT - App -HomePage - Header - SearchBar - EmployeeList - EmployeeListItem - EmployeePage - Header - EmployeeDetails
- 12. A solution forconcurrent 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?
- 13. #Redux application state manager forjavascript applications UNIDIRECTIONAL DATA FLOW IMMUTABLE
- 14. MIDDLEWARES Async API, Logging,Dev Tools, … ReduxThunk, ReduxApiMiddleware, ReduxObservable, ReduxSaga, …
- 15. Let + Const constmyObject = {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 {…}
- 16. Static type checkerfor 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
- 17. My Recommendation project doesnot 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
- 18. discovers problems with js/jsxcode without executing it Coding conventions Readability Maintainability Functionality errors ESLint #eslint-plugin-flowtype#ESLint
- 19. KARMA Spectacular #test runner forJavaScript 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
- 20. React Bootstrap MaterialUI Build yourself ?! #BEM #SMACSS #MVCSS
- 21. Bundles your Scripts Styles Assets Images WEBPACK Configuration object Resolvesdependencies Hot reloading Tree-shaking Cache busting/hashing system
- 22. WEBPACK ENTRY POINTS single entry multiplepage 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
- 23. // bar.js export defaultconst 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();
- 24.
- 25.
- 26.
- 27. Pros Full control/easy tomanage 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
- 28. Cons Learning curve Need tokeep 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
- 29. My Recommendation People area 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
- 30. References #DemoSourceCode #JSCodingStandards #StandardReduxAction #ReactRouter #Redux #ReduxDevTools #Reselect #ES6+ #Flow #SASS #BEM &SMACSS #MVCSS #Babel #ESLint #Karma #Mocha #Chai #Sinon #Webpack
- 31.
- 32.