angular 7 internals - clipcode · angular 7 internals - 2 speaker bio eamon o’tuathail...
TRANSCRIPT
Angular 7 Internals - 1
Copyright © Clipcode Ltd – 2019All rights reserved
ANGULAR 7 INTERNALSA Dozen Things To Learn
in 30 minutes or less!
http://www.clipcode.net/content/angular-internals.pdf
Angular 7 Internals - 2
Speaker BioEamon O’Tuathail specialises in Angular
● Contractor * Trainer * Tech Interviewer * Consultant * Writer● If your development team is starting an important Angular project
and needs help, contact Eamon via email at: [email protected]
● Eamon has worked across Europe as a software engineer, technical architect, project manager and trainer on projects covering cloud-based storage, engineering management systems, eCommerce portals, protocol design, large multithreaded high-throughput financial messaging, X.509 Certification Authority, aerospace visualisation, seismic imaging and lots more.
Angular 7 Internals - 3
LINKS● Main source tree:
https://github.com/angular/angular ● Layered Angular preojects:
https://github.com/angular ● Zone.js: https://github.com/angular/zone.js ● RxJS: https://github.com/ReactiveX/rxjs ● Source Tour:
http://www.clipcode.net/training/clipcode-source-tour.pdf ● Diagrams:
http://www.clipcode.net/training/clipcode-angular-diagrams.pdf
Angular 7 Internals - 4
Let’s Start With Our Conclusions● Like sensible product teams who start a new product
development effort by first writing a marketing data sheet
Yikes - there is just too much to learn
Everything seems connected (it is!)
Difficult to know where should I start● Some bits I understand, elsewhere I get quickly lost● Seems a good idea to start with somewhat familiar area
Angular 7 Internals - 5
0. Learn TypeScript Really Well
Angular is written almost totally in TypeScript● As are most applications● Sensible to invest time to become a TypeScript expert
Can you explain these:● foo(token: Type<T>|InjectionToken<T>) {}
(the ‘|’ here is not bitwise OR)● The ! post-fix expression operator (means non-null)● What happens to interfaces after transpiling
Angular 7 Internals - 6
1. Learn about Dependency Injection
The glue that holds everything together
A hierarchy of injectors● If what is sought is not in current injector,
look at parent● Platform is root of injector tree
Router, NgModule lazy loading & injectors
Angular 7 Internals - 7
Dependency Injection
Location in source tree:● https://github.com/angular/angular/tree/master/packages/core/src/di
Look at: ● injector.ts● injection_token.ts ● provider.ts
Angular 7 Internals - 8
2. Learn about the Angular System Model
Become familiar with how projects are stacked
MAIN ANGULAR PROJECT
FOUNDATIONAL PROJECTS
LAYERED PROJECTS
Angular 7 Internals - 9
3. Learn That Core is “core”Angular Core package plays central role
● https://github.com/angular/angular/tree/master/packages/core
Most features have a sub-directory in core● change_detection, render3, zone, reflection, i18n,
debug, metadata
Important source files in root directory● Exports (how do these work?; same for all packages) ● app_[init|module|ref|tokens], security, event_emitter.ts
Angular 7 Internals - 10
3. Learn About Platforms
Your Angular app runs on the Angular Framework which runs on a “platform” (a host)
Your Angular Template Syntax files need compiling
Three dynamic JIT and three AOT platforms● 1) browser main UI thread, 2) web worker, 3) server● Not worried about code size on server, so five packages● Platform-Browser includes shared code, so much bigger● Your app has to pick one of these platforms or custom
Angular 7 Internals - 11
5. Learn Async The JS VM Event loop
Promises
Async/await
Angular 7 Internals - 12
5+. Zone.js & NgZone
SubdividingA JS Thread
● Very importantfor Angularchange detection
Angular 7 Internals - 13
Zone Taskshttps://github.com/angular/zone.js/blob/master/dist/zone.js.d.ts
* Fundamentally there are three kinds of * tasks which can be scheduled:
* 1. [MicroTask] used for doing work right after the current task. This is
* non-cancelable which is guaranteed to run exactly once * and immediately.
* 2. [MacroTask] used for doing work later. Such as `setTimeout`. This is
* typically cancelable which is guaranteed to execute at least once after
* some well understood delay.
* 3. [EventTask] used for listening on some future event. This may
* execute zero or more times, with an unknown delay.
* Each asynchronous API is modeled and routed through one of these APIs.
Angular 7 Internals - 14
6. Learn Change Detection
CPU-intensive but non-UI code needs to be separated from UI code
● Use zones
When UI zone event queue is emptied, run change detection
● Multiple change detection algorithms● (zones also used for global exception handlers)
Angular 7 Internals - 15
7. Learn About Bootstrapping
bootstrapModule
_moduleDoBootstrap
bootstrapModulefirst calls compiler, then ..
Platform Bootstrapping
bootstrapModuleFactory
using runtime compiler
Main.ts calls:PlatformBrowserDynamic()
.bootstrapModule(AppModule);
using offline compiler(compiler-cli)
Main.ts calls:PlatformBrowser()
.bootstrapModuleFactory(AppModule);
calls
calls
calls
callsap
p c
od
e@
an
gu
lar/
core
/sr
c/an
gu
lar_
ref.
ts
Angular 7 Internals - 16
8. Learn About Components
Normal Angular Components (use everyday)
Angular CDK
Angular Material (material design)
Angular Elements● W3C Web Components● CUSTOM_ELEMENTS_SCHEMA
(https://angular.io/api/core/NgModule)
Angular 7 Internals - 17
9. Rendering (Current)
Your Application
Angular Application Layer
Angular Rendering Layer
BrowserRenderer
Web WorkerRenderer
Server-sideRenderer
Native AppRenderer
Angular Rendering APIAngular Rendering API
Angular 7 Internals - 18
9+. Render3/”Ivy”
Re-imagining of rendering
View instruction set● export const domRendererFactory3: RendererFactory3 = {● CreateRenderer: ( hostElement: RElement | null, rendererType: RendererType2 | null):
● Renderer3 => { return document;}● };
See appendix at end of my source tour
Angular 7 Internals - 19
10. Learn Tooling (Internal & External)
Bazel
Yarn
Angular DevKit
Schematics
Angular CLI● Lots of parameters (e.g. --skip-install)
Angular 7 Internals - 20
11. Angular & Web Workers
Message Bus
Message Broker
How UI events work with web workers
Angular 7 Internals - 21
12: Learn Visual Studio Code (or other editor)
Tons of extensions (need to explore)● e.g. Angular Language Service
F11 – toggle full screen
File/Preferences/Settings: ● editor.fontSize changes font size (in user settings)
Angular 7 Internals - 22
(BONUS): Another Few Things to LearnDeprecation policy
WebAssembly
WebPack 4 and tree shaking● https://medium.com/webpack/webpack-4-released-today-6cdb994702d4 ● “The Angular-CLI team has said that they even plan on shipping
their next major version (only ~week away) using webpack 4!”
Impact of browser system programming● e.g. Shared array buffer and atomics
Angular 7 Internals - 23
QUESTIONS?
Slides available now at:
http://www.clipcode.net /content/angular-internals.pdf