Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Play with Elm!

583 views

Published on

Par Choucri FAHED (@choucrifahed).
Elm est un langage simple pour écrire des applications web riches et robustes. Elm génère du JavaScript performant et surtout sans exceptions à l'exécution. Dans cette présentation, il s'agit d'introduire le langage, ses choix d'architecture, l'opposer à Scala.js et surtout montrer l'intérêt de l'utiliser dans une application web Play grâce au plugin sbt-elm.

Published in: Technology
  • Be the first to comment

Play with Elm!

  1. 1. Play with Elm! Rethink Web Development
  2. 2. About Me Choucri FAHED CTO of Finstack Scala, FP, Elm, Idris, Blockchains, AI, Universal Income… good food
  3. 3. Summary ● Why Elm? ● What’s Elm? ● TEA (The Elm Architecture) ● Elm vs ScalaJS ● Elm in Scala Projects
  4. 4. Why Elm? Created by Evan Czaplicki in 2012 “If typed functional programming is so great, how come nobody uses it?” Let's be mainstream! How it feels to learn JavaScript in 2016 Objective: NO RUNTIME ERRORS!
  5. 5. What’s Elm? ● Simple language ○ Statically typed, strict, purely functional ○ Compiles to JavaScript ● Simple framework / libraries ○ TEA (The Elm Architecture) ○ Use “Obvious names” No M-word ● Simple and user focused tools ○ Friendly compiler error messages ○ Time travel debugger, elm-format… ○ Automatic semver enforcement with elm-package
  6. 6. Values - Literals
  7. 7. Values - Lists & Tuples ● Lists: All 4 are equivalent below ● Tuples
  8. 8. Values - Union Types
  9. 9. Values - Records
  10. 10. Functions
  11. 11. What else? ● If and let expressions ● No for or while loops ● Operators ● JavaScript interop with ports ● Modules For more Elm syntax
  12. 12. That’s it?! ● No type classes ● No higher kinded types (ex: Functor[F[_]]) ○ First order kinds like Monoids supported only Feel frustrated? Try PureScript
  13. 13. TEA - Model
  14. 14. TEA - Update
  15. 15. TEA - View
  16. 16. TEA - Main
  17. 17. Performance Benchmark: Adding 100 items in the TodoMVC app
  18. 18. Ecosystem ● Write HTML with elm-html ● Write CSS with elm-css ● Material Design with elm-mdl ● Make HTTP calls with elm-http ● Unit testing with elm-test ● … Guess the pattern? More Awesome Elm
  19. 19. Learn More ● http://elm-lang.org/ ● Elm Slack ● http://exercism.io/languages/elm ● Elm Weekly Newsletter ● On Twitter ○ @elmlang ○ @czaplic ○ @rtfeldman ○ @elmcastio ○ @elmstuff
  20. 20. Elm vs ScalaJS ScalaJS Elm Opinionated No Highly JS Interoperability Easy Hard (discouraged) SPA Framework scalajs-react elm-html (TEA) Runtime Size 100KB 10KB Build Tool SBT elm-package Semantic Versioning No Yes IDE Support Excellent in Intellij Excellent in Atom Debugger Standard IDE tools Time-travel debugger Ecosystem Huge Small but growing fast
  21. 21. Elm in Scala Projects SBT Elm plugin Check out examples folder Show time!

×