Pourquoi SvelteJS est sans doute le meilleur framework pour les nouveaux développeurs web

Tout développeur Web qui fait cela depuis au moins quelques années entendra probablement une question similaire jour après jour:

Je veux vraiment devenir développeur web, mais je ne sais pas par où commencer. Des suggestions?

Il y a environ 10 ans, la réponse était très simple. Créez simplement index.html, ajoutez-y quelques balises, rendez le titre rouge avec CSS et activez jQuery pour gérer les clics!

Oh, comme tout a changé. Maintenant, nous travaillons avec des outils de construction, un routage côté client, des cadres spéciaux avec un runtime sophistiqué, une liaison «ceci» partout, des littéraux de modèle, CSS-in-JS ... comment choisir ce qui est le plus important?

Tout cela a conduit à d'innombrables variations sur la façon de commencer avec des degrés divers de "entrez-le maintenant, et je vous expliquerai plus tard." Certains encouragent les nouveaux arrivants à apprendre React ou Vue tout de suite pour se familiariser avec les pratiques modernes. Alors que d'autres crient du haut des montagnes, les débutants devraient toujours commencer par les bases. En vérité, les deux approches ont leurs mérites. Le premier peut inciter les nouveaux arrivants à des choses comme le rechargement à chaud et les composants, au risque de laisser trop de côté. Alors que le second permet aux nouveaux arrivants de comprendre comment le DOM fonctionne sous le capot, en même temps, peut-être distraire les gens avec la complexité de la vanille JS, dont nous avons longtemps ignoré.

C'est pourquoi nous avons besoin d'un terrain d'entente. Un moyen de commencer avec les bases, tout en absorbant les concepts modernes tels que le développement basé sur les composants, les CSS isolés vs en cascade, les modèles, les fonctions déclaratives, etc. etc.

Svelte, à votre service

SvelteJS est une cartouche assez nouvelle dans le cadre des cadres js, qui commence tout juste à attirer l'attention. Quelqu'un peut le savoir après avoir publié State of JavaScript 2018 . Bref, Svelte se veut un framework qui n'est pas vraiment un framework. Il est basé sur un outil de compilation de composants au stade de l'assemblage, qui vous permet de charger sur la page uniquement ce qui est nécessaire pour afficher votre application. Cela signifie qu'il n'y a pas de DOM virtuel, pas de frameworks au-dessus des frameworks et pas de framework en runtime .

Tous ces arguments sont assez sérieux pour les développeurs plus expérimentés, mais la plupart des débutants ne pourraient probablement pas lire le dernier paragraphe sans se casser la tête. Heureusement, ce n'est pas la magie de la compilation qui rend Svelte si convivial pour les débutants, mais sa syntaxe.

Si vous n'avez jamais vu le composant Svelte, voici un exemple simple:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /*   CSS */ .pretty { color: red; } </style> <script> /* ...        */ let name = "Ben"; </script> 

Voyons cela. Donc, tout d'abord, il convient de noter que tout cela peut être écrit même dans un fichier .html normal, même dans un fichier .svelte , si votre âme le désire. Nous voyons également des balises familières qui rappellent le développement sans framework: style et script . Les styles et le code JS sont écrits dans ces balises pour construire correctement les composants. De plus, il permet à la coloration syntaxique de fonctionner sans plugins d'édition supplémentaires, tels que les solutions CSS-in-JS. De plus, le compilateur Svelte est suffisamment intelligent pour isoler les styles spécifiques aux composants par défaut. Par conséquent, vous n'aurez pas de styles circulant entre les composants.

Vous voyez également comment quelque chose de magique se produit avec le nom de la variable JavaScript. Il s'agit d'un nouveau concept brillant pour Svelte 3, où toute variable dans le script de votre composant est accessible à partir du balisage. Nous n'avons pas de syntaxe spéciale à apprendre pour gérer l'état. Il n'y a ni Angular $ scope , ni React this.state , ni données de Vue. Au lieu de cela, nous pouvons simplement utiliser des variables ordinaires pour décrire l'état, provoquant un nouveau rendu chaque fois que leurs valeurs changent.

Cette liberté de ce «jargon» syntaxique signifie que la création d'un composant commence à ressembler à la création d'un CodePen, sans avoir à réfléchir à la façon de connecter la fonction JS déclarative à une sorte de sélecteur DOM.

Une autre bonne chose est que les composants Svelte sont importés aussi facilement que les composants traditionnels. Vous pouvez simplement importer .html , car Svelte sait comment le déployer:

 <div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script> 

Cool, mais attendez une minute ...

Certains lecteurs peuvent trouver ce concept aussi époustouflant que moi. Dans le même temps, d'autres ont probablement leurs propres arguments contre l'utilisation de cette approche pour enseigner aux débutants. Ne sont-ils pas curieux de savoir comment fonctionne la manipulation DOM?

La réponse est ... possible. Mais quand quelqu'un commence (au moins par expérience personnelle), vous pouvez accepter un peu d'abstraction pour accélérer la création de choses sympas.

De plus, tout comme certains langages, tels que Java et JS, la gestion abstraite du pointeur via la récupération de place, la plupart des outils de développement Web modernes ignoraient la manipulation DOM. À l'exception des cas extrêmes plus difficiles dont les débutants n'auront probablement pas besoin. Soit dit en passant, si vous vous demandez ce qu'est la gestion des pointeurs, je pense que cela ne fait que prouver mon point. Ainsi, au lieu de forcer les débutants à manipuler le DOM ou à apprendre des méthodes spécifiques au framework pour gérer l'état, pourquoi ne pas simplement les laisser accéder aux variables directement à partir du balisage? Maintenant, ils peuvent apprendre les principes de base de la gestion des composants par l'État sans tomber dans le deuil.

D'accord, je vois un exemple de base, mais Svelte devrait avoir des fonctionnalités spécifiques pour que cela fonctionne.

C'est sans doute vrai, mais c'est beaucoup moins que vous ne le pensez. Une partie de la syntaxe de Svelte est pour le mappage itératif et conditionnel des éléments DOM. Cela fonctionne très similaire à la carte de JSX, mais sans tous ces supports imbriqués dans lesquels les nouveaux arrivants (et moi) peuvent facilement se perdre. Voici la méthode de base qui génère une liste d'éléments à partir d'un tableau:

 <ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script> 

Encore une fois, je comprends toute critique concernant la syntaxe, mais j'aime la facilité de compréhension. Au lieu d'incorporer JavaScript dans notre code HTML, nous disons simplement: hé, parcourons ce tableau et créons un élément pour chacun d'eux.

Il convient de mentionner une autre caractéristique de Svelte, dont je ne suis pas si enthousiaste: la syntaxe de transmission des accessoires aux composants. Oui, il est entièrement fonctionnel et facile à apprendre, mais en même temps, il peut sembler trop magique au goût de certaines personnes. Pour traiter les accessoires, nous les passons simplement au composant où qu'il soit importé ...

 <!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" /> 

... et nous obtenons cette variable comme un "let" exporté:

 <!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script> 

Je comprends parfaitement que pour certains, cela ressemblera à un abus de "l'exportation". Mais au moins cela correspond à la façon dont les débutants doivent conceptualiser les modules: nous exportons ce dont nous avons besoin pour accéder en dehors du composant, et importons ce que nous voulons utiliser dans notre composant.

Je pourrais surmonter cette bizarrerie ... mais qu'en est-il de l'étape de construction requise?

Ainsi, une autre critique à propos du démarrage du travail avec les frameworks est la nécessité d'utiliser un gestionnaire de packages. Ce qui veut dire ... bon sang, utilise le terminal!

Écoutez, je comprends que l'ouverture de cette chose peut être extrêmement intimidante, avec sa police mono et son «cd» effrayant pour naviguer dans les répertoires. Mais honnêtement, ce n'est vraiment pas un gros obstacle lorsque vous n'avez besoin que d'une seule équipe pour courir. De plus, le terminal intégré dans VS Code facilite le démarrage. Il s'ouvre même en bas de la fenêtre directement dans le répertoire de votre projet!

Svelte propose en fait un démarreur téléchargeable , mais j'ai créé mon propre modèle de démarrage qui utilise simplement Rollup pour le téléchargement direct. En fait, le fichier de configuration fait moins de 30 lignes! Pour un projet Svelte de base, voici tous les répertoires et fichiers dont vous avez besoin:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json


Ajoutez simplement la commande pour démarrer l'étape de construction dans package.json et vous avez terminé! Vous pouvez, bien sûr, dire que tous les modules et fichiers supplémentaires dont d'autres frameworks ont besoin ne sont pas un problème si un débutant ne les touche pas, mais, à mon avis, moins il y a de choses supplémentaires, mieux c'est pour les débutants.

D'accord, c'est cool et pratique pour les débutants. Mais dans quelle mesure ce cadre est-il stable?

Il s'agit d'une question très d'actualité pour un cadre jeune comme Svelte. Tous les exemples que j'ai montrés utilisent la syntaxe de Svelte version 3, qui au moment de la rédaction de ce document est toujours en version bêta. Aussi excitant que cela puisse être, j'attendrais encore quelques mois avant de me précipiter avec lui pour des séminaires de programmation. Néanmoins, Svelte propose une page de documentation très concise pour la version 3 , ce qui peut le rendre plus facile pour les débutants.

Jetons donc un coup d'œil à certains des principaux avantages de l'apprentissage du développement Web avec Svelte:

1. Il s'agit d'un framework de composants avec 0 plugins supplémentaires.
2. Il gère l'État sans aucune poubelle ordinaire
3. Utilise l'isolation de style sans utiliser CSS-in-JS (donc aucun plugin d'éditeur ou syntaxe stupide n'est nécessaire)
4. Pour commencer, vous n'avez besoin que d'un script de construction très simple.
5. Il n'y a pratiquement pas de fichiers supplémentaires dans le projet de base

Bien sûr, c'est parfaitement normal si je ne pouvais pas vous convaincre dans cet article. Tous les bons articles ont suscité une petite controverse! Mais j'espère que cet article vous a au moins montré à quel point Svelte peut être sacrément cool et simple à apprendre.

Merci d'avoir lu ça!

Je suis un développeur Web frontal dans le processus d'apprentissage, toujours en train de jouer avec quelque chose de nouveau. J'essaierai de publier régulièrement ici, alors écrivez si vous l'aimez!

***

Du traducteur:

Merci d'avoir lu cette traduction! J'espère que cet article vous encourage à considérer Svelte comme un outil de formation ou même un nouveau projet.

Venez à mon atelier de 2 heures sur Svelte 3 à HolyJS Piter du 24 au 25 mai . Qui veut simplement suivre le développement de Svelte - bienvenue sur la chaîne de télégramme en langue russe SvelteJS . Nous serons ravis de vous voir!

Et une petite enquête, sans référence au cadre et à la technologie. Votre opinion est juste intéressante.