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

Elm: A new approach to building the front end

2fe1b2866cfd498a513295d60d5cad0f?s=47 Joel Clermont
September 22, 2015
Technology
0
61

Elm: A new approach to building the front end

2fe1b2866cfd498a513295d60d5cad0f?s=128

Joel Clermont

September 22, 2015
Tweet

More Decks by Joel Clermont

See All by Joel Clermont
Level Up Your Code Quality
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
100
How to Save Time
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
19
F# Type Providers
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
35
Give Elm a Chance! (that conference)
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
80
Give Elm a Chance (newCodeCamp)
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
86
Give Elm a Chance!
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
130
Property-based testing: work harder, not smarter
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
230
Elm - A new approach to building the front end
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
190
Hack - Why Should I Care?
2fe1b2866cfd498a513295d60d5cad0f?s=48 jclermont
0
48

Other Decks in Technology

See All in Technology
2022 COSCUP - GKE Backend Cluster 除雷分享
89f41026db2c96853402524fca4a2ff8?s=48 brentchang
0
120
LINSTOR — это как Kubernetes, но для блочных устройств
93aef1d166a8a3536538eff713f80307?s=48 flant
0
4k
CloudWatchアラームによるサービス継続のための監視入門 / Introduction to Monitoring for Service Continuity with CloudWatch Alarms
107ea34bd4da51e40f1c30b9ca0c459e?s=48 inomasosan
1
450
賢く「振り分ける」ための Topology Aware Hints #k8sjp / Kubernetes Meetup Tokyo 52nd
332f89cc697355902a817506b6995f2b?s=48 ytaka23
1
170
開発環境のセキュリティおよびCI/CDパイプラインのセキュア化
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
12
5.2k
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
08b07f5e5f554c4f4a6a30ef1cca28ad?s=48 hik
0
590
8日で作るオレオレRISC-V CPU
8704bea231d4947980094e915111e950?s=48 matsud224
1
150
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
2
610
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
140
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門（駆け足版）
Cc073a7c6b0a79918ff1da48acb709e7?s=48 kkmory
0
220
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
3
450
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
41202c03511a51064abb970da0ca9fad?s=48 owlinux1000
0
310

Featured

See All Featured
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.3k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
130k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.6k

Transcript

  1. Elm
 A new approach to building the front end Joel

    Clermont
 @jclermont

  2. What to expect • Elm language tour

  3. What to expect • Elm language tour • Application architecture

    overview

  4. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app

  5. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process?

  6. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process? • Tooling

  7. What to expect • Elm language tour • Application architecture

    overview • Tour an Elm app • How does this fit in with my current process? • Tooling • Why should I give Elm a try?

  8. Elm as a language

  9. Pure Functions

  10. Immutable Data

  11. Statically Typed

  12. Statically Typed

  13. Functional Programming • higher-order functions • currying • recursion •

    pattern matching

  14. All hail the pipe!

  15. Questions?

  16. Elm architecture

  17. Model

  18. Update

  19. View

  20. Questions?

  21. Tour a simple app

  22. Model

  23. Update

  24. View

  25. None

  26. Questions?

  27. How does this fit in?

  28. From Elm to your browser • compile to JS

  29. From Elm to your browser • compile to JS •

    link JS source in your web app

  30. From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen

  31. From Elm to your browser • compile to JS •

    link JS source in your web app • Elm.fullscreen • Elm.embed

  32. It’s just HTML/CSS/JS

  33. Excellent JS interop

  34. Questions?

  35. Tooling

  36. Compiler

  37. Excellent tooling • Package manager

  38. Excellent tooling • Package manager • REPL

  39. Excellent tooling • Package manager • REPL • Interactive debugger

  40. Excellent tooling • Package manager • REPL • Interactive debugger

    • Great documentation

  41. Questions?

  42. Why should I consider Elm? • It’s fast

  43. Why should I consider Elm? • It’s fast • It’s

    safe

  44. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem

  45. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually

  46. Why should I consider Elm? • It’s fast • It’s

    safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN

  47. Next steps • http://elm-lang.org (live demos, debugger, REPL) • https://pragmaticstudio.com/elm

    • @elmlang • @czaplic • @rtfeldman • http://noredinktech.tumblr.com

  48. Questions? @jclermont

  49. Thank you! @jclermont