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

Elm: A new approach to building the front end

Avatar for Joel Clermont Joel Clermont
September 22, 2015
Technology
0
110

Elm: A new approach to building the front end

Avatar for Joel Clermont

Joel Clermont

September 22, 2015
Tweet

More Decks by Joel Clermont

See All by Joel Clermont
How to get unstuck
Avatar for Joel Clermont jclermont
0
160
Level Up Your Code Quality
Avatar for Joel Clermont jclermont
0
350
How to Save Time
Avatar for Joel Clermont jclermont
0
37
F# Type Providers
Avatar for Joel Clermont jclermont
0
91
Give Elm a Chance! (that conference)
Avatar for Joel Clermont jclermont
0
300
Give Elm a Chance (newCodeCamp)
Avatar for Joel Clermont jclermont
0
290
Give Elm a Chance!
Avatar for Joel Clermont jclermont
0
300
Property-based testing: work harder, not smarter
Avatar for Joel Clermont jclermont
0
450
Elm - A new approach to building the front end
Avatar for Joel Clermont jclermont
0
430

Other Decks in Technology

See All in Technology
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
240
「どこから読む？」コードとカルチャーに最速で馴染むための実践ガイド
Avatar for ZOZO Developers zozotech
PRO
0
440
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
920
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
Avatar for JaeSoon Jeong jeongjaesoon
0
110
EncryptedSharedPreferences が deprecated になっちゃった！どうしよう！ / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
Avatar for Yuki Anzai yanzm
0
360
2025年夏 コーディングエージェントを統べる者
Avatar for nwiizo nwiizo
0
170
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
Avatar for kawabeaver kawabeaver
0
410
現場で効くClaude Code ─ 最新動向と企業導入
Avatar for TakaakiKakei takaakikakei
1
250
2025年になってもまだMySQLが好き
Avatar for yoku0825 yoku0825
8
4.8k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
Avatar for KoheiOgawa shisyu_gaku
0
250
未経験者・初心者に贈る！40分でわかるAndroidアプリ開発の今と大事なポイント
Avatar for operandoOS operando
5
610
下手な強制、ダメ！絶対！ 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは？
Avatar for Masataka Tsukamoto tsukaman
2
450

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
72
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
112
20k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
43
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k

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