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.
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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app">{{ message }}</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let app = new Vue({ | |
el: '#app', | |
data: { | |
message: 'Hello Vue!' | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
} | |
} |
React
Il en va de même pour React :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ReactDOM.render( | |
<h1>Hello world!</h1>, | |
document.getElementById('root') | |
); |
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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
@Component({ | |
selector: 'my-component', | |
template: `<h1>{{title}}</h1>` | |
}) | |
export class MyComponent { | |
title = `Hello world`; | |
} |
“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.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 notre formation Angular, animée par l’auteur de cet article !