Web Stacks & Fanny Packs | NG Conf 2018

For one week in April of this year, the 80s were alive and well in Salt Lake City, Utah. Over 1500 developers from around the world gathered to see the Back to the Future DeLorean, play some classic arcade games, and listen to way too much Rick Astley. Most importantly, we were here at ng-conf 2018 to learn more about the popular web framework Angular. This 80s themed conference brought together the users and creators of the Angular ecosystem to discuss the new features in Angular and related technologies as well as to reinforce some of the best practices for designing, building and maintaining applications. Angular and RxJS have both released new versions with new features to explore. Angular also demoed a new, future renderer, Ivy, which promises to drastically reduce the size of applications. There were also numerous talks and workshops centered around NgRx, a collection of reactive libraries for dealing with tasks like state management and router events. Let’s talk about the new Angular improvements, the new renderer Ivy, and some best practices you can start using today.

Before we dive into Angular 6, it’s worth mentioning Angular will be supporting older versions. AngularJS will continue to have bug fixes until June 30, 2018 and long-term support until June 30, 2021. I have written about upgrading previously, and have since upgraded apps to modern Angular. While it has its challenges, it is entirely doable in this time frame provided if you have a good plan in place. The Angular team also addressed changes to its support of old versions of modern Angular. Previously, even numbered releases would have 18 months of support, while odd numbered releases would have a smaller support window. Now, every major release will have the same 18-month timeframe for support which will alleviate the stress of managing framework upgrades alongside new features.

Angular 6 has been released, bringing with it a lot of new tooling features and improving how fast you can build Angular applications. The popular CLI tool has been updated with two new powerful commands, ‘ng upgrade’ and ‘ng add’. ‘Ng upgrade’ acts as a way to easily upgrade your Angular application. This command will go through the package.json file and recommend updates for your dependencies. Not only that, Angular and third parties can attach “schematics” to this process to scan your code and upgrade any breaking changes for you automatically. RxJS demonstrates how powerful and time saving this feature is. This library was also updated and made many changes to how operators are imported and how Observables should be structured. Instead of manually going through, finding and replacing the imports and code changes, RxJS does the work for you through ‘ng upgrade rxjs’. This could be huge – imagine upgrading an app and it automatically finds and fixes the incompatible code for you.

‘Ng-add’ works similarly. After upgrading, you can add new components and features from Angular and supported dependencies with this command and they will add it to your project, making the configuration changes and files for you. When more and more dependencies start utilizing this functionality, it has the potential to greatly reduce much of the boring boilerplate work that comes with adding new functionality.

The Angular team also demoed a new renderer, Ivy, which will be released at a later date. This new renderer promises to be backward compatible and will require no code changes. In return, all Angular apps will become smaller and faster. This improvement is due to a new philosophy on how files should be compiled, and by taking advantage of modern web application deployment techniques. Currently, Angular uses Ahead of Time (AOT) compilation to compile the files into a format that is smaller and takes less time to load, greatly reducing lag for the web app user. This process requires having a global context of the application. While fast for the end user, the compile time is slow for developers. Ivy has switched to the idea of “locality” where only one file is compiled at a time. This seemingly small change has massive implications that reduce the complexity of the renderer, and the generated files. This new AOT process outputs files that are then easier to consume and analyze. When combined with techniques like tree shaking, web apps can be reduced further to only include the framework functionality that is absolutely necessary. The results are promising. Currently, the smallest size you can make in the simple “Hello World” app in Angular is 36 Kb. With Ivy and no code changes, this has been reduced to 2.7 Kb. This is an impressive reduction we all hope holds true when scaled up to real web applications.

Finally, “Optimizing an Angular application” by Minko Gechev highlighted some techniques you can implement right now, without any upgrades. What I found interesting was a lot of the advice he gave was similar to my previous blog post on functional programming. One of the points I made was about the advantages of writing pure functions. To reiterate, a pure function is a function where the output value is solely determined by its input values and causes no side effects. The properties of this type of function lead to potential performance gains which Angular utilizes. By using pure pipes to render complex values, applications can reduce the number of computations Angular does to render objects on the screen. A pure pipe is essentially a pure function, the output of the pipe only changes when the input changes. Therefore, Angular knows it can safely skip computing a value if the input has not changed. For common web components displaying lists and tables, these should be utilized whenever possible. Similarly, Angular has found a way to take this concept and apply it to components. Utilizing the “OnPush” change detection strategy, components can check for changes only when the inputs to a component have changed. Instead of walking down the component tree checking every component, you can adjust your app to focus on the components that get updated due to a change. The only caveat that keeps components from being truly “pure” is that change detection will also trigger if an event occurs on the component. Still, this optimization technique leads to a big increase in performance and shows that minimizing side-effect causing components can lead to better performing applications.

The ng-conf was a great place to learn about what is on the Roadmap for Angular, what techniques you can take advantage of now, and to see people break dancing to 80s hip hop, wearing fanny packs and neon jackets. Seeing the clash of retro culture with the new technologies shows how far we have come – from an era where the Walkman was an amazing gadget, to the extremely connected world we live in today. Who knows what the next 35 years will bring us, but I know I will be looking forward to the innovations that help make the next big idea a reality.