Sexy React Stack
3 likes925 views
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.
![[Webinar] Test First, Fail Fast - Simplifying the Tester's Transition to DevOps](https://cdn.slidesharecdn.com/ss_thumbnails/testfirstfailfastfinal-170323164615-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Sexy React Stack (20)
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=560&fit=bounds)
Ad
More from KMS Technology (20)
Ad
Recently uploaded (20)
Sexy React Stack
- 1. HIGH TECH HIGH CODE QUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
- 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. 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]
- 5. React Redux ES6+ Flow Linter UI kit Unit Test Webpack VS Code Take away + Demo Agenda
- 6. #library for building UI Uni-directional data flow Server-side rendering **VIRTUAL DOM** #Cheat Sheet REACT.JS
- 7. Do events Repaint the DOMDo layout Recalculate the CSS Every time DOM changes, browser needs to REAL DOM TAKES TIME
- 8. 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
- 9. PROPS STATE {/* data */} Changes trigger a render() state Stateful Stateless
- 10. #Thinking in React No controllers 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 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?
- 13. #Redux application state manager for javascript applications UNIDIRECTIONAL DATA FLOW IMMUTABLE
- 14. MIDDLEWARES Async API, Logging, Dev Tools, … ReduxThunk, ReduxApiMiddleware, ReduxObservable, ReduxSaga, …
- 15. 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 {…}
- 16. 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
- 17. 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
- 18. discovers problems with js/jsx code without executing it Coding conventions Readability Maintainability Functionality errors ESLint #eslint-plugin-flowtype#ESLint
- 19. 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
- 20. React Bootstrap Material UI Build yourself ?! #BEM #SMACSS #MVCSS
- 21. Bundles your Scripts Styles Assets Images WEBPACK Configuration object Resolves dependencies Hot reloading Tree-shaking Cache busting/hashing system
- 22. 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
- 23. // 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();
- 25. FOLDER STRUCTURE
- 26. take away
- 27. 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
- 28. 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
- 29. 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
- 30. References #DemoSourceCode #JSCodingStandards #StandardReduxAction #ReactRouter #Redux #ReduxDevTools #Reselect #ES6+ #Flow #SASS #BEM & SMACSS #MVCSS #Babel #ESLint #Karma #Mocha #Chai #Sinon #Webpack
- 31. Q&A