Avec Angular, une PWA en 10 étapes

Publié le

Je vous montre par la pratique que, contrairement à ce qu’on entend, Angular n’est pas trop complexe.

(Cet article est disponible en Anglais sur Medium.)

Le sondage « L’état de JavaScript en 2018 » a créé un buzz concernant ses statistiques sur Angular : environ 30% des développeurs seraient supposés avoir déjà utilisé Angular, mais ne plus vouloir l’utiliser à nouveau, principalement car cela serait trop complexe.

Il paraît évident que le sondage est biaisé et qu’il peut être critiqué, mais nous devons faire face à une réalité : Angular a effectivement une mauvaise réputation, injustifiée mais réelle. Elle vient principalement d’avoir gardé le même nom qu’AngularJS (Angular v1) alors qu’il s’agit en réalité d’un framework différent, et d’avoir négligé la documentation par le passé.

Il s’agit juste d’erreurs de communication. Techniquement, Angular n’est pas trop complexe. J’avais déjà écrit un premier article « Angular c’est facile« , qui expliquait pourquoi le contraire est un mensonge. Mais les explications sont sujettes à interprétation, alors cette fois je vais le prouver avec des faits.

La démonstration

Voilà comment créer une Progressive Web App en 5 minutes et seulement 10 étapes avec Angular.

  1. En ayant installé Node, depuis un terminal, créer le projet avec :

Choisissez un nom pour le projet et dites oui (« y ») pour le routing.

2. Ouvrez le projet dans Visual Studio Code, puis dans le terminal intégré :

Un projet hello world est immédiatement opérationnel, avec un environnement complet de développement déjà configuré (autocomplétion, compilation, rafraîchissement automatique…).

3. Depuis un second terminal intégré, créez une première page :

4. Dans hello.component.ts, récupérez des données :

Vous avez juste à ajouter la propriété movies et à remplir la méthode ngOnInit, le reste est déjà préparé.

5. Dans hello.component.html, affichez les données :

6. Ajoutez une route pour votre page dans app-routing.module.ts:

7. Supprimer le contenu factice dans app.component.html, mais gardez <router-outlet> (c’est là que les pages seront affichées) :

8. Refaites simplement les étapes 3 à 6 pour chaque nouvelle page que vous souhaitez ajouter. Vous pouvez ensuite permettre la navigation entre les pages vie des liens :

9. Stoppez votre script de développement, et lancez maintenant ces commandes dans le terminal intégré :

Des optimisations poussées are sont faites automatiquement.

10. Copiez simplement les fichiers générés dans dist sur un serveur web.

C’est tout ! Vous avez une Progressive Web App opérationnelle.

11. Vous trouvez que ce n’est pas joli ? Prenez simplement une minute supplémentaire pour lancer la commande :

Dans app.module.ts, ajoutez MatCardModule:

Remplacer votre hello.component.html par:

Vous avez maintenant des composants d’interface éprouvés prêts à l’emploi.

Mises en perspective

Maintenant que la démonstration est faite qu’Angular n’est pas trop complexe (je défie quiconque de faire plus simple ou plus rapide avec React ou Vue), j’aimerais prendre du temps pour creuser un peu ce qui vient d’être montré.

Ce que nous avons obtenu

Aussi simples que furent les 10 étapes, nous avons déjà :

  • des environnements de travail prêts à l’emploi (développement, production, tests),
  • une syntaxe de composant propre,
  • une syntaxe de templating familière (calquée sur le standard JavaScript (for...of) et d’autres langages ({{}}),
  • un système de routing avec une configuration simple,
  • une Progressive Web App (service worker, manifest…),
  • en option, des composants d’interface éprouvés et prêts à l’emploi.

Ce que cela a nécessité

Pour obtenir tout cela, cela a-t-il nécessité:

  • Une connaissance avancée d’Angular ? Non, le seul concept est celui de composant.
  • Une connaissance de TypeScript ? Non.
  • Une connaissance de RxJS ? Non.
  • Ou même une connaissance avancée de JavaScript ? Non. Il y a seulement le concept central du développement front-end d’aujourd’hui : un Web Component.

N’importe quel développeur qui connaît JavaScript ou un autre langage (Java, C#, PHP…) peut comprendre le code ci-dessus.

A propos de “trop complexe”

Bien entendu, c’est une application très simple que nous avons créée, et une app réelle nécessiterait plus de travail. C’est justement où Angular fait la différence car il est évolutif.

Par exemple, récupérer les données directement dans le composant n’est pas une bonne pratique, même si cela fonctionne pour des cas simples. Un service aiderait à séparer les rôles et ainsi à améliorer la maintenabilité et l’évolutivité du code.

Donc non, Angular n’est pas « trop complexe ». C’est même le contraire : les outils et concepts additionnels d’Angular sont une force pour des applications réelles. Angular n’ajoute rien de superflu : chacune des fonctionnalités proposées répond à un problème réel que vous allez rencontrer, quel que soit le framework que vous choisissez.

A propos de “tout à la sauce Angular”

Ai-je utilisé le module HTTP d’Angular pour récupérer les données ? Non. Une autre idée répandue selon laquelle « une fois qu’on a choisi Angular, il faut tout faire à la sauce Angular » est donc également un mensonge.

Le plus drôle, c’est que même si cela était vrai, une nouvelle fois, c’est une force d’Angular : cela aurait en effet été plus facile de récupérer les données avec Angular (pas besoin de désérialiser le JSON) :

C’est justement le rôle et l’intérêt d’un framework : être aidé.

A propos de “ça casse souvent”

Encore un mensonge.

Depuis la version 2 d’Angular jusqu’à la version 7, seule une API importante a changé (le module HTTP). Hors d’une, nous venons de voir que c’est un module optionnel. De deux, l’API a changé dans la version 4 et l’ancienne était toujours là et opérationnelle dans Angular 6. Cela laisse beaucoup de temps pour faire une migration qui est petite et facile.

Et depuis Angular 5, les migrations sont aussi simples que de lancer cette commande :

« Mais par rapport à AngularJS version 1 ? » Par pitié, une fois pour toute : AngularJS était un framework différent. Il est toujours maintenu et personne ne vous obligé à migrer, des milliers d’applications Angular JS tournent toujours très bien production. Il y a juste eu une erreur de communication en gardant le même nom pour le nouveau framework.

D’accord. OK. En effet. Cela fait 3 ans maintenant. On peut tourner la page maintenant ?

Pourquoi cette démonstration ?

Car j’ai testé à la fois React, Vue.js et Angular, et mon avis personnel est qu’Angular est à la fois le framework le plus puissant et le plus facile (l’exact contraire de l’idée répandue).

Je ne dis pas que React ou Vue.js ne sont pas de bons outils : chaque outil a des idées intéressantes, des avantages et des inconvénients, et le choix dépend de beaucoup de facteurs, qui varient d’un projet à l’autre.

Je trouve juste triste et injuste qu’Angular soit le seul outil qui ne soit pas jugé objectivement. Angular est un outil formidable rejeté par certains à cause de fausses affirmations, principalement dues à des erreurs de communication dans le passé.

Avis aux trolls : je ne soutiens pas Angular car c’est mon métier. C’est l’inverse. Je pourrais faire des formations React également, mais j’ai choisi de ne pas le faire.

Devenez un Pro!

Cet article vous a aidé ? Et vous voulez soutenir mes contributions open source (avec notamment un outil utilisé par 600 000 développeurs) ? Faites-vous une faveur à vous-même : Schematics Pro est un outil d’automatisation de code pour Angular, React, Vue et tous les autres frameworks JavaScript, qui vous fait gagner en productivité et vous aide à vous assurer du suivi des bonnes pratiques.

En savoir plus sur Schematics Pro

Découvrez la formation Angular