Svelte est une nouvelle bibliothèque d’interface utilisateur JavaScript qui ressemble de nombreuses façons aux bibliothèques d’interface utilisateur modernes telles que React. Une différence importante est qu’il n’utilise pas le concept de DOM virtuel.

Dans ce tutoriel, nous allons présenter Svelte en créant une application d’information inspirée du Daily Planet un journal fictif. du monde de Superman.

À propos de Svelte

Svelte utilise une nouvelle approche pour la création d'interfaces utilisateurs. Au lieu de faire le travail nécessaire dans le navigateur, Svelte passe alors à une phase de compilation qui se produit sur la machine de développement lors de la création de votre application.

En un mot, voici comment fonctionne Svelte (comme indiqué dans the blog officiel ):

Svelte fonctionne à la période de convertissant vos composants en un code très efficace impératif qui met à jour le DOM de manière chirurgicale. Ainsi, vous êtes capable d’écrire des applications ambitieuses avec d’excellentes performances.

Svelte est plus rapide que les frameworks les plus puissants (React, Vue et Angular) car il n’utilise pas de DOM virtuel et ne met à jour de manière chirurgicale que les pièces. ce changement.

Nous en apprendrons davantage sur les concepts de base tels que les composants Svelte et sur la manière d'extraire et d'itérer des tableaux de données. Nous allons également apprendre à initialiser un projet Svelte, à exécuter un serveur de développement local et à construire le dernier bundle.

Prérequis

Vous devez avoir quelques prérequis pour pouvoir suivre ce didacticiel confortablement, tels que: 19659011] Connaissance des langages HTML, CSS et JavaScript (ES6 +),

Node.js peut être facilement installé à partir du site Web officiel ou de vous. peut également utiliser NVM pour installer et gérer facilement plusieurs versions de Node dans votre système.

Nous utiliserons une JSON API comme source d'informations pour notre application, vous devez donc vous procurer un Clé API en créant simplement un compte gratuitement et en prenant note de votre clé API.

Bien démarrer

Commençons maintenant avec la création de notre application de nouvelles Daily Planet en utilisant l'outil degit pour générer des projets Svelte. .

Vous pouvez installer degit globalement sur votre système. ou utilisez l'outil npx pour l'exécuter à partir de npm. Ouvrez un nouveau terminal et exécutez la commande suivante:

 npx degit sveltejs / template dailyplanetnews

Ensuite, naviguez dans le dossier de votre projet et exécutez le serveur de développement à l’aide des commandes suivantes:

 cd dailyplanetnews
npm run dev

Votre serveur de développement écoute à partir de l'adresse http: // localhost: 5000 . Si vous apportez des modifications, elles seront reconstruites et rechargées en direct dans votre application en cours d'exécution.

Ouvrez le fichier main.js de votre projet. Vous devriez alors trouver le code suivant:

 importer une application depuis './App.svelte';

const app = new App ({
    cible: document.body,
    accessoires: {
        nom: 'monde'
    }
});

exporter l'application par défaut;

C'est ici que l'application Svelte est démarrée en créant et en exportant une instance du composant racine, appelée conventionnellement App . Le composant prend un objet avec des attributs cible et accessoires .

La cible contient l'élément DOM où le composant sera monté et . props contient les propriétés que nous voulons transmettre au composant App . Dans ce cas, il s’agit d’un nom portant la valeur mondiale .

Ouvrez le fichier App.svelte et vous devriez trouver le code suivant:

 
 Bonjour {name}! 

Il s'agit du composant racine de notre application. Tous les autres composants seront des enfants de App .

Les composants de Svelte utilisent l'extension .svelte pour les fichiers source, qui contiennent tout le code JavaScript, les styles et les balises d'un composant.

La syntaxe du nom d'exportation ; crée un composant prop appelé nom . Nous utilisons une interpolation variable – {...} – pour afficher la valeur transmise via le nom prop

. Vous pouvez simplement utiliser du vieux code ancien, CSS et HTML familier pour créer Svelte. Composants. Svelte ajoute également au HTML certaines syntaxes de modèle pour l'interpolation de variable et la lecture en boucle de listes de données, etc.

S'agissant d'une petite application, nous pouvons simplement implémenter les fonctionnalités requises dans le composant App . [19659005] Dans la balise importez la méthode [svelte] avec la méthode onMount () et définissez les articles API_KEY et URL . ] variables qui contiendront la clé API News, les articles de presse récupérés et le noeud final fournissant les données:

onMount est une méthode de cycle de vie. Voici ce que le tutoriel officiel dit à ce sujet:

Chaque composant a un cycle de vie qui commence quand il est créé et se termine quand il est détruit. Une poignée de fonctions vous permet d'exécuter du code à des moments clés de ce cycle de vie. Celui que vous utilisez le plus souvent est onMount qui s'exécute après le premier rendu du composant dans le DOM.

Ensuite, utilisons l'API d'extraction pour extraire des données du point de terminaison de l'actualité et stocker les articles. dans la articles variable lorsque le composant est monté dans le DOM:

Comme la méthode fetch () renvoie une promesse JavaScript, nous pouvons utiliser la syntaxe async / wait pour donner au code une apparence synchrone et éliminer les rappels.

Ensuite, ajoutons le balisage HTML suivant à créez l'interface utilisateur de notre application et affichez les données d'actualité:

    
    

             Le Daily Planet est l'endroit où les héros sont nés et l'histoire se poursuit. Nous sommes fiers de faire un reportage quotidien sur la planète.
    




         {# chaque article en tant qu'article}
            

                
                

                    
 {article.title} 
                    
  {article.description} 
                     Lisez l'histoire 
                
            
         {/ each}

Nous utilisons les blocs chacun pour parcourir les articles de presse et nous affichons les titres url et . ] urlToImage de chaque article.

Le logo quotidien de la planète et le titre sont empruntés à cet organisme de presse à but non lucratif inspiré par DC Comics.

Nous allons utiliser Kalam, un polices manuscrites disponibles à partir de polices Google alors ouvrez le fichier public / index.html et ajoutez le tag suivant:

Revenez ensuite au fichier App.svelte et ajoutez les styles suivants:

Voici une capture d'écran de notre application d'actualités quotidiennes:

Construire pour la production

Après avoir développé votre application, vous pouvez créer les lots de production en exécutant la construction. commande dans votre terminal:

 npm run build

La commande produira un ensemble simplifié et prêt à la production que vous pourrez héberger sur votre serveur d'hébergement préféré.

Organisons maintenant l'application à l'aide de ZEIT Now .

ZEIT Now est un nuage Plate-forme pour sites Web et fonctions sans serveur que vous pouvez utiliser pour déployer vos projets sur un domaine .now.sh ou personnel.

Retournez sur votre terminal et exécutez la commande suivante pour installer Now CLI: [19659018] npm installer -g maintenant

Ensuite, accédez au dossier public et exécutez la commande maintenant :

 cd public
maintenant

C’est tout! Votre application sera déployée sur le cloud. Dans notre cas, il est disponible dans le répertoire public-kyqab3g5j.now.sh .

Vous pouvez trouver le code source de cette application dans le référentiel GitHub .

Conclusion [19659004] Dans ce tutoriel, nous avons construit une application d'actualités simple à l'aide de Svelte. Nous avons également vu ce qu'est Svelte et comment créer un projet Svelte à l'aide de l'outil degit de npm.

Vous pouvez vous reporter à la documentation officielle pour en savoir plus sur chaque Article de Svelte.

Ahmed est un auteur technique et développeur Web vivant au Maroc avec une maîtrise en développement de logiciel. Il est l'auteur de contenu technique sur JavaScript, angulaire et ionique. Il est également un partisan de l'entrepreneuriat, de la poésie et de l'enseignement. Vous pouvez me contacter sur mon site web personnel et lire mes autres articles sur Techiediaries .