Academind Logo

Angular in 2019 & Beyond

A thorough look at how Angular will do in 2019 and beyond. Will React win?

Created by Maximilian Schwarzmüller

How will Angular do in 2019 and thereafter? Is it still relevant? Will it be relevant next year? Does React win? Is Angular the best framework to learn? Let's dive into all these questions!

#

What's good about Angular?

Angular is an amazing and very popular framework. There are thousands of developers who are using it and an equal amount of job postings. AngularJS was (and actually still is) very popular and so is its successor, Angular.

Angular allows you to build highly reactive, beautiful, high-perfomance user interfaces in a declarative manner. Rather than writing instructions on how to manipulate the DOM under a certain circumstance, you instead describe the ending state you want, you add your business logic and you're done.

Angular embraces components as the core building block and it combines them with useful features like services and dependency injection, directives, built-in form validation, routing and http services.

If you want to learn all about Angular (from scratch!), my bestselling and highly rated course is the best resource you can take.

#

What's bad about Angular?

Even though Angular has many great features, it also has disadvantages/ issues.

I'd argue, that there are two main problems:

  1. The size of the built application (i.e. the bundle size in kbs)

  2. The complexity of Angular, especially when getting started with it

Regarding 2), my course should be helpful - it's built such that it makes getting started with Angular really easy. I've taught thousands of students and it should definitely reduce the complexity of Angular for you.

But even if you're not taking my course (how dare you? ;-)), Angular might be less complex than you think. React and Vue.js might be a bit easier to get started with (also because your first project doesn't come with dozens of files) but as soon as you dig deeper, you'll recognize that these frameworks/ libraries have their own complexities.

Building great apps is never easy and whilst seeing an Angular project for the first time might be a bit overwhelming, you'll quickly love the structure and set of rules Angular gives you.

Problem 1) is of course a thing - especially if you're targeting users with slower internet. If your bundle is too big, it simply takes longer to load and therefore your app takes longer to start. That's not ideal.

This is the output for a brand-new, CLI-generated app with no changes (i.e. no fancy features):

Angular produces quite big bundles

Compare that to a simple React project:

React produces a smaller app

That is significantly smaller (you can ignore the .map file).

And there are ways, of producing even smaller bundles. Vue.js spits out smaller bundles, Preact.js does so, too.

In many cases, this might not matter - think of internal applications running in a company network.

But in other cases, it does matter. And therefore, reducing the size of Angular apps definitely is important.

#

What will change in 2019?

In 2019, the focus of the Angular team clearly is on improving the bundle size and runtime performance. With Ivy, the Angular team is re-building the underlying renderer Angular uses.

The renderer is typically invisible to you but it actually is the heart of the framework. It's the part that is responsible for taking your instructions (your templates, your component code etc) and rendering them to the browser DOM.

Of course this rendering has to happen in an error-free and extremely fast way.

This task is all but trivial since the rendering engine should of course be relatively lean. Put in other words: If your app only renders

<h1>Hello World!</h1>

to the screen, then the rendering instructions shouldn't be much more than:

targetElement.innerHTML = '<h1>Hello World!</h1>'

That's of course oversimplified, but it is the general direction the Angular team is aiming for.

Therefore, consistent tuning of that engine makes sense and the complete re-write with Ivy is planned to yield very small yet efficient rendering instructions.

Besides Ivy, the Angular team is also working on other performance improvements.

For example, they're planning to use Bazel as a CLI build-tool. That might provide a way of reducing the bundle size even further since it removes unused features from the final output.

The goal is to produce smaller bundles (i.e. ship less code) that only include features your app actually uses. Combine that with a smaller rendering engine and you have quite a nice package.

For a very simple "Hello World" app, the bundle size will therefore shrink to < 10kbs. At the moment, such an app brings > 100kb to the table (see screenshot above).

In addition, the Angular team is working on a couple of other initiatives that should bring down app sizes (e.g. conditional loading of polyfills).

#

What might change in 2020?

I'd expect that the Angular team keeps on working on the 2019 goals: Performance and size improvements.

But maybe, we also see some API additions, some deprecations and some removals (of already deprecated features). But in general, I'd not expect large API changes for the year 2020.

Thereafter, Angular will of course continue to evolve. The Angular team clearly wants to avoid complete rewrites like the Angular 1 to Angular 2 one.

But minor enhancements, new features (like the new HttpClient that was added in 2017), alternative APIs (maybe an alternative way of building components - leveraging Ivy?) and related things are definitely to be expected. And that is a good thing - it keeps the framework up-to-date, embraces new web standards and possibilities and ensures that Angular has a great future.

Besides the work on Angular itself, it'll also be interesting to see how the whole Angular ecosystem evolves.

Frameworks and tools like Ionic or NativeScript are pretty amazing since they allow you to build real native mobile apps with Angular. Libraries like Angular Material make it easy to build beautiful web apps with a set of pre-built components.

I'm sure, we'll see more packages and initiatives like this in the coming years!

#

Summary

I do strongly believe in an amazing future for Angular!

Of course React and Vue are there to stay but the frontend web dev market also has room for more than one framework.

And Angular is doing many things right. It's already offering a thorough and powerful set of features. With size improvements, it also gets rid of its biggest issue.

There probably never was a better time to dive into Angular :-)

Recommended Courses