angular 7 internals - clipcode · angular 7 internals - 2 speaker bio eamon o’tuathail...

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


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.

mailto:[email protected]


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

https://github.com/angular/angular

https://github.com/angular

https://github.com/angular/zone.js

https://github.com/ReactiveX/rxjs

http://www.clipcode.net/training/clipcode-source-tour.pdf

http://www.clipcode.net/training/clipcode-angular-diagrams.pdf


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


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


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


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

https://github.com/angular/angular/tree/master/packages/core/src/di


2. Learn about the Angular System Model

Become familiar with how projects are stacked

MAIN ANGULAR PROJECT

FOUNDATIONAL PROJECTS

LAYERED PROJECTS


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


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


5. Learn Async The JS VM Event loop

Promises

Async/await


5+. Zone.js & NgZone

SubdividingA JS Thread

● Very importantfor Angularchange detection


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.

https://github.com/angular/zone.js/blob/master/dist/zone.js.d.ts


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)


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


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)


9. Rendering (Current)

Your Application

Angular Application Layer

Angular Rendering Layer

BrowserRenderer

Web WorkerRenderer

Server-sideRenderer

Native AppRenderer

Angular Rendering APIAngular Rendering API


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


10. Learn Tooling (Internal & External)

Bazel

Yarn

Angular DevKit

Schematics

Angular CLI● Lots of parameters (e.g. --skip-install)


11. Angular & Web Workers

Message Bus

Message Broker

How UI events work with web workers


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)


(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

https://medium.com/webpack/webpack-4-released-today-6cdb994702d4


QUESTIONS?

Slides available now at:

http://www.clipcode.net /content/angular-internals.pdf

angular 7 internals - clipcode · angular 7 internals - 2 speaker bio eamon o’tuathail...

Documents