Think like an Elm developer

Size: px

Start display at page:

Download "Think like an Elm developer"

Todd Strickland
5 years ago
Views:

1 Think like an Elm developer

2 Piper Niehaus Denver, CO, USA Backpacker / skier Nonprofit board chair

3 Software Engineer at Pivotal Pivotal Tracker team Elm in Production since 2016 Internal Products and Services team Kotlin

4 We all get excited about new languages

5 Production changes everything Bugs matter Testing matters Maintainability matters

6 Goals The promise (level set) The production hump What s next?

7 Agenda About me The promise of Elm Background Language Architecture The Pivotal Tracker experience Is Elm right for you?

8 Elm: A DSL for web apps Language Framework Ecosystem

9 Elm in production

10 Elm background Evan Czaplicki s Harvard thesis Now at noredink Elm s Benevolent Dictator For Life

11 Benevolent dictator for life Design Direction Priorities Pace

12 Agenda About me The promise of Elm Background Language Architecture The Pivotal Tracker experience Is Elm right for you?

13 Elm language Elm is a programming language that compiles to JavaScript Pure functional Strong static type system with a friendly compiler

14 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?

15 What is a pure function? A function that takes some input and returns output without affecting or being affected by external state

16 Pure function Impure function Function (arguments) { Computations } Function (arguments) { External state Computations } Return value Return value

18 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)

19 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

20 Elm time travel debugger Because every function in Elm is pure See the system at any state Roll back, roll forward

21 Time travel debugging

22 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?

23 What is a type? An object s type describes Examples: The kind of data in the object What it can do String Int All languages must check types Can t do 1 + two

24 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

25 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 * While static is a definite CS term, strong is colloquial. This is our definition going forward.

26 Dynamic typing Code compiles Static typing Code compiles Code compiles Code runs without errors Code runs without errors Strong static typing Code runs without errors

27 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

28 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

29 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

30 Elm s friendly compiler Elm s compiler messages are easy to read Makes it easy to rely on the compiler

31 Example, a misspelled function name Function addints is defined Oops! We tried to call it but misspelled Compiler error is helpful and friendly

32 Agenda About me The promise of Elm Background Language Architecture The Pivotal Tracker experience Is Elm right for you?

33 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

passed to view function and rendered in the browser Model Update

34 Elm architecture example User makes a change in the UI (onclick) Message is sent to update function View Update New model is passed to view function and rendered in the browser Model Update function returns a new model based on the old model and function arguments

35 An example

37 Benefits of the Elm architecture Single source of truth Easy to understand Removes race conditions Model and view stay in sync

38 Why use Elm? Language Static typing + Architecture Pure functions + Architecture = Few runtime errors

39 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?

40 Elm and functional programming at Pivotal Tracker RoR / React / Backbone Much discussion Dashboard in Elm 2018 New user Project experience Memberships in Elm Page in Elm Kotlin, TypeScript experiments

41 Elm here!

42 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

43 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

44 Continuing to use Elm mentalities Where else can we apply functional programming and strong types? More Elm? TypeScript? Kotlin?

45 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?

46 Elm lives up to its promise Runtime errors Race conditions Easy refactors Mindset change

47 Encoding business logic into types Example: Managing memberships Project member First name Last name Invitee

48 People

50 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?

51 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? \_(ツ)_/

52 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?

53 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

54 Hello World The first modules More modules Main.elm Main.elm Main.elm Model & Types Update loop View Model & Types Update loop View.elm Takes: Model Returns: Html Model & Types Update loop View.elm Takes: Model Returns: Html (Etc).elm

55 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?

56 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

57 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

58 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

59 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?

60 Testing in Elm The 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.

61 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

65 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?

66 Testing phase 1 Tests here Not here The first modules Main.elm Model & Types Update loop View.elm Takes: Model Returns: Html

67 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

68 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

69 The first modules Selector pattern Tests here Main.elm Update function Model & Types Selector.elm Tests here Takes: Model Returns: Selector View.elm Takes: Selector Returns: Html

70 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

71 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

72 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

73 JavaScript interop Elm sends messages to and from JavaScript Ports Native code (EEK!) Multi-language code base

74 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

75 Background on JS interop Ports Recommended Hooks into the update loop Native code Not recommended Less safe

76 What s a port? Elm app JavaScript Outgoing Incoming: Update loop sends a Cmd to contact JS via a port Subscribe to the port, get the message, do the thing Incoming: Outgoing Subscribe to the port, Msg enters the update loop Send to a port in Elm

77 Good: Anything JS can do, Elm can do More libraries Meh: Communication via JSON In and out of type safety Multiple languages in your codebase

78 Native code Very discouraged, hacky way of wrapping native (JS) code in Elm to create Elm libraries Won t work in Elm 0.19

79 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

80 Elm devs support multiple languages long-term Elm is growing but lacks libraries Transition to Elm is gradual Need to maintain Ports long term During the transition, you ll need Elm and JS to still work Transition may not be the goal

81 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

82 Agenda About me The promise of Elm The Pivotal Tracker experience Is Elm right for you? It depends Think like an elm developer

83 As a developer... :) Coding feels good Learning Excitement High productivity after ramp up Easy refactors :( Need to know multiple languages Port / JS complexity Longer ramp-up

84 As a product owner or tester... :) Time travel debugger No runtime exceptions :( Potential higher cost for features that require libraries

85 As a user... :) No runtime exceptions :( Excitement is the spice of life?

86 Agenda About me The promise of Elm The Pivotal Tracker experience Is Elm right for you? It depends Think like an elm developer

87 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

88 Think like an Elm developer Code compiles Code compiles Language + culture Code runs without errors Code runs without errors

89 Language + Culture Elm Language Kotlin Language Typescript Language Culture Culture Culture

90 Cultural shifts Kotlin Typescript

91 Strong static typing / FP in Kotlin Pay attention to warnings compilekotlin { kotlinoptions.allwarningsaserrors = true } Be functionally minded (avoid side-effects) Avoid!!

92 Compiles with a warning Bird is missing

93 Strong static typing / FP in Typescript Be functionally minded Always turn on --strictnullchecks Avoid Any Exception: 3rd party libraries, sometimes Avoid type casting Avoid returns after case statements

94 Don t override TypeScript exhaustiveness checking Adding a return after the case statement ends disables exhaustiveness checking

95 You should Use Elm Think like an Elm developer

96 Happy (FUNctional) coding!

Beyond JavaScript Frameworks: Writing Reliable Web Apps With. Elm. Erik Wendel DevDays Vilnius 2018

Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm Erik Wendel DevDays Vilnius 2018 Who is Jonathan Ive? Erik Wendel JavaZone 2017 Elm is like Jonathan Ive would have designed a programming