Apprendre Svelte: Cours Code
Apprendre Svelte: Cours Code — Apprenez Svelte et SvelteKit avec un éditeur en direct et le code compilé affiché à côté
Apprendre Svelte: Cours Code est une application gratuite pour iOS et Android qui vous permet d’apprendre Svelte et SvelteKit sur votre téléphone. Écrivez des composants dans un éditeur en direct avec aperçu, consultez le JavaScript vers lequel le compilateur les transforme et suivez 41 cours, de votre première valeur réactive jusqu’à une application full-stack déployée, avec un Mentor AI à vos côtés.
- Prix
- Gratuite, mise à niveau Pro
- Plateformes
- iOS et Android
- Langues
- 22
- Âge recommandé
- 4+
- Configuration requise
- iOS 15.1 ou version ultérieure
Rien de ce qui se trouve sur cet écran n’exécute Svelte. Il exécute ce que Svelte a écrit.
La première leçon de l’application affiche un composant de neuf lignes à côté du JavaScript généré par le compilateur. Appuyez sur +1 et les lignes exécutées s’illuminent : une invalidation, une valeur recalculée, deux nœuds de texte modifiés, et rien d’autre n’est touché. C’est l’idée au cœur du framework, montrée avant d’être expliquée.
Ce que c’est
Apprendre Svelte: Cours Code est une application gratuite pour iOS et Android qui enseigne Svelte et SvelteKit à travers 41 cours et 163 leçons, classés du niveau débutant au niveau avancé. Elle commence par une démonstration qui affiche un composant à côté de son JavaScript compilé, puis aborde la réactivité, les props, les stores, les transitions, les runes de Svelte 5 et le routage SvelteKit, le chargement des données, les actions de formulaire et le déploiement. Un éditeur en direct avec aperçu et un Mentor AI sont intégrés.
Dans l’application
À quoi elle ressemble
Le cours
Ce que couvre le cours Svelte
41 cours et 163 leçons issus de la liste de cours de l’application, classés de A1 à C1 et se terminant par un projet SvelteKit full-stack.
Premiers composants
Ce qu’est Svelte et pourquoi il adopte une approche différente, la configuration d’un projet et l’écriture de votre premier composant avec des variables réactives.
Props, templates, événements et liaison
Transmission de props, conditions et boucles each dans le markup, événements DOM et événements personnalisés, et liaison bidirectionnelle avec les directives bind:.
Cycle de vie, stores et contexte
onMount et onDestroy, stores writable, readable, derived et personnalisés, slots et composition, ainsi que l’API Context.
Transitions, animations et actions
Directives de transition, directive animate, actions pour réutiliser des comportements DOM, transitions personnalisées, ainsi que les stores de mouvement spring et tweened.
Fondamentaux de SvelteKit
Routage et pages basés sur les fichiers, fonctions load, layouts avancés, actions de formulaire, routes API, hooks serveur et pages d’erreur.
Runes de Svelte 5
Introduction aux runes, props et snippets, runes avancées et étude approfondie du fonctionnement de la réactivité de Svelte.
SvelteKit en production
SSR et prerendering, streaming, performances, SEO et balises meta, sécurité, modèles d’authentification, adapters et déploiement.
Tests et full-stack
Tests unitaires avec Vitest, tests end-to-end avec Playwright, bibliothèques tierces, gestion d’état à grande échelle et application SvelteKit full-stack.
Fonctionnement
Déroulement d’une session
L’application est organisée autour d’un parcours allant d’une valeur réactive à une application déployable, et chaque étape combine lecture et mise en pratique.
Voir d’abord la sortie du compilateur
La démonstration d’introduction place un petit composant à côté du JavaScript vers lequel il est compilé. La partie compilée a été générée à l’avance et est intégrée à l’application, si bien que la démonstration fonctionne sans connexion.
Modifier un composant et le prévisualiser
Les leçons ouvrent un éditeur avec des onglets HTML, CSS et JavaScript, ainsi qu’un bouton d’exécution qui affiche le composant dans un aperçu. L’aperçu charge le compilateur Svelte via le réseau : une connexion est donc nécessaire.
Vérifier que vous avez bien retenu
Chaque thème est suivi d’un quiz et de défis de programmation, et le Mentor AI peut vous expliquer un concept, vous suggérer un parcours ou vous faire passer un quiz sur un cours. Le Weekly Code Challenge ajoute une manche compétitive.
Contenu
Ce que l’application propose
41
Cours, de A1 à C1
163 leçons réparties sur 41 cours, de la configuration de Svelte et votre premier composant aux stores, aux transitions, au routage et aux hooks de SvelteKit, aux runes de Svelte 5, aux tests et à un projet final full-stack.
Compilé
Composant à côté de son code compilé
La démonstration de première utilisation affiche côte à côte le code source et le JavaScript généré, et compte les nœuds de texte mis à jour par rapport aux éléments recréés : le coût d’une mise à jour se lit donc directement à l’écran.
Aperçu
Éditeur en direct avec aperçu
Écrivez le balisage, les styles et le script dans des onglets séparés, puis affichez le composant sur le téléphone. L’aperçu utilise le compilateur Svelte 4.2.19 : le code écrit avec les runes de Svelte 5 peut donc ne pas s’afficher dans l’aperçu ; il vaut mieux le lire et le suivre dans la leçon.
AI
Mentor AI
Demandez les concepts clés d’un cours, des conseils pour apprendre plus vite, un quiz ou un parcours personnalisé depuis l’onglet de discussion, ou posez une question sur une erreur que vous ne parvenez pas à comprendre.
Hebdomadaire
Weekly Code Challenge
Une manche de défi régulière à laquelle participer en parallèle des leçons, avec des séries, le suivi de la progression et des rappels pour maintenir une routine.
Examen
Certificat de réussite
Réussissez l’examen final et le certificat portera votre nom ; il atteste du travail accompli, sans constituer une qualification reconnue.
Contexte
Qu’est-ce que Svelte et en quoi se distingue-t-il des autres méthodes de création d’une interface web ?
Svelte est un framework de création d’interfaces utilisateur dans lequel les composants sont compilés à l’avance en JavaScript simple qui met directement à jour la page, au lieu d’expédier un gros runtime chargé de déterminer les changements dans le navigateur. Un composant est un fichier unique contenant le balisage, les styles et le script, et une affectation telle que count += 1 suffit à mettre l’écran à jour. SvelteKit est le framework applicatif construit par-dessus, qui ajoute le routage basé sur les fichiers, le chargement des données côté serveur, la gestion des formulaires et des adaptateurs pour le déploiement. Pour la personne qui apprend, l’effet concret est moins de code répétitif et une distance réduite entre le code et ce qui apparaît sur la page.
Réactivité à la compilationune affectation constitue l’état
Dans Svelte, le compilateur réécrit une affectation ordinaire en code qui met à jour les parties concernées de la page. Une instruction étiquetée commençant par $: recalcule une valeur chaque fois que les valeurs qu’elle lit changent, de sorte que les données dérivées ne nécessitent aucune fonction auxiliaire.
Storesun état partagé entre les composants
Un store writable contient une valeur à laquelle plusieurs composants peuvent s’abonner, et le préfixe $ ajouté à son nom active l’abonnement automatique. Les stores derived et custom reposent sur ce mécanisme lorsque l’état doit être calculé ou encapsulé.
Runesla syntaxe de Svelte 5
Svelte 5 remplace une grande partie de la magie antérieure du compilateur par des fonctions explicites telles que $state, $derived et $props, ainsi que par des snippets pour le balisage réutilisable. Les deux styles sont utilisés dans de vrais projets, c’est pourquoi l’application enseigne séparément le modèle original et le modèle des runes.
SvelteKitroutage, données et déploiement
Un fichier tel que +page.svelte devient une route, une fonction load récupère les données avant le rendu de la page, les actions de formulaire gèrent les envois sur le serveur et un adaptateur prépare le résultat pour un hébergeur statique, un serveur Node ou une plateforme serverless.
Pour qui
À qui elle s’adresse — et à qui elle ne s’adresse pas
Cette application vous convient si vous
- Vous voulez apprendre Svelte ou SvelteKit en sessions courtes plutôt qu’avec de longs cours vidéo
- Vous connaissez un peu HTML et JavaScript et vous voulez voir ce que change un framework basé en priorité sur la compilation
- Vous êtes curieux de comprendre le fonctionnement des mises à jour réactives et préférez lire le code généré plutôt que de lui faire confiance sans vérification
- Vous voulez un parcours qui couvre le routage, le chargement des données, l’authentification et le déploiement, et pas seulement les composants
- Vous aimez demander à un AI Mentor pourquoi un morceau de code se comporte comme il le fait
Ce n’est pas le bon outil si vous
- Vous voulez exécuter du code avec les runes de Svelte 5 dans l’aperçu, qui utilise le compilateur Svelte 4.2.19
- Vous devez créer et déployer un projet SvelteKit complet depuis votre téléphone, ce qui nécessite toujours un ordinateur portable
- Vous vous attendez à ce que tout soit gratuit : le premier cours est gratuit et Pro déverrouille le reste
- Vous n’avez jamais vu HTML ni JavaScript et vous voulez suivre un cours général de programmation avant d’aborder un framework
Questions
Foire aux questions
Comment apprendre Svelte sur un téléphone ?
Choisissez un parcours qui associe lecture et exécution de code, car Svelte est plus facile à comprendre lorsque vous modifiez une valeur et regardez la page réagir. Apprendre Svelte: Cours Code commence par une démonstration du résultat compilé, puis propose des leçons avec un éditeur HTML, CSS et JavaScript, un aperçu et un AI Mentor. L’application est gratuite pour commencer sur iOS et Android.
Svelte est-il difficile à apprendre pour un débutant ?
Svelte est souvent considéré comme accessible, car les composants ressemblent à du HTML, du CSS et du JavaScript ordinaires, et une affectation met l’écran à jour. Les difficultés apparaissent ensuite, avec les stores, le cycle de vie, la séparation entre serveur et client de SvelteKit et le passage aux runes de Svelte 5. Apprendre Svelte: Cours Code classe ses 41 cours de A1 à C1 afin que ces notions soient abordées dans l’ordre.
Qu’est-ce que SvelteKit et l’application l’enseigne-t-elle ?
SvelteKit est le framework applicatif de Svelte. Il ajoute le routage basé sur les fichiers, le chargement des données côté serveur, les actions de formulaire, les hooks et les adapters de déploiement. Apprendre Svelte: Cours Code propose des cours dédiés au routage et aux pages de SvelteKit, au chargement des données, aux actions de formulaire, aux routes API, aux hooks, à la gestion des erreurs, au SSR et au prerendering, au streaming, à la sécurité et aux adapters.
L’application couvre-t-elle les runes de Svelte 5 ?
Oui. Apprendre Svelte: Cours Code comprend des cours sur l’introduction aux runes, les props et les snippets, ainsi que les runes avancées. L’aperçu de l’éditeur compile actuellement avec Svelte 4.2.19 ; le code utilisant les runes peut donc ne pas s’afficher dans l’aperçu et il est préférable de le suivre dans le texte de la leçon.
Puis-je exécuter du code Svelte sur mon téléphone ?
Vous pouvez écrire un composant dans l’éditeur et l’afficher dans un aperçu. L’aperçu de Apprendre Svelte: Cours Code charge le compilateur Svelte pour construire le composant, et nécessite donc une connexion. La démonstration initiale du résultat compilé est différente : son code compilé est intégré à l’application et s’exécute sans réseau.
Apprendre Svelte: Cours Code est-il gratuit ?
L’application est gratuite à télécharger. Le premier cours est gratuit, avec un quota quotidien d’utilisation de l’AI Mentor, et Pro déverrouille tous les cours, supprime les publicités et offre un accès illimité à l’AI Mentor. Vous pouvez suivre de vraies leçons avant de décider de passer à la version supérieure.
Dois-je d’abord connaître JavaScript ?
Quelques notions de HTML et de JavaScript faciliteront les premiers cours, car un composant Svelte regroupe simplement ces langages dans un même fichier. Apprendre Svelte: Cours Code commence par expliquer ce qu’est Svelte et comment le configurer, puis présente chaque concept dans un langage simple ; il s’agit toutefois d’un cours sur un framework, et non d’un premier cours de programmation.
Quelles plateformes et quels langages sont pris en charge ?
Apprendre Svelte: Cours Code fonctionne sur iOS via l’App Store et sur Android via Google Play, et son interface est disponible en 22 langues. L’application est classée 4+, et son contenu ne comporte donc aucune restriction d’âge.
Commencer
Compilez votre premier composant dès aujourd’hui
Gratuit pour commencer sur iOS et Android, en 22 langues.
Plus de CoddyKit
Disponible sur iOS et Android.