INNOV MAROC
Informatique & Digital Frameworks Angular, React Js, Boostrap, Vue, Jquery

Formation Développer des Applications Web Modernes avec Svelte et SvelteKit

Référence

TWC254

Durée

4 jours

Objectifs pédagogiques

  • Comprendre les fondements de la programmation réactive et du modèle compilé propre à Svelte
  • Savoir concevoir des applications web modernes et performantes en utilisant Svelte et SvelteKit
  • Maîtriser la gestion des états, la communication entre composants et l’intégration d’API externes
  • Explorer les possibilités avancées de Svelte : transitions, animations, routing et déploiement
  • Mettre en œuvre un projet complet fil rouge de bout en bout : conception, développement, optimisation et déploiement

Public cible

  • Développeurs front-end souhaitant moderniser leurs pratiques et améliorer les performances de leurs applications
  • Développeurs full-stack désireux de découvrir un framework JavaScript léger, rapide et ergonomique
  • Chefs de projets techniques et architectes applicatifs souhaitant évaluer l’intérêt de Svelte dans leur stack technologique

Prochaines Sessions

Inscrivez-vous dès maintenant

À distance
Innov Systems

22 au 25 Sep. 2026

Inscription avant le 01 Sep. 2026

À distance
Innov Systems

17 au 20 Nov. 2026

Inscription avant le 27 Oct. 2026

Besoin urgent ? Demandez une session personnalisée (délai min. 15-20 jours ouvrés)

Devis personnalisé

Programme Détaillé

  • Comprendre les principes fondamentaux et la philosophie de Svelte
  • Svelte vs React, Vue et Angular : différences conceptuelles et performances
  • Architecture compilée : comprendre le modèle sans virtual DOM
  • Présentation du projet fil rouge : création d’une application de gestion de films
  • Installation de Node.js et configuration de Svelte avec Vite
  • Structure des dossiers et fichiers du projet
  • Introduction à SvelteKit pour une approche plus complète (routing, SSR)
  • Travaux pratiques : création et lancement de la première application Svelte
  • Définir un composant et sa structure
  • Utilisation du data binding unidirectionnel et bidirectionnel
  • Gestion des variables et réactivité avec la syntaxe `$:`
  • Travaux pratiques : création des premiers composants d’affichage de la liste de films
  • Gestion des évènements natifs et personnalisés
  • Utilisation des modificateurs d’évènements (`preventDefault`, `stopPropagation`, etc.)
  • Création et émission d’évènements personnalisés entre composants
  • Travaux pratiques : interaction dynamique entre la liste et les fiches de films
  • Transmission de données via `props`
  • Utilisation des `slots` et `slots nommés` pour des composants réutilisables
  • Gestion des valeurs par défaut et propagation d’évènements enfants
  • Travaux pratiques : conception d’un composant de carte de film paramétrable
  • Création de formulaires réactifs et validation des entrées
  • Utilisation des bindings sur inputs, checkboxes, selects et textarea
  • Introduction à la gestion d’état local et persistance
  • Travaux pratiques : ajout d’un formulaire de recherche et de filtrage des films
  • Comprendre le rôle des `stores` dans Svelte
  • Création et souscription à des stores `writable`, `readable` et `derived`
  • Création de stores personnalisés et partagés entre composants
  • Travaux pratiques : mise en place d’un store global pour gérer la sélection des films
  • Introduction à la consommation d’API REST et GraphQL
  • Utilisation du bloc `await` et gestion des états de chargement et d’erreur
  • Introduction aux endpoints et au fetch côté serveur avec SvelteKit
  • Travaux pratiques : intégration de l’API « The Movie Database » dans l’application
  • Comprendre la logique de routage basée sur le système de fichiers
  • Création de pages dynamiques et de layouts imbriqués
  • Passage de paramètres et navigation entre pages
  • Travaux pratiques : ajout d’une page détaillée pour chaque film
  • Introduction aux transitions natives (`fade`, `fly`, `slide`, etc.)
  • Création d’animations personnalisées avec la fonction `animate`
  • Optimisation des effets visuels pour la performance et l’accessibilité
  • Travaux pratiques : ajout de transitions à la navigation et aux cartes de films
  • Gestion des performances : compilation, lazy loading et hydratation
  • Structuration et factorisation du code Svelte
  • Introduction aux tests et à la maintenance du code
  • Travaux pratiques : refactorisation du projet et audit de performance
  • Préparation pour la production : build, optimisation et packaging
  • Déploiement sur Vercel, Netlify ou autre hébergeur compatible SvelteKit
  • Gestion des environnements (développement, préproduction, production)
  • Travaux pratiques : déploiement final du projet fil rouge

Approche pédagogique

Support Ecrit et Projection
Exposés Interactifs, Podcasts et Vidéos
Brainstorming et Jeux de Rôle
Cas Pratiques et Labs inclus pour leur impact opérationnel
Test de Validation des Acquis des Connaissances

✨ Formations Recommandées

Perfectionnez vos compétences avec ces formations complémentaires

Zimbra : installation et configuration du serveur de messagerie

Réf. TWC42

4 jours 22 Sep. 2026
Voir le programme

User Research : mesurez et optimisez l’expérience utilisateur pour concevoir des produits performants

Réf. TWDC45

4 jours 22 Sep. 2026
Voir le programme
Questions fréquentes

Vous trouverez ici les réponses aux questions les plus fréquentes que nous recevons de la part de nos clients. Notre objectif : vous éclairer et vous accompagner au mieux dans le développement des compétences de vos équipes.

Partie 1 : Nos Formations et Notre Approche Pédagogique

Les deux, mais notre véritable valeur ajoutée réside dans le sur-mesure. Nous partons du principe que chaque entreprise a un contexte, une culture et des défis uniques. Notre processus commence toujours par une phase d'écoute et de diagnostic pour co-construire avec vous le programme qui aura le plus d'impact.

Nos formateurs sont des experts seniors dotés d'une double compétence :

  1. Une expertise métier solide : Ils ont tous une expérience significative en entreprise au Maroc et comprennent les réalités du terrain.
  2. Une expertise pédagogique confirmée : Ils sont formés aux techniques d'animation pour adultes, favorisant l'interactivité et la pratique.

Nous nous adaptons à vos contraintes et objectifs avec plusieurs formats :

  • Présentiel Intra-entreprise : Chez vous, pour une immersion totale.
  • Présentiel Inter-entreprises : Pour favoriser le partage d'expériences.
  • Distanciel : Des sessions live, interactives et dynamiques.

Partie 2 : Financement et Aspects Administratifs (Spécificités Marocaines)

Oui, absolument. En tant qu'organisme de formation agréé, nos actions sont éligibles au remboursement via les Contrats Spéciaux de Formation (CSF) gérés par l'OFPPT et les GIAC. C'est un levier essentiel pour optimiser votre budget formation.

Oui, c'est un service clé que nous proposons. Nous vous accompagnons de A à Z dans le montage de votre dossier d'ingénierie financière. Notre expertise du système marocain vous garantit la constitution d'un dossier conforme et le suivi jusqu'au remboursement, transformant cette contrainte administrative en une simple formalité pour vous.

Nos tarifs sont transparents et dépendent de la durée, du niveau de personnalisation, du nombre de participants et du format. Le meilleur moyen d'avoir une idée précise est de nous demander un devis personnalisé et gratuit, qui sera accompagné d'une proposition pédagogique détaillée.

Partie 3 : Processus, Logistique et Suivi

Notre processus est simple et centré sur vos besoins :

  1. Prise de Contact & Analyse : Échange pour comprendre vos enjeux.
  2. Proposition sur-mesure : Envoi d'une proposition pédagogique et financière.
  3. Validation & Planification : Ajustements et fixation du calendrier.
  4. Réalisation de la Formation.
  5. Évaluation & Suivi : Mesure de la satisfaction et bilan complet.

Oui. Notre réseau de formateurs nous permet d'intervenir sur l'ensemble du territoire marocain, que vos locaux soient à Casablanca, Rabat, Tanger, Marrakech, Agadir ou dans toute autre ville du Royaume.

Oui, la formation ne s'arrête pas à la fin de la session. Nous assurons un suivi rigoureux : remise des attestations, envoi d'un rapport de synthèse, et mise en place d'une évaluation à froid (quelques semaines après) pour mesurer le transfert des compétences. Des sessions de coaching de suivi sont également possibles.

Partie 4 : Impact et Retour sur Investissement (ROI)

Nous utilisons une approche à plusieurs niveaux (inspirée du modèle de Kirkpatrick) :

  • Niveau 1 (Satisfaction) : Évaluation à chaud.
  • Niveau 2 (Apprentissage) : Quizz et mises en situation.
  • Niveau 3 (Comportement) : Évaluation à froid et entretiens avec les managers.
  • Niveau 4 (Résultats) : Analyse de l'impact sur vos indicateurs de performance (KPIs).

Pour trois raisons principales :

  1. Notre Expertise Locale : Nous sommes des spécialistes du marché marocain et africain, de sa culture et de ses mécanismes administratifs (CSF).
  2. Notre Approche Sur-Mesure : Nous ne vendons pas de formations, nous construisons des solutions adaptées à votre besoin.
  3. Notre Engagement sur l'Impact : Nous sommes focalisés sur le retour sur investissement tangible de votre budget formation.

Des questions sur cette formation ?

Notre équipe pédagogique est à votre disposition pour répondre à toutes vos questions et vous accompagner dans votre projet de formation.

Ils nous font déjà confiance

Alstom
Arcelor Mittal
Lafarge
Aircelle
Dell
Jcop Delafon
Credit Agricole
Oncf
Akwagroup
Cdg
Holcim
Cdg Capital
Centrale Laitiere
Cgi
Dufry
Bmce
Celliers Meknes
Ciment Du Maroc
Axa
Fresenius Medical
Inwi
Hyatt
Attijari Bank
Wafasalaf
Tectra
Chronopost
Banque Populaire
Basf
Arval
Les Eaux Minerales De Oulmes
Cegelec
Merck
Onhym
Sgmb
Radeema
Somfy
Vitogaz
Anp
Atos
Cim Equipement
Fiat
Lesieur
Managem
Onep
Renault
Sacem
Sofac
Maersk
Maroc Export
Marsa Maroc
Meditel
Mascir
Medz
Novartis
Novec
Pfizer
Poste Maroc
Rekrute
Rma Watanya
Salafin Company
Sicpa
Sigmatel
Somed
Sothema
Spie
St microel ectronics
Total
Ups
Zurich
Abcd
Afinis
Cimat
Conseil Ingeniere Developpement
Dyar Al Mansour
Gm Equipement
Gsm Almaghreb
Hps Optima
Jetalu
Abb
Akka
Almageo
Aufait
Electroplanet
Jlec
Lca Fondcou
Ocp
Sofitel
Tangerois
2m
Isma wood
Sofrecom
Maroc Assistance Internationale
Mondi Packaging
Plastex
Ubisoft
Veolia Transdev
Vivalis
Premium
Syngenta
Cst Sensors
Bymaro
Promopharm
Inotecha
Bottu
Servier
Somadir
Omnidior
Oberthur
Saham Pharma
Taqa Morocco
Pharma 5
Lpee
Foodipex
Quadritech
Elephant Vert
Biocorp
Mc Pharma
Bosch
Essilor
Kroschu
Nomac
Inabensa

Plus de 1 500 Références au Maroc et dans le Monde

Discuter sur WhatsApp