Elm Europe 2019

Elm

  • Pure functional language (ML/Haskell inspired)
  • No local state in views
  • No side effects in views - all views are pure functions
  • No runtime crashes
  • All-in-one:
    • Elm Language (JavaScript)
    • Type System (TypeScript)
    • Elm Compiler (Babel, Webpack)
    • Elm Architecture (React, Redux)

Sum Types All The Way Down

Richard Feldman

Warning: Esoteric talk 🤯

Idea: What if we recreate all existing elm types with custom types? 🤔

type IssuePriority 
    = High 
    | Medium
    | Low

Never

type Never
    = GiveMeOneMore Never

GiveMeOneMore (GiveMeOneMore (GiveMeOneMore (...))
  • Used in Task.perform to indicate tasks that can't fail

Elm-in-elm compiler

 

https://github.com/elm-in-elm/compiler

Elm-in-elm compiler

  • Currently written in Haskell (95.2%)
  • Why rewrite it in elm?? 🤨

Write Elm programs with interactive code playgrounds in Elm 😍

elm-physics

Creator and maintainer of elm-physics:

Actor Model in Elm

Albert Dahlin     

Setup

  • Many e-commerce Elm applications (80-110k LOC)
  • 20 developers working on the projects 

Challenges

  • Reusing and sharing code cross-project
  • Testing in isolation
  • On-boarding new developers

https://github.com/webbhuset/elm-actor-model/

Actor model

Code reuse

Actor model

Reusable module is called "process"

  • has a unique id - PID
  • defines communication via MsgIn and MsgOut
  • parent connects to it via mapIn and mapOut
  • processes are stored in a dictionary

NOTE: This type of architecture is natural for e.g. Erlang or Elixir, but feels really unnatural in Elm

Actor model

code example

mapIn : Msg -> Maybe Tags.MsgIn
mapIn globalMsg =
    case globalMsg of
        Msg.UI_Tags msg ->
            Just msg
        
        Msg.Event_Tags ->
            ....

mapOut : PID -> Tags.MsgOut -> SysMsg
mapOut myPid tagMsg =
    case tagMsg of
        Tags.GiveMeTags ->    
            -- fetch tags via API
        
        Tags.TagClicked tag ->
            -- load articles with the clicked tag

Designing with Elm

Jono Mallanyk

Goal

  •  help developers and designers work better together using Elm
  • better shared tooling between developers & designers
  • incorporate Elm principles in design tooling

Designing with Elm

Borrow the principles of The Elm Architecture

to create a specification language for new designs:

  • define a list of user interactions that can happen (user clicked on article details - Message)
  • define a list of state for the interactions (article is loading, loaded, failed - Model)
  • define state transitions (failed to load article - show error screen)

Biggest Elm app in Japan

Primitive types, type alias and opaque types

-- String represents id of the team
getByTeamId : String -> Team
getByTeamId teamId =
    ...
type alias TeamId 
    = String

getByTeamId : TeamId -> Team
getByTeamId teamId =
    ...
  • primitive type
  • type alias
  • Non-descriptive
  • Low safety
  • No encapsulation
module TeamId exposing (TeamId)

type TeamId =
    TeamId String

...
  • opaque types

Biggest Elm app in Japan

  • Descriptive
  • High safety
  • High encapsulation

From experiment to production: stories of Elm at Veepee

Elm as an alternative to React/Redux

"This week I started to use react-native + redux + saga in my work, and I can't believe people are used to that. Even being one of the less awful options in the mainstream, everything crashes so easily, tons of boilerplate and unnecessary libs to connect everything together, and it's a big mess, inconsistent and over-complicated APIs, breaking changes everytime, broken tutorials, etc. Knowing Elm and typed FP made me hate everything. I hope that in a near future we will do Elm mobile development in production."

 

Anonymous on Elm Slack

Setup

  • Update functions are decoupled from view functions
  • Update and view functions live separately
  • View functions receive the whole model

Making impossible video states impossible

+ livestream

video producer Dan Abrams

(* not the same person as Dan Abramov)

Live demo of the video software he made in Elm, which is, as he's giving the talk, being used to record him giving the talk.

Impossible states and transitions

Different camera views:

  • Full
  • Two third
  • Lower third

Transitions allowed only between certain views:

type Transition 
    = FullToTwoThird TwoThird
    | LowerThirdToFull LowerThird

STATE MACHINE

type CameraView 
    = Full
    | TwoThird
    | LowerThird

Elm as a Service

  • Storage (SQL, MongoDB, ...)
  • Backend
  • API (REST, GraphQL, ...)
  • Frontend: API access, decoders
    (fetch, axios, GraphQL via Apollo/Relay/...)
  • Frontend state management
    (Flux/Redux, Apollo/Relay cache, ...)
  • UI lib/framework
    (React, Vue, Angular, Reason, Elm, ...)

 

https://github.com/Lamdera/lamdera-chat-app

Elm Search - Hoogle for Elm

Design tokens in elm

Make the change easy, then make the easy change

Status of Elm development

Albert: Is Evan sitting alone and working on Elm?

Richard: ...yeah, that's pretty much the case :)

He works remotely and we sometimes have a conference call to sync.

Currently designing a way to "mock" API calls in tests. Example scenario:

"Test that when we send the message, (1) the current time is picked up and (2) an API call is sent to a certain URL with the current time as the timestamp."

Elm vs React

React

  • "Component-centric" architecture
  • Stateful components are key in this approach
  • Heavy focus on performance (concurrent mode is the upcoming big feature)
  • Facebook has control, develop according to their needs

Elm

  • Pure functional architecture
  • No stateful components
  • Heavy focus on reliability and simplicity (no runtime errors, type safety)
  • Reusability might be tricky
  • NoRedInk has control, develop according to their needs
Made with Slides.com