ANGULAR ELEMENTS

@tomastrajan

BY

THE BEST WAY TO LAZY LOAD

@tomastrajan

TOMAS TRAJAN

SOFTWARE CONSULTANT, BLOGGER, SPEAKER, TRAINER... 

@tomastrajan

EVOLUTION

@tomastrajan

VANILLA WEB

@tomastrajan

@tomastrajan

COMPONENTS*

CREATED WITH THE HELP OF FRONTEND FRAMEWORKS AND LIBRARIES....

@tomastrajan

<p>          vs        <todo-item>

  • show text
  • use styling
  • some css animations
  • show text
  • use styling
  • some css animations
  • toggle
  • assign to user
  • set deadline
  • tag
  • ....

@tomastrajan

COMPONENTS

  • re-usability
  • encapsulation
  • reduction of complexity
  • framework / library specific
  • not reusable across projects

@tomastrajan

W E B COMPONENTS

@tomastrajan

IT STARTS SIMPLE...

@tomastrajan

...GETS CRAZY

             PRETTY FAST

  • vanilla DOM APIs
  • manual management of props and attributes
  • life-cycle hooks
  • by default only primitive values in attributes
  • custom events are verbose
  • methods vs declarative data passing

@tomastrajan

BUT...

@tomastrajan

WEB COMPONENTS

  • more reusable
  • framework independent
  • better encapsulation (shadow DOM)
  • future proof (in theory)

@tomastrajan

ANGULAR ELEMENTS

@tomastrajan

WRITE ANGULAR

&

GET WEB COMPONENTS

@tomastrajan

ANGULAR ELEMENTS

  • all previous web components benefits, plus...
  • using known powerful framework
  • less boilerplate
  • libraries / opensource/ community

@tomastrajan

USE

CASES

@tomastrajan

MICROFRONTENDS

@tomastrajan

@tomastrajan

SUB-APPLICATIONS

@tomastrajan

@tomastrajan

LIBRARY VS ELEMENT

@tomastrajan

HEAVY COMPONENTS

@tomastrajan

@tomastrajan


CLOSER LOOK

AT

ANGULAR ELEMENTS

 

@tomastrajan

ANGULAR SPA

@tomastrajan

BUILD WITH ANGULAR CLI*

@tomastrajan

USE IN OTHER WEB APP

@tomastrajan

USE IN ANGULAR SPA

@tomastrajan

USE IN ANGULAR SPA

@tomastrajan

MAKE IT LAZY!

@tomastrajan

WHAT IT DOES ?

  1. remove element tag from the DOM
  2. add <script> tag with elements bundle url to the body
  3. wait for the bundle to be loaded
  4. add element back to the DOM
  1. show some loader while downloading element bundle
  2. show some use friendly error message if loading fails
  3. make sure that the element bundle was loaded only once

@tomastrajan

ISSUES & LESSONS LEARNED

  • change detection can be tricky, it's easiest to re-use parent NgZone

@tomastrajan

ISSUES & LESSONS LEARNED

  • careful with the this.ngZone.runOutsideAngular()
  • it will pull related stream outside of angular zone into <root> zone preventing proper refresh of the view

ETAGS

  • simple bundle name, eg main.js
  • use etags to get the newest version (or short cache)

@tomastrajan

LEARN MORE

@tomastrajan

GET IN TOUCH

@tomastrajan

GET IN TOUCH

npx tomastrajan

@tomastrajan

 THANK YOU FOR YOUR ATTENTION!

FOLLOW ME

Angular Elements

By Tomáš Trajan

Angular Elements

Ligthning talk (15m) about the best way how to lazy load Angular Elements

  • 367
Loading comments...

More from Tomáš Trajan