Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elixir, remède fonctionnel pour le développement web

Elixir, remède fonctionnel pour le développement web

Présentation du langage, des configurations et des outils utilisés chez Mirego pour nos projets Web dans le cadre de la première édition de CABANE.io.

Guillaume Cauchon

January 19, 2019
Tweet

More Decks by Guillaume Cauchon

Other Decks in Programming

Transcript

  1. Elixir, remède
    fonctionnel pour le
    développement web .
    VERSION 1.0 - JANVIER 2019

    View Slide

  2. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Avant de commencer ...
    2
    Guillaume
    Cauchon
    @gcauchon
    ● Développeur chez Mirego
    ● Fondateur de À la garderie
    ● OpenCode
    ● Web à Québec
    ● Meetup Elixir, Montréal
    Expériences passées

    View Slide

  3. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    3
    Agenda
    .
    Beaucoup de contenu, 40 minutes
    1 Elixir, le language P 4
    2 iex > shell interactif P 10
    3 Configurations d’un projet web P 13
    4 GraphQL P 18
    5 Web Sockets P 22
    6 OTP P 23
    7 Tests P 25
    8 Déploiement P 26

    View Slide

  4. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    “Elixir is a dynamic, functional
    language designed for building
    scalable and maintainable
    applications.”
    Elixir .
    4
    ● Syntaxe verbale et opinionated inspirée de ruby.
    ● Concepts d’extensibilité (protocol, behaviour)
    inspirés, entre autre, de Clojure.
    ● Code compilé en byte code pour BEAM, la VM Erlang.
    ● OTP, des outils facilitant le développement
    d’application web distribuée.

    View Slide

  5. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    “Elixir is a dynamic, functional
    language designed for building
    scalable and maintainable
    applications.”
    Elixir .
    5
    ● Fonctions pures.
    ● Structures immuables.
    ● Flow de donnée naturel avec l’opérateur pipe : |>
    ● Pattern matching et guards : simplifier les code paths.
    ● mix, one tool to rule them all
    ○ dépendances, build, test, release, etc…
    ● iex, un shell interactif (ie REPL).

    View Slide

  6. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    6
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Elixir .

    View Slide

  7. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    7
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Elixir .
    Elixir Conf 2018, opening keynote by José Valim
    “If we need a major version to change the language then we
    failed to build an extensible language!”
    https://youtu.be/suOzNeMJXl0
    Elixir: A Mini-Documentary by Honeypot
    Get ready to explore the origins of the Elixir programming
    language, the manner in which it handles concurrency and the
    speed with which it has grown since its creation back in 2011.
    https://youtu.be/lxYFOM3UJzo

    View Slide

  8. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    8
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Elixir .
    Elixir Forum
    Oui; un forum en 2019! Et fort probablement une des meilleure source d’information sur
    le langage, la communauté et les projets qui s’y développent.
    https://elixirforum.com
    Elixir School
    Elixir School is the premier destination for people looking to learn and master the Elixir
    programming language.
    https://elixirschool.com
    Conférences
    Toutes les conférences principales sont disponibles sur YouTube; habituellement en
    moins d’une semaine!
    ● Elixir Conf - https://elixirconf.com
    ● Code Sync - https://codesync.global/conferences
    ● Lonestar Elixir - https://lonestarelixir.com
    ● Empex - http://empex.co
    ● etc…

    View Slide

  9. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    9
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Elixir .
    Accent, open-source le 5 avril 2018 par Simon Prévost
    Le premier outil de traduction pensé par/pour les développeurs.
    https://www.accent.reviews
    https://github.com/mirego/accent
    Donner l’exemple

    View Slide

  10. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    iex .
    10
    Interactive Elixir est un REPL qui permet
    de développer de façon interactive et itérative,
    sans avoir à redémarrer votre serveur. *
    * sauf si vous changez les configurations.

    View Slide

  11. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    11
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    iex .
    Fonctionnalités
    ● Autocomplete
    ● Helpers
    ○ h - documentation d’un module, d’une fonction
    ○ i - documentation d’un type de donnée (ie struct)
    ○ r - compilation et swap en mémoire du module
    ○ t - documentation des types définis dans un module
    Il est simple et utile d’utiliser iex dans une release OTP,
    déployée sur la PAAS de votre choix; plus de détails plus tard…

    View Slide

  12. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    12
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    iex .

    View Slide

  13. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Configuration .
    13
    Les configurations d’un projet sont contenus dans 3 fichiers :
    1.mix.exs (et son lock file)
    2.config/config.exs
    3.config/$MIX_ENV.exs
    À l’image de ruby et rails, elixir profite d’un écosystème
    de librairies en forte expansion avec l’adoption du langage.

    View Slide

  14. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    14
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Configuration .
    ● Phoenix → framework web
    ● Ecto → Repo, Schema, Changeset et Query
    ● Absinthe → client GraphQL+++
    ● OTP: processes, GenServer, Agent, Task, etc…
    ● Distillery → release OTP standalone

    View Slide

  15. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    15
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Configuration .
    > git clone https://github.com/gcauchon/cabane.io__web_remedy
    > cd cabane.io__web_remedy
    > cp .env.dev .env

    > docker-compose up -d postgresql
    > mix deps.get

    > mix phx.server
    [info] Running RemedyWeb.Endpoint with cowboy 2.6.1 at http://localhost:5000

    View Slide

  16. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    16
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Configuration .
    Makefile
    Des workflows clairs et documentés pour le développement, les
    tests et le déploiement. Un outils qui simplifie grandement le
    onboarding, la maintenance et la pérennité du codebase.
    Bonus!

    View Slide

  17. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Configuration .
    17
    Un objectif de notre équipe pour
    2019 est de rendre open-source
    plusieurs projets boilerplates pour
    phoenix, ember et react!
    Leak!

    View Slide

  18. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    GraphQL .
    18
    ● Séparation des concerns entre le transport et les données
    ● Schema typé et validé par l’engin à l’entrée et la sortie
    ● Découplement entre l’api et les modèles de persistance
    ○ Lecture → query / Écriture → mutation
    ● Résolution du graph :
    ○ Chaque field est résolu de façon unitaire
    ○ Orchestration de plusieurs contextes
    ● Payload malléable qui s’adapte aux besoins du client
    ● Documentation: 1st class citizen
    A query language for your API

    View Slide

  19. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    19
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    GraphQL .
    Absinthe permet même d’inclure GraphiQL, un IDE in-browser pour
    GraphQL, directement dans votre environnement de développement!
    ● Auto-complete
    ● Documentation (queries, mutations, types, etc…)
    ● Partage

    View Slide

  20. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    20
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    GraphQL .
    Pas de magie, les fonctions utilisées pour résoudre les
    fields peuvent être utilisées directement dans iex,
    aussi simplement que celle du contexte :
    iex(1)> alias Remedy.Account
    Remedy.Account
    iex(2)> Account.find("3865005d-abe1-4998-a61d-87a4b73c06ff")
    %Remedy.Account.Presenter{
    __meta__: #Ecto.Schema.Metadata,
    company: "Mirego",
    handle: nil,
    id: "3865005d-abe1-4998-a61d-87a4b73c06ff",
    inserted_at: ~N[2019-01-18 05:43:37],
    name: "Guillaume Cauchon",
    title: "ELIXIR, REMÈDE FONCTIONNEL AU WEB",
    updated_at: ~N[2019-01-18 05:43:37]
    }

    View Slide

  21. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    21
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    GraphQL .
    La fonction responsable de résoudre le field :
    iex(1)> alias Remedy.GraphQL.Resolvers
    Remedy.GraphQL.Resolvers
    iex(2)> Resolvers.Account.presenters(nil, %{id:
    "3865005d-abe1-4998-a61d-87a4b73c06ff"}, nil)
    {:ok,
    %Remedy.Account.Presenter{
    __meta__: #Ecto.Schema.Metadata,
    company: "Mirego",
    handle: nil,
    id: "3865005d-abe1-4998-a61d-87a4b73c06ff",
    inserted_at: ~N[2019-01-18 05:43:37],
    name: "Guillaume Cauchon",
    title: "ELIXIR, REMÈDE FONCTIONNEL AU WEB",
    updated_at: ~N[2019-01-18 05:43:37]
    }}

    View Slide

  22. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Web Socket .
    22
    ● 1st-class citizen dans Phoenix.
    ● Utilisé en développement pour le live-reload des assets dans
    le browser.
    ● Utilisé dans GraphQL pour les requêtes de type subscribe.
    ● Phoenix.Presence, un data-store distribué qui permet de
    stocker du metadata sur le socket.
    aka Channels

    View Slide

  23. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    OTP .
    23
    OTP stands for Open Telecom Platform, although it’s not
    that much about telecom anymore (…) If half of Erlang’s
    greatness comes from its concurrency and distribution
    and the other half comes from its error handling
    capabilities, then the OTP framework is the third half
    of it.
    Fred Hébert, https://learnyousomeerlang.com/what-is-otp
    Survol

    View Slide

  24. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    24
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    OTP .
    ● Process + Supervision
    ● GenServer
    ○ Agent
    ○ Task
    ● ETS - Erlang Term Storage

    View Slide

  25. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Tests .
    25
    ● Fonctions pures et données immuable, donc les
    tests sont extrêment simple et légers.
    ● mix test --stale
    ● ExMachina (ex_machina)
    ● @behaviour + Mox (mox)
    ○ Simuler une librairie tierce en quelques lignes.
    ● Coveralls (excoveralls)
    ○ mix coveralls.details présente un diff des
    code paths couverts et manqués par les tests!
    Survol

    View Slide

  26. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Déploiement .
    26
    ● Une release OTP est platform specific.
    ● Principes Twelve-Factor App.
    ○ Configuration basée sur les variables
    d’environnement
    ○ Même image en, QA, Staging et Production
    ● Multi-stage build avec Docker
    ○ Build sur une image elixir basée sur Alpine Linux.
    ○ Copier la release OTP sur une image Alpine Linux.

    View Slide

  27. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    27
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Déploiement .
    > make build
    […]
    Successfully tagged remedy:latest
    > docker tag remedy registry.heroku.com/elixir-web-remedy/web
    > docker push registry.heroku.com/elixir-web-remedy/web
    […]
    7dde40161858: Pushed
    26fcbb90328a: Pushed
    […]
    latest: digest: sha256:d50b1c0010… size: 1784
    > heroku container:release web --app elixir-web-remedy
    Releasing images web to elixir-web-remedy... done

    View Slide

  28. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    28
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Déploiement .
    Live sur Heroku en quelques secondes!

    View Slide

  29. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    29
    Language
    iex
    Configuration
    GraphQL
    Web Socket
    OTP
    Tests
    Déploiement
    Déploiement .
    Et en plus, on peut utiliser iex sur les containers!

    View Slide

  30. ELIXIR, REMÈDE FONCTIONNEL POUR LE DÉVELOPPEMENT WEB
    30
    Question ?

    View Slide

  31. Merci .

    View Slide