Angular is easy — Part 1: the theory

Many people think Angular is too complex and other frameworks like React or Vue.js are easier. Think again.

Angular today: a Progressive Web App in 2 minutes

npm install @angular/cli -g
ng new myapp --routing
cd myapp
ng add @angular/pwa
ng build --prod

That’s it. You have a real web app, working offline.

You also have out of the box (non-exhaustive list):

• a full development environment, without configuration needed,
• an ultra optimized production bundle, without configuration needed,
• an e2e & unit tests environment, without configuration needed,
• all what you need to create an app: components, dependency injection, routing, AJAX, state management, and so on, all in an official and homogeneous API.

Just add:

ng add @angular/material

and you now have official and ready-to-use UI components.

Still think Angular is too complex?

Past issues

Let’s be honest: there were some issues contributing to this idea.

Angular versioning

As Google chose to keep the same name from version 1, we had first to speak about Angular 2 to discern versions. So now, many people don’t understand why Angular 6is already released.

But wait : what is the version of React? 16. Does anyone worry about this? No. It’s just how semantic versionning works.

So now it’s just Angular, and upgrades from Angular 2 to 4, and from Angular 4 to 5 are ultra smooth and usually just take a few minutes, as in any other framework. And since Angular 6, migrations are fully automated.

Documentation

Lack of documentation doesn’t help to understand a tool. The Angular documentation is now in good shape and the official team communicate more with the new Angular blog.

Other frameworks are lying to you

The idea that other frameworks are easier than Angular is built on a false promise: they just show you a small part of the whole picture. But you won’t get a real app with only what they present to you first.

Angular is honest : it includes all what you’ll need to do an app. And nothing is superfluous.

Vue.js

Vue.js is the better example of this. It’s presented as super easy as you would just have to do this:

Great. Does one, or even multiple components are an app? No.

You’ll need routing, dependency injection, AJAX and so on. As an app can’t tolerate any error (or it will crash), you’ll also need a tool to avoid errors (like TypeScript). You’ll also have hundred of components, so you’ll have to organize with oriented object programmation.

So let’s look at a real world Vue.js example:

Looks familiar? Yes, it’s exactly like Angular. In fact, Angular syntax is a little easier.

React

Same goes for React:

Is it an app? No. Do you think Facebook is built with React only? No.

You’ll need routing, dependency injection, AJAX and so on. And contrary to Vue.js and Angular, they are not included. You’ll have to find other libraries by yourself.

You’ll also need state management. And here goes Redux. At that point, React is not easy anymore. In fact, it’s far more complex to manage this problem in React than in Angular.

And do you think Facebook developers code in simple JavaScript? No. They use Flow, a static typing tool equivalent to TypeScript.

And you’ll have to put together and configure all of this by yourself.

So, definitively : no, React is not easier than Angular.

Modern and efficient tools in Angular

In this real world perspective, I’m even telling that Angular is easier than other frameworks.

Why? Because of the modern tooling choices Angular has made: ES6+, TypeScript and RxJS. These tools are all here for a good reason.

For example, TypeScript is not an opiniated choice: as a web app relies on JavaScript, we can’t code anymore without any error management like when we were doing animations with jQuery. Just one error can crash your app, so an error management tool is necessary, it’s not just a Google fantasy. Again, Facebook uses a similar tool. All the developers I’ve met where in love with TypeScript once they discovered it.

Same goes for RxJS: yes, it’s not a super easy library, because it’s about the most difficult aspect of JavaScript: asynchronicity. But it’s here to simplify it. For small and medium apps, you can easily manage state with just RxJS, while in React you would directly go to Redux, compared to what you’ll find RxJS easy after all.

So, like it or not, the easiness of the jQuery era is over. Apps require JavaScript to upgrade to a framework level. Yes, it’s more difficult, but it’s necessary.

Welcome to PHP, Java and C# developers

Finally, the most important point: because of these tools, Angular is very similar to Java, C# or OOP PHP:

I think it’s important but overlooked by the JavaScript elite. Most developers are not JavaScript experts: they are either back-end web developers coding in PHP, or software engineers coding in Java, C# or equivalent.

It is really easier for PHP / Java / C# developers to switch to Angular than to switch to React.

It goes even further: Angular is what make them switch to JavaScript. I’ve met a lot of Java developers, who where avoiding JavaScript from a long time, and now they say:

“OK, with tools like Angular, JavaScript is mature enough and can be taken seriously”.

And it’s just the beginning: as software is switching to web, and as more and more websites and native apps are switching to Progressive Web Apps, there will be a huge wave of developers coming from another world.

Angular Elements

One advantage of other frameworks like React or Vue.js is when you don’t have to create a full app but just some components.

It is now possible too with Angular Elements. It even goes further as components created with this are just native Web Components, and so reusable in non Angular apps.

Warning and conclusion

Like any post looking like “Framework A vs. framework B”, I suppose it will provoke an intense debate and strong reactions from people who prefer another framework, but I won’t answser to such comments. This post is not here to tell “X is better than Y”. Each tool has a different approach with advantages and disadvantages. Each person contributing to any project does a great job. That’s not the point.

This post is just about adding another perspective to the JavaScript world, which I think is important but missing from many things I’ve read. It’s not an ideological opinion (I support Firefox ;), it’s from experience: my own, and from all the feedback coming from my job as a JS trainer and the hundreds of developers I met. You may have another opinion, and that’s fine, no need to fight.

The demonstration

For a practical demonstration, I’ve written a second post, “Angular is easy — Part 2: the demonstration”, where I show how to build a Progressive Web App with Angular in only 5 minutes and 10 steps.

Angular Schematics

If you want to save time when creating new components, services and else, give a try to my Angular Schematics extension for Visual Studio Code, installed nearly 1 million times.