Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Elm - A new approach to building the front end
Search
Joel Clermont
November 06, 2015
Programming
460
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Elm - A new approach to building the front end
As delivered at True North PHP 2015
Joel Clermont
November 06, 2015
More Decks by Joel Clermont
See All by Joel Clermont
How to get unstuck
jclermont
0
210
Level Up Your Code Quality
jclermont
0
410
How to Save Time
jclermont
0
60
F# Type Providers
jclermont
0
120
Give Elm a Chance! (that conference)
jclermont
0
350
Give Elm a Chance (newCodeCamp)
jclermont
0
340
Give Elm a Chance!
jclermont
0
350
Property-based testing: work harder, not smarter
jclermont
0
500
Elm: A new approach to building the front end
jclermont
0
130
Other Decks in Programming
See All in Programming
Agents on Rails - Rails at Scale 2026
irinanazarova
0
180
LoopHub - ローカルで動く GitHub で、AI と共同開発
jugyo
1
570
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
otouto
0
330
Jetpack Compose メカニズム
skydoves
0
470
パズルゲームの作り方 / how to make puzzle games
kaityo256
PRO
2
150
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
300
Vue Fes Japan 2026 タイムテーブル徹底解説
448jp
1
500
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
rkaga
5
4.3k
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
yusuga
1
540
AI × TiDD / 2026.09.05 Redmine 大阪
tokudiro
1
180
Kiroで創り、AgentCoreで繋ぐ!AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
licux
4
760
AI Agent時代のリアーキテクチャ戦略と実践
hokaccha
9
4.9k
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
6k
Agile that works and the tools we love
rasmusluckow
331
22k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
The Cost Of JavaScript in 2023
addyosmani
55
10k
Ethics towards AI in product and experience design
skipperchong
2
380
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Un-Boring Meetings
codingconduct
0
420
Abbi's Birthday
coloredviolet
4
10k
Heart Work Chapter 1 - Part 1
lfama
PRO
10
36k
Scaling GitHub
holman
464
140k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.2k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
5
730
Transcript
Elm A new approach to building the front end Joel
Clermont @jclermont
What to expect • Elm language tour
What to expect • Elm language tour • Application architecture
overview
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app • How does this fit in with my current process?
What to expect • Elm language tour • Application architecture
overview • Tour an Elm app • How does this fit in with my current process? • Tooling
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?
Elm as a language
Pure Functions
Immutable Data
Statically Typed (plus types as data)
Statically Typed (another example)
Functional Programming • higher-order functions • currying • recursion •
pattern matching
All hail the pipe!
Questions?
Elm architecture
Model
Update
View
Questions?
Tour a simple app
Model
Update
View
None
Questions?
How does this fit in?
From Elm to your browser • compile to JS
From Elm to your browser • compile to JS •
link JS source in your web app
From Elm to your browser • compile to JS •
link JS source in your web app • Elm.fullscreen
From Elm to your browser • compile to JS •
link JS source in your web app • Elm.fullscreen • Elm.embed
It’s just HTML/CSS/JS
Excellent JS interop
Questions?
Tooling
Compiler
Excellent tooling • Package manager
Excellent tooling • Package manager • REPL
Excellent tooling • Package manager • REPL • Interactive debugger
Excellent tooling • Package manager • REPL • Interactive debugger
• Great documentation
Questions?
Why should I consider Elm? • It’s fast
Why should I consider Elm? • It’s fast • It’s
safe
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem • Easy to integrate gradually
Why should I consider Elm? • It’s fast • It’s
safe • Great tooling and ecosystem • Easy to integrate gradually • It’s FUN
Next steps • http://elm-lang.org (live demos, debugger, REPL) • https://pragmaticstudio.com/elm
• https://pragmaticstudio.com/blog/2014/12/19/ getting-started-with-elm • @elmlang @czaplic @rtfeldman • http://noredinktech.tumblr.com
Questions? @jclermont
https://joind.in/15744 Thank you! @jclermont