Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure...
Transcript of Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure...
![Page 1: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/1.jpg)
Think like an Elm developer
![Page 2: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/2.jpg)
@piperniehaus
Piper Niehaus● Denver, CO, USA● Backpacker / skier● Nonprofit board chair
![Page 3: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/3.jpg)
@piperniehaus
Software Engineer at Pivotal
● Pivotal Tracker team○ Elm in Production since 2016
● Internal Products and Services team○ Kotlin
![Page 4: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/4.jpg)
@piperniehaus
We all get excited about new languages
![Page 5: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/5.jpg)
@piperniehaus
Production changes everything● Bugs matter● Testing matters● Maintainability matters
![Page 6: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/6.jpg)
@piperniehaus
Goals● The promise (level set)● The production hump● What’s next?
![Page 7: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/7.jpg)
@piperniehaus
Agenda● About me● The promise of Elm
○ Background○ Language○ Architecture
● The Pivotal Tracker experience● Is Elm right for you?
![Page 8: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/8.jpg)
@piperniehaus
Elm: A DSL for web apps● Language● Framework● Ecosystem
![Page 9: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/9.jpg)
@piperniehaus
Elm in production
![Page 10: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/10.jpg)
@piperniehaus
Elm background
● Evan Czaplicki’s Harvard thesis● Now at noredink ● Elm’s Benevolent Dictator For Life
![Page 11: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/11.jpg)
@piperniehaus
Benevolent dictator for life● Design● Direction● Priorities● Pace
![Page 12: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/12.jpg)
@piperniehaus
Agenda● About me● The promise of Elm
○ Background○ Language○ Architecture
● The Pivotal Tracker experience● Is Elm right for you?
![Page 13: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/13.jpg)
@piperniehaus
Elm is a programming language that compiles to JavaScript
● Pure functional● Strong static type system with a friendly compiler
Elm language
![Page 14: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/14.jpg)
@piperniehaus
Agenda● About me● The promise of Elm
○ Background○ Language
■ Pure functional■ Strong static type system with a friendly compiler
○ Architecture
● The Pivotal Tracker experience● Is Elm right for you?
![Page 15: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/15.jpg)
@piperniehaus
What is a pure function?A function that takes some input and returns output without affecting or being affected by external state
![Page 16: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/16.jpg)
@piperniehaus
Pure functionFunction (arguments) {
Computations
}
External state
Impure function
Return value
Return value
Function (arguments) {
Computations
}
![Page 17: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/17.jpg)
@piperniehaus
![Page 18: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/18.jpg)
@piperniehaus
Pure vs impure functional programming languagesPure functional languages:
● Languages that support only functional paradigms (Haskell, Elm)
Impure functional languages:
● Languages that support both functional and imperative style programming (Kotlin, Python)
![Page 19: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/19.jpg)
@piperniehaus
Benefits of pure functional programming● Consistency● Code is easy to follow and understand● A function given the same values always has the same result● Lack of race conditions● Time travel debugger
![Page 20: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/20.jpg)
@piperniehaus
Elm time travel debugger● Because every function in Elm is pure● See the system at any state● Roll back, roll forward
![Page 21: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/21.jpg)
@piperniehaus
Time travel debugging
![Page 22: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/22.jpg)
@piperniehaus
Agenda● About me● The promise of Elm
○ Background○ Language
■ Pure functional■ Strong static type system with a friendly compiler
○ Architecture
● The Pivotal Tracker experience● Is Elm right for you?
![Page 23: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/23.jpg)
@piperniehaus
What is a type?● An object’s type describes
○ The kind of data in the object○ What it can do
● Examples: ○ String○ Int
● All languages must check types○ Can’t do 1 + “two“
![Page 24: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/24.jpg)
@piperniehaus
What is static typing?● All languages must check types but statically typed languages check at
compile time, while dynamically typed languages check at runtime.● Example: Can’t do 1 + “two“
○ In ruby: we find this out when we try to load a page and see an error○ In Elm: we can’t even compile our code to run the app at all
![Page 25: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/25.jpg)
@piperniehaus
Dynamic typingTypes are checked at runtime
Static typingTypes are checked at compile time
Strong static* typingStatic typing with the goal of minimizing the gap between code that compiles and code that runs error-free
* While static is a definite CS term, strong is colloquial. This is our definition going forward.
![Page 26: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/26.jpg)
@piperniehaus
Code compiles
Static typing
Strong static typing
Code compiles
Code runs without errors
Code compiles
Code runs without errors
Dynamic typing
Code runs without errors
![Page 27: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/27.jpg)
@piperniehaus
Strong static typing tools in ElmExtra checks to prevent runtime errors. EG:
● Custom types● Null checks● Exhaustiveness checks
○ type Pet = Cat | Dog | Fish○ Fido is a pet. ○ Everywhere we use fido, we must account for the possibility that fido could be a cat, a dog
or a fish
![Page 28: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/28.jpg)
@piperniehaus
Benefits of strong static typing...● Catches errors early and preempts null pointer exceptions● Provides parameter + return type matching● Makes impossible states impossible (no need to test them)● Encode business logic into type system
![Page 29: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/29.jpg)
@piperniehaus
For the developer, strong static typing means...● Enables developers to focus on business logic● Provides fast feedback● Makes code easy to read● Refactoring is easy
![Page 30: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/30.jpg)
@piperniehaus
Elm’s friendly compiler● Elm’s compiler messages are easy to read● Makes it easy to rely on the compiler
![Page 31: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/31.jpg)
@piperniehaus
Example, a misspelled function nameFunction addInts is defined
Oops! We tried to call it but misspelled
Compiler error is helpful and friendly
![Page 32: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/32.jpg)
@piperniehaus
Agenda● About me● The promise of Elm
○ Background○ Language○ Architecture
● The Pivotal Tracker experience● Is Elm right for you?
![Page 33: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/33.jpg)
@piperniehaus
What is the Elm architecture?A way of building web apps that separates an application into:
● Model: the application’s current state● Update: the only way that the state is updated● View: the application’s current state in html format
The elm architecture feels natural in Elm, but it also works in other languages
● Inspiration for Redux
![Page 34: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/34.jpg)
@piperniehaus
Elm architecture example
View
Model
Update
User makes a change in the UI(onClick)
Message is sent to update function
Update function returns a new model based on the old model and function arguments
New model is passed to view function and rendered in the browser
![Page 35: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/35.jpg)
@piperniehaus
An example
![Page 36: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/36.jpg)
@piperniehaus
![Page 37: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/37.jpg)
@piperniehaus
Benefits of the Elm architecture● Single source of truth● Easy to understand● Removes race conditions● Model and view stay in sync
![Page 38: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/38.jpg)
@piperniehaus
Why use Elm?
Static typing Pure functions Architecture+
=Few runtime errors
+
Language Architecture
![Page 39: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/39.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling○ Testing○ JavaScript interop
● Is Elm right for you?
![Page 40: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/40.jpg)
@piperniehaus
Elm and functional programming at Pivotal Tracker
RoR / React /
Backbone
Dashboard in Elm
Project Memberships Page in Elm
2016 2017 2018
Kotlin, TypeScript
experiments
New user experience
in Elm
Much discussion
![Page 41: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/41.jpg)
@piperniehaus
Elm here!
![Page 42: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/42.jpg)
@piperniehaus
The decision to use Elm ● Developers using Elm in personal projects● Multiple meetings, much thought
○ Would Elm stick around?○ Interop between multiple languages?○ Developers using multiple languages?
● Started in an isolated piece of the app○ Not interconnected with other stuff○ Easy to pull out if it didn’t work
![Page 43: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/43.jpg)
@piperniehaus
Projects● The Dashboard page
○ Learning curve○ (Most) developers like it○ Challenge of scaling an Elm app○ Testing philosophies in Elm vs on our team
● Expanded usage○ Testing hitting a stride○ Challenge of interop with Javascript external libraries
![Page 44: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/44.jpg)
@piperniehaus
Continuing to use Elm mentalities● Where else can we apply functional programming and strong types?
○ More Elm?○ TypeScript?○ Kotlin?
![Page 45: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/45.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling○ Testing○ JavaScript interop
● Is Elm right for you?
![Page 46: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/46.jpg)
@piperniehaus
Elm lives up to its promise● Runtime errors● Race conditions● Easy refactors● Mindset change
![Page 47: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/47.jpg)
@piperniehaus
Encoding business logic into typesExample: Managing memberships
● Project member○ First name○ Last name○ Email
● Invitee○ Email
![Page 48: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/48.jpg)
@piperniehaus
People
![Page 49: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/49.jpg)
@piperniehaus
![Page 50: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/50.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling○ Testing○ JavaScript interop
● Is Elm right for you?
![Page 51: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/51.jpg)
@piperniehaus
How to structure a large Elm app?● It depends™● One of the biggest hurdles and biggest FAQs● Big files? Small files?● Big update loops? Multiple update loops?
¯\_(ツ)_/¯
![Page 52: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/52.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling
■ Puzzle ■ Mindset
○ Testing
● Is Elm right for you?
![Page 53: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/53.jpg)
@piperniehaus
File structure puzzle● Pure function = less obvious structure● Elm apps are broken up into Modules● Each file is a module● Modules have public (exposed) functions and private functions
![Page 54: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/54.jpg)
@piperniehaus
Hello World
Main.elm
● Model & Types● Update loop● View
The first modules
Main.elm
● Model & Types● Update loop
View.elm
● Takes: Model● Returns: Html
More modules
Main.elm
● Model & Types● Update loop
View.elm
● Takes: Model● Returns: Html
(Etc).elm
![Page 55: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/55.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling
■ Puzzle ■ Mindset
○ Testing
● Is Elm right for you?
![Page 56: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/56.jpg)
@piperniehaus
Elm structure mindset● Each Tracker Elm app has a different structure● We debated
○ Conventions?○ Top-down structures in advance?○ Big files?
● Conclusions○ Refactor often (for now)○ Follow guidelines
![Page 57: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/57.jpg)
@piperniehaus
Ease of refactoring Elm● Ease of refactoring Elm allows delay of architectural decisions● Compiler makes large files easier to manage● We have restructured all Elm projects multiple times
![Page 58: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/58.jpg)
@piperniehaus
Landing point: Conventional Wisdom +● Conventional wisdom:
○ Keep everything together until it starts to clump naturally○ Break clumps into modules○ Modules generally structure around a type
● Tracker addendum:○ Use tests and module exposures to drive structure
![Page 59: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/59.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Types & FP in practice○ Scaling○ Testing
■ Elm language■ Elm application
○ JavaScript interop
● Is Elm right for you?
![Page 60: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/60.jpg)
@piperniehaus
Testing in ElmThe myth:
● If it compiles, it works
The reality:
● The elm compiler catches many errors● Testing business logic is still important
The compiler prevents using a String where we need an Int, but it can’t prevent using the wrong Int all together.
![Page 61: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/61.jpg)
@piperniehaus
Test/Type Driven Development (TDD)● Use compiler failures AND tests to drive code● Compiler ensures that code will always run● Tests ensure that code will fulfill business logic
![Page 63: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/63.jpg)
@piperniehaus
![Page 64: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/64.jpg)
@piperniehaus
![Page 65: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/65.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Scaling○ Testing
■ Elm language■ Elm application
○ JavaScript interop
● Is Elm right for you?
![Page 66: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/66.jpg)
@piperniehaus
Testing phase 1 The first modules
Main.elm
● Model & Types● Update loop
View.elm
● Takes: Model● Returns: Html
Tests here
Not here
![Page 67: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/67.jpg)
@piperniehaus
Testing the update loop● Update loop is the main logic of the app● Pure functional makes testing easier● Elm architecture makes testing resultant updates hard
![Page 68: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/68.jpg)
@piperniehaus
Testing HTML● We test HTML output via Happy Path integration tests
○ Testing HTML is brittle
● We don’t test the view○ Much debate○ Testing view output in Elm is cumbersome
![Page 69: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/69.jpg)
@piperniehaus
Selector patternThe first modules
Main.elm
● Update function● Model & Types
Selector.elm
● Takes: Model● Returns: Selector
View.elm
● Takes: Selector● Returns: Html
Tests here
Tests here
![Page 70: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/70.jpg)
@piperniehaus
Selectors● Middle layer between model and view● Computed, not stored● “View state”
Model
● Stored application state
Selector
● Calculated state
View
● HTML based on selector calculations
![Page 71: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/71.jpg)
@piperniehaus
Elm tests driving structure● If no external modules use a function, don’t expose it● If a module exposes a function, test it● If an unexposed function feels like it needs testing, make a new module
and expose it
![Page 72: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/72.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Scaling○ Testing○ JavaScript interop
● Is Elm right for you?○ It depends™○ Think like an elm developer
![Page 73: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/73.jpg)
@piperniehaus
JavaScript interop● Elm sends messages to and from JavaScript
○ Ports ○ Native code (EEK!)
● Multi-language code base
![Page 74: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/74.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Scaling○ Testing○ JavaScript interop
■ Background■ Multi-language code base
● Is Elm right for you?○ It depends™○ Think like an elm developer
![Page 75: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/75.jpg)
@piperniehaus
Background on JS interop● Ports
○ Recommended○ Hooks into the update loop
● “Native code”○ Not recommended○ Less safe
![Page 76: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/76.jpg)
@piperniehaus
What’s a port?Elm app
Outgoing
Update loop sends a Cmd to contact JS via a port
Incoming:
Subscribe to the port, Msg enters the update loop
JavaScript
Incoming:
Subscribe to the port, get the message, do the thing
Outgoing
Send to a port in Elm
![Page 77: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/77.jpg)
@piperniehaus
Good:● Anything JS can do, Elm can do● More libraries
● Communication via JSON● In and out of type safety● Multiple languages in your
codebase
Meh:
![Page 78: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/78.jpg)
@piperniehaus
“Native” code● Very discouraged, hacky way of wrapping native (JS) code in Elm to create
Elm libraries● Won’t work in Elm 0.19
![Page 79: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/79.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience
○ Background○ Scaling○ Testing○ JavaScript interop
■ Background■ Multi-language code base
● Is Elm right for you?○ It depends™○ Think like an elm developer
![Page 80: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/80.jpg)
@piperniehaus
Elm devs support multiple languages long-term● Elm is growing but lacks libraries
○ Need to maintain Ports long term
● Transition to Elm is gradual○ During the transition, you’ll need Elm and JS to still work
● Transition may not be the goal
![Page 81: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/81.jpg)
@piperniehaus
Issues with supporting multiple languages ● Developers need proficiency in multiple languages● Same code in multiple languages?● Dependent on libraries and webpack knowledge
○ React-elm-components doesn’t work with React 16
● “Native” libraries will disappear in next Elm version
![Page 82: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/82.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience● Is Elm right for you?
○ It depends™○ Think like an elm developer
![Page 83: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/83.jpg)
@piperniehaus
:)● Coding feels good● Learning● Excitement● High productivity after
ramp up● Easy refactors
As a developer...
:(● Need to know multiple
languages● Port / JS complexity● Longer ramp-up
![Page 84: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/84.jpg)
@piperniehaus
:)● Time travel debugger● No runtime exceptions
As a product owner or tester...
:(● Potential higher cost for
features that require libraries
![Page 85: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/85.jpg)
@piperniehaus
:)● No runtime exceptions
As a user...
:(● Excitement is the spice
of life?
![Page 86: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/86.jpg)
@piperniehaus
Agenda● About me● The promise of Elm● The Pivotal Tracker experience● Is Elm right for you?
○ It depends™○ Think like an elm developer
![Page 87: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/87.jpg)
@piperniehaus
What if Elm isn’t right for you?Elm learnings can still be important
● Encode business logic in the type system● Make impossible states impossible● Minimize side effects to minimize confusion
Culture can compensate for language
● Similar to TDD
![Page 88: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/88.jpg)
@piperniehaus
Think like an Elm developer
Language + culture
Code compiles
Code runs without errors
Code runs without errors
Code compiles
![Page 89: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/89.jpg)
@piperniehaus
Language + Culture
CultureLanguageElm
CultureLanguageKotlin
CultureLanguageTypescript
![Page 90: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/90.jpg)
@piperniehaus
Cultural shifts● Kotlin● Typescript
![Page 91: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/91.jpg)
@piperniehaus
● Pay attention to warnings○ compileKotlin { kotlinOptions.allWarningsAsErrors = true }
● Be functionally minded (avoid side-effects)● Avoid !!
Strong static typing / FP in Kotlin
![Page 92: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/92.jpg)
@piperniehaus
Compiles with a warning
Bird is missing
![Page 93: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/93.jpg)
@piperniehaus
● Be functionally minded● Always turn on --strictNullChecks● Avoid Any
○ Exception: 3rd party libraries, sometimes
● Avoid type casting● Avoid returns after case statements
Strong static typing / FP in Typescript
![Page 94: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/94.jpg)
@piperniehaus
Don’t override TypeScript exhaustiveness checking
Adding a return after the case statement ends disables exhaustiveness checking
![Page 95: Think like an Elm developer - QConSP · programming (Kotlin, Python) @piperniehaus Benefits of pure functional programming Consistency Code is easy to follow and understand A function](https://reader033.fdocuments.us/reader033/viewer/2022043005/5f8c6204dc36b95f8c6d4180/html5/thumbnails/95.jpg)
@piperniehaus
You should● Use Elm● Think like an Elm developer