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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jeremy Fairbank Jeremy Fairbank
June 12, 2018
Programming
920
2

Fluent Conf 2018: Building web apps with Elm Tutorial

Avatar for Jeremy Fairbank

Jeremy Fairbank

June 12, 2018

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
Avatar for Jeremy Fairbank jfairbank
1
240
CodeMash 2020: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
1
190
CodeMash 2020: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
1
350
Connect.Tech 2019: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
0
410
Connect.Tech 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
210
Lambda Squared 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
170
All Things Open 2018: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
2
280
Connect.Tech 2018: Effective React Testing
Avatar for Jeremy Fairbank jfairbank
1
200
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
SkillがSkillを生む：QA観点出しを自動化した
Avatar for sontixyou sontixyou
6
3.4k
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
210
実践CRDT
Avatar for tamadeveloper tamadeveloper
0
570
Angular Signal Forms
Avatar for Dhananjay Kumar debug_mode
0
110
tRPCの概要と少しだけパフォーマンス
Avatar for Keigo Ebihara misoton665
2
210
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
190
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
380
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
520
Google Nest CamとApple Vision frameworkと猫🐈🐈‍⬛ / onishi50
Avatar for Yutaro Muta yutailang0119
0
110
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
220
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
Avatar for yasunori yasunori0418
1
150
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
140

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Design in an AI World
Avatar for tapps tapps
0
190
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.6k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
180
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
170
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
320
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k

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