Think like an Elm developer
Piper Niehaus Denver, CO, USA ● Backpacker / skier ● Nonprofit board chair ● @piperniehaus
Software Engineer at Pivotal Pivotal Tracker team ● Elm in Production since 2016 ○ Internal Products and Services team ● Kotlin ○ @piperniehaus
We all get excited about new languages @piperniehaus
Production changes everything Bugs matter ● Testing matters ● Maintainability matters ● @piperniehaus
Goals The promise (level set) ● The production hump ● What’s next? ● @piperniehaus
Agenda About me ● The promise of Elm ● Background ○ Language ○ Architecture ○ The Pivotal Tracker experience ● Is Elm right for you? ● @piperniehaus
Elm: A DSL for web apps Language ● Framework ● Ecosystem ● @piperniehaus
Elm in production @piperniehaus
Elm background Evan Czaplicki’s Harvard thesis ● Now at noredink ● Elm’s Benevolent Dictator For Life ● @piperniehaus
Benevolent dictator for life Design ● Direction ● Priorities ● Pace ● @piperniehaus
Agenda About me ● The promise of Elm ● Background ○ Language ○ Architecture ○ The Pivotal Tracker experience ● Is Elm right for you? ● @piperniehaus
Elm language Elm is a programming language that compiles to JavaScript Pure functional ● Strong static type system with a friendly compiler ● @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? ● @piperniehaus
What is a pure function? A function that takes some input and returns output without affecting or being affected by external state @piperniehaus
Pure function Impure function Function (arguments) { Function (arguments) { External Computations Computations state } } Return Return value value @piperniehaus
@piperniehaus
Pure vs impure functional programming languages Pure functional languages: Languages that support only functional paradigms (Haskell, Elm) ● Impure functional languages: Languages that support both functional and imperative style ● programming (Kotlin, Python) @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 ● @piperniehaus
Elm time travel debugger Because every function in Elm is pure ● See the system at any state ● Roll back, roll forward ● @piperniehaus
Time travel debugging @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? ● @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“ ○ @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 ○ @piperniehaus
Dynamic typing Types are checked at runtime Static typing Types are checked at compile time Strong static* typing Static typing with the goal of minimizing the gap between code that compiles and code that runs error-free @piperniehaus * While static is a definite CS term, strong is colloquial. This is our definition going forward.
Strong static Dynamic Static typing typing typing Code compiles Code compiles Code compiles Code runs without errors Code runs without errors Code runs without errors @piperniehaus
Strong static typing tools in Elm Extra 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 @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 ● @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 ● @piperniehaus
Elm’s friendly compiler Elm’s compiler messages are easy to read ● Makes it easy to rely on the compiler ● @piperniehaus
Example, a misspelled function name Function addInts is defined Oops! We tried to call it but misspelled Compiler error is helpful and friendly @piperniehaus
Agenda About me ● The promise of Elm ● Background ○ Language ○ Architecture ○ The Pivotal Tracker experience ● Is Elm right for you? ● @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 ● @piperniehaus
Elm architecture example User makes a Message is sent to change in the UI update function (onClick) View Update New model is passed to view function and Update function rendered in the returns a new browser model based on Model the old model and function arguments @piperniehaus
An example @piperniehaus
@piperniehaus
Benefits of the Elm architecture Single source of truth ● Easy to understand ● Removes race conditions ● Model and view stay in sync ● @piperniehaus
Why use Elm? Language Architecture Pure + + Static typing Architecture functions = Few runtime errors @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? ● @piperniehaus
Elm and functional programming at Pivotal Tracker 2016 2017 2018 Dashboard New user Project Kotlin, RoR / Much in Elm experience Memberships TypeScript React / discussion in Elm Page in Elm experiments Backbone @piperniehaus
Elm here! @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 ○ @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 ○ @piperniehaus
Continuing to use Elm mentalities Where else can we apply functional programming and strong types? ● More Elm? ○ TypeScript? ○ Kotlin? ○ @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? ● @piperniehaus
Elm lives up to its promise Runtime errors ● Race conditions ● Easy refactors ● Mindset change ● @piperniehaus
Encoding business logic into types Example: Managing memberships Project member ● First name ○ Last name ○ Email ○ Invitee ● Email ○ @piperniehaus
People @piperniehaus
@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? ● @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? ● ¯\_( ツ )_/¯ @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? ● @piperniehaus
Recommend
More recommend
