Day 2 of ng-conf was a fair day. Multiple talks and activities took place all day long. Not being able to clone myself and see all of the discussions, I set my focus on a particular path for the day. So let’s take a look at the path I chose.
RxJS: The Good Parts
The title of this talk caught my attention as it pays homage to JavaScript the Good Parts by Douglas Crockford. The talk focused on some of the most frequently used RxJS operators such as filter(), map(), reduce() as well as observable methods such as .switchMap(), .mergeMap() and .zip() to name a few. Towards the end of the talk, the speakers provided a performance comparison. The comparison was for execution times needed to manipulate a collection of numbers using plain JavaScript vs. RxJS operators and methods. Not a surprise RxJS had better performance as it wasn’t iterating over the data multiple times to complete the same operations.
Angular Performance Birds of a Feather
Unfortunately, the time slot for the RxJS presentation cut into this talk. I was able to catch half of the speakers, and even then, it was very informative. The format for this presentation was a series of lightning talks from representatives of multiple companies talking about how they squeeze the most out of their Angular apps. Some common themes that were mentioned by the different speakers were; using AOT compilation, configuring Webpack for speed, lazy loading modules, and different ways to reduce bundle sizes. The speakers also mentioned several tools they utilized including Rollup, Webpack (of course), Source Map Explorer and Docker. Which segues perfectly into the next talk I attended.
Docker: What Every Angular Developer Should Know About It!
Dan Wahlin provided his first-hand experience with utilizing Docker for his WordPress site. He walked the audience through the basics of Docker, namely what it is and common terminology. Next, Dan demoed using Docker as well as talked about some of the benefits of using it. Those benefits were accelerated developer onboarding, consistent application environments due to the containers, and because of those containers application conflicts are eliminated. The result of the benefits mentioned above is that developers can ship their software faster.
FormControl Freaks; Redux Edition
This talk caught my attention because of its inclusion of Redux. Redux is a predictable state container for JavaScript apps. I was interested to see the speakers’ application in the context of Angular forms. The talk focused on using the @angular-redux library to integrate Redux into Angular. Being more familiar with the library ngrx I was curious to see what @angular-redux brings to the table. Interestingly enough, the speakers made sure to indicate that the techniques they were using can apply to ngrx. Developers can reap the benefits of using Redux by be reaped by using either @angular-redux or ngrx. Those benefits include predictability of interactions in the application, the ability to use great tools like the Redux dev tools extension, and the fact that this approach to development is scaleable.
From Inactive to Reactive with ngrx
And speaking of ngrx, the next talk I sat in on was all about it. Unlike the FormControl Freaks talk, From Inactive to Reactive with ngrx had a broader focus. It was aiming to not only cover the use of ngrx throughout an application but also covering some of the Redux basics. The speakers made sure to give a brief overview of the three principles of Redux, the store, actions, and reducers. Then it was off to the races as they went into implementation details and described how to integrate ngrx into an Angular app. The talk came to its conclusion with a discussion about performance gains thanks to Redux. By utilizing reducers, Angular’s deep dirty checking used for change detection can be bypassed, resulting in avoiding that expensive operation. These performance gains become significant when dealing with large collections of objects. Oh, by the way, testing is made easier also. Pure functions for the win!
Everything is a plugin! Mastering webpack from the inside-out
One thing I can say about the conference is that there was no shortage of references to webpack. It was everywhere! Everything is a plugin was a talk by Sean Larkin that was part deep dive and part workshop. The deep dive portion of his talk took the audience through the inner workings of webpack itself and the anatomy of a plugin. After illustrating how plugins work and are utilized by webpack, Sean walked the audience through a series of steps in creating a plugin. Sean’s enthusiasm to help everyone understand the material as well as his excitement for the talk made for good times. And it doesn’t hurt to get free t-shirts at the end.
Angular and GraphQL – A modern API for a modern Platform
Another talk I was very interested to hear was on GraphQL. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Which to me means crafting requests for data specific to the needs of where the data will be used, aka component level API calls. Uri Goldshtein from the Apollo team talked about their framework that helps handle network and data management problems. The range of issues the Apollo GraphQL client solves are quite impressive and include reducing network requests, reducing data in the requests, allowing for Component-based APIs, enabling real-time communications, and more. Uri also mentioned a few tools that help developers be more productive with GraphQL like SchemeHub.
Build, Measure, and Machine Learn with Angular
The combination of technologies and their applications made for an engaging talk. The speakers’ focal point centered around the user experience and intelligently presenting calls to action to the end users. The calls to action are determined by data that is collected and analyzed as the user browses. One library, in particular, that was used to collect user data is the analytics tool Redux-Beacon. Once again, Redux is added to the mix to help facilitate the interactions of an application and in this case feed the machine, data that is.
Lost in Translation
If the name didn’t give it away, this talk was all about translations or more specifically Angular’s internationalization tools. Having experience using ngx-translate on a project, I was curious to see what the Angular team had to offer in this department. Oliver Combe from the Angular core team demonstrated the many i18n features available in Angular 4.1. These features include template attributes, handling plurals and alternate text based on component properties, and an extraction tool. This extract tool is called the ng-xi18n extraction tool, and it extracts all i18n-marked text into a translation source file. The ng-xi18n extraction tool can even be executed from the Angular CLI. The Angular teams’ internationalization tools seem to be forming a nice alternative toolchain for handling translations and Oliver made sure to mention there is much more to come.
Step by Step: Improving Startup Performance with Lazy Loading in Angular
The final talk I attended touches on the reoccurring theme and message many talks boiled down to: performance. Namely, how to get faster, more streamlined, and easy to implement performance gains out of Angular. As the title indicated, the speaker walked the audience through the process of setting up lazy loading modules. I was already familiar with the implementation process for lazy loading, but the speaker was still able to enlighten me with new information. In summary of the talk; lazy loading helps improve startup performance, devs should use a core module for global services, the CLI/Webpack will create new chunks for each lazy loaded module, and finally, have a preloading strategy in mind to load modules after app start. Overall a very useful and informative talk.
Outie
The second day of ng-conf provided for an exciting change in format to the conference. My choices, unfortunately, resulted in having to miss some excellent talks. However! Thanks to the wonders of the interwebs, I have access to all of the materials and presentations for day two all compiled into one repo: ng-conf 2017.
For another perspective on the conference, please check out Dave Baskin‘s blog; ever so appropriately titled NG-CONF 2017 Day Two Highlights.