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

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 !

79f883869af02b3cc622773c00e5a83a?s=128

Pascal Le Merrer

September 25, 2019
Tweet

Transcript

  1. Pascal Le Merrer @pascallemerrer

  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
  3. 
 langage fonctionnel !=> JS Elm

  4. Pourquoi utiliser Elm ? erreurs en prod stress confiance productivité

    maintenabilité expérience développeur
  5. Demo time

  6. multiply a b = a * b Syntaxe

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

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

    = a * b double : Int !-> Int double c = multiply c 2 Syntaxe
  9. • toujours le même résultat 
 pour des valeurs de

    paramètres données • pas d’effet de bord Fonctions pures
  10. immuabilité

  11. null undefined exceptions Robustesse

  12. Runtime Model Cmd View Update Model Msg The Elm Architecture

    (TEA) Msg Model
  13. Main

  14. Movie

  15. Model

  16. Messages

  17. Initialisation

  18. Runtime Model Cmd view update Model Msg init Model Msg

    Model The Elm Architecture (TEA)
  19. Génération du DOM virtuel

  20. Affichage du corps du document

  21. Affichage du champ de saisie

  22. Affichage du message d’erreur

  23. Affichage du résultat de la recherche

  24. Affichage d’un film

  25. Runtime Model Cmd view update Model Msg Msg Model The

    Elm Architecture (TEA)
  26. Mise à jour du modèle

  27. Mémorisation des termes recherchés

  28. Validation du formulaire

  29. Description de la réponse attendue Runtime httpCommand Update ServerReturnedResponse Server

    movieDecoder Movie Json Json GET 1 2 3 4
  30. Mémorisation de la réponse

  31. Traitement d’erreur

  32. Runtime Model Cmd view update Model Msg Msg Model The

    Elm Architecture (TEA)
  33. Live coding

  34. Retour d’expérience

  35. elm chez 
 depuis janvier 2019

  36. Introduction progressive

  37. 2 projets full Elm

  38. Remplacement Slick-Grid

  39. feedback immédiat et utile « Un compilateur incroyablement bien fait

    pour aider le développeur » Florent Points forts
  40. outillage simple et efficace Points forts

  41. aucune magie Points forts

  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
  43. cohérence des packages Points forts

  44. refactoring « on peut faire des refactorings très compliqués avec

    une facilité et une fiabilité incroyables » François Points forts
  45. communication entre modules Points faibles

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

  47. Slack plutôt que Stack Overflow Points faibles

  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
  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
  50. Merci ! Twitter : @pascallemerrer