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.
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
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
Ευχαριστω GreeceJS για φιλοξενία
Περι τινος προκειται:
Αποφαση με management για μοντερνο stack, απο .ΝΕΤ.
Public εδω και λιγο καιρο.
Δυσκολη συνύπαρξη.
DISCLAIMER:
Not framework comparison
No Angular tutorial
Personal experiences, has worked for us
3 χρονια Frontend Architect ZuluTrade.
Opensource active
NPM modules
Angular UI Bootstrap
και τελευταία εχουμε βγάλει opensource το ng-lightning, μια παρόμοια βιβλιοθήκη με UI components σε Angular 2, και βασισμένα στο SLDS και για την όποια θα μιλήσουμε λίγο πιο αναλυτικά και παρακάτω. ****
Avatar
Γιατι οχι 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
Give me an estimation!
Documentation!
Router!!!
RC5 => NgModules
Angular 1 !== Angular 2Best practices from communityRxJSReduxtsconfig
Nα ξερουν ήδη ή να ενδιαφερονται να επενδυσουν σε μια βιβλιοθηκη που ήταν ακομα σε beta και ενω το react ηταν το πιο hot topping εκεινο τον καιρό :-) Ετσι, καταληξαμε στο οτι θα ήταν ευκολοτερο να κανουμε train developers εντος της εταιριας, που και αυτο είχε προβληματα δίοτι απασχολουταν ενας senior developer στο να κάνει train junior, αλλα και δεν εχουν ολοι οι developers το ιδιο skillset ωστε να κανουν adapt τοσο γρηγορα και τοσα πολλα πραγματα όσα απαιτουνται σε μια τετοια αλλαγη.
Documentation UI βιβλιοθηκες
Router εχει γραφτει 2-3 φορες from scratch, RC5 => NgModules χρειατηκαν πολλες ώρες. AoTΨυχολογία!
Living style guide.
Flexbox => Not IE10
Learning resource! Advanced Angular.
Tι δούλεψε καλά, και πως η επιλογή του Angular μας βοήθησε. (σε μεγαλο προτζεκτ), διαφορετικα skillset & level
Templates => δηλωνουμε το τι θελουμε και αφηνουμε στο framework να αποφασίσει το πως θα το καταφέρει.1ον λίγοτερη πιθανότητα για bugs2ον μειώνεται ο χρονος που χρειαζεται να γίνει παραγωγικός.
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 Μείωση του απαιτουμενου κώδικα σε καθε αρχειο.
Πολυ 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?
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
ΚΟΣΤΟΣ/ΡΙΣΚΟ
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 με το εξωτερικο περιβαλλον
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,
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, ποση ωρα κανουμε να δείξουμε την αλλαγή?
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”.
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
Be a benchmark maniac!
Bundle of Doom!
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
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’
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…
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