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é

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 122 formations au catalogue, 1604 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation