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
870

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
220
CodeMash 2020: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
1
160
CodeMash 2020: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
1
330
Connect.Tech 2019: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
0
370
Connect.Tech 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
190
Lambda Squared 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
140
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
180
Codestock 2018: Building a Resilient, API-driven Front-End with Elm
Avatar for Jeremy Fairbank jfairbank
0
270

Other Decks in Programming

See All in Programming
FlutterKaigi 2025 システム裏側
Avatar for Ryotaro Onoue yumnumm
0
1.1k
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
10
4.6k
Promise.tryで実現する新しいエラーハンドリング New error handling with Promise try
Avatar for おおいし bicstone
3
500
「10分以内に機能を消せる状態」 の実現のためにやっていること
Avatar for おぎ togishima
1
520
PyCon mini 東海 2025「個人ではじめるマルチAIエージェント入門 〜LangChain × LangGraphでアイデアを形にするステップ〜」
Avatar for komo_fr komofr
3
1.1k
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
Avatar for TVer Inc. techtver
PRO
3
1.1k
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
Avatar for shogogg shogogg
1
560
Vueで学ぶデータ構造入門 リンクリストとキューでリアクティビティを捉える / Vue Data Structures: Linked Lists and Queues for Reactivity
Avatar for konkarin konkarin
1
310
AIの弱点、やっぱりプログラミングは人間が(も)勉強しよう / YAPC AI and Programming
Avatar for Naoki Kishida kishida
9
5.1k
Flutterチームから作る組織の越境文化
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
0
470
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
6.3k

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
670
Done Done
Avatar for chrislema chrislema
186
16k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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