Download to read offline
Uploaded byHoa Le
B4UConference_Sexy Angular Stack
The document discusses the Angular framework for building single-page applications (SPAs), emphasizing a component-based architecture and unidirectional data flow for improved performance. It introduces tools such as NgRx for state management, TypeScript for static typing, and Webpack for module bundling. Recommendations include maintaining coding conventions and focusing on readability and testability to enhance developer experience.
More Related Content
Similar to B4UConference_Sexy Angular Stack
B4UConference_Sexy Angular Stack
- 1. HIGH TECH HIGH CODEQUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
- 2. SE XY AN G U L A R STA CK C U R I O U S C A S E S by @ c u o n g t r u o n g
- 3. Hello! I am CuongTruong FEArchitect/Scrum Master at #ITCGroup I am here because I love to share knowledge You can contact me via cuongtruong.info@gmail.com
- 4.
- 5. Angular State Container ES6+ TypeScript Linter UI kit UnitTest Webpack VS Code Takeaway + Demo Agenda
- 6. #Framework for buildingSPA Uni-directional data flow Across all platforms Server-side rendering Modern, Smaller & Faster #Cheat Sheet ANGULAR
- 7. Do events Repaint the DOMDolayout Recalculate the CSS Every time DOM changes, browser needs to TAKESTIME TRADITIONAL WAY
- 8. Modifies DOM whenMODEL changed ANGULAR WAY 1 USE “1-WAY” Unidirectional Data Flow BATCH Update bindings, execute all changes COMPUTE minimal set of changes cause DOM to be updated RUN change detection on the Model 2 34 BETTER PERFORMANCE
- 9. No controllers No models Nodirectives No global eventlisteners Everything is <Component/> #Thinking in Angular
- 10. component template </> metadata property binding event binding component component module component component directive metadata -component - structural - attribute injector service #Anguar vsReact#Benchmarks
- 11. THINKING IN ANGULAR - App -HomePage - Header - SearchBar - EmployeeList - EmployeeListItem - EmployeePage - Header - EmployeeDetails
- 12. A solution forconcurrent data modification by multiple actors A client containerfor temporary UI state.e.g. A client cache for avoiding excessive HTTP requests If you need HOW TOMANAGE FRONTEND LOGIC or wizard, shopping cart, … APPLICATION STATE EFFECTIVELY?
- 13. @ngrx/store application state manager forAngular applications UNIDIRECTIONAL DATAFLOW IMMUTABLE Redux + Observable
- 14.
- 15.
- 16. => {} 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 = myObjectconst {propA, propB} Rest, Spread … Promise myPromise.then().then().catch() Async/Await const myFunction = async () => {await…} Decorator @myDecorator class MyClass {…}
- 17. Static type checkerfor JS 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 TypeScript #WhyTypeScript
- 18. My Recommendation project doesnot live for long project is really simple people enter or leave your team frequently there is a chance you will need to refactor the thing system is very important or even crucial for the success of company
- 19. discovers problems with TypeScriptcode without executing it Coding conventions Readability Maintainability Functionality errors TSLint/ESLint #TSLint #ESLint
- 20. FAKER Some other mocking/ #fakingdata/api calls ISTANBUL JS #code coverage tool SINON Test #spies, stubs & mocks for JavaScript Front-end Unit Test KARMA Spectacular #test runner for JavaScript MOCHA Feature-rich JavaScript #test framework CHAI BBD/TDD #assertion library #Protractor
- 21. Ng Bootstrap MaterialUI Build yourself ?! #BEM #SMACSS #MVCSS
- 22. Bundles your Scripts Styles Assets Images WEBPACK Configuration object Resolvesdependencies Hot reloading Tree-shaking Cache busting/hashing system
- 23. 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 CopyWebpackPlugin CompressionWebpackPlugin HtmlWebpackPlugin CircularDependencyPlugin CommonsChunk MORE INFORMATION
- 24.
- 25.
- 26.
- 27. Pros One framework torule them all Full control/easy to manage coding flow Building reusable code/components Testable Readable Maintainable Performance Developer experience/community Server-side rendering => SEO Size is smaller after each release
- 28. Cons Learning curve Need tokeepconventions/boilerplate Need to care aboutperformance All in One framework for small app
- 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 #AngularStyleguide #Nx - MicroArchitecture #Redux #ReduxDevTools #Entities #TypeScript#Cheatsheet #SASS #BEM & SMACSS #MVCSS #Babel #ESLint #TSLint #Karma #Mocha #Chai #Sinon #Webpack #javascripting
- 31.
- 32. 0.99365 = 0.02552 0.999365= 0.69407 1365 = 1.001365 = 1.44025 1.002365 = 2.07357 1.01365 = 37.7834 1.02365 = 1377.40
- 33.