Et si on comparait deux frameworks en créant la même page d’accueil? Angular vs Svelte, c’est parti!
Introduction#
Dans le deuxième épisode Angular, j’avais réalisé une première page et trouvé cela à la fois bien organisé et en même temps lourd à manipuler et maintenir (je ne suis toujours pas remis du coup des pictogrammes). Du coup, je me suis demandé ce que Svelte pouvait faire dans une situation similaire. Éléments de réponse.
Préparer le projet#
Pour créer un projet avec Svelte, le plus simple est de cloner l’application d’exemple avec la commande:
1
| npx degit sveltejs/template ged12
|
NPX répond finalement ceci:
1
2
| npx: installed 1 in 1.479s
> cloned sveltejs/template#HEAD to ged12
|
Ensuite, il faut aller dans le dossier ged12/ puis installer les dépendances avec les commandes:
Après quelques instants, NPM répond ce qui suit:
1
2
3
4
5
6
7
8
9
10
| npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/rollup/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 96 packages from 126 contributors and audited 97 packages in 7.434s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
|
(Note: on est content de savoir qu’il n’y a pas de vulnérabilités. Pas comme avec Angular).
Ensuite, on lance le serveur NPM avec un petit npm run dev qui répond ceci:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| > svelte-app@1.0.0 dev /....../ged12
> rollup -c -w
rollup v2.58.0
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 1.3s
[2021-10-24 11:34:20] waiting for changes...
> svelte-app@1.0.0 start /....../ged12
> sirv public --no-clear "--dev"
Your application is ready~! 🚀
- Local: http://localhost:5000
- Network: Add `--host` to expose
────────────────── LOGS ──────────────────
|
Voilà, on peut ouvrir un browser à l’adresse http://localhost:5000 pour admirer le résultat suivant:
Page par défaut
Customiser la page d’accueil#
Pour customiser la page d’accueil, je vais ajouter Bulma puis FontAwesome à ma page dont le code de base est le suivant:
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
26
27
28
29
30
31
| <div class="dark-wrapper">
<section class="hero is-fullheight is-transparent">
<div class="hero-head">
</div>
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5 landing-caption">
<h1 class="title is-1 is-light is-semibold is-spaced main-title">HomeGED</h1>
<h2 class="subtitle is-6 is-light is-thin">Organiser facilement vos documents</h2>
<p>
<a class="button is-primary is-fat is-bold is-rounded" tabindex=-1>Connexion <i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
<a class="button is-fat is-bold is-rounded" tabindex=-2>Inscription <i class="fas fa-user" aria-hidden="true"></i></a>
</p>
</div>
<div class="column is-7">
<figure class="image">
<img src="project/page-home/home.jpg" alt="Librairie par Giammarco" class="ged-home-illu">
</figure>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<div class="tabs is-centered">
</div>
</div>
</div>
</section>
</div>
|
Au préalable, j’ai bien sûr ajouté mon image home.jpg dans le dossier public/project/page-home.
Ajouter Bulma#
J’ai copié les ressources Bulma dans le dossier public/ du projet. Ensuite, il faut modifier la page public/index.html comme suit (modifications en bleu):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>HomeGED</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/bulma/css/bulma.min.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
|
Ensuite, j’ai modifié le fichier src/App.svelte pour ajouter ma page de base. J’ai remplacé le contenu du tag main par mon code puis j’ai ajouté le style de l’image dans le tag style. Le contenu du fichier est alors le suivant:
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <script>
export let name;
</script>
<main>
<div class="dark-wrapper">
<section class="hero is-fullheight is-transparent">
<div class="hero-head">
</div>
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5 landing-caption">
<h1 class="title is-1 is-light is-semibold is-spaced main-title">HomeGED</h1>
<h2 class="subtitle is-6 is-light is-thin">Organiser facilement vos documents</h2>
<p>
<a class="button is-primary is-fat is-bold is-rounded" tabindex=-1>Connexion <i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
<a class="button is-fat is-bold is-rounded" tabindex=-2>Inscription <i class="fas fa-user" aria-hidden="true"></i></a>
</p>
</div>
<div class="column is-7">
<figure class="image">
<img src="project/page-home/home.jpg" alt="Librairie par Giammarco" class="ged-home-illu">
</figure>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<div class="tabs is-centered">
</div>
</div>
</div>
</section>
</div>
</main>
<style>
.ged-home-illu {
border: 1px solid #222222;
border-radius: 6px;
}
</style>
|
On relance le serveur NPM puis le navigateur affiche cette page:
Page d’accueil
Soyons honnêtes: à ce stade, j’en suis à moins de 10 minutes pour obtenir la première page. Et le projet pèse 51Mo (soit dix fois moins qu’avec Angular -je sais, le Go n’est plus très cher mais tout de même-).
Ajouter Font Awesome#
Ici, comme pour Bulma, j’ai copié les ressources FontAwesome dans le dossier public/ puis j’ai modifié le fichier public/index.html (modifications en bleu):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>HomeGED</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/bulma/css/bulma.css'>
<link rel='stylesheet' href='/fontawesome/css/fontawesome.min.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
|
Ensuite, du fait de l’organisation des fichiers imposée par Svelte, il faut tricher un peu. En effet, si on lie le fichier fontawesome/css/solid.min.css dans index.html, les icônes ne sont pas affichées. La raison est simple: les liens vers les fichiers de fontes (TTF, WOFF, etc) sont incorrects. Par défaut, ils ont cette forme: url("../webfonts/fa-solid-900.ttf"). Comme le serveur NPM cherche les fichiers dans le dossier public/, il va chercher le dossier webfonts/ au même niveau que public/ et donc ne rien trouver (puisque ce dossier est dans public/fontawesome). L’astuce est alors de ne pas utiliser le fichier fontawesome/css/solid.min.css mais d’ajouter au début du fichier public/global.css les lignes suivantes (en bleu, la modification importante):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("/fontawesome/webfonts/fa-solid-900.eot");
src:
url("/fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
url("/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
url("/fontawesome/webfonts/fa-solid-900.woff") format("woff"),
url("/fontawesome/webfonts/fa-solid-900.ttf") format("truetype"),
url("/fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa, .fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
|
On peut maintenant relancer le serveur NPM et constater que les icônes s’affichent:
Les icônes sont affichées
Validation HTML et Javascript#
Svelte propose une fonctionnalité intéressante puisque, lors de la compilation, une validation du HTML et du Javascript est réalisée. Par exemple, sur la page décrite dans cet article, Svelte va indiquer plusieurs problèmes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| (!) Plugin svelte: A11y: <a> element should have an href attribute
src/App.svelte
15: <h2 class="subtitle is-6 is-light is-thin">Organiser facilement vos documents</h2>
16: <p>
17: <a class="button is-primary is-fat is-bold is-rounded" tabindex=-1>Connexion <i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
^
18: <a class="button is-fat is-bold is-rounded" tabindex=-2>Inscription <i class="fas fa-user" aria-hidden="true"></i></a>
19: </p>
src/App.svelte
16: <p>
17: <a class="button is-primary is-fat is-bold is-rounded" tabindex=-1>Connexion <i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
18: <a class="button is-fat is-bold is-rounded" tabindex=-2>Inscription <i class="fas fa-user" aria-hidden="true"></i></a>
^
19: </p>
20: </div>
(!) Plugin svelte: App has unused export property 'name'. If it is for external reference only, please consider using `export const name`
src/App.svelte
1: <script>
2: export let name;
^
3: </script>
4:
|
Les deux boutons n’ont pas d’attribut href, ce qui est dommage pour des liens. Quand au script, il exporte une variable non initialisée et inutilisée.
Conclusion#
Bon, il n’y a pas photo! En moins de 20 minutes on arrive au même résultat qu’Angular, sans partir dans des délires technologiques. La vitesse de compilation est incomparable, Svelte va tellement (mais tellement) plus vite. Je me demande si je ne vais pas laisser tomber Angular. Affaire à suivre.