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

Fluent Conf 2018: Building web apps with Elm Tu...

Avatar for Jeremy Fairbank Jeremy Fairbank
June 12, 2018
Programming
2
900

Fluent Conf 2018: Building web apps with Elm Tutorial

Avatar for Jeremy Fairbank

Jeremy Fairbank

June 12, 2018
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
Avatar for Jeremy Fairbank jfairbank
1
230
CodeMash 2020: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
1
180
CodeMash 2020: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
1
350
Connect.Tech 2019: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
0
400
Connect.Tech 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
200
Lambda Squared 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
150
All Things Open 2018: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
2
270
Connect.Tech 2018: Effective React Testing
Avatar for Jeremy Fairbank jfairbank
1
190
Codestock 2018: Building a Resilient, API-driven Front-End with Elm
Avatar for Jeremy Fairbank jfairbank
0
290

Other Decks in Programming

See All in Programming
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
750
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.3k
TROCCOで実現するkintone+BigQueryによるオペレーション改善
Avatar for shota sato ssxota
0
110
Agent Skills Workshop - AIへの頼み方を仕組み化する
Avatar for Gota gotalab555
13
7.4k
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
0
570
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
Avatar for JunkiIshida junkiishida
1
280
浮動小数の比較について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
360
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
170
AIプロダクト時代のQAエンジニアに求められること
Avatar for imtnd imtnd
1
500
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
330
Event Storming
Avatar for Henning Schwentner hschwentner
3
1.3k
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
420

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
700
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
220
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
550
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
180

Transcript

  1. Jeremy Fairbank @elpapapollo / jfairbank Building web apps with Elm

    Visit README for demo and exercise URLs: bit.ly/fluent-elm-18

  2. @testdouble helps improves how the world build software. testdouble.com/agency

  3. bit.ly/programming-elm

  4. Functional and statically typed programming language for frontend development elm

  5. Web and UI Focused

  6. Compiles to JavaScript

  7. No runtime exceptions in practice.

  8. The 2nd argument to function `add` is causing a mismatch.

    7| add 2 "3" ^^^ Function `add` is expecting the 2nd argument to be: Int But it is: String Compile time static type checks

  9. Functional

  10. Pure Data in Data out

  11. Pure No side effects

  12. Pure Predictable and Testable!

  13. Immutable Data • Safety and consistency • Explicit flow of

    data • No subtle mutation bugs

  14. No undefined is not a function

  15. Fast

  16. One framework. No fatigue. Update View Model Messages

  17. ✓ Easier to write code ✓ Easier to write tests

    ✓ Easier to refactor

  18. Content • Functions and expressions • Static applications • Dynamic

    applications with the Elm Architecture • Working with Lists • Static Types and Type Aliases • Input Events and Union Types

  19. Format • Demos via ellie-app.com • Exercises via ellie-app.com •

    Q&A

  20. Coding Time! README for demo and exercise URLs: bit.ly/fluent-elm-18

  21. Update View Model Messages The Elm Architecture

  22. Application State Model

  23. Model Virtual DOM View UI as a Function

  24. elm Virtual DOM Todo List Learn Elm Build awesome Elm

    apps Learn functional programming <html /> Model: Todo List

  25. × Todo List Learn Elm Build awesome Elm apps Learn

    functional programming User deletes first todo item <html /> Model: New Todo List

  26. Todo List Learn Elm Build awesome Elm apps Learn functional

    programming View Model: New Todo List Elm notices missing todo item in virtual DOM list, so it just removes the corresponding <li> instead of fully rendering. elm Virtual DOM ×<html />

  27. Messages Standardized application events

  28. elm app model

  29. elm app model Events Text Input Mouse Click Associate message

    with event

  30. elm app model Events Text Input Mouse Click When event

    triggers (i.e. user clicks), deliver message

  31. Update Model New Model Respond to messages and create new

    state

  32. model Update View

  33. model Update View

  34. model Update View VDOM

  35. model Update View VDOM

  36. model Update View Select red color

  37. model Update View Select red color

  38. model Update View Select red color

  39. model Update View

  40. model Update View

  41. model Update View

  42. model Update View VDOM

  43. model Update View VDOM

  44. Coding Time!

  45. Resources • bit.ly/programming-elm • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org •

    www.elm-tutorial.org • builtwithelm.co • Slack • elmlang.herokuapp.com

  46. Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/fluent-elm-slides-18 Repo: bit.ly/fluent-elm-18