Originally posted on Rangle.io: What to Expect in Angular 6 and Beyond
Having recently attended ng-conf 2018, where the Angular core team announced that Angular 6 is “dangerously close to release,” I wanted to write about the exciting features we can expect.
Angular Elements
There has been lots of chatter about Angular Elements since Rob Wormald spoke at Angular Connect last November. There will finally be a fully supported Angular Elements version in Angular 6.
Angular Elements allows you to use Angular components in non-Angular apps. After you build your Angular component and generate your ngfactory file, you can wrap it inside a Custom Element with only a couple lines of code.
// The my-popup.ngelement.ts file
import {platformBrowser} from ‘@angular/platform-browser’
import {MyPopupModuleNgFactory} from ‘./my-popup.module.ngfactory’
import {MyPopup} from ‘./my-popup’
import {createCustomElement} from ‘@angular/elements’
platformBrowser()
.bootstrapModuleFactory(MyPopupModuleNgFactory)
.then(({injector}) => {
const MyPopupElement = createCustomElement(MyPopup, {injector});
customElements.define(‘my-popup’, MyPopupElement);
});
The result is a JavaScript bundle (my-popup.ngelement.js) for your component. And then all you have to do is import this script and use the component just like any other DOM element. You can load it inside applications based on React1, Vue, and even jQuery.
<!-- Inside any app written with any technology -->
<my-popup message=”Use Angular!”></my-popup>
This feature will help companies that are using multiple frameworks to create a unified components library. Angular Elements is also a great tool to support your micro front-end architecture, which allows independent dev teams to each be responsible for a component running autonomously on the same page. Furthermore, it will allow companies to convert or upgrade to Angular 6 incrementally, component-by-component, without a significant upfront investment.
Material Design and CDK
Angular 6 supports your UX design system so that your application can have a fantastic user experience. Design systems are a collection of patterns, component libraries, style guides, and more. They help you document design guidelines, have supporting building blocks, and let you design your applications at scale.
Although Material Design and Component Dev Kit (CDK) aren’t new, Angular 6 makes it easier for you to use them. Material Design is a complete, opinionated design system created by Google. But if your application needs to have a custom design system for your brand, Angular 6 exposes Material Design’s component infrastructure using CDK. Their libraries make it easy for you to create a design system that’s accessible, supports internationalization, and provides common interaction patterns like floating panels. There are several new packages and features to look forward to in 2018.
- Schematics help build out interactions that are more complex than a single component by providing the capacity for pre-made layouts and templates through the ng generate command (see below).
- There is a new tree component that follows the data table pattern used for a hierarchical interaction pattern or data.
- Although the overlay package is not new, they added a new feature called flexible positioning that manages the size and position of the overlay based on the amount of content inside.
- There is a new badge component for showing a lightweight inline notification marker with a number.
- There is a new bottom-sheet component for mobile specific modal interaction patterns.
Furthermore, it opens up the possibility for community-driven patterns, libraries and tools. CDK makes it faster for your company to create a custom design system that matches your brand.
CLI
The CLI is probably one of the most liked features of Angular because it reduces the amount of work developers have to do. Angular 6 will extend the CLI with schematics, which are infrastructural components that create templates and execute code transformations in your application. Rangle’s very own Mike Brocchi has put in a tremendous amount of hard work into the CLI and you can watch his ng-conf talk about its schematics. Currently schematics include ng new and ng generate. Angular 6 is introducing new schematics including ng update and ng add.
ng update
This schematic will help you automatically update your npm dependencies, which will keep your application up-to-date. It will also update your RxJS and Material code to take advantage of all the new features that come with Angular 6.
ng add
This schematic will add new capabilities to your application. It creates instant code and library scaffolding. There are many libraries that will support this schematic, including Angular Material, Angular Elements, Progressive Web App, ng bootstrap, Clarity, and NativeScript. All you need to do is execute a simple command:
$ ng add @angular/material
$ ng add @angular/elements
$ ng add @angular/pwa
$ ng add @ng-bootstrap/schematics
$ ng add @clr/angular
$ ng add @nativescript/schematics
ng g
This schematic will make it easy to generate libraries that you can add to other Angular applications. You can include the project scaffolding, test infrastructure and build system setup.
$ ng g @angular/material-material-nav --name-main-nav
Ivy Renderer
The most exciting feature coming up in Angular is its third generation renderer named Ivy. Although it won’t be production ready for Angular 6, there was a lot of well-deserved buzz at ng-conf this year. The renderer has been completely rewritten to be smaller, faster and simpler than all previous renderers. There are three features from Ivy that I think really stand out.
1. Backwards Compatibility
The best part of having a declarative UI framework is that there are virtually no incompatibility issues when the renderer is updated. Once Ivy is released, all you need to do is upgrade your package version of Angular without any changes required for your existing apps. It should be seamless. The only difference you should notice is that your application is faster, smaller and has access to new features.
Google can be so confident about its backwards compatibility promise because of its “One Version Policy.” They have over 600 applications all using the latest version of Angular, including Firebase, Google Analytics, Google Express, Google Cloud Platform, etc. In fact, they commit the head of Angular’s repo into the Google codebase on an hourly basis. If even one of the 600+ applications fails to work, then they roll back Angular! This approach ensures that Google has a comprehensive test suite to prove that every Angular commit is backwards compatible.
“[Google has] over 600 applications all using the latest version of Angular… In fact, they commit the head of Angular’s repo into the Google codebase on an hourly basis.”
2. Locality
The current Angular renderer requires global analysis to compile code into JavaScript. Ivy follows a different philosophy. During the compilation of templates, Ivy only uses information available on each component level and its decorator. It neither looks at its dependencies, nor the global analysis. This is referred to as “locality,” which means it looks at one file at a time to generate the bundle. This philosophy has five significant benefits:
- NPM ships AoT code, so developers using your library don’t have to do the compiling.
- AoT and JiT become indistinguishable, which means you can freely mix AoT and JiT components in developer mode.
- No need for metadata.json files.
- Compile times are faster because a change in one component is unlikely to trigger a recompilation of the whole application.
- You are enabled to do meta-programming, like higher-order components, which means that you can create components, modules and directives dynamically at runtime.
3. Next Generation Tree Shaking
The concept of tree shaking has been around for a long time. However, Ivy is written in a completely different way to optimize tree shaking like never before, without making you change the way you write your code.
Tree shaking is a build optimization step that removes the unused Angular code from your bundle that you don’t need in your application. This removal results in a significantly smaller bundle size and makes the application run faster because fewer bits need to be shipped to the browser. There are existing tools that can currently help with this, like Rollup and Uglify. The problem with these tools is their efficacy depends on how you write your code. Why? Because they use static analysis to determine what code needs to be retained, which means it doesn’t actually run your program. As a result, static analysis will retain unwanted code in certain circumstances, for example where the code is being called only under a condition that is never met.
// function a will never be used, but will be retained
// when using static analysis for tree shaking
let a = function() {}
let b = function(c) {
if (c) {
a();
}
}
b(false);
The scenario above can occur with Angular’s previous renderer. Your template HTML is parsed into a template data structure, and then passed to the Angular interpreter, which has to know how to do everything to be able to create the resulting DOM.
Template HTML >> Template Data >> Angular Interpreter >> DOM
For Ivy, Google has re-written Angular’s rendering pipeline by removing the clunky Angular interpreter that needs to know how to do everything. Instead of generating template data, it generates template instructions directly, which are atomic functions that do just the work you need from the template HTML that you’ve written.
Template HTML >> Template Instructions >> DOM
The template instructions are much leaner so there won’t be references to code that you do not need, which means the tree shaking tools can successfully remove unused code from the resulting bundle. The result is smaller bundle sizes. In fact, a Hello World bundle with Angular’s previous renderer is 36 KB. With Ivy’s new render pipeline strategy, the same Hello World application is as little as 2.7 KB! Smaller bundles mean a faster application startup time for your users.
Conclusion
The conference was jam stacked (pun intended) with information, smart people and memorable experiences. I wasn’t able to touch on every aspect here because no single article could capture everything at ng-conf 2018. It left me very excited about the upcoming features in Angular, especially Angular Elements, and sustained my confidence that Google is continuing to give their all into this wildly popular framework.
References
Ng-conf Day 1 Keynote 2018 – Public
Day 1 Keynote – Brad Green, Miško Hevery, Kara Erickson
Elements in v6 and Beyond – Rob Wormald