Angular 7 highlights, improvements, and gotchas
|Richard Harris in HTML5 Tuesday, November 6, 2018|
Angular 7 is out and we speak with Carl Bergenhem from Progress, to find out what's new, what's not so new, and what to look out for. Plus, read about the rumor tht says you can use AI, bitcoin miners, and Angular together!
Google recently announced its new Angular 7, which has been noted as a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. These benefits along with more, such as CDK virtual scrolling capabilities and drag & drop feature, have developers excited to dive in. Carl Bergenhem, a Product Manager at Progress, digs deeper into the highlights and impacts of the update.
ADM: What are some of the highlights of the Angular 7 release?
Bergenhem: The Angular 7 release is actually spread between the Angular core framework, the Angular CLI, Angular Material, and the Angular CDK – which is quite the broad range of updates! One of the biggest changes is the new CLI which now has a helpful guide to walk through creating applications. When typing in `ng new` to create a new application a developer will be guided through a series of prompts to decide the name of the project, if the project is using Sass, Less, or plain CSS, and a couple of other things to ensure that any new project is set up for success out of the gate. Speaking of the CLI, with Angular 7 there is now the concept of “Bundle Budgets” which will help with reducing the average bundle size of Angular applications. While it’s not an underlying improvement to how an application is bundled, it will throw errors when your bundle is over a certain size, and a clear warning for smaller packages to help remind everyone to be mindful of just how big their Angular applications are. Angular Material, the UI toolkit that Angular offers, has updated its homepage to help with design guidance, developing components, and overall tooling around creating better user experiences. It also has some updates to accessibility within some of its components. Extending things on the UI front, the Angular CDK now offers virtual scrolling capabilities (great for high-performance scenarios) along with a drag and drop framework.
ADM: Are there any “gotchas” that developers need to watch out for when upgrading to Angular 7?
Bergenhem: Honestly, the upgrade to Angular 7 from Angular 6 looks to be pretty seamless. A lot of the improvements come around upgrading the Angular CLI, which also didn’t have any big breaking changes introduced. With big changes to rendering or project structure etc., there should only be benefits when upgrading. Of course, if you’re on lower versions of Angular, it is recommended to look at the changes that have happened in Angular 6 and 5 (depending on how far back you are) to prepare for any big items that may have changed. The biggest thing to keep an eye on will probably be the warning settings that come out from the new Bundle Budgets feature of the CLI, which will provide a warning or an error depending on how big your application bundle is. While not a breaking change, it might be a bit jarring to see this message the first time you go ahead and build your application.
ADM: Were there any big improvements around performance for Angular 7?
ADM: What is the Angular CDK and what does version 7 bring to the table for the CDK?
Bergenhem: The Angular Component Dev Kit (CDK) is a toolkit specifically built to help developers with their user experience within Angular applications. While it can somewhat be seen as a UI component library, it’s a bit more foundational than this as it goes down to provide fundamental aspects of UI that developers can use to build their own UI components on top of. For Angular 7 the CDK now has the ability for virtual scrolling to be built-in to the Scrolling Module of the CDK. Virtualization is done by loading and unloading DOM elements based on current position within a list of items. Rendered items can be recycled to ensure that only the content is updated rather than re-painting entire elements. This is great in scenarios of long lists that you want your users to be able to scroll through without a performance impact. Additionally, the CDK now contains a drag and drop framework to help developers create interfaces that rely on grabbing an HTML element and dragging from one area of the application to the next. This also has built-in support to render the HTML element that you’re dragging, along with framework items to help move an item from one list to the next. Overall some quality of life improvements to add some more interactivity to your Angular applications.
ADM: What specifically was improved for accessibility in Angular 7?
Bergenhem: The improvements in accessibility mainly come from updates to Angular Material, the UI component toolkit that the Angular team offers. With Angular 7 the `mat-form-field` component can now use a native HTML `select` element to help improve accessibility, performance, and usability. Previously this was handled with `mat-select,` a dropdown element to help select items that were custom made for Angular Material. Now developers can choose between the native `select` element and have it look nice and styled and have improving accessibility.
ADM: Is there any news around the new rendered, Angular Ivy?
Bergenhem: So, Angular Ivy was initially talked about at ng-conf 2018 during the first keynote. It is certainly understandable that people are excited as Ivy is a new rendering pipeline and view engine that would take over how applications are rendered in the browser. This is a pretty fundamental part of web applications built with Angular, so developers are very eager to see this be delivered. Well, Angular 7 did not end up being the version that deployed with Ivy, but it still seems to be trucking along! We don’t know when Ivy will officially be released, but we’re certainly looking forward to getting more news around this un the future.
ADM: There were some rumors about AI and a bitcoin miner in Angular. What was that all about?
Bergenhem: This came from an April Fools joke that got out of hand. These rumors appeared before Angular 6 was even released, but it was just that: a joke. There is nothing to be concerned around accidentally adding a bitcoin miner to your application, or a rogue AI taking over your state and storage management in your Angular applications.
ADM: What does the update to Angular 7 mean for tools built on Angular?
Bergenhem: From the look of things most tools built with Angular mostly have to go through and update their peer dependencies and ensure that they’re not throwing out errors requiring older versions of Angular. If any library is built on top of the CDK or Angular Material, there are some changes that would need to be made in order to ensure that they take advantage of the new accessibility changes and new components introduced in the CDK of course. This is a pretty general statement though as I’m sure there are tools that focus on very specific aspects of Angular that may need some tweaks here and there, but for the most part Angular 7 doesn’t impact these too much. As a real-world example Kendo UI for Angular, the native UI component library for Angular that we offer, only had some minor updates to do for some of our framework-related items around globalization and internationalization, but other than that we updated our packages to be compatible with Angular 7 without running in to any issues and have been compatible since day one of the Angular 7 release.
ADM: I saw that the Angular team brought up NativeScript on their official Angular 7 release post. What do users of either NativeScript or Progress Kendo UI have to look forward to with this release?