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

Web “fonctionnel” et outils de développement

Web “fonctionnel” et outils de développement

Mirego innove par ses réalisations, mais aussi par l’adoption rapide de technologies qui permettent à l’équipe d’être efficace et motivée. Depuis plusieurs mois, nous avons fait le pari que les languages fonctionnels et les communautés Open Source qui les entourent sont les outils idéaux pour livrer avec succès de nombreux projets clients basés sur des backends Elixir ou Clojure.

Mais quels sont les véritables avantages des langages fonctionnels pour bâtir des applications Web?

Je tenterai d’apporter quelques réponses à cette question en démontrant, au fil des étapes de développement d’une application web, les avantages et les outils que nous utilisons dans l’élaboration de nos projets Elixir à l’aide de Phoenix, le framework web inspiré des bons côtés de Ruby on Rails; sans ses défauts!

1dad9adb1056bf806ef856039acc1873?s=128

Guillaume Cauchon

April 10, 2018
Tweet

More Decks by Guillaume Cauchon

Other Decks in Technology

Transcript

  1. GUILLAUME CAUCHON WEB “FONCTIONNEL” ET OUTILS DE DÉVELOPPEMENT

  2. Qui suis-je? @gcauchon husband & father of two
 web developer

    @Mirego
 founder @AlaGarderie
 digital entrepreneur
  3. 40 MINUTES ELIXIR Créé par 2011! BEAM, la machine virtuelle

    Erlang ‣ 100% compatible avec toute les librairies Erlang. ‣ Compilé en bytecode et non interprété! OTP — Open Telecom Platform ‣ En production, il est préférable de compiler un binaire OTP qui lui est platform-dependant. ‣ On le bundle habituellement dans une image Docker puisqu’il est ainsi plus simple de fixer l’environnement sur lequel le binaire sera exécuté. José Valim @josevalim
  4. 40 MINUTES CARACTÉRISTIQUES DU LANGUAGE ▸ Language fonctionnel ▸ Structure

    immuable et typée. ▸ Dialyzer (DIscrepancy AnalYZer for ERlang) permet de faire une analyse statique complète du code. ▸ Pattern Matching ▸ Piping operator ie “|>” ▸ Model acteur ▸ Process concurrents, légers et isolés qui communiquent par messages. ▸ Supervisor — gestion de l’exécution et des échecs. ▸ Compatibilité entre les modules et librairies Erlang ▸ :ets (Erlang Term storage), :crypto, :rand, :zip, etc…
  5. MOTIVATION

  6. I've never felt as strongly about a language and its

    ecosystem as I do about Elixir. I think it represents a significant leap in productivity. It encourages designs that are intuitive and maintainable. The synergy between the runtime, libraries, tools and language is almost magical. Karl Segin @karlsegin EN RÉSUMÉ… http://openmymind.net/The-Beauty-Of-Elixir-And-Beam
  7. MIREGO POURQUOI ELIXIR? ▸ Inspiré de la sémantique et des

    conventions Ruby et Ruby on Rails. ▸ Persistence de Simon Prévost depuis 3 ans! ▸ Core team vivant, participatif et proactif. ▸ Github, Twitter, Reddit, Slack, conférences, streams, etc… ▸ Présence de accrue et positive dans la communauté! ▸ Communauté extrêmement active. ▸ Conventions sont claires, comprises et respectées. ▸ Le code est Simple, explicite, performant et maintenable.
  8. OUTILS

  9. INTERACTIVE SHELL ▸ mix — Génération de code, gestion des

    dépendances, exécution, test, etc… ▸ iex — Shell intéractif ▸ Pattern matching, piping (ie |> ou |>avec le font Fira Code) ▸ Tail Call Optimization ▸ Tests > mix new demo … > iex -S mix Erlang/OTP 20 [erts-9.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] … Interactive Elixir (1.6.4) - press Ctrl+C to exit (type h() ENTER for help) iex(1)> IEX
  10. IEX FIBONACCI

  11. IEX TEST

  12. IEX r() — Recompiler un module live

  13. IEX h()

  14. ECTO ECTO Ecto n’est pas un ORM, c’est un ensemble

    d’api pour interagir avec une base de donné et générer des requêtes. ▸ Librairie maintenu par le core team d’Elixir. ▸ Repository pattern vs Active record pattern.
  15. ECTO > mix new --sup demo > mix deps.get >

    mix ecto.create > mix ecto.gen.migration CreateTalks * creating priv/repo/migrations * creating priv/repo/migrations/20180322135928_create_talks.exs > mix ecto.migrate > iex -S mix Erlang/OTP 20 [erts-9.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] … Interactive Elixir (1.6.4) - press Ctrl+C to exit (type h() ENTER for help) iex(1)>
  16. Ecto.Repo Coquille autour de l’entrepôt de donné par lequel toutes

    les opérations transigent. ECTO
  17. ECTO Défini simplement comme un module du projet.

  18. ECTO Inclus dans l’arborescence de Process de l’application.

  19. Ecto.Schema Mapping entre une table, un document ou un objet

    et une structure de donné elixir. DEMO
  20. Ecto.Changeset Conversion de données, validation et gestion d’erreur. ECTO

  21. ECTO TOUT EST TESTABLE!

  22. Ecto.Query Fonctions composables pour bâtir les requêtes sur Repo ECTO

  23. ECTO

  24. ECTO

  25. PHOENIX PHOENIX ▸ Plug — Adapteur avec le serveur web

    et spécification pour les différents modules d’une application Web. ▸ Function ou Module ▸ Plug.Conn → … → Plug.Conn Chris McCord @chris_mccord
  26. TEXT ▸ Context — “api privé” Isole Repo et le

    schema; expose des fonctionnalités DDD — Domain Driven Development
  27. ▸ Conventions ▸ HTML et/ou JSON PHOENIX

  28. ▸ Errors Controller — action_fallback(plug) ▸ Les controllers se concentre

    sur le happy path; la gestion des erreurs est regroupée dans un controller. ▸ Les errors sont gérées par pattern matching sur la bonne définition de call/2. ▸ Gestion uniforme d’une même erreur peut importer les circonstances. PHOENIX
  29. 1. Phoenix.Endpoint
 Début et fin de la vie d’un requête.

    2. Phoenix.Router
 Distribution des requêtes sur les bon contrôleurs. 3. Phoenix.Controller
 Logique d’une requête sur un path précis. 4. Phoenix.View
 Couche de présentation: HTML, JSON, text, etc… 5. Phoenix.Template
 Structure de réponse pré-compilée.
 PHOENIX
  30. WEB SOCKET — FIRST CLASS CITIZEN PHOENIX 1. Phoenix.Channels
 Connection

    web socket bi-directionnelle, mais abstraite du point de vu du controller! 2. Phoenix.Presence
 Gestion en temps réelle de l’identité et de la présence d’un “client” sur un ou plusieurs sockets.
  31. DEMO 3, 2, 1… > mix archive.install https: //github.com/phoenixframework/archives/raw/ master/phx_new.ez

    * creating /Users/gcauchon/.asdf/installs/elixir/1.6.4/.mix/archives/phx_new > mix phx.new demo --database postgres --no-brunch --no-html > mix deps.get > mix ecto.setup > iex -S mix phx.server Erlang/OTP 20 [erts-9.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] … Interactive Elixir (1.6.4) - press Ctrl+C to exit (type h() ENTER for help) iex(1)>
  32. DEMO LES INDISPENSABLES! # mix.exs … defp deps do [

    {:phoenix, "~> 1.3.2”}, … {:bamboo, "~> 0.8.0”}, {:timex, "~> 3.2”}, {:apex, "~> 1.2", only: ~w[dev test]a}, {:faker, "~> 0.10", only: ~w[dev test]a}, {:ex_machina, "~> 2.1", only: :test}, ] end …
  33. PHOENIX GENERATION DE CODE > mix phx.gen.json Agenda Talk talks

    —no-schema * creating lib/demo_web/controllers/talk_controller.ex * creating lib/demo_web/views/talk_view.ex * creating test/demo_web/controllers/talk_controller_test.exs * creating lib/demo_web/views/changeset_view.ex * creating lib/demo_web/controllers/fallback_controller.ex * creating lib/demo/agenda/agenda.ex * injecting lib/demo/agenda/agenda.ex * creating test/demo/agenda/agenda_test.exs * injecting test/demo/agenda/agenda_test.exs Add the resource to your :api scope in lib/demo_web/router.ex: resources "/talks", TalkController, except: [:new, :edit]
  34. ABSINTHE ABSINTHE ▸ GraphQL, Facebook Open Source — http://graphql.org ‣

    Le schema est typé et la documentation est publique. ‣ Aligné ou non avec le modèle de données. ‣ Le “client” décide des données dont il a besoin. ‣ La résolution est atomique et simple à optimiser. ‣ Explicite, avec moins de boilerplate!
  35. ABSINTHE SCHEMA

  36. ABSINTHE TYPE

  37. ABSINTHE RESOLVER

  38. ABSINTHE GRAPHIQL

  39. ABSINTHE

  40. RÉFÉRENCES

  41. Site Web
 https://elixir-lang.org Elixir School, disponible dans 25 langues
 https://elixirschool.com/en

    DailyDrip, par JOSH ADAMS, @knewter
 https://www.dailydrip.com/topics/elixir The Pragmatic Programmers
 https://pragprog.com Reddit, Github, Twitter, etc… YouTube, la grande majorité des événements organisés par la communauté sont disponibles en streaming. Elixir Conf Elixir Daze Empex
  42. ONE MORE THING!

  43. OPEN SOURCE ❤ ACCENT Mirego est fière d’annoncer officieusement que

    Accent, un outil développé à l’interne avec Elixir, Phoenix et GraphQL pour gérer efficacement la traduction de nos projets web et mobile est maintenant open source. www.accent.reviews github.com/mirego/accent
  44. MERCI