Angular 7 highlights, improvements, and gotchas

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?

?Bergenhem: While there aren’t necessarily any big performance improvements around rendering or anything in the underlying engine of Angular, there was at least one big improvement when it comes to your application’s performance: Bundle Budgets.??This new feature of the Angular CLI is specifically set up to warn people about the size of their bundle, or specifically: how much JavaScript they’re forcing their users to download. Performance gains from the framework are of course important, but if we send down several megabytes of JS and other files, the end-user will not perceive our applications to be fast and performant. The Bundle Budget feature will warn you if your bundle is over 2MB and will even give you an error if it is above 5MB. This range can, of course, be modified in the `angular.json` configuration file, but from an out-of-the-box perspective, this is a good way to ensure that people are paying attention to just how big their Angular applications actually are.

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?

?Bergenhem: If you’re not familiar with NativeScript, the quick rundown is that it is a framework to create native mobile applications for iOS and Android using JavaScript, including Angular! Thanks to the Angular framework removing a dependency on the DOM, which makes it more than just a web application framework, NativeScript can be used to create a native iOS and Android app using Angular all with one single code base. With the updates in Angular 7 and previous versions of Angular, NativeScript has introduced the capability to create a single project that builds both web and native mobile applications – all with Angular. This is extremely powerful as many existing mobile and web applications share a lot of capabilities, so code sharing 80%+ of your application between the two applications is extremely helpful. ??On the Kendo UI for the Angular side many of the updates can be taken care of already. We have already taken the approach of offering our components in minimal packages, which be useful for the Bundle Budget side of things as we already help reduce the overall bundle size even with larger and more advanced UI components like our Grid. Accessibility is already a feature that has been built into the components since we first launched them, and we are compliant with Section 508, WAI-ARIA, and WCAG 2.0. Virtualization is also something that was built into the Kendo UI components from the initial release, so Kendo UI developers have already been taking advantage of this for quite some time.

Carl Bergenhem is a Product Manager at Progress. Throughout his time at Telerik and Progress, he has covered the entire portfolio of products offered but mainly spent his time in the web development arena covering ASP.NET Ajax, ASP.NET MVC, and all JavaScript-based products. He’s passionate about web technologies and has been developing with products like Kendo UI and NativeScript since their inception. In his free time, he enjoys slaying virtual monsters, snowboarding and playing his guitar.