Clipcode Angular DiagramsClipcode Angular Diagrams Extract of diagrams from Clipcode’s Angular...
Transcript of 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
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
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
NgModuleFactoryLoader
getModuleFactory
QueryList
SystemJsNgModuleLoader
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
{ implements } { implements }
Message Bus Types
ClientMessageBroker ServiceMessageBroker
ServiceMessageBroker_
messageBus
ClientMessageBroker_
messageBus
{ implements } { implements }
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
UI main thread Web Worker
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
MessageBasedRenderer2
start()
_brokerFactory
Rendering And Web Workers
WebWorkerRendererFactory2
_messageBroker: ClientMessageBroker
MessageBasedRenderer2.start()initializes broker as a ServiceMessageBrokerwith the RENDERER_2_CHANNEL
UI main thread Web Worker
Message Bus
service message broker client message broker
xvii
@Angular/Platform-WebWorker-Dynamic API
platformWorkerAppDynamic
MessageBasedRenderer2
_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
Angular Router API (part 2)
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
Angular Router API (part 3)
NavigationCancel
NavigationError
Event
NavigationEnd
NavigationStart
RoutesRecognized
{typ
e al
ias}
ChildActivationEnd
ChildActivationStart
RouteConfigLoadEnd
RouteConfigLoadStart
RouterEvent
NavigationCancel
NavigationError
NavigationEnd
NavigationStart
RoutesRecognized
GuardsCheckStart
GuardsCheckEnd
ResolveStart
ResolveEnd
ChildActivationStart
ChildActivationStart
ViewRef @Angular/Core Public API (Linker)
Cor
e E
xpor
ts F
or L
ink
er
TemplateRefEmbeddedViewRefSystemJsNgModule
LoaderConfiggetModuleFactoryNgModuleRefViewContainerRef
SystemJsNgModuleLoader
NgModuleFactoryLoader
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
ViewRef @Angular/Core Public API (Linker)
Cor
e E
xpor
ts F
or L
ink
er
TemplateRefEmbeddedViewRefSystemJsNgModule
LoaderConfiggetModuleFactoryNgModuleRefViewContainerRef
SystemJsNgModuleLoader
NgModuleFactoryLoader
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
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
xxv
LElementNode LViewNodeLTextNode
LNode
Render3 Interfaces (nodes)
LContainerNode LProjectionNode