ng-conf 2020

Key Takeaways

Pivoted to Online

• Due to COVID, the planners re-tooled to a fully online conference in under a month
• Maintained high connection with attendees
• Q&A sessions for all speakers

Originally "ng-conf: The Musical"

• Theatrics rescheduled for next year
• Theme Song:

2 days of workshops

• Beginner to Master
• NgRx
• Cypress testing
• JAMstack
• Ionic
• Full Stack Patterns

3 days of speakers

• 'Ivy' (v9) features and improvements
• RxJs
• ng Universal
• Enterprise strategies
• Preloading strategies
• DDD with Angular
• Template type-checking
• AI / Tensorflow in the broswer
• Improved debugging
• Observables
• Firebase
• lots lots more

Talks available Online

ng-conf YouTube Channel

• youtube.com/user/
  ngconfvideos

Speaker Slides

• Long messy link

Professional

But with Personality

Library Authoring and Typescript Demo

How and when to 'freeze' objects and components

Resilient Angular Testing

• Build adapters and code to interfaces
• Use naming that reflects the purpose, not the namespace
• Practical mocking and TDD

Lessons Learned

More than just ng-stuff

Ivy Updates - Angular 9.0

• Harder, Better, Faster, Stronger 🎵
• Smaller core - tree shaking, less generated code
• More compile-time checks and smarter recompilation
• More efficient unit and e2e testing baked in
• Faster i18n conversions (10x build speed)
• Better debugging feedback and simpler stack traces
• Lots of tech debt cleaned up, bugs squashed
• More and better unit testing on the framework itself
• Update project / core install with the CLI - 'ng update'
• Update guides and walkthroughs at update.angular.io

Ivy DDD Tooling

• Choose sustainable architecture over quick wins
• Prefer Strategic (long-term) over Tactical (short-term)
• Built-in support for using DDD and micro-frontends
  • Can set project types and dependencies - ensures that utility modules only depend on other utilities, not UI
  • Metadata organizes the components into domain aggregates and monitors how they can be used
• Plays nicely with Nx / Nrwl
• Type-checking of entire templates against domain models

Ivy Debugging

• Debugging hooks built directly into the framework for unit testing components with mock objects
• Emits data-props to DOM elements for inspection
• New methods for interacting with components from DOM

  • getComponent - retrieve node components

  • getDirectives - retrieves an array of directives

  • getListeners - retrieves html (click) and host listeners

• Supplements but does not replace breakpoint debugging

HTTP Interceptors

• Demo of different ways to display common UI patterns
• Start UI designs with your UX patterns - simpler to build out and better accessibilty (a11y) support

Designing with Composition

• Walk-through of piping Observables and when to use them

Higher-Order Mapping

• Can manage network traffic in one place
• Centralized error handling

Template Error Checking

• Eager load vital assets, then Lazy preload expected ones
• Pre-loading Functionality added to core Router library
  • Pick core strategy, preload triggers (eg on mouseover)
  • Handles throttling / skipping preloads if browser set to 'saveData'

Pre-loading Strategies

• 3 different types / levels
• Start with most lenient and work your way up

JAMstack

• Javascript
• APIs
• Markup

Lots of Options

• Gatsby
• Hugo
• Next.js
• Nuxt
• Eleventy

https://jamstack.org

https://www.staticgen.com/

Advantages

• No dynamic runtime
• More secure
• Pre-rendered
• SEO
• Relies heavily on CDN
• Cheaper hosting
• Stability
• Less human error
• Source-controlled content
• Better Developer Experience (DX)

• Support of headless CMS allows for contributors who don't know .git, e.g. authors
• New workflows

Considerations