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

 

Speaker Slides

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

Made with Slides.com