Angular
7 Key Points From State of Angular — Google I/O 2022
Highlights from Google I/O and Angular 14
Google I/O is a developer conference held by Google. “I/O” stands for Input/Output and the slogan “Innovation in the Open.”
Google has concluded its two-hour I/O keynote, which was jam-packed with information. AI, Android, and, of course, a slew of Pixel hardware were all mentioned.
This is just to say there is a whole lot more than what I am summarizing in this post.
Here we will focus on Angular and the future of this framework. The key points mentioned during State of Angular by Mark Thompson and Emma Twersky align with some major features of Angular 14.
Angular 14 will be released in June 2022, but you can read more about the release candidate 14.0.0-rc.1 on Angular’s Github page!
State of Angular
Going through the seven key points, you will see how these changes support and build on each other organically.
Similarly, Angular 14 will enhance Angular by improving some of those points.
1. Ivy Engine
The Angular team rewrote Angular’s runtime and compiler from the ground up so that apps are now powered by the better, more efficient Ivy rendering engine.
Here are some of the advantages offered by the Ivy Engine:
- Improved type checking and error reporting, better debugging, and smaller bundle sizes thanks to the emphasis on tree-shaking (more below)
- Angular language service plugin for VS code
- Angular Dev Tools browser extension
Ivy promises to make a significant difference in Angular applications.
As said above, Ivy places a strong emphasis on tree-shaking. This is the process through which the TypeScript compiler examines your code and determines which libraries are required, then removes any unnecessary code.
As a result, the distributed code will be significantly less, and your application’s loading speeds will improve.
Furthermore, Ivy should make building components more independent of one another. This reduces development time by just compiling the components that have changed while recompiling an application.
This brings us to the next highlight: Standalone Components.
2. Standalone Components
On the Angular blog, we can read that the goal of Standalone components is “to reduce boilerplate and make Angular easier to use and learn by making it possible to build components and applications without NgModules.”
This is important because, among other things, it wants to make it easier to learn Angular for new developers!
Angular 14 and standalone components
Standalone components are one of the major features of Angular 14.
A standalone component is not defined in any existing NgModule, and it handles its dependencies rather than relying on a NgModule. It may be relied on directly without the requirement for an intermediary NgModule.
We should be able to write components as follows:
import {Component} from '@angular/core';
@Component({
standalone: true,
template: `Standalone component!`
})
export class LonelyComponent {}The standalone flag is a property of the @Component decorator’s metadata, and it designates a component as “standalone.”
In other words, the standalone flag indicates that components can be used individually.
In many cases, standalone components might reduce boilerplate.
3. New Getting Started
The Angular team is designing a new Getting Started path for developers new to the framework.
This is very good news because the current learning path is quite steep, especially for new developers.
My little Angular tutorial might soon become obsolete. But if there is something better out there, it will surely benefit the entire community.
4. TypeScript Everywhere
As you may know, Angular is an opinionated framework with best practices built-in by default.
Angular strives to maintain strong defaults and best practices. To support this vision and implement developers’ most requested feature, Angular is adding support for typed forms in Angular templates.
Angular 14 and typed forms
Support for typed forms in Angular templates is a requested feature that will enhance type checking and error reporting as well as better debugging.
Let’s have a look at the following code. This is a simplification of the prototype code provided by the Angular team.
I tried to set the value of the firstName property to a number, and I immediately got a TypeScript error: TS error: Argument of type ‘10’ is not assignable to parameter of type ‘string | null.’
This is extra cool because even though the code in line 17 is inside the populate() method and not executed, TypeScript notifies me of the error.
In other circumstances, I would just discover it by chance while trying my app locally. Or worse, users would tell me after days or weeks in production.
Find this example using Angular 14 on Stackblitz and compare it with the same code using Angular 13.
You will quickly notice that Angular 13 will let you move forward without complaining, despite a potentially risky piece of code.
5. Scalability
Angular made somehow clear that, despite being an opinionated framework, it can support different needs:
- Indie developers: The new Standalone Component makes it easier to start without too much boilerplate. The CLI already makes creating a new Angular app, components, and other things very easy as
ng new. - Startups: Angular Language Service guarantees that developers produce consistent code. Developers can discover mistakes before they are deployed thanks to typing and tooling.
- Scaleups: Internationalization and progressive web apps (PWA) will come useful. Moreover, being opinionated, it is easy to start to work on a different project and know exactly what it will look like.
- Big organizations: Microfrontends as the next steps?
In all of this, it is fairly easy to update Angular every time a new major version comes out, or more frequently, by using update.angular.io.
6. Improved Accessibility
This is a new feature that allows defining unique page titles easier. This addresses a common accessibility issue in web frameworks.
Using a11y services, providing distinctive, short page names, helps people immediately comprehend the content and purpose of a web page. Since page titles are the first element reported by screenreading software, they are crucial for users with visual difficulties.
Because Angular is a single-page app, the majority of transitions, such as switching to a new page, don’t require a page refresh. Until recently, this meant that each page had the same title, which was useless for understanding the content or purpose of the page.
Angular 14 improves accessibility
In Angular 14, the Router will ship with a super-easy way to build unique page names.
const routes: Routes = [
{ path: 'shop', component: HomeComponent, title: 'Home - CompanyName' },
{ path: 'about', component: ShopComponent, title: 'Shop - CompanyName' },
{ path: 'locate', component: ContactsComponent, title: 'Contacts - CompanyName' },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: HomeComponent },
];This makes it easier for developers to follow standard practices when creating page titles.
7. New Commands
More diagnostics help code editors to warn developers of common mistakes before deployment. Here we have two new CLI commands:
ng analytics: a way to control and print analytics settingsng cache: a way to control and print cache information
Currently, the compiler does not offer any warnings and only fails when there are fatal errors that impede compilation.
Additional diagnostics will make it easier to provide warnings to check for minor errors or unnecessary operators like foo?? ‘bar’ when foo is not nullable.
According to the issue on Github, the proposed solution will add a “new private flag in the compiler which enables “extended template diagnostic” checks that give warning/information diagnostics about user templates that aren’t strictly fatal errors.
This issue is mostly about building the required infrastructure, but we should include one or two simple checks to validate the system”.
Conclusions
Check out the whole State of Angular video on YouTube.
The talk concludes with, ‘There’s never been a better time to be an Angular developer.’
At a minimum, this is a very cool moment to use Angular in your projects!
Thanks for reading.
