Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elm - A new approach to building the front end
Search
Joel Clermont
November 06, 2015
Programming
450
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
190
Level Up Your Code Quality
jclermont
0
390
How to Save Time
jclermont
0
52
F# Type Providers
jclermont
0
120
Give Elm a Chance! (that conference)
jclermont
0
350
Give Elm a Chance (newCodeCamp)
jclermont
0
330
Give Elm a Chance!
jclermont
0
340
Property-based testing: work harder, not smarter
jclermont
0
490
Elm: A new approach to building the front end
jclermont
0
130
Other Decks in Programming
See All in Programming
鹿野さんに聞く!『TypeScriptコードレシピ集』で磨く実践力
tonkotsuboy_com
2
240
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
600
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
190
トークンをケチるな、設計しろ:GitHub Copilotを賢く使うコンテキスト戦略
ochtum
0
140
フロントエンドとバックエンドで「1文字」を揃えよう
youkidearitai
PRO
0
730
The ROI of Quarkus for Spring Boot Applications
hollycummins
0
130
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.5k
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
200
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
600
技術記事、AIに書かせるか、自分で書くか? 〜それでも私が自分の手で書く理由〜 / #QiitaConference
jnchito
2
1.5k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
4.5k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
220
Featured
See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
180
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
Facilitating Awesome Meetings
lara
57
7k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
870
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.5k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
440
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
200
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
300
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
240
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.6k
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