Top Angular blog posts from August 2020
We’re excited to bring you this month’s recap of top Angular blog posts - with this one it was especially difficult to select our favorites, but we believe we’ve got some good ones. Enjoy the read!
A Roadmap for Angular
Let’s begin with a pretty groundbreaking piece of news for Angular and its community: the announcement of the framework’s roadmap by Jules Kremer. As she states, this is the first time that the team has publicly released a roadmap, and it’s really great for the community to be able to get an insight into the current and future developments of the project.
The roadmap aims to incorporate both Google’s internal feature requests as well as those made by the broader Angular community, in addition to more general code refactorings and optimizations. It will be updated quarterly and the framework will still follow the regular release cycle, following semantic versioning.
Announcing NgRx Version 10: New packages for local component state and reactive components, swag store, and more!
Moving on, we have Brandon Roberts’ announcement of the release of NgRx version 10. He begins by providing an update to NgRx Conf which is planned for May 2021, with Nrwl as the premier sponsor.
Brandon then continues with an in-depth overview of the new features of NgRx 10: ComponentStore, a new package for local state management; Component, an experimental package for more reactivity; the *ngrxLet structural directive; and the ngrxPush pipe.
In addition, you can now get NgRx merchandise from their store and engage even more actively with team members on their Discord server. Brandon concludes the post with information about upgrading to this version and thanks all contributors.
The Last Guide For Angular Change Detection You'll Ever Need
We continue with Michael Hoffmann’s guide to change detection in Angular, published on the inDepth Dev platform. It starts off with a basic introduction to change detection in front-end frameworks, then dives deeper into how the process works.
Michael presents the two different strategies for doing change detection in Angular: Default and onPush, the former of which allows you to skip unnecessary checks for a component and will only update the component if certain events take place. He also goes into the details and considerations of each of these events.
The post also covers use cases of deactivating change detection and/or running code without it, as well as a special note on the new Ivy compiler. Michael even provides a demo project that readers can work with to get a better grasp of the topic.
Angular is an Onion
This next post by Victor Savkin, co-founder of Nrwl, is particularly interesting, as it compares Angular and its different layers to an onion: the first layer are the framework’s core capabilities, the second its core APIs, then APIs for building apps, basic CLI capabilities, and finally, the fifth layer is represented by CLI plugins.
As Victor points out, the teams and contributors working on the different layers have different sets of skills and experiences. For example, Google’s internal teams excel in layers 1 and 2, but don’t have as much experience with developing applications, which by contrast is where the community shines. He adds that, as with most strong open-source projects, the community should play its role in contributing to the project’s success.
Angular security best practices
In this post on the Snyk blog, Natalia Venditto and Liran Tal present 6 best practices for building secure Angular applications. The first thing they highlight is using interpolation to escape malicious user inputs and prevent XSS.
The next three best practices they present are: knowing how to handle dynamic HTML (i.e. with [innerHTML]), and making sure to never concatenate user generated input to templates or use native DOM APIs to interact with HTML elements.
Also, be careful to avoid third-party template engines with server-side rendered applications, and additionally safeguard yourself by checking the code for any components which may pose security threats.
Lazy Load Images in Angular with Two Lines of Code
One thing that this month’s list has been lacking so far is a post by Netanel Basal. Let’s remedy that with his short guide to easily lazy load images in Angular. Lazy loading means only loading elements when they enter the viewport, and thus it can greatly enhance performance.
Most modern browsers support native lazy loading; it’s as simple as adding loading=”lazy” to the img element. Netanel’s post introduces a directive which adds this attribute to the image if the browser supports it, otherwise it leaves the default functionality.
Another option is to implement lazy loading by using IntersectionObserver, which has support on all browsers except for Internet Explorer.
Angular 10 - Towards the Better future for Angular
In his latest post on inDepth Dev, Santosh Yadav gives an overview of what’s new in the latest version of Angular, version 10. Among the most notable ones are support for TypeScript 3.9, the --strict flag in the CLI, and certain changes to Bazel, the CLI and Angular components.
Additionally, this post by Santosh addresses the concerns about there not being many new features in Angular 10. According to him, this is the right way to go about it, as it paves the way for further innovation to the framework and allows future major releases to be more powerful, all while remaining backwards compatible.
Angular CLI Strict Mode
Speaking of the --strict flag in Angular’s CLI, we have another post by the Angular team on this month’s recap. In this second one, Minko Gechev provides a more thorough overview of the Angular CLI strict mode. The post starts off with a list of specific settings which strict mode enables besides the defaults, then Minko goes into more detail for each setting.
The three main features are stricter type checking, smaller bundle budgets and reduced side effects, and Minko also lists the pros and cons for each of these. He finishes with a call to action to community members to give their feedback on these options so as to inform further development from the Angular team.
That’s all for August’s recap. It will be exciting to see how the development of the framework will evolve post the Angular team’s release of the roadmap. We’re looking forward to bringing you even more interesting Angular content - stay tuned!
