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
0
420
Elm - A new approach to building the front end
As delivered at True North PHP 2015
Joel Clermont
November 06, 2015
Tweet
Share
More Decks by Joel Clermont
See All by Joel Clermont
How to get unstuck
jclermont
0
140
Level Up Your Code Quality
jclermont
0
340
How to Save Time
jclermont
0
35
F# Type Providers
jclermont
0
86
Give Elm a Chance! (that conference)
jclermont
0
290
Give Elm a Chance (newCodeCamp)
jclermont
0
280
Give Elm a Chance!
jclermont
0
290
Property-based testing: work harder, not smarter
jclermont
0
440
Elm: A new approach to building the front end
jclermont
0
100
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
290
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
260
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
96
33k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
570
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
170
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
940
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.7k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Applications with DynamoDB
mza
95
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
We Have a Design System, Now What?
morganepeng
53
7.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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