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
Domains dependency
- Protecting from breaking change
  - Shared Kernal: Bad
    - everyone be responsible === no one be responsible
  - API Approach
    - Each domain has its own API
- 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
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
- Access to other domain
  - Only shared utils or APIs
  - Restricting with Lint
    - Project Type Rule
    - nx.json and tslint.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
Automation
- ng g @angular-architects/ddd:{domain,feature}

Stronger Type-Checking in Templates with Ivy

Alex Rickabaugh

strictTemplates
- similar to strict flag
Outline
in v8
- Basic / fullTemplateTypeCheck
- Basic
- user.name.last is ignored
- Full
Ivy improvements
- ngFor loop
  - v8
    - user is typed as any
  - strict
- Inputs
  - v8
    - - [user] is not type-checked
      - Problem with non-null input with | async
  - strict
$event
Safe navigation
- v8: runtime error
  - Ignored after ?.
- strict
  - check correctly
Migration
- Try strict and see the errors
- Fix these!
- Enable strict mode
strictInputTypes: false
- 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
Effective content management
- headless CMS
  - Business/Marketing control
  - No deploy
  - full control presentation
  - multiple UIs
  - performance
- CDN
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
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
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 and never type
Conditional Types

A Whole New Way to Build Ivy Apps ⚡️

Eric Simons

StackBlitz
- 2020
  - Themes
  - Auto-import
  - Zen mode
Angular 9.1.0 + Enable Ivy
on-prem enterprise support
Desktop PWA

Session #6 Q&A

Jorge Cano Anthony Humes Craig Spence Eric Simons