Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Elm: A new approach to building the front end

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

Elm: A new approach to building the front end

Avatar for Joel Clermont

Joel Clermont

September 22, 2015

More Decks by Joel Clermont

See All by Joel Clermont
How to get unstuck
Avatar for Joel Clermont jclermont
0
220
Level Up Your Code Quality
Avatar for Joel Clermont jclermont
0
420
How to Save Time
Avatar for Joel Clermont jclermont
0
62
F# Type Providers
Avatar for Joel Clermont jclermont
0
120
Give Elm a Chance! (that conference)
Avatar for Joel Clermont jclermont
0
360
Give Elm a Chance (newCodeCamp)
Avatar for Joel Clermont jclermont
0
350
Give Elm a Chance!
Avatar for Joel Clermont jclermont
0
350
Property-based testing: work harder, not smarter
Avatar for Joel Clermont jclermont
0
500
Elm - A new approach to building the front end
Avatar for Joel Clermont jclermont
0
470

Other Decks in Technology

See All in Technology
オントロジーって 結局なにもの？ AI エージェントに「意味」を渡す知識設計の話
Avatar for TomoyukiMurakami greenmidori
0
260
顧客価値を追いかけたら、プライシングにたどり着いた
Avatar for SansanTech sansantech
PRO
2
460
dbt Semantic Layerで進めるenechainのデータ民主化
Avatar for Aki Zhou akizhou
1
220
「私が一番顧客に詳しい」を捨てる～ 全員が一次情報に精通する開発チームをつくり、PMが次のボトルネックへ染み出すまで
Avatar for 株式会社カミナシ kaminashi
3
1.3k
freeeにおける AI を用いた ブラウザ動作確認の自動化の取り組み
Avatar for freee freee
PRO
0
140
AWSDirectConnectの構築の進め方を整理してみた
Avatar for まちや masa_my
1
150
CloudWatch Logsのコスト最適化：どこまでAIに任せてどこから人間が承認すべきか
Avatar for Yuuki Yamashita yama3133
0
160
20年間 SNS サービス「GREE」 を支えた技術の刷新と、長期運用サービスの Kubernetes へのリアーキテクト
Avatar for gree_tech gree_tech
PRO
0
110
AI × アーキテクト 第1・2章｜生成AIの課題とアーキテクトの素養
Avatar for Daisuke Motoki daidaidai
1
230
シンプルな設定ファイルで実現する AWS IAM Identity Center の ユーザー管理Terraformフレームワークを公開しました / Simplifying AWS IAM Identity Center User Management: An Open-Source Terraform Framework
Avatar for Takashi Yamaguchi yamaguchitk333
0
160
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
Avatar for koukihosaka koukihosaka
1
390
『SAR衛星データ解析入門』の ご紹介とその応用
Avatar for じゃらしまる syuchimu
0
140

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
640
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
530
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
370
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
790
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
570
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
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