The long awaited Angular 7, (the widely used web application framework from Google) was released last week. So, what’s new?
Most notably is a significant update to its Component Development Kit and Material Design with the new Virtual Scrolling and Drag and Drop components, as well defaulting performance budgeting for new projects.
Virtual Scrolling Eases Development of Scrolling Lists
A common feature in modern web applications is scrolling lists, which are simply lists of dynamically loaded content. As Angular is commonly used as an enterprise solution, due to its large ecosystem and component-based architecture, it is not suprising that Virtual Scrolling is a key feature in this release.
See also: Angular versus React: Which Wins in 2018?
The world’s premier web applications are full of lists, such as Facebook’s posts, Twitter’s tweets and so on.
Such lists are data gluttons, particularly when dealing with large amounts of data – a key feature in data centric applications.
This can be exceedingly memory intensive on user’s browsers unless tamed by developers who are able to build this functionality performantly.
Content from our partners
Virtual Scrolling is a technique that handles this through only displaying a constant number of list items and loading more as the user scrolls down. This means that the browser can do less data rendering and provide a faster user experience.
Angular’s Virtual Scrolling provides this functionality out of the box, fine-tuned by Google’s Angular team, allowing developers to use this out-of-the-box functionality without having to use third party libraries specifically to cater for this use case. Clearly, a monumental addition to Angular’s component kit.
Angular 7: Comes with New Drag and Drop Component
Similarly, the Drag and Drop component allows developers to build drag and drop functionality in a developer-friendly way.
The Angular team states on the component’s official documentation: “The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and locking along an axis”.
Ultimately, this can be done without Angular, but by providing a mechanism to facilitate this functionality in (arguably) a less verbose manner, this is likely to be well received by the Angular developer community.
Default Performance Budgets
Performance budgeting is the definition of memory constraints in an application – a budget for how much memory should be used.
Angular 7 enables performance budgeting by default, allowing developers to effortlessly change increase/reduce their memory budget through updating the angular.json file. The Angular team states in the official documentation: “Budgets is a feature in the Angular CLI which allows you to set budget thresholds in your configuration to ensure parts of your application stay within boundries which you set”.
Ivy Renderer Still not Available, But On Its Way
For some time, Angular developers have waited for the new Ivy Renderer to make its way into the framework.
Ivy is described by the firm as “our next generation rendering pipeline”, improving application performance through new features such as Tree Shaking (a way to discard parts of the application that are not used).
However, the team claim in the release notes on its blog that they “will announce an opt-in preview of Ivy as soon as it is ready in the coming months”.
Overall, another substantial release for Angular that is packed full of new and useful features.
