Comment Elm a changé mon expérience de dev front-end

Slides présentés lors du meetup RennesJS de septembre 2019

En passant de Javascript à Elm, mon quotidien a radicalement changé. Les garanties apportées par le compilateur Elm m'apportent une sérénité qui m'était inconnue auparavant.
Je n'hésite plus à me lancer dans un refactoring, je n'ai plus de mauvaise surprise en intégrant une nouvelle librairie ou en récupérant le code publié par mes collègues.
Venez découvrir comment développer des applications front-end sans stress !

Transcript

1. Pascal Le Merrer
   @pascallemerrer
   

   View Slide

2. Qui suis-je ?
   Développeur chez
   Co-organisateur du meetup software
   crafts•wo•manship Rennes
   Co-organisateur de Socrates Rennes
   Pascal Le Merrer
   @pascallemerrer
   

   View Slide

3. 

   langage fonctionnel
   !=> JS
   Elm
   

   View Slide

4. Pourquoi utiliser Elm ?
   erreurs en prod
   stress confiance
   productivité
   maintenabilité
   expérience développeur
   

   View Slide

5. Demo time
   

   View Slide

6. multiply a b =
   a * b
   Syntaxe
   

   View Slide

7. multiply a b =
   a * b
   double c =
   multiply c 2
   Syntaxe
   

   View Slide

8. multiply : Int !-> Int !-> Int
   multiply a b =
   a * b
   double : Int !-> Int
   double c =
   multiply c 2
   Syntaxe
   

   View Slide

9. • toujours le même résultat 

   pour des valeurs de paramètres données
   • pas d’effet de bord
   Fonctions pures
   

   View Slide

10. immuabilité
    

    View Slide

11. null
    undefined
    exceptions
    Robustesse
    

    View Slide

12. Runtime
    Model
    Cmd
    View
    Update
    Model Msg
    The Elm Architecture (TEA)
    Msg Model
    

    View Slide

13. Main
    

    View Slide

14. Movie
    

    View Slide

15. Model
    

    View Slide

16. Messages
    

    View Slide

17. Initialisation
    

    View Slide

18. Runtime
    Model
    Cmd
    view
    update
    Model Msg
    init
    Model
    Msg Model
    The Elm Architecture (TEA)
    

    View Slide

19. Génération du DOM virtuel
    

    View Slide

20. Affichage du corps du document
    

    View Slide

21. Affichage du champ
    de saisie
    

    View Slide

22. Affichage du message d’erreur
    

    View Slide

23. Affichage du résultat
    de la recherche
    

    View Slide

24. Affichage d’un film
    

    View Slide

25. Runtime
    Model
    Cmd
    view
    update
    Model Msg
    Msg Model
    The Elm Architecture (TEA)
    

    View Slide

26. Mise à jour du modèle
    

    View Slide

27. Mémorisation des termes recherchés
    

    View Slide

28. Validation du formulaire
    

    View Slide

29. Description de la réponse attendue
    Runtime
    httpCommand
    Update
    ServerReturnedResponse
    Server movieDecoder
    Movie
    Json
    Json
    GET
    1
    2 3
    4
    

    View Slide

30. Mémorisation de la réponse
    

    View Slide

31. Traitement d’erreur
    

    View Slide

32. Runtime
    Model
    Cmd
    view
    update
    Model Msg
    Msg Model
    The Elm Architecture (TEA)
    

    View Slide

33. Live coding
    

    View Slide

34. Retour d’expérience
    

    View Slide

35. elm chez 

    depuis janvier 2019
    

    View Slide

36. Introduction progressive
    

    View Slide

37. 2 projets full Elm
    

    View Slide

38. Remplacement Slick-Grid
    

    View Slide

39. feedback immédiat et utile
    « Un compilateur incroyablement bien fait
    pour aider le développeur » Florent
    Points forts
    

    View Slide

40. outillage simple et efficace
    Points forts
    

    View Slide

41. aucune magie
    Points forts
    

    View Slide

42. sérénité
    « La maxime "if it compiles, it works" est tout à fait vraie
    et j'ai pu la vérifier maintes fois » Alain
    Points forts
    

    View Slide

43. cohérence des packages
    Points forts
    

    View Slide

44. refactoring
    « on peut faire des refactorings très compliqués
    avec une facilité et une fiabilité incroyables » François
    Points forts
    

    View Slide

45. communication entre
    modules
    Points faibles
    

    View Slide

46. récupérer les headers http
    Points faibles
    

    View Slide

47. Slack plutôt que
    Stack Overflow
    Points faibles
    

    View Slide

48. « Quand j'ai refait du javascript après avoir passé
    plusieurs semaines sur Elm, j'avais l'impression de
    faire du moins bon travail, et j'avais envie de
    revenir sur Elm » François
    Conclusion
    

    View Slide

49. Guide officiel
    Beginning Elm
    Atelier Elm : démineur

    Functional programming with Elm
    Elm in action, de Richard Feldman
    Programming Elm, de Jeremy Fairbank
    formations : Human Coders ou Orange 

    (contacter pascal.lemerrer@orange.com)
    S’initier à Elm
    

    View Slide

50. Merci !
    Twitter : @pascallemerrer
    

    View Slide