Elm a possible future for web frontend
3 likes561 views
The document discusses Elm, a functional programming language designed for web frontends, emphasizing its features like static typing, immutability, and a message-passing architecture. It compares Elm's approach to JavaScript's handling of effects and asynchronous operations, illustrating with examples such as a counter app and a dice roller app. The text poses the question of whether Elm could be a viable future alternative to modern JavaScript frameworks, highlighting the ease of understanding and testing in Elm.
Elm a possible future for web frontend
- 1. ELM A possible future for web frontend
- 2. Agenda What is Elm? Elm features Elm ecosystem Elm architecture Why a possible future?
- 3. What is Elm?
- 4. Functional language ML style language Inspired by Haskell
- 5. Elm features
- 6. Statically typed ∎ Primitive types ∎ Basic data structures ∎ Union types
- 10. Immutability
- 12. Purely functional ∎ Functions depend only on passed arguments ∎ No side effects
- 13. Effects
- 14. Effects in JS ∎ Synchronous ∎ Asynchronous via callback ∎ Asynchronous via promise
- 16. MOCKS
- 19. Effects as Data
- 22. Effects in Elm ∎ Synchronous via Messages ∎ Asynchronous via Tasks
- 23. Elm Tasks ∎ Module for async actions that might fail ∎ Tasks can be easily chained together ∎ Lazy: nothing will happen until something run them.
- 24. Interop with JS: Ports ∎ Only way you have to receive or send informations from JS. ∎ It works like a pub-sub mechanism.
- 25. Elm architecture
- 26. Basic Pattern: Counter App ∎ Model ∎ Messages ∎ Update ∎ View
- 27. here
- 29. Counter: User Flow User clicks on the “+” button Increment action is fired Update function gets called View gets updated
- 30. Commands and Subscriptions ∎ Commands: Tasks that Elm runs for you in the background ∎ Subscriptions: subscribe to data you care about
- 31. Subs Pattern: Dice Roller App
- 32. Dice Roller: User Flow User clicks on the “Roll” button Roll action is fired Update function returns command Elm executes the task “New Number” action is fired Update function gets called View gets updated
- 33. here
- 34. here
- 35. here
- 36. here
- 40. I don’t need Elm! Functional programming Modern JS is inspired by FP Components React Effect as data Flux / Redux Type checking Flow.js / Typescript Immutability ImmutableJS / Ramda / Lodash Modules Webpack / Babel
- 41. ∎ Syntax ∎ Types ∎ Immutability Learning curve ∎ Compiling ∎ Maybe and explicit error handling
- 42. Use JS means...
- 43. Hard to start new projects
- 47. Everything that is syntactically legal, that the compiler will accept, will eventually wind up in your code base. John Carmack
- 48. Elm instead...
- 52. Elm ecosystem
- 53. Elm reactor
- 54. Elm packages
- 55. Will Elm be the future?