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.
The demonstration
Here’s how to create a Progressive Web App in 5 minutes and only 10 steps with Angular.
- 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
Now the blazing demonstration that Angular is not complex is done (I challenge anyone to do quicker and simpler with React or Vue.js — that’s rhetoric, please don’t troll in comments), I want to take some time to dig into what was showed.
What we got
As simple as the steps were, we already have:
- 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
For all of this, did it implied:
- 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”
Of course, it’s a very simple app we built, and a real one would need more work. That’s were Angular becomes even better because it scales.
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”
Did I use the HTTP module of Angular to fetch the data? No. So another widespread idea that “once you choose Angular, you have to do everything in an Angular-way” is also a lie.
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”
Also a false assertion.
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?
Because I tested both React, Vue.js and Angular, and as a personal opinion, I think Angular is both the most powerful and the easier (so the exact contrary of what the survey tends to show).
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.
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.
