dynamic content with angular
TRANSCRIPT
Dynamic content with
Angulara journey with @filipbech
@IMPACTdigitaldk
https://developers.google.com/experts/people/filip-bruun-bech-larsen
Why
ā¢ We build for CMS-editors, so we need Angular to
behave in that context
ā¢ When Angular2 (old name) was announced it
seemed so awesomeā¦
Bootstrapping multiple
applications
ā¢ its a little harder to maintain state between
applications (but possible)
ā¢ the cms now needs to know what components are
angular-components, so they can all be
bootstrapped.(and their DOM-nodes if multiple of the
same component)
Initial data
ā¢ We need to feed data (settings, initial data) into
some of the components (from the cms), and put
content inside them.
Because
ā¢ Root-components cannot have inputs
ā¢ Root-components cannot use content-projection
(transclusion)
https://github.com/angular/angular/issues/1858
ā¢ even though it works - it feels terrible and wrong!
ā¢ and we need the parser at runtime
ā¢ so no AOT and bad perf
Single Page Application
ā¢ so we can also share state between routes
ā¢ animate route-changes
ā¢ and much moreā¦
We have too many routes
with no patterns
ā¢ ā/ā is a frontpage
ā¢ ā/om/osā is a content-page
ā¢ ā/mejeriā is a category-page
ā¢ ā/mejeri/ostā is a sub-category-page
ā¢ ā/ost-i-skiver-mild-13-cheasy-200-gā is a product-page
Two issues with that
approach
ā¢ Need to build and invalidate the bundleās cache
every time an editor makes a change
ā¢ Users get stuck on the route-config they get at first
load
In angular 1.x we could use templateFactory and
select a template based on the api-response
But we cannot do that in Angular 2+, because
there is no template-parser at runtime
Even though all the *ngIfs in the template are AOT
compiled into something more acceptableā¦
It still seems wrong to have it in the template!
The problem cascades
ā¢ When we go from one product-detail-page to
another product-detail-pageā¦
ā¢ Refactor init-logic into ngOnChanges
or (if you are building a lib)
ANALYSE_FOR_ENTRY_COMPONE
NTS
Watch Sean Landsmans talk from ngVikings:
https://opbeat.com/community/posts/understanding-aot-and-dynamic-components-in-angular-by-sean-landsman/
SEO, social previews
and
faster perceived load-
timesAngular Universal is so hot right nowā¦ (going into core)
The idea
ā¢ server.module and a client.module
ā¢ they both import the app.module
ā¢ server and client module then replaces the
dependencies (through the universal-module) that
are different with appropriate environment-versions
(eg. xhr or node-fetch, DOM or virtual-dom)
Maintaining statewe want to maintain state, so we donāt re-do all fetches
and calculations when the client boots up
We made it to nirvana
https://github.com/filipbech/ng2-dynamic-spa
Thank you
@filipbech@IMPACTdigitaldk
Iāll tweet a link to the slides in a minute