Remplacer jQuery, oui mais par quel framework? React, Vue ou Angular? Présentation d’Angular

Introduction

Les frameworks du moment sont React, Vue et Angular. Comme jQuery est sympa mais finalement vite inadapté aux gros projets, je cherche un remplaçant qui permettra à la fois d’apporter de la structure et d’être productif.

Présentation rapide

Selon le site officiel, Angular propose les fonctionnalités suivantes:

  • Progressive Web App
  • Application mobile avec Apache Cordova (cœur sur toi!) ou Ionic
  • Application Desktop Linux, Mac et Windows
  • Compilation des templates
  • Command Line Interface
  • Tests avec Karma

C’est plutôt prometteur!

Installation

Angular nécessite npm et TypeScript. L’installation de TypeScript se fait via npm:

1
sudo npm install -g typescript

Puis il faut installer le “Command Line Interface” Angular, toujours avec npm:

1
sudo npm install -g @angular/cli

Hint! si Angular ne s’installe pas, il faut mettre à jour Node.js avec les commandes suivantes:

1
2
3
4
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo -E env "PATH=$PATH" n stable

Premier projet

La création d’un projet se fait de la manière suivante: d’abord il faut se placer dans le dossier qui contiendra les projets puis il faut lancer la commande suivante

1
ng new hello-world

Il faut répondre à deux questions:

1
? Would you like to add Angular routing? (y/N)

Ici il faut choisir avec ou sans routage. Dans le cas d’une simple page, le routage est inutile. Autrement il vaut mieux accepter.

1
2
3
4
5
? Which stylesheet format would you like to use?
CSS
SCSS 
❯ Sass 
Less

Il faut maintenant choisir le pré-processeur CSS. J’ai choisi SASS au hasard mais les autres proposent des fonctionnalités équivalentes.

Et maintenant Angular commence la création du projet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
CREATE hello-world/README.md (1056 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (604 bytes)
CREATE hello-world/angular.json (3237 bytes)
CREATE hello-world/package.json (1073 bytes)
CREATE hello-world/tsconfig.json (783 bytes)
CREATE hello-world/.browserslistrc (703 bytes)
CREATE hello-world/karma.conf.js (1428 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2820 bytes)
CREATE hello-world/src/styles.sass (80 bytes)
CREATE hello-world/src/test.ts (788 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (658 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.sass (0 bytes)
CREATE hello-world/src/app/app.component.html (24617 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1088 bytes)
CREATE hello-world/src/app/app.component.ts (216 bytes)✔ Packages installed successfull

Pour le fun, combien pèse une appli presque vide? Réponse:

1
2
3
du -hcs hello-world/
560M hello-world/
560M total

Oui, plus d’un demi gigaoctet. Rien que ça.

Maintenant on peut vérifier que l’application fonctionne (pour 560Mo, ça me paraît le minimum syndical)

1
2
cd hello-world/
ng serve 

La console affiche alors une série d’informations sur la compilation de l’application:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
⠋ Generating browser application bundles (phase: setup)…Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.39 MB
polyfills.js | polyfills | 128.50 kB
main.js | main | 56.80 kB
runtime.js | runtime | 6.62 kB
styles.css | styles | 1.18 kB
| Initial Total |   2.58 MB
Build at: 2021-10-03T10:53:09.077Z - Hash: 4042cc4465221dde2cf3 - Time: 56392ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
✔ Browser application bundle generation complete.
5 unchanged chunks
Build at: 2021-10-03T10:53:10.599Z - Hash: 8f934ca8d6af523d46dd - Time: 821ms
✔ Compiled successfully.

Puis on peut se connecter à l’url http://localhost:4200 et on peut admirer une première page!

Hello world

Hello world

Ici l’application fonctionne avec le serveur Angular (un dérivé de node.js). Voyons voir comment le faire fonctionner dans TomEE.

Compilation pour la production

Il faut d’abord lancer la compilation finale du projet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
ng build --watch
✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.7a36a5bc1c7bc326f66a.js      | main          | 214.71 kB
polyfills.c29b209257690e6334ee.js | polyfills     |  36.20 kB
runtime.d1559079857d4eba027f.js   | runtime       |   1.03 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 251.94 kB

Build at: 2021-10-10T06:51:06.655Z - Hash: 387ce4c8e2bf469fbf81 - Time: 36379ms

Dans le dossier hello-world/dist/hello-world, on retrouve le projet compilé.

Projet compilé

Projet compilé

Ensuite, j’ai copié le contenu de ce dossier dans le dossier webapps de TomEE. Et magie! Rien ne se passe, les fichiers Javascript ne sont pas trouvables à cause du tag “base href” qui point sur / alors que l’application est déployée dans /hello.

Hello world ne fonctionne pas dans TomEE

Hello world ne fonctionne pas dans TomEE

Debugger: impossible de trouver les javascript

Debugger: impossible de trouver les javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css">
  </head>
  <body>
    <app-root></app-root>
    <script src="runtime.d1559079857d4eba027f.js" defer></script>
    <script src="polyfills.c29b209257690e6334ee.js" defer></script>
    <script src="main.7a36a5bc1c7bc326f66a.js" defer></script>
  </body>
</html>

Il faut relancer la compilation avec l’option “–base-href”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
ng build --watch --base-href /hello/
✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.7a36a5bc1c7bc326f66a.js      | main          | 214.71 kB
polyfills.c29b209257690e6334ee.js | polyfills     |  36.20 kB
runtime.d1559079857d4eba027f.js   | runtime       |   1.03 kB
styles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes

                                  | Initial Total | 251.94 kB

Build at: 2021-10-10T07:06:55.088Z - Hash: 387ce4c8e2bf469fbf81 - Time: 28644ms

Cette fois, le HTML est correct, le base href pointe bien sur /hello/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/hello/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.d1559079857d4eba027f.js" defer></script><script src="polyfills.c29b209257690e6334ee.js" defer></script><script src="main.7a36a5bc1c7bc326f66a.js" defer></script>

</body></html>

TomEE sert la page correctement:

Hello world fonctionne dans TomEE

Hello world fonctionne dans TomEE

Conclusion

A ce stade, le bilan est mitigé: les concepts proposés ont l’air sympa (reste à voir la productivité) mais le recours au CLI pour compiler est, à mon sens, un peu lourd. Dans les prochains articles, on verra comment réaliser deux composants (page d’accueil et page de login) puis intégrer les appels CLI avec IntelliJ dans un processus de compilation en webapp.