Angular, c'est facile ! | Formations JavaScript

Nous avons traduit pour vous l’article Medium de notre formateur contributeur : Angular c’est facile !

Beaucoup de personnes pensent qu’Angular est trop complexe et que les autres frameworks comme React ou Vue.js sont plus simples. Vraiment ?

Angular aujourd’hui : une Progressive Web App en 2 minutes

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

C’est tout. Vous avez une vraie application, qui fonctionne hors ligne.

Vous avez aussi directement (liste non exhaustive) :

un environnement de développement complet, sans configuration nécessaire,
un bundle de production ultra optimisé, sans configuration nécessaire,
un environnement de tests unitaires et e2e, sans configuration nécessaire,
tout ce qu’il faut pour créer une app : composants, injection de dépendances, routing, AJAX, gestion de l’état, etc., le tout dans une API officielle et homogène.

Ajoutez simplement :

ng add @angular/material

Et vous avez des composants d’UI officiels et prêts à l’emploi.

Vous pensez toujours qu’Angular est trop complexe ?

Problèmes passés

Soyons honnêtes : certains problèmes ont contribué à cette idée.

Versions d’Angular

Google ayant choisi de garder le même que la version 1, nous avons d’abord dû parler d’Angular 2 pour bien distinguer les deux versions. Mais maintenant, les gens se demandent pourquoi nous en sommes déjà la version 6.

Mais attendez un instant : quelle est la version de React ? 16. Est-ce que cela inquiète quelqu’un ? Non. C’est simplement ainsi que fonctionne le semantic versionning.

Maintenant, il faut dire Angular tout court, et la mise à jour d’Angular 2 à 4, et d’Angular 4 à 5 se fait sans difficulté en quelques minutes, comme dans n’importe quel autre framework. Et depuis Angular 6, les migrations sont complètement automatisées.

Documentation

Un manque de documentation n’aide pas à comprendre un outil. Mais le manuel d’Angular est désormais en bonne et due forme, et l’équipe officielle communique meux avec le nouveau blog Angular.

Les autres frameworks vous mentent

L’idée que les autres frameworks seraient plus simples qu’Angular vient d’une fausse promesse : ils vous montrent seulement une partie du tableau, mais vous n’aurez jamais une vraie application seulement avec ce qu’ils vous présentent au début.

Angular, lui, est honnête : il inclut tout ce dont vous aurez besoin pour créer une app. Et rien n’est superflu.

Vue.js

Vue.js est le meilleur exemple de cela. Il est présenté comme très simple car il suffirait juste de faire ça :

<div id="app">{{ message }}</div>

view raw
template.vue
hosted with ❤ by GitHub

let app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
});

view raw
vue.js
hosted with ❤ by GitHub

Super. Est-ce qu’un composant, ou même plusieurs, suffisent à faire une application ? Non.

Vous aurez besoin du routing, de l’injection de dépendances, de l’AJAX, etc. Comme une app ne peut tolérer aucune erreur (ou elle plantera), vous aurez aussi besoin d’un outil pour éviter les erreurs (comme TypeScript). Vous aurez des centaines de composants, vous devrez donc vous organiser en programmation orientée objet.

Regardons donc un exemple réel de Vue.js :

import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
 template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
 message = 'Hello!'
 onClick () {
 console.log(this.message)
 }
}

view raw
vue.ts
hosted with ❤ by GitHub

Cela vous semble familier ? Oui, c’est exactement comme Angular. En fait, la syntaxe d’Angular est même un peu plus simple.

React

Il en va de même pour React :

ReactDOM.render(
 <h1>Hello world!</h1>,
 document.getElementById('root')
);

view raw
react.js
hosted with ❤ by GitHub

Est-ce une application ? Non. Vous pensez que Facebook construit Facebook seulement avec React ? Non.

Vous aurez besoin du routing, de l’injection de dépendances, de l’AJAX, etc. Et contrairement à Angular ou Vue.js, cela n’est pas inclus. Vous devrez trouver des librairies complémentaires par vous-même.

Vous devrez aussi gérer l’état de votre application. C’est là que Redux débarque. A partir de là, React n’est plus du tout simple. En réalité, cela devient même beaucoup plus compliqué qu’Angular.

Et pensez-vous que Facebook développe en pur JavaScript ? Non. Ils utilisent Flow, un outil de typage statique équivalent à TypeScript.

Et vous devrez combiner et configurer tout cela par vous-même.

Donc, clairement : non, React n’est pas plus simple qu’Angular.

Les outils modernes et efficaces d’Angular

En conditions réelles, je vais même affirmer qu’Angular est plus simple que les autres frameworks.

Pourquoi ? En raison des choix d’outils modernes qu’Angular a fait : l’ES6+, TypeScript et RxJS. Ces outils sont tous là pour une bonne raison.

Par exemple, TypeScript n’est pas un choix subjectif : comme une application dépend entièrement du JavaScript, nous ne pouvons plus coder sans gestion des erreurs comme nous le faisions quand nous faisions des animations avec jQuery. Une seule erreur peut faire planter l’application, un outil de gestion des erreurs est donc nécessaire, ce n’est pas juste une fantaisie de la part de Google. Encore une fois, Facebook utilise aussi un outil équivalent. Tous/tes les dévelopeurs/ses que j’ai rencontrés/ées ont adoré TypeScript quand ils/elles l’ont découvert.

De même pour RxJS : oui, ce n’est pas une librairie très simple, mais c’est parce qu’elle est là pour simplifier l’aspect le plus difficile de JavaScript : l’asynchronicité. Allez faire un peu de Redux, l’approche alternative à ce problème dans React, et vous reviendrez en courant vers RxJS et trouverez que finalement ce n’est pas si compliqué que cela.

Que cela nous plaise ou non, la facilité de l’époque jQuery est terminée. Les applications nécessitent que JavaScript passe à un niveau framework. Oui, c’est plus difficile, mais c’est nécessaire.

Bienvenue aux développeurs/ses PHP, Java et C#

Enfin, le point le plus important : grâce à ces outils, Angular est très proche de Java, C# ou de PHP en OOP :

import { Component } from '@angular/core';
@Component({
 selector: 'my-component',
 template: `<h1>{{title}}</h1>`
})
export class MyComponent {
 title = `Hello world`;
}

view raw
angular.ts
hosted with ❤ by GitHub

Je pense que c’est un point essentiel, mais qui est négligé par l’élite JavaScript. La plupart des développeurs ne sont pas des experts JavaScript : ce sont des développeurs back-end codant en PHP, ou des ingénieurs logiciels codant en Java, C# ou un équivalent.

Il est vraiment plus simple pour un développeur PHP / Java / C# de basculer sur Angular que sur React.

Cela va même plus loin : c’est grâce à Angular qu’ils basculent sur JavaScript. J’ai rencontré beaucoup de développeurs Java, qui évitaient JavaScript depuis longtemps, et qui maintenant disent :

“OK, avec outils comme Angular, JavaScript est maintenant assez mature et nous pouvons le prendre au sérieux.”

Et c’est seulement le début : le monde du logiciel basculant en web, et de plus en plus de sites web et d’applications natives basculant en Progressive Web Apps, il va y avoir une arrivée massive de développeurs venant d’un autre monde.

Angular Elements

Un avantage des autres frameworks comme React ou Vue.js est lorsque vous n’avez pas besoin de créer une application en entier, mais seulement quelques composants.

C’est maintenant possible aussi avec Angular Elements. Cela va même plus loin : les composants créés avec cet outil sont des Web Components natifs, permettant de les réutiliser ailleurs, même hors Angular.

Avertissement et conclusion

Comme tout article qui ressemble à « Framework A contre framework B », j’imagine que cela va provoquer un débat intense et des réactions virulentes de personnes préférant un autre framework, mais je ne répondrai pas aux commentaires de cette nature. Cet article n’est pas là pour dire que « X est meilleur que Y ». Chaque outil a ses avantages et ses inconvénients. Chaque personne qui contribue à un outil open source quel qu’il soit fait un super travail. Ce n’est pas le sujet.

Cet article consiste seulement d’ajouter une autre perspective dans le monde JavaScript, qui me semble importante mais qui est souvent négligée dans ce que je peux lire ici ou là. Il ne s’agit pas d’un avis idéologique (je supporte Firefox ;), cela vient de mon expérience et des retours des centaines développeurs/ses que je rencontre à travers mon job de formateur JavaScript. Vous avez peut-être un avis différent, et c’est OK, il n’est pas nécessaire de se battre.

Si vous n’êtes pas convaincu/e, un second article vous le montre par la pratique en créant une Progressive Web App avec Angular en seulement 10 étapes.

Découvrez notre formation Angular, animée par l’auteur de cet article !

	let app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	}
	});

	import Vue from 'vue';
	import Component from 'vue-class-component';

	@Component({
	template: '<button @click="onClick">Click!</button>'
	})
	export default class MyComponent extends Vue {

	message = 'Hello!'

	onClick () {
	console.log(this.message)
	}

	}

	ReactDOM.render(
	<h1>Hello world!</h1>,
	document.getElementById('root')
	);

	import { Component } from '@angular/core';

	@Component({
	selector: 'my-component',
	template: `<h1>{{title}}</h1>`
	})
	export class MyComponent {

	title = `Hello world`;

	}

Angular, c’est facile !