Angular is easy — Part 2: the demonstration

The 2018 State of JavaScript survey initiated a buzz about its Angular stats: about 30% of users are supposed to have used Angular, but would not use it again, mainly because it is supposed to be “bloated and complex”.

The bias of the survey seems obvious and can be discussed, but we should face a reality: Angular indeed have a bad reputation — undeserved but real. It comes from having kept the same name as AngularJS (Angular v1) while it’s in fact a different framework, and having neglected the documentation at the beginning.

Those were just communication errors. Technically, Angular is not “bloated and complex”. I already wrote a first “Angular is easy” post which explained why the contrary is a false assertion. But explanations are subject to interpretations, so this time I’ll prove it with facts.

A French version of this article is available here.

The demonstration

  1. Having Node installed, from a terminal, create the project with:

Choose a project name and say yes to routing.

2. Open the project in Visual Studio Code, then in the integrated terminal:

A hello word project is immediately operational, with a full development environment already configured (autocompletion, compilation, live reload…).

3. From a second integrated terminal, create a first page:

4. Inside hello.component.ts, fetch some data:

You only have to add the movies property and fill the ngOnInit method, the rest have already been prepared.

5. In hello.component.html, display the data:

6. Add a route for your page in app-routing.module.ts:

7. Remove the hello world boilerplate in app.component.html, but keep the <router-outlet> (it’s where your page components will be displayed):

8. Just redo steps 3 to 6 for each new page you want to add. You can manage navigation between them with links:

9. Kill your dev script, and now run in the integrated terminal:

Agressive optimizations are done.

10. Just put the files generated in dist on a web server.

Done! You have an operational Progressive Web App.

11. Looks bad? Just take one more minute to run:

In app.module.ts, add the MatCardModule:

Replace your hello.component.html by:

Ready-to-use proven and well-tested UI components!

Some perspective

What we got

  • ready-to-use environments (development, production, testing),
  • a clean component syntax,
  • a familiar templating syntax (patterned on standard JavaScript (for...of) and other languages ({{}})),
  • a routing system with really easy configuration,
  • a Progressive Web App (service worker, manifest…),
  • optionally, ready-to-use proven and well-tested UI components.

What it required

  • Advanced Angular knowledge? No. There’s quite just a component.
  • TypeScript knowledge? No.
  • RxJS knowledge? No.
  • Even advanced JavaScript knowledge? No. Just the core concept of today’s front-end development : a Web Component.

Anyone knowing JavaScript or another language (Java, C#, PHP…) can understand the code above.

About “bloated”

For example, fetching the data directly inside the component is not the best practice, even if it works for simple cases. A service would help to separate responsibilities and thus improve maintainability and scalability.

So no, Angular is not “bloated” either, it’s the contrary: additional tools and concepts in Angular are a strength for real-world apps. Angular has nothing superfluous, every single feature answers to an actual problem you’ll have to face, regardless of the framework you choose.

About “everything in the Angular-way”

What’s funny is that, even if it was true, again, it is in fact a strength of Angular: it would have been easier to fetch the data with Angular (no more JSON parsing):

As it’s the purpose and what’s interesting in a framework: being helped.

About “breaks often”

From Angular version 2 to version 7, only one important API has changed (HTTP requests). First, we saw it is an optional API. Second, it changed in version 4, and the old one was still operational in version 6. Lot of time to do a small and easy migration.

And since Angular 5, migrations are just as easy as:

“But what about AngularJS version 1?”. Please, for the last time: AngularJS was a different framework. It’s still maintained and nobody forced you to migrate, AngularJS apps still run very well in production. They just did a communication error by keeping the same name.

Right. OK. Indeed. It’s been 3 years. Can we move on now?

Why this demonstration?

Not saying that React or Vue.js are bad: every tool has interesting ideas, pros and cons, and the choice depends on a lot of factors which are different from people to people, and from project to project.

It’s just sad and unfair that Angular is the only one not being judged objectively. Angular is an awesome tool rejected because of false assertions, mainly due to past communication errors.

By the same author

Note for trolls: again, I don’t promote Angular because it’s my job, I could do React trainings too, but I choose not to. ;)

JavaScript and Angular trainer, PHP certified, @formationjs