Last month I had the opportunity to attend the International Javascript Conference 2017 (Oct, 23th – 27th) in Munich. Since the program included a lot of Angular focused sessions, it was a good source for fresh input and new ideas for our REST based Storefront project.
So what were the main takeaways of the sessions I attended?
The session “Web goes Native – Progressive Web Apps (PWA) with Angular” by Shmuela Jacobs was very enlightening. Up til now my opinion was that the Progressive Web App topic could be an optimization task for later in the project. After some initial motivational points why Progressive Web Apps are the way to go, Shmuela showed how easy it was to add the missing pieces to an example Angular app. With the help of Google Lighthouse her app was gradually adapted to meet all the requirements to pass as a Progressive Web App. So the main issues that needed some work were:
- provide fallback content
- enable Service Workers
- add a manifest
- add an icon
Fixing all of this did not seem that hard with some “Here’s something I prepared earlier.”
So making the REST based Storefront a Progressive Web App will be something we will try to do as soon as possible. Especially the Service Workers will be an aspect that is interesting regarding performance optimizations.
Also Maxim Salnikov’s Session “The Mobile Web Second Edition – First-Class Citizen on your Device now” pointed out the advantages of Progressive Web Apps and put its current major drawback – Safari not supporting Service Workers – into perspective. They will support it soon. Hopefully our application will do so too.
Another very entertaining session was Nir Kaufman’s “Unleash the Power of Angular Reactive Forms“. His presentation style demonstrated that coding should be fun and the presented ideas for dynamic forms were very interesting. Nir used Angular’s dynamic component rendering abilities, to build a dynamic, configuration-driven form component.
...
<ng-container #entry></ng-container>
...
@ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
...
const controlFactory = this.cfr.resolveComponentFactory(DynamicControlComponent);
...
// create an instance of the dynamic control component
const controlComponent = this.entry.createComponent(controlFactory);
...
While we might not use this approach for our form creation we do have a part in the Intershop Commerce Management that requires us to dynamically create components – our Content Management System. So the presented ideas could be a good starting point to develop a way of dynamically creating components in the Angular application that are managed by our integrated CMS, at best fully integrated with our Design View.
“Through the Sound Barrier – High-Performance Applications with Angular” and “Routing into the Sunset with Angular” with Manfred Steyer, were two sessions that provided several impulses that will be investigated further in the context of our REST based Storefront implementation:
- Lazy Loading with a customized Preloading strategy
- OnPush change detection
- Angular Build Optimizer and AngularCompilerPlugin
- Service Workers (we will need this for the Progressive Web App anyways)
- Server Side Rendering
In addition to Manfred Steyer’s performance session, the two sessions “JavaScript frameworks vs. SEO – Challenges around JS crawling and indexing” by Bartosz Góralewicz and “The Vue of Search Engine Optimization – How to make your Single-Page App rank well” by Dennis Schaaf and André Scharf, pointed out the importance of Server Side Rendering too. They both quoted Jeff Whelpley who was working with Tobias Bosch (Google engineer, part of the core Angular team) on server rendering for Angular.
“If you search for any competitive keyword terms, it’s always gonna be server rendered sites. And the reason is because, although Google does index client rendered HTML, it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content.” Jeff Whelpley
For this reason the Angular Universal = Server Side Rendering is an important part in our REST based Storefront project that has to work well and we will keep investigating ways of integrating it as good as possible.
One final session that will probably have some impact for our Angular project was “Angular with Redux” presented by Manuel Mauky. He encouraged the usage of Redux as pattern and library that uses principles of functional programming to manage the state of more complex applications. It is currently the de facto standard in the React community but can be used in Angular as well. Especially the NgRx adaption for the Angular world will be something we will play around with to see if it is something that we would use as our default pattern to handle the application state.
Further discussions with Manuel and other conference attendees suggested that this added layer of complexity and the additionally required code is worthwhile regarding the benefits one receives in regards of maintainability, debugging support and widespread usage.
So all in all there was a lot to be learned at the International Javascript Conference 2017 and a lot to experiment with now. Hopefully with good results winding up to improve our REST based Storefront.