What's new in Angular 6?
Most, if not all, of the content, patterns, and practices in this book are compatible with Angular 4 and up. Angular 6 is the latest version of Angular, which brings a lot of under-the-cover improvements to the platform and overall stability and cohesion across the ecosystem. The development experience is being vastly improved with additional CLI tools that make it easier to update versions of packages and faster build times to improve your code-build-view feedback cycle. With Angular 6, all platform tools are version synced to 6.0, making it easier to reason about the ecosystem. In the following chart, you can see how this makes it easier to communicate tooling compatibility:
Angular CLI 6.0 comes with major new capabilities, such as ng update and ng add commands; ng update makes it much easier to update your version of Angular, npm dependencies, RxJS, and Angular Material, including some deterministic code rewriting capabilities to apply name changes to APIs or functions. The topic of updating your version of Angular is covered in depth in Chapter 4, Staying Up to Date with Angular Updates. ng add brings schematics support to the Angular CLI. With schematics, you can write custom code to add new capabilities to an Angular app, adding any dependencies, boilerplate configuration code, or scaffolding. A great example is to be able to add Angular Material to your project by executing ng add @angular/material. The topic of adding Angular Material to your project is covered in depth in Chapter 5, Enhance Angular App with Angular Material. A standalone Material Update tool aims to make Angular Material updates less painful, found at Github.com/angular/material-update-tool, but expect this functionality to be merged into ng update. Further schematics can bring their own generate commands to CLI, making your life easier and code base more consistent over time. In addition, version 4 of Webpack is configured to build your Angular application into smaller modules with scope hosting, shortening the first-paint time of your app.
The major theme of Angular 6 is under-the-hood performance improvements and Custom Elements support. Version 6 improves upon v5 in terms of the base bundle size by 12% at 65 KB, which improves load times a whopping 21-40% from Fast 3G to Fiber connections. As your applications grows, Angular takes advantage of a better tree-shaking technique to further prune unused code out of your final deliverable. Speed is a UX feature in Angular 6. This is accomplished with better support for Angular Component Development Kit (CDK), Angular Material, Animations, and i18n. Angular Universal allows for server-side assisted fast startup times, and Angular Progressive Web App (PWA) support takes advantage of native platform features such as caching and offline, so in subsequent visits, your app remains fast. RxJS 6 support allows for the tree-shakeable pipe command, reducing bundle sizes more often, and fix the behavior of throttle as I caution you in Chapter 6, Reactive Forms and Component Interaction, among numerous bug fixes and performance improvements. TypeScript 2.7 brings in better support for importing different types of JavaScript packages and more advanced features to catch coding errors during build time.
Custom Elements support, part of the Web Components spec, is huge. With Angular Elements, you can code an Angular component and reuse that component in any other web application using any web technology, in essence declaring your very own custom HTML element. These custom elements would be cross-compatible with any HTML-based tool chain, including other web application libraries or frameworks. For this to work, the entire Angular framework needs to be packaged alongside your new custom element. This is not feasible in Angular 6, because that will mean tacking on at least 65 KB, each and every time you create a new user control. Furthermore, in early 2018, only Chrome supports Custom Elements without polyfills adding more payload to make these custom elements work. Due to its experimental nature, I do not cover custom elements in this book. Future updates of Angular, in late 2018 or early 2019, should bring in the Ivy rendering engine, enabling base bundle sizes as small as 2.7 KB, resulting in lightning fast load times and making it feasible to ship Angular-based Custom Elements. In this time frame, tooling to build such components easily and native browser support for Custom Elements will also improve, including Firefox and Safari support, leaving Microsoft Edge the last browser to implement the standard.
Always check https://caniuse.com before getting too excited about a new web technology to ensure that you are indeed able to use that feature in browsers that you must support.
Regardless of Angular.io being updated with custom elements to demonstrate the feasibility of the technology, the documentation website attracts 1 million+ unique visitors per month, so it should help work out some of the kinks as it matures. Custom elements are great use cases to host interactive code samples alongside static content. In early 2018, Angular.io started using StackBlitz.io for interactive code samples. This is an amazing website, in essence a Visual Studio Code IDE in the cloud, where you can experiment with different ideas or run GitHub repositories without needing to locally pull or execute any code.
The Angular ecosystem also welcomes the NgRx library, bringing Redux-like state management to Angular based on RxJS. Such state management is necessary for building offline-first applications in PWA and Mobile contexts. However, PWAs are not well supported in iOS's Safari browser and will not find widespread adoption until the new IE6 of browsers decides to join the party. Furthermore, NgRx, is an abstraction over already confusing and sophisticated tooling like RxJS. Given my positive attitude toward minimal tooling and a lack of clear necessity for RxJS beyond niche audience, I will not be covering this tool. RxJS is powerful and capable enough to unlock sophisticated and scalable patterns to help you build a great Angular application, as demonstrated in the lead up to Chapter 10, Angular App Design and Recipes.
Angular Material 6 adds new user controls such as tree and badge, while making the library a lot more stable with a slew of bug fixes, completeness of functionality, and theming in existing components. Angular Flex Layout 6 brings in polyfills, enabling Internet Explorer 11 support CSS Flexbox. This makes Angular apps using Material and Flex Layout fully compatible with the last major legacy browser technology that still persists in enterprises and governments despite leaving mainstream support in January 2018 alongside Windows 8.1 and being superseded 16 times by Microsoft Edge. Angular 6 itself can be configured to be compatible down to IE9 using polyfills. This is great news for developers, who must support such legacy browsers and still be able to use modern technologies to build their solutions.
Some exciting, new ancillary tooling is also released that can enable high frequency, high performance, or large enterprise use cases. The Nx CLI tool, built by former Angular team members, brings an opinionated development environment setup to Angular, suitable for consultants and large organizations that must ensure a consistent environment. This book follows a similar pattern and aims to educate you in establishing a consistent architecture and design pattern to apply across your applications. Google's Bazel build tool enables incremental builds, so portions of your application that haven't changed don't need to be rebuilt, vastly improving build times for larges projects and allowing for packaging of libraries to be shared between Angular applications.
I hope you are as excited as I am about Angular 6 and the future possibilities it unlocks. Now, let's put all that aside and pe deep into getting things done by building a simple Angular application that can display the current weather.