Introduction to elm

"Reliable web apps with great performance and no runtime exceptions".

Een front-end bouwen zonder ooit op een 'undefined is not a function' run-time fout te botsen? Dat kan met Elm!

In deze sessie bespreken we de basisprincipes, architectuur, build & deploy, vergelijking & integratie met andere technologieën zoals Angular & React. Het doel van deze sessie is niet om je te bekeren naar "yet another framework", maar eerder om je een ander perspectief te geven op het bouwen van web apps.

Iets wat je inzicht in de front-end wereld enkel kan vergroten!

Transcript

1. ae nv/sa Interleuvenlaan 27b, B3001 - Heverlee T +32 16 39 30 60 F +32 16 39 30 70 www.ae.be ELM
3. ELM 101 • Statically typed • Compiles to Javascript/WebAssembly (+ HTML + CSS) • Functional (Reactive) Programming paradigm • Immutable state, controlled side-effects • Virtual DOM • Blazingly fast rendering/HTML updates • ES 6 + Babel + Webpack + React + Redux + Immutable + lodash + … • Not even close • Own ecosystem • Repl, compiler, package manager, packages, reactor,…
4. NO RUNTIME ERRORS
5. DEVELOPER-FRIENDLY COMPILER
6. WELL-ARCHITECTED CODE BY DEFAULT
7. ENFORCED SEMVER
8. ADOPTION
9. WHY ELM? “If you are on the fence, I can safely guarantee that if you give Elm a shot and actually make a project in it, you will end up writing better JavaScript and React code. https://guide.elm-lang.org/
10. FP 101
11. FP 101
12. FP 101
13. FP 101
14. FP 101
15. THE ELM ARCHITECTURE (*)
17. SIDE EFFECTS https://guide.elm-lang.org/architecture/effects/
18. SIDE EFFECTS - COMMANDS
19. SIDE EFFECTS - SUBSCRIPTIONS
20. THE ELM ARCHITECTURE – FULL VERSION
21. DEMO
22. SCALING ELM
23. WHEN TO ELM?
24. WHEN TO ELM?
25. WHEN TO ELM?
26. WHEN NOT TO ELM?
27. WHEN NOT TO ELM?
28. TAKE-AWAYS Static typing
29. TAKE-AWAYS CDD
30. TAKE-AWAYS SUPER developer-friendly toolchain
31. TAKE-AWAYS Limit global mutable state
32. TAKE-AWAYS You can treat I/O, side-efects as Data
33. TAKE-AWAYS Reuse >>> components
34. RESOURCES • Home page • http://elm-lang.org/ • Try Elm in the browser • http://elm-lang.org/try • Tutorials • https://guide.elm-lang.org/ • FREE E-course • http://courses.knowthen.com/p/elm-for-beginners • Elm execises + peer feedback • http://exercism.io/ • Introduction by @jessitron: Adventures in Elm • https://www.youtube.com/watch?v=cgXhMc8M4X4 • Demo • https://github.com/jovaneyck/elm-GameOfLife