Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Download as PPTX, PDF3 likes796 views
Modern web applications have constantly growing requirements and their API and complexity grows exponentially. In this session we'll look at a practical example of how to optimize solutions, like bundling, tree shaking, ahead of time compilation, lazy loading, etc. Also, we will get a glimpse of what it takes to switch a complex product to a modern stack, with Angular in its heart, and how the company's commitment is making it possible.
![const routes: Routes = [
...
{ path: 'trader', loadChildren: './trader/trader.module#ZlTraderModule?chunkName=trader' },
];
plugins = [
...
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: ‘prefetch’,
as: ‘script’
include: [‘trader’],
})
];](https://image.slidesharecdn.com/challengesofangularinproduction-170222083135/85/Challenges-of-angular-in-production-Tasos-Bekos-GreeceJS-17-22-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (6)
Ad
Similar to Challenges of angular in production (Tasos Bekos) - GreeceJS #17 (20)
Ad
More from GreeceJS (13)
Recently uploaded (20)
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
- 1. Challenges of Angular in production Tasos Bekos Frontend Architect @ ZuluTrade
- 2. Tasos Bekos Frontend Architect ZuluTrade Angular-UI Bootstrapng-lightning @tbekos @bekos
- 3. Why Angular? Dependency Injection (DI) Template syntax Universal (SSR) Google Team/AngularJS
- 4. VS
- 5. Problems we faced Learning curve Training / Recruiting Breaking changes Missing libraries / resources
- 6. ng-lightning (https://github.com/ng-lightning/ng-lightning) Angular components & directives for Salesforce's Lightning Design System. Stateless functional components Accessibility
- 7. Great for collaboration Declarative syntax Designer friendly Typescript Decorators
- 8. Application Architecture Maintainability Scalability Performance “...decisions that are hard to change” Martin Fowler
- 9. Maintainability Testability Karma Protractor Automation Build: Webpack / Gulp Deployment: Jenkins Pair programming / Code reviews
- 10. Scalability Redux (ngrx/store) Explicit update DevTools plugin Vertical separation of concerns Modules Typescript / Templates Horizontal separation of concerns Components Services API layer (Facade to backend services) Store layer (Reducers)
- 11. Pure UI Components (onPush) Container UI components (async pipe) Services Store API services (Facade)Reducer Stream of immutable state slices ActionState Backend response Function calls Parameters High level action/data flow @Output@Input
- 12. Performance Startup Download time Parse and compile time Runtime Javascript / CSS calculations
- 14. Startup Performance 1. Measure and inspect 2. Reduce size 3. Optimize code & delivery 4. Lazy loading
- 15. Measure & inspect webpagetest.org Chrome Timeline Webpack Bundle Analyzer
- 18. Reduce size Do not overuse libraries You don't (may not) need Lodash Make use of native Replicate small stuff Reward good behaviour Polyfill.io Don’t overuse components Can we achieve the same result with HTML/CSS? Typescript helpers --importHelpers with --noEmitHelpers
- 19. import { Observable } from ‘rxjs/Rx'; import { find } from ‘lodash'; import { Observable } from ‘rxjs/Observable'; import find from ‘lodash-es/find'; // Just use ES6 find!! Modular libraries
- 20. Optimize code & delivery Precompilation Ahead of Time compilation optimize-js Treeshaking Webpack 2 Closure CDN publicPath: `https://mycdn.com/`
- 21. Lazy loading Code splitting Router System.import / import() Modals, Tabs, ... preload, prefetch preloadingStrategy: PreloadAllModules GoogleChrome/preload-webpack-plugin Timing 3rd party dependencies Wrap external libraries, take advantage of lifecycle hooks
- 22. const routes: Routes = [ ... { path: 'trader', loadChildren: './trader/trader.module#ZlTraderModule?chunkName=trader' }, ]; plugins = [ ... new HtmlWebpackPlugin(), new PreloadWebpackPlugin({ rel: ‘prefetch’, as: ‘script’ include: [‘trader’], }) ];
- 25. Runtime Performance enableProdMode Ahead of Time compilation (AoT) Change detection OnPush detach/reattach Τake advantage of Router Reduce DOM size NgZone: runOutsideAngular Pure pipes, trackBy…
- 26. Future i18n during compilation time Service workers Server side rendering Angular ^4 Closure compiler for AoT
- 27. Thank you!
Editor's Notes
- #2: Ευχαριστω GreeceJS για φιλοξενία Περι τινος προκειται: Αποφαση με management για μοντερνο stack, απο .ΝΕΤ. Public εδω και λιγο καιρο. Δυσκολη συνύπαρξη. DISCLAIMER: Not framework comparison No Angular tutorial Personal experiences, has worked for us
- #3: 3 χρονια Frontend Architect ZuluTrade. Opensource active NPM modules Angular UI Bootstrap και τελευταία εχουμε βγάλει opensource το ng-lightning, μια παρόμοια βιβλιοθήκη με UI components σε Angular 2, και βασισμένα στο SLDS και για την όποια θα μιλήσουμε λίγο πιο αναλυτικά και παρακάτω. **** Avatar
- #4: Γιατι οχι React, Polymer κτλ Κοινα προβληματα για κάθε JS framework, πιο συγκεκριμένα πως τα αντιμετωπίζουμε εμεις στο Angular ecosystem. Πολυ νωρις η αποφαση, Alpha/Beta. Λιγες πληροφορίες. Επιτυχημενη προηγούμενη εμπειρια που είχαμε με το Angular 1. ALL IN ONE = better for enterprises, forms, router, animations, i18n …. DI = responsible to setup the application for you, you just define the dependencies of your service or component in the constructor, and Angular is going to take care of instantiating appropriate object. Βοηθαει στο mocking των dependencies στο testing. Ηδη πολυ ισχυρη, => πιο καθαρή. SSR, απο day 1, ...we care a lot about SEO! Socail trading platform!!! Universal was always lacking behind, has been rewritten several times, and now is migrating to core => ιt will be very easy to use. DOM dehydration? Preboot.js replays events. Ηδη επιτυχια .... Απλώς καλύτερο...Distilled all the best practices of Angular 1.x into Angular 2
- #5: Give me an estimation! Documentation! Router!!! RC5 => NgModules
- #6: Angular 1 !== Angular 2 Best practices from community RxJS Redux tsconfig Nα ξερουν ήδη ή να ενδιαφερονται να επενδυσουν σε μια βιβλιοθηκη που ήταν ακομα σε beta και ενω το react ηταν το πιο hot topping εκεινο τον καιρό :-) Ετσι, καταληξαμε στο οτι θα ήταν ευκολοτερο να κανουμε train developers εντος της εταιριας, που και αυτο είχε προβληματα δίοτι απασχολουταν ενας senior developer στο να κάνει train junior, αλλα και δεν εχουν ολοι οι developers το ιδιο skillset ωστε να κανουν adapt τοσο γρηγορα και τοσα πολλα πραγματα όσα απαιτουνται σε μια τετοια αλλαγη. Documentation UI βιβλιοθηκες Router εχει γραφτει 2-3 φορες from scratch, RC5 => NgModules χρειατηκαν πολλες ώρες. AoT Ψυχολογία!
- #7: Living style guide. Flexbox => Not IE10 Learning resource! Advanced Angular.
- #8: Tι δούλεψε καλά, και πως η επιλογή του Angular μας βοήθησε. (σε μεγαλο προτζεκτ), διαφορετικα skillset & level Templates => δηλωνουμε το τι θελουμε και αφηνουμε στο framework να αποφασίσει το πως θα το καταφέρει. 1ον λίγοτερη πιθανότητα για bugs 2ον μειώνεται ο χρονος που χρειαζεται να γίνει παραγωγικός. Xωρις coding skills. Πόσοι έχουν την τυχη να δουλευουν με designers που ξέρουν HTML/CSS :-) Developer που ασχολειται με το CSS/styling, ή το responsiveness Τοοls/IDE => autocompletion, navigation, refactoring σε μεγαλα code bases σχετικα ευκολα, και με τη βοηθεια των Languages services μπορουμε να εχουμε autocpmpletion και validation στα templates. Superset της ES6, νοιωθει πολυ “φυσικο” Type system ειναι τελειως optional, έχω παρατηρήσει οτι το προτιμαμε πια Declarative programming μεσα στην TS Γρηγορη κατανόση του σκοπου καθε κλάσης ή καθε property Μείωση του απαιτουμενου κώδικα σε καθε αρχειο.
- #9: Πολυ high level, αλλα οταν σχεδιαζεις θες: Maintainability => #1 rule, don’t want to rewrite everything every 1 year!, = quality (ie readability, testability, reasoning, περηφανια) Scalability => people and code. If you want performance, you should PLAN for performance. Scale codebase Πρωτοκολλο για τους developers Που βαζω αυτο το κομματι κώδικα? Πως αλλαζω το στατε? Πως επικοινωνω με το backend?
- #10: Works well with DI Starters/ CLI 1.0 If a senior dev is not mentoring/pairing with other devs, you're wasting critical business value. Eric Elliot ΚΟΣΤΟΣ/ΡΙΣΚΟ
- #11: Angular provides a nice, declarative way to bind to observables using the async pipe: Separation of concerns => παραλληλη εργασια on different aspects of the same feature….velocity ομαδας Reduce bug leaking Reduce dependencies between Componentized approach…. Ολο UI αναπαρισταται απο δiaφoρα μικρα elements = components = black box, Den mas endiaferei pos einai sxediasmeno/ulopoiimeno eswterika alla μονο πως κανει interact με το εξωτερικο περιβαλλον
- #12: High level architecture. Living thing...always changing, hope improving. Works for us, may not work for you. Observable.combineLatest(this.list$, this.loading$) It’s a micro library which provides a reactive state management inspired by redux and plays really well with Angular. In short, with @ngrx/store we can think of the redux’s store as a stream of immutable objects. Each time you emit an action which gets handled by a reducer, the new state will be emitted through a stream. The different streams can be filtered, merged, mapped, etc. in a very elegant way. On top of that,
- #13: Start-up performance matters. A combination of slow parse, compile and execution times can be a real bottleneck for pages that wish to boot-up quickly. NOT minifying CSS, optimizing images, use svg sprites etc. reduce HTTP requests JS => MAIN reason for slowness. Θα δουμε πως μπορουμε να Measure και πως να γινει faster. This is about shipping less JS, or even ship the same JS in different way and/or timing, so we will offer tha same Size is a big factor, NOT the only one. Runtime => an event is happening, button is clicked, socket message, ποση ωρα κανουμε να δείξουμε την αλλαγή?
- #15: Lazy loading: Spread the functionality of the entire application among: Main bundle which includes functionality used across the entire application. Feature bundles which capture functionality from separate “bounded contexts”.
- #16: Be a benchmark maniac! Ουδετερος παρατηρητης, μπορεις να τρεξεις με τις ιδιες συνθηκες καθε φορα, πολλα metrics (time to interaction, first meaningful paint…) Works on your machine, suitable for development. See inside your bundles, alternative: source-map-explorer
- #18: Be a benchmark maniac! Bundle of Doom!
- #19: Polyfill.io maintained by financial times….It works via User-Agent sniffing to determine the browser being used, then loads the required polyfills. Chrome, Firefox: 1KB, IE11: 20KB, suggested solution for Intl in Safari Modular libraries…. Rxjs/Observable Smaller alternatives Drop Immutable, just Map. Typescript will generate helper code in every one file. This can be a problem when dealing with code coverage or payload size of you library/app
- #21: Minification, Gzip is out of question AoT => drop compiler, tree shakeable, template errors early. This reduces the size a bit (but on the other hand we get all the ngfactories). Warning: compilation generates a lot of code! Optimized code, 10x size, 3-4x size gzip, -5x evaluation time, 450KB ~ 50ms => greatest impact over the user experience. The Optimize JS lazy-parsing parens ‘hack’
- #22: Declarative code splitting with Router per module. Manual code splitting, works well with libraries. Splitting opportunites…per modal, per tab Preload, prefetch => discover resources early, avoid idle times, server can send preload headers! Intercom is 1MB of JS Higharts, Socket…
- #26: Extreme painting, animations, game? x5 Angular 1 => trading station!!! To avoid unnecessary DOM modifications, the router will reuse the components when the parameters of the corresponding routes change. ngIf, tabs