B4UConference_Sexy Angular Stack
Download as PPTX, PDF1 like1,343 views
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.
B4UConference_Sexy Angular Stack
- 1. HIGH TECH HIGH CODE QUALITY HIGH PERFORMANCE HIGH SCALABILITY HIGH MAINTAINABILITY Single Page App
- 2. SE XY A N 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 Cuong Truong FEArchitect/Scrum Master at #ITCGroup I am here because I love to share knowledge You can contact me via [email protected]
- 5. Angular State Container ES6+ TypeScript Linter UI kit Unit Test Webpack VS Code Takeaway + Demo Agenda
- 6. #Framework for building SPA Uni-directional data flow Across all platforms Server-side rendering Modern, Smaller & Faster #Cheat Sheet ANGULAR
- 7. Do events Repaint the DOMDo layout Recalculate the CSS Every time DOM changes, browser needs to TAKESTIME TRADITIONAL WAY
- 8. Modifies DOM when MODEL 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 No directives 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 for concurrent 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 for Angular applications UNIDIRECTIONAL DATAFLOW IMMUTABLE Redux + Observable
- 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 checker for 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 does not 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 TypeScript code without executing it Coding conventions Readability Maintainability Functionality errors TSLint/ESLint #TSLint #ESLint
- 20. FAKER Some other mocking/ #faking data/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 Material UI Build yourself ?! #BEM #SMACSS #MVCSS
- 22. Bundles your Scripts Styles Assets Images WEBPACK Configuration object Resolves dependencies Hot reloading Tree-shaking Cache busting/hashing system
- 23. 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 CopyWebpackPlugin CompressionWebpackPlugin HtmlWebpackPlugin CircularDependencyPlugin CommonsChunk MORE INFORMATION
- 25. FOLDER STRUCTURE
- 26. take away
- 27. Pros One framework to rule 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 to keepconventions/boilerplate Need to care aboutperformance All in One framework for small app
- 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 #AngularStyleguide #Nx - MicroArchitecture #Redux #ReduxDevTools #Entities #TypeScript #Cheatsheet #SASS #BEM & SMACSS #MVCSS #Babel #ESLint #TSLint #Karma #Mocha #Chai #Sinon #Webpack #javascripting
- 31. Q&A
- 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