‘Angular 5’ Prepares Developers for the Modern Web – InApps 2022

If there’s one thing that’s been true about the Angular team, it’s that they’ve remained committed to a vision that is not often found in the JavaScript world. That vision is one of the huge teams collaborating on a single application, or conglomeration of JavaScript applications. To aid this, Angular 2 made a breaking shift away from its origins to adopt TypeScript, a typed version of JavaScript created by Microsoft.

Adding types to JavaScript at the language level meant that Angular applications, on the whole, would be easier to develop and maintain in large teams. That still meant that Angular 2 was a completely different beast than Angular 1, and so it is that last week, the Angular team released Angular 2 version 5.0.0.

Dubbed simply Angular 5.0, this version builds on numerous changes made in previous releases. Stephen Fluin, developer advocate on the Angular team at Google, where his mandate is to help developers be more productive with Angular. Naturally, he’s on top of the changes in the latest release.

One of those changes was the bumping up of the included HTTP client to a new implementation, which was introduced earlier this year. With the release of Angular 5.0, the team is deeming this the new client by default, and recommending users move to the new implementation.

“We had an HTTP client previously,” said Fluin, “But there were a few API changes we wanted to make which would be breaking changes. The development team rearchitected the client based on what the framework’s designers observed in the field. Previously, the software left it to the developer how to extract JSON payload from the messages. “Now it’s automatic,” Fluin said. “It’s easier and smaller, we’ve reduced the size of the file you need to add to your app. We made it more powerful; We can use things like generics, and you can type the things coming back from the server or do interceptors to modify and intercept everything going out.

Fluin said this helps to keep server responses coherent and easier to work with. “When I make an HTTP get call I can say, ‘Hey, I know what I’m going to get back from the server. It will look like this, have this structure, this array, these are numbers, these are strings…’ I can give it an interface for a class and TypeScript will assume I’m getting back data for that class,” said Fluin.

The command line interface for Angular has been maturing along with the platform itself, said Fluin. “When we issued the CLI, we wanted to help developers get started who didn’t want to do the manual stuff on their own. It’s become the dominant way people get started with the Angular,” said Fluin.

One of the ways the team has improved the CLI is by breaking it out into its own project known as the Angular Development Kit. “The first version of the CLI we shipped had everything it could do in a single code base, from scaffolding new projects to modifying projects with new content, to building and deploying production bundles. We have a huge number of enterprises where they need to tweak one thing or customize the build into their tooling. We’ve started taking the wisdom in the CLI and pulling that out into individually consumable packages. Most people can use the CLI, but tooling vendors can now hook into just a piece of it,” said Fluin.

The Google Way

Fluin said that the future of the Angular platform may include a few internal Google tools, though he notes that this is still just in the consideration phase. “We want to take the best of what it’s like to be a developer at Google and empower the public to use that,” said Fluin.

Specifically, he said that the Angular team would like to bring the way Google builds software to the masses. This would be somehow replicating Angular, Bazel, and Closure. Bazel is the popular internal build system at Google, which can output quickly to multiple build targets. Closure is Google’s JavaScript compiler, which has been in the works at Google for 10 years. Fluin said Closure can even achieve single level tree shaking.

This dovetails with the Build Optimizer, which has been turned on by default in Angular 5.0.0. “The build optimizer is a tool included in our CLI for making your bundles smaller using our semantic understanding of your Angular application,” Fluin wrote in a blog post.

All of this would combine to help make Angular more modular overall. The end goal, said Fluin, is to enable Angular Elements, a system by which individual Angular components could be exported along with applications. This would allow developers who don’t use Angular at all to embed Angular functionality into the JavaScript applications by copying and pasting the needed code, instead of having to include the entire Angular distribution into their application.

Elsewhere in this release, the Angular Universal State Transfer API was introduced. As Fluin wrote, “Angular Universal is a project focused on helping developers to perform server-side rendering (SSR) of Angular applications. By rendering your Angular applications on the server and then bootstrapping on top of the generated HTML, you can add support for scrapers and crawlers that don’t support JavaScript, and you can increase the perceived performance of your application.”

Fluin said that the original vision of Angular 1 is still in existence today as a core motivator for the team. “If you look back to 2009, Angular was really trying to design a way of developing. If we could redesign how browsers worked back then, this is what we’d want application development to look like,” said Fluin.

“We’re pushing that forward. We’re actually a much simpler framework than we were before. It’s simpler than it used to be. We’re far more reliant on the modern web,” said Fluin. And that, he added, is what’s changed the most since Angular was created: the web and the browser.

“I think what happened was, probably about 2.5 to 3 years ago, the modern web started coming around. We started having typing systems, build systems, and all the intermediate steps that made development harder, but better. By embracing these and building on them, we’ve really rewarded a lot of developers,” said Fluin.

Google is a sponsor of InApps.