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
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
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é
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
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
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.
C’est par ici