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

Connect.Tech 2017: Functional Web with Elm

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jeremy Fairbank Jeremy Fairbank
September 20, 2017
Programming
210
0

Connect.Tech 2017: Functional Web with Elm

Avatar for Jeremy Fairbank

Jeremy Fairbank

September 20, 2017

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
Avatar for Jeremy Fairbank jfairbank
1
260
CodeMash 2020: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
1
230
CodeMash 2020: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
1
370
Connect.Tech 2019: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
0
440
Connect.Tech 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
270
Lambda Squared 2019: Solving the Boolean Identity Crisis
Avatar for Jeremy Fairbank jfairbank
0
200
All Things Open 2018: Practical Functional Programming
Avatar for Jeremy Fairbank jfairbank
2
290
Connect.Tech 2018: Effective React Testing
Avatar for Jeremy Fairbank jfairbank
1
230
Fluent Conf 2018: Building web apps with Elm Tutorial
Avatar for Jeremy Fairbank jfairbank
2
940

Other Decks in Programming

See All in Programming
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
200
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
720
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
180
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
1
370
AHC070解法紹介
Avatar for eijirou eijirou
0
130
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
380
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
120
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
560
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
510
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
190
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
170

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
770
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
570
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
500

Transcript

  1. Jeremy Fairbank @elpapapollo / jfairbank Functional Web with Elm Visit

    README for demo and exercise URLs: https://github.com/jfairbank/elm-workshop

  2. Software is broken. We are here to fix it. Say

    [email protected]

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

  4. Web and UI Focused

  5. Compiles to JavaScript

  6. No runtime exceptions in practice.

  7. 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

  8. Functional

  9. Pure Data in Data out

  10. Pure No side effects

  11. Pure Predictable and Testable!

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

    data • No subtle mutation bugs

  13. No undefined is not a function

  14. Fast

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

  16. ✓ Easier to write code ✓ Easier to write tests

    ✓ Easier to refactor

  17. Content • Functions and expressions • Lists, records, and immutability

    • Static types and type aliases • Union types and pattern matching • Building Apps with the Elm Architecture

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

    Q&A

  19. README for demo and exercise URLs: github.com/jfairbank/elm-workshop

  20. Update View Model Messages The Elm Architecture

  21. Application State Model

  22. Model Virtual DOM View UI as a Function

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

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

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

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

  25. 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 />

  26. Messages Standardized application events

  27. elm app model

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

    with event

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

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

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

    state

  31. model Update View

  32. model Update View

  33. model Update View VDOM

  34. model Update View VDOM

  35. model Update View Select red color

  36. model Update View Select red color

  37. model Update View Select red color

  38. model Update View

  39. model Update View

  40. model Update View

  41. model Update View VDOM

  42. model Update View VDOM

  43. Demo and Exercise

  44. Resources • elm-lang.org • elm-lang.org/examples • guide.elm-lang.org • www.elm-tutorial.org •

    builtwithelm.co • Slack • elmlang.herokuapp.com

  45. Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/elm-connect