Clipcode Angular DiagramsClipcode Angular Diagrams Extract of diagrams from Clipcode’s Angular...

www. clipcode.net

Clipcode Angular DiagramsExtract of diagrams from Clipcode’s Angular Source Tour

TypeScript

TSLint

TS-Node

RxJS

Zone.js

Reflect-Metadata

Angular 7.2/8.0 Main Project (https://angular.io)

Mai

nP

roje

ctF

oun

dat

iona

lP

roje

cts

Ext

ern

alP

roje

cts

Angular 7.2/8.0 Top-Level System Model

Core Common

Forms Compiler-CLI

Router

An

gula

r C

LI

(htt

ps:

//cli.

angu

lar.

io)

Tsickle

CompilerPlatforms

Ben

chp

ress

Ts-api-guardian

Lang-Svc

VSCodefsevents

Jasmine

BazelAnimations

Service-Worker

@Bazel/TypeScript

Main Bazel Project(www.bazel.build)

Java

Common/Http

tslibKar

ma

Web Browsers(e.g. Chromium + v8)

Ru

ntim

e

Node.js(v8 JS/Wasm VM)

transpilesto

calls

written inJavaScript

written inwritten in

Elements

An

gula

r D

evK

it(h

ttps

://g

ith

ub.c

om/a

ngu

lar/

dev

kit

)

Mainly C++ (with some C and x86/ARM hand-coded assembly)

written in

ng-packagr

Angular Universal(https://universal.angular.io)

Angular Protractor(http://www.protractortest.org)

Angular Material(https://material.angular.io)

Angular Fire(https://github.com/angular/angularfire2)

Lay

ered

Pro

ject

s

Angular CDK(https://github.com/angular/material2/tree/master/src/cdk)

Flex-Layout(https://github.com/angular/flex-layout)

NgR

x

http://www.clipcode.net/

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

http://www.clipcode.net/

https://angular.io/

https://cli.angular.io/

http://www.bazel.build/

https://github.com/angular/devkit

https://universal.angular.io/

http://www.protractortest.org/

https://material.angular.io/

https://github.com/angular/angularfire2

https://github.com/angular/material2/tree/master/src/cdk

https://github.com/angular/flex-layout

ii

Angular 7.2/8.0 Main Project System Model(number in box is size of /src sub-directory)

Core(703 KB)

Common(192 KB)

Compiler-CLI(-and-API)(343 KB)

Router(217KB)

Compiler(995 KB)

Platform-WebWorker-Dynamic(2KB)

Lang-Svc(123 KB)

Animations(54 KB)

Service-Worker(15 KB) Elements

Platform-Browser-Dynamic(20KB)

Platform-Browser(115 KB)

Platform-WebWorker(71 KB)

Platform-Server(35 KB)

uses

uses uses

Common/http(216 KB)

Forms(179 KB)

iii

Common

NodeBrowser Jasmine

ZoneSpec

processing rules

zone.ts

core engine monkey patching (different for each environment)

Zone.js Components

Task

Zone

ZoneSpec

ZoneType

ZoneDelegate

Zone

TaskType

MicroTask MacroTask EventTask

Zone.js API

Types Values

TaskData

HasTaskState

current

typ

ed

ata

currentTask

parent

ServerExternsRewriterClosureRewriterRewriter (abstract)

(rewriter.ts)Rewriter Classes (most classes are in tsickle.ts)

iv

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

calls

app

code

@an

gula

r/co

re/s

rc/a

ngu

lar_

ref.

ts

Annotator

ClosureRewriter

Rewriter

ExternsWriter

v

Note: There is a new Render architecture (called Render3/Ivy) coming with Angular 8. A good place to keep an eye on progress & how it is evolving is:https://github.com/angular/angular/tree/master/packages/core/src/render3

What we describe below is Render2, which is used for Angular 7.2

Angular Application Layer

Renderer Implementations(various – from platform-* packages)

Renderer API (api.ts)

Your Application Code

An

gular F

r amew

ork

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

ViewRef @Angular/Core Public API (Linker)

Cor

e E

xpor

ts F

or L

ink

er

TemplateRefEmbeddedViewRefSystemJsNgModule

LoaderConfiggetModuleFactoryNgModuleRefViewContainerRef

SystemJsNgModuleLoader

NgModuleFactoryLoader

NgModuleFactory

Cor

e E

xpor

tsF

or C

han

geD

etec

tionQueryListElementRefComponentRefComponentFactoryResolverComponentFactoryCompilerCompilerOptionsCompilerFactory

ModuleWithComponentFactoriesChangeDetectorRef

vi

Common API (Part 2)

NgIf

NgFor

NgPlural

NgClass

NgStyle

NgSwitch NgSwitchCase

NgPluralCase

NgTemplateOutletNgSwitchDefault

Com

mon

Typ

e E

xpor

ts

COMPILER_OPTIONS

CompilerOptions

CompilerFactory

Compiler

ModuleWithComponentFactories

ComponentRef

ComponentFactory

ComponentFactoryResolver

ElementRef

NgModuleFactory

NgModuleRef


getModuleFactory

QueryList


SystemJsNgModuleLoaderConfig

TemplateRef

ViewContainerRef

EmbeddedViewRef

ViewRef

ChangeDetectorRefCore/Linker FeatureCore/ChangeDetection

Feature Exports

Cor

e/L

inke

r F

eatu

re E

xpor

ts

Com

mon

Fun

ctio

n E

xpor

ts

getLocaleXYZ

getXYZ

vii

NgLocalization

CommonModule

PipeTransform

@Angular/Common API (Part 1)

Cor

eE

xpor

ts

NgLocaleLocalization

Com

mon

Typ

e E

xpor

tsU

sed

in C

omm

onM

odu

le’s

NgM

odu

le d

ecor

ator

LowerCasePipe

UpperCasePipe

SlicePipe

DecimalPipe

PercentPipe

CurrencyPipe

JsonPipe

I18nSelectPipe

I18nPluralPipe

DatePipe

COMMON_PIPES

BASE_APP_HREF

AsyncPipe

Con

stE

xpor

t

PlatformLocation

LocationChangeEvent

LocationChangeListener

LocationStrategy

PathLocationStrategy

HashLocationStrategy

Location

COMMON_DIRECTIVES

TitleCasePipe

viii

HttpClientJsonpModule

Common/Http Public API

Exp

orte

d@

NgM

odu

les

HttpClientModule

HttpEventType

Exp

orte

dE

num

s

BrowserXhrHttpHeaders

HttpClientXsrfModule

HTTP_INTERCEPTORSE

xpor

ted

Con

sts

HttpClient

Exp

orte

dT

ypes

HttpEvent

JsonpClientBackend

Exp

orte

d C

lass

es

HttpXhrBackend

HttpResponseBase

HttpErrorResponse

HttpBackend

Exp

orte

dIn

terf

aces

{implements}

HttpHeaderResponse

HttpRequest

HttpResponse

HttpInterceptor

HttpParameterCodec

HttpProgressEvent

HttpDownloadProgressEvent

HttpSentEvent

HttpUserEvent

HttpHandlerHttpHeaders

HttpParams

{implements}

HttpUrlEncodingCodec

HttpXsrfTokenExtractor

XhrFactoryJsonpInterceptor

ix

code

Platform

One platform / one or more applications

App 3

bootstrapModuleFactory()

BootstrapModuleFactory()App 1

BootstrapModuleFactory()App 2

<HEAD><title ..></HEAD><BODY><app1 /><p>content</p><app2 /><h1>a title</h1><app3 /></BODY>

index.html

SharedPlatform

Code

Sharing Platform Code

Platform-Browser Platform-ServerPlatform-Browser-Dynamic

platform-browser-dynamic packageplatform-browser package platform-server package

Platform-WebWorkerPlatform-WebWorker-Dynamic

platform-webworker-dynamic package platform-webworker package

{ import }

x

BrowserModule

Platform-Browser Public API (browser-related)

platformBrowser Title

[disable|enable]DebugToolsBrowserTransferStateModule

HammerGestureConfig

Platform-Browser Public API (DOM)

HAMMER_GESTURE_CONFIG

EventManager

EVENT_MANAGER_PLUGINS

By

DOCUMENT

Cla

ss E

xpor

tsO

paq

ueT

oken

Exp

orts VERSION

MetaMetaDefinition

StateKey TransferState

Fu

nct

ion

Exp

orts

makeStateKey

xi

DomSanitizer

Platform-Browser Public API (security)

SafeScript

SafeResourceUrlSafeHtml

SafeStyle SafeUrl

Sanitizer

Cor

eE

xpor

tsIn

terf

ace

Exp

orts

Cla

ssE

xpor

ts

SafeValue

RESOURCE_CACHE_PROVIDER

Platform-Browser-Dynamic Public API

platformBrowserDynamic

JitCompilerFactory

xii

Angular Rendering

DefaultDomRenderer2

DomRendererFactory2

createRenderer()

Cor

e

Renderer2RendererFactory2

Pla

tfor

m-B

row

ser

{ returns }

getDOM()

_DOM

setDOM()

{ almost all methods use }

{ returned by }

{ sets }

ELEMENT_PROBE_PROVIDERS

WorkerDomAdapter

BrowserDomAdapter

DominoDomAdapter

setRootDomAdapter()

Pla

tfor

m-S

erve

r

{ calls }

WebWorkerRendererFactory2createRenderer()

WebWorkerRenderer2

{ implements }

MessageBasedRenderer2

{ implements }

{ implements }

{ returns }

DomAdapter

GenericBrowserDomAdapter

{instance of}

{ implements }

{uses }

xiii

ClientMessageBroker

Platform-WebWorker Public API

UiArguments

FnArg

ClientMessageBrokerFactory

ON_WEB_WORKER

ServiceMessageBroker

ServiceMessageBrokerFactory

WORKER_[UI|APP]_LOCATION_PROVIDERS

bootstrapWorkerUi

WORKER_UI_STARTABLE_MESSAGING_SERVICE

WORKER_SCRIPT

WorkerAppModule

platformWorkerApp

MessageBus

MessageBusSource MessageBusSink

{ implements } { implements }

Opa

qu

e T

oken

Exp

orts

Pro

vid

erE

xpor

ts

Cla

ss E

xpor

tsF

unct

ion

Exp

orts

Inte

rfac

eE

xpor

ts

{ uses }

{ creates }

{ creates }

platformWorkerUi

SerializerTypes

ReceivedMessage

xiv

MessageBus

MessageBusSource MessageBusSink

PostMessageBus

sinksource

{ implements }{ implements }

PostMessageBusSinkPostMessageBusSource


Message Bus Types

ClientMessageBroker ServiceMessageBroker

ServiceMessageBroker_

messageBus

ClientMessageBroker_

messageBus


Message Broker Types

MessageBus

xv

UI main thread Web Worker

Communicating Over The Message Bus (actual)

Message Bus

channeldata

channeldata

channeldata

...

Message Bus

RENDERER 2 CHANNEL


Communicating Over The Message Bus (conceptual)

EVENT 2 CHANNEL

ROUTER CHANNEL

<Custom> CHANNEL

xvi

ClientMessageBroker

RunOnService()

_handleMessage()

message bus

Message Broker In Use

sinksource

sinksource

ServiceMessageBroker

_wrapWebWorkerPromise()

_handleMessage()1

2

3

4

WebWorkerRendererFactory’sconstructor initializes

_messageBroker as a ClientMessageBroker with the RENDERER_2_CHANNEL


start()

_brokerFactory

Rendering And Web Workers

WebWorkerRendererFactory2

_messageBroker: ClientMessageBroker

MessageBasedRenderer2.start()initializes broker as a ServiceMessageBrokerwith the RENDERER_2_CHANNEL


Message Bus

service message broker client message broker

xvii

@Angular/Platform-WebWorker-Dynamic API

platformWorkerAppDynamic


_listen()

_eventDispatcher

Event Handling And Web Workers

WebWorkerRendererFactory2

_dispatchEvent()

EventDispatcher

dispatchRenderEvent()

NOTE: _listen() calls _eventDispatcher.dispatchRenderEvent()

WebWorkerRendererFactory2’s constructor subscribes_dispatchEvent() to EVENT_2_CHANNEL source

MessageBasedRenderer2.start() initializes _eventDispatcher with the EVENT_2_CHANNEL sink

xviii

PlatformState

Platform-Server Public APIE

xpor

t C

lass

platformServer

platformDynamicServerExp

ort

Fun

ctio

ns

ServerModule renderModule

ServerTransferStateModule

renderModuleFactory

PlatformConfig

Exp

ort

Con

st

BEFORE_APP_SERIALIZED INITIAL_CONFIG

xix

Data

Angular Router API (part 1)

Directives

LoadChildrenCallback

Route

LoadChildrenResolveDataRoutes

RouterLink RouterLinkWithHrefRouterLinkActive RouterOutlet

CanActivate CanActivateChild

CanDeactivate<T>CanLoadResolve<T>

@Directive

Con

fig

{array of}

Inte

rfac

esC

onst

s

PRIMARY_OUTLET

Params

UrlMatchResult

RunGuardsAndResolvers

UrlMatchResult

ROUTER_CONFIGURATION

ROUTER_INITIALIZER

ROUTES

NavigationExtras

xx

ErrorHandler


Exp

orts

NavigationExtras

UrlSerializer

DefaultUrlSerializer

Router

ExtraOptions

RouterModule

provideRoutes

UrlSegment

UrlTree

NgModuleActivatedRoute

ActivatedRouteSnapshot

RouterState

RouterStateSnapshot

Tree< > Tree< >

UrlSegmentGroup

UrlHandlingStrategy ParamMap

Fun

ctio

ns

convertToParamMap

OutletContext

ChildrenOutletContexts RouteReuseStrategy

DetachedRouteHandle

DetachedRouteHandle

RouterPreloader

PreloadingStrategy

NoPreloading

PreloadAllModules

xxi


NavigationCancel

NavigationError

Event

NavigationEnd

NavigationStart

RoutesRecognized

{typ

e al

ias}

ChildActivationEnd

ChildActivationStart

RouteConfigLoadEnd

RouteConfigLoadStart

RouterEvent

NavigationCancel

NavigationError

NavigationEnd

NavigationStart

RoutesRecognized

GuardsCheckStart

GuardsCheckEnd

ResolveStart

ResolveEnd




Cor

e E

xpor

ts F

or L

ink

er





NgModuleFactoryQueryListElementRefComponentRefComponentFactoryResolverComponentFactoryCompilerCompilerOptionsCompilerFactoryModuleWith

ComponentFactoriesChangeDetectorRef

xxii

EnableIvy command-line option(new)

Compiler

Compiler-CLI

Core

Render3 Workflow

Com

pil

e ti

me

Ru

n t

ime

Generated code

Application Source Code(Angular Template Syntax)

(unchanged)

End user

ApplicationDeveloper

xxiii

Render3 Private API (Part 1)

ComponentDef

ComponentType

ComponentTemplate

QUERY_READ_ELEMENT_REFQUERY_READ_TEMPLATE_REF

injectViewContainerRef

injectTemplateRef

Con

sts

QUERY_READ_FROM_NODEQUERY_READ_CONTAINER_REF

injectElementRef

inject

InjectFlags

QueryList

Fu

nct

ion

s

DirectiveDef

DirectiveDefFlags

DirectiveType

NgOnChangeFeaturePublicFeature

defineDirective

definePipe

createComponentRef

getHostElement markDirty

CssSelector

En

ums

Typ

eA

lias

esIn

terf

aces


Cor

e E

xpor

ts F

or L

ink

er





NgModuleFactoryQueryListElementRefComponentRefComponentFactoryResolverComponentFactoryCompilerCompilerOptionsCompilerFactoryModuleWith

ComponentFactoriesChangeDetectorRef

xxiv

Render3 Private API (Part 2)

b* / bind*

C / container

V / embeddedViewStart

T / text

e / elementEnds / elementStyle

cR / containerRefreshStart

cr / containerRefreshEnd

Inst

ruct

ion

s

E / elementStart

p / elementProperty

v / embeddedViewEnd t / textBinding

NC / NO_CHANGE

r / componentRefresh

a / elementAttribute k / elementClass

L / listener M / memoryP / projection

pD / projectionDef

pb* / pipeBinding*Pp / pipe

qR / queryRefreshQ / query

o* / objectLiteral*

RText RElement

RNode

Render3 Interfaces


Cor

e E

xpor

ts F

or L

ink

er





NgModuleFactory

Cor

e E

xpor

tsF

or C

han

geD

etec

tionQueryListElementRefComponentRefComponentFactoryResolverComponentFactoryCompilerCompilerOptionsCompilerFactory

ModuleWithComponentFactoriesChangeDetectorRef

xxv

LElementNode LViewNodeLTextNode

LNode

Render3 Interfaces (nodes)

LContainerNode LProjectionNode

Clipcode Angular DiagramsClipcode Angular Diagrams Extract of diagrams from Clipcode’s Angular...

Documents

Transcript of Clipcode Angular DiagramsClipcode Angular Diagrams Extract of diagrams from Clipcode’s Angular...