Domain-Driven Design and Angular
Manfred Steyer
https://www.angulararchitects.io/konferenzen/domain-driven-design-and-angular/ https://github.com/manfredsteyer/monorepo_domains
-
How to create sustainable Angular architecture with ideas from DDD.
- Not to create tiny app in quickly
-
DDD
- Strategic Design: Decomposing System -> Design <===
- Tactical Design: Design Pattern + Practice -> Design
-
Example: e-Procurement System
-
Subdomains
- Catalog
- Approval
- Ordering
- Specification
-
-
Subdomains
-
Domains dependency
-
-
Protecting from breaking change
-
Shared Kernal: Bad
- everyone be responsible === no one be responsible
-
API Approach
- Each domain has its own API
-
Shared Kernal: Bad
- Communicate over subdomains
-
-
Monorepo
-
Each subdomain has its own Lib project
-
- Protecting from framework version conflict
- No burden with publishing libs (internal libs)
- Share lib to other apps/companies via npm
-
Each subdomain has its own Lib project
-
Domain has features
- Feature = Smart Usecase Components
- Composing Dumb UI Components
- Access restriction via API
-
Domain -> Application / Domain Model / Infrastructure
-
- Domain models / Infrastructue don’t know about state management
-
-
Layering options
- All options restrict accesses between layers.
- Exported APIs are all public
-
Catalog
-
@e-proc/catalog/api
/@e-proc/catalog/domain
/@e-proc/catalog/feature-broesw-products
-
Use tsconfig paths
-
Can change index entrypoint ts to customize app
- for customer-A
-
Can change index entrypoint ts to customize app
-
Access to other domain
- Only shared utils or APIs
-
Restricting with Lint
- Project Type Rule
-
nx.json
andtslint.json
- Domain dependency rules + module type dependency rules
-
Affected modules
- test / build only affected projects
-
Adding lib
-
-
-
Facade and State Management
- in Domain lib
-
behind Facades
-
-
Facade
-
Observable fields
- start from BehaviorSubject
- Store library on demand
-
-
Observable fields
-
Automation
-
ng g @angular-architects/ddd:{domain,feature}
-
Stronger Type-Checking in Templates with Ivy
Alex Rickabaugh
http://bit.ly/strictTemplates
-
strictTemplates
-
similar to
strict
flag
-
similar to
- Outline
-
in v8
- Basic / fullTemplateTypeCheck
-
Basic
-
-
user.name.last
is ignored -
Full
-
-
Ivy improvements
-
ngFor loop
-
v8
-
-
user
is typed asany
-
-
strict
-
-
v8
-
Inputs
-
v8
-
-
[user]
is not type-checked -
Problem with non-null input with
| async
-
-
-
strict
-
-
v8
-
ngFor loop
-
$event
-
-
Safe navigation
-
v8: runtime error
-
Ignored after
?.
-
-
Ignored after
-
strict
- check correctly
-
-
v8: runtime error
-
Migration
- Try strict and see the errors
- Fix these!
- Enable strict mode
-
strictInputTypes: false
-
for compatible with libraries with wrong types
-
-
for compatible with libraries with wrong types
-
strictAttributeTypes: false
- with custom-elements without types
-
Other flagls
-
strictSafeNavigationTypes: false
-
strictOutputEventTypes: false
-
strictDomEventTypes: false
-
- How it works
-
convert Template -> TypeScript
- Generate type-checking Code
- Creating check function -> validate with context
-
check with
if (ngTemplateContextGuard())
- type check compiled template function
Facing the music when millions of daily users hit Delta.com after every release
Vishal Kumar
- Delta.com
-
Build it scalable
-
Physically Separate apps
- easy to maintenance and ownership
- Micro-frontend architecture
-
Isolated mini apps
- iframes
- custom elements
- library components
- Load balancing
-
Physically Separate apps
-
Effective content management
-
headless CMS
- Business/Marketing control
- No deploy
- full control presentation
- multiple UIs
- performance
- CDN
-
headless CMS
-
Error tracking
-
Testing automation
- Cross browsers
- Load testing
-
Bug tracking
- Client side error logging
-
Application Monitoring
- Alerts on error
- Alerts on response time
- Alerts on behavior anomaly
-
Testing automation
-
BFF layer
- Integrate
- Process business logic and validate
- Avoid using client CPU
- Minimize data
-
Feature Toggle
- safe launch
- A/B Testing
- Usage tracking
- Quick improvement
Getting through the awkwardness of networking
Wesley Faulkner
- People difference and networking
-
Basics
- Eye contact
- Listening
- Smile
- Follow on journey
Session #4 Q&A
Manfred Steyer Alex Rickabaugh Vishal Kumar Wesley Faulkner
From Google Analytics to Universal deploy schematics!
James Daniels
-
Firebase for Web
- Google Analytics
-
Angularfire
- v6.0 stable!
-
Analytics
- Integrated with Angular Router
-
Performance Monitor
- network performance
-
trace
pipe for async task
- RemoteConfig
-
Hosting + Functions
- Angular Univesal app
-
ng deploy --preview
-
Lightweight lazy modules
- wrapper for Firebase JS SDK
- automatically improve performance
Revisiting a Reactive Router with Ivy
Brandon Roberts
-
AngularJS router
-
ngRoute
-
<ng-view>
- ui-router
-
-
Angular 2 (Beta)
- Promises
- Tree of routers
-
@ngrx/router
by Victor Savkin- to Angular Router
- Ivy enables the dream
-
Observable In -> OUt
- Stream of URL change
- Stearms of informations
-
What do we need?
- History Web API
-
Router (global data)
- Stream of URL changes
- URL Parser
- Query Params/Hash
- Register routes
- Matcher
- Renderer
-
History API
- URL Change / Push state
-
Angular
Location
Service
-
URL Parser
-
URL
Web API- Path
- QueryParams
- Hash
-
new URL(location)
-
-
<ngrx-router>
-
<ngrx-route [path] [component]>
-
-
Lazy Loading
-
<ngrx-route [path] [loadComponent]="() => import()">
-
-
RouterModule.forRoot
->provideRouter()
- http://conf.ngrx.io
A Journey into the World Of Machine Learning with TensorFlow.js
Aaron Ma
- 11 yo tensorflow contributor!
-
First AI-powered Doodle
-
In-Browser ML
- No installs
- Interactive
- Secure
-
In-Browser ML
- Angular + ML-powered Web App
-
Traditional vs ML
- Focus on code vs data
-
Tensorflow.js
- Tensor: Array
-
Multiple Backends
- WASM
- WebGPU coming soon
-
extensions
- ml5.js
-
Demo: http://aaronma.me/ngconf-2020/
- https://github.com/aaronhma/ngconf-2020
Session #5 Q&A
James Daniels Brandon Roberts Aaron Ma
Bazel + Angular Today
Jorge Cano
- Bazel Starter kit
-
Bazel today
- v1.0
- Google monorepo is built with Blaze
-
RBE
- More Reproducible
- Scalable
- Builds up to 10x faster
-
Prior arts
-
ng build
-> builder ->build-angular:browser
- Custom Builders
-
Nx
- Scaling problem
-
-
Bazel v1.5
- working on v2.0 branch
Debugging Like a Boss with Angular 9
Anthony Humes
-
Demo
ng
global APIs
INTO THE UNKNOWN
Craig Spence
-
Introduce
unknown
type andnever
type - Conditional Types
A Whole New Way to Build Ivy Apps ⚡️
Eric Simons
-
StackBlitz
-
2020
- Themes
- Auto-import
- Zen mode
-
2020
- Angular 9.1.0 + Enable Ivy
- on-prem enterprise support
- Desktop PWA
Session #6 Q&A
Jorge Cano Anthony Humes Craig Spence Eric Simons
