Marginalia
Tags

ng-conf 2020 Day 2 Note

TechAngularng-conf

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

http://bit.ly/strictTemplates

  • 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

http://bit.ly/ngConf20

  • 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

ポスト share to bluesky share to misskey donshare