Formation Elm avancé

Cette formation est destinée à des développeur·se·s ayant eu une première expérience avec Elm. Nous ferons quelques rappels sur le langage et son architecture, mais si vous débutez nous vous conseillons de suivre notre formation Elm.

Durant la formation Elm Avancé, vous apprendrez à :

• mettre en place un système de navigation multi-pages,
• interagir avec JavaScript, le navigateur et des librairies externes,
• tester votre application avec elm-test et Cypress,
• envoyer, récupérer et décoder des données serveur via une API,
• organiser votre code et suivre un ensemble de bonnes pratiques lorsque votre application prend de l'ampleur,
• paramétrer votre application en fonction de l'environnement cible (dev, intégration, production) et la mettre en ligne

Les deux journées s'articulent autour de cours, d'exercices et d'un projet fil rouge. Vous développerez alors un dashboard interactif d'analyse de données avec plusieurs pages. Il récupérera les données d'audience d'un site web (top pages, uniques visitors, bounce rate...) depuis une API serveur.

A l’issue de la formation Elm Avancé, vous repartirez avec le code source de votre projet, l'environnement de développement Elm ainsi que des tests unitaires et d'intégration.
Vous saurez tester cette application de façon pertinente et serez à l'aise pour la mettre en production avec les scripts fournis. Vous saurez alors comment adapter les pages et la source des données afin de créer votre propre dashboard, par exemple pour suivre les indicateurs importants pour votre équipe ou pour le produit de votre entreprise.

Les objectifs

• Approfondir certains aspects de Elm, en particulier les commands, les subscriptions et les ports
• Envoyer, récupérer et décoder des données serveur via une API
• Interagir avec JavaScript, le navigateur et des librairies externes
• Apprendre à paramétrer, tester et mettre en production une application Elm

Pré-requis

• Avoir suivi notre formation Elm ou avoir une bonne expérience en programmation fonctionnelle
• Avoir des connaissances en HTML, CSS et JavaScript
• Apporter un ordinateur portable
• Ordinateur portable à apporter

Le programme de la formation Elm avancé

Jour 1 - Navigation et communication avec une API

Introduction

• Philosophie du langage
• Programmation fonctionnelle et typage avec Elm
• Environnement de développement
• Architecture Model / View / Update

Pages et routing

• Principes de base
• Organisation du code
• Browser.Navigation
• Parsing d'URL

Mise en pratique

• Création de plusieurs pages pour le dashboard
• Création d'un menu de navigation
• Gestion de différentes urls et déploiement d'une SPA

Récupération de données distantes via une API

• Commands
• Déclaration de requêtes
• Utilisation du module Http
• Gestion des réponses

Décodage JSON

• Décodage de littérales
• Décodage de records
• Décodage de collections

Envoi des données vers un serveur

• Encodage de données
• Création d'une requête POST
• Gestion des réponses

Mise en pratique

• Récupération des données statistiques depuis une API
• Mise à jour des indicateurs du dashboard en fonction des retours serveur
• Sauvegarde côté serveur de préférences d'affichage du dashboard
• Gestion des erreurs

Jour 2 - Interactivité, tests et mise en production

Interactions avec du code JavaScript

• Ports
• Subscriptions
• Flags
• Synchronisation avec Elm

Interactions avec le navigateur

• Evénements clavier
• Viewport
• LocalStorage

Custom elements

• Création de custom elements
• Html.Events.on et gestion d'événements personnalisés
• Détection de changements

Mise en pratique

• Création d'une barre de recherche
• Scroll automatique de la page
• Sauvegarde côté client de préférences d'affichage du dashboard
• Branchement du service Sentry pour tracker les erreurs

Tests automatiques

• elm-test (tests unitaires et fuzzing)
• Ajout de data-attributes
• Cypress (tests d'intégration et end-to-end)

Compilation et déploiement pour la production

• A propos de Debug.log
• Chaîne de build, optimisation et minification
• Déploiement d'une SPA

Mise en pratique

• Mise en place d'une chaîne de tests automatiques
• Déploiement en production d'un dashboard optimisé

Télécharger le programme

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1646 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 170 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux