ELMA possible future for web frontend

Agenda

What is Elm? Elm features Elm ecosystem

Elm architecture

Why a possible future?

What is Elm?

Functional language

ML style language

Inspired by Haskell

Elm features

Statically typed∎ Primitive types∎ Basic data structures∎ Union types

Never null again

Immutability

Purely functional∎ Functions depend only on passed arguments∎ No side effects

Effects

Effects in JS

∎ Synchronous∎ Asynchronous via callback∎ Asynchronous via promise

MOCKS

Effects as Data

Effects in Elm

∎ Synchronous via Messages∎ Asynchronous via Tasks

Elm Tasks

∎ Module for async actions that might fail∎ Tasks can be easily chained together∎ Lazy: nothing will happen until something run them.

Interop with JS: Ports∎ Only way you have to receive or send informations from JS.∎ It works like a pub-sub mechanism.

Elm architecture

Basic Pattern:Counter App∎ Model∎ Messages∎ Update∎ View

here

Counter:User Flow

User clicks on the “+” button

Increment action is fired

Update function gets called

View gets updated

Commands and Subscriptions∎ Commands: Tasks that Elm runs for you in the background∎ Subscriptions: subscribe to data you care about

Subs Pattern:Dice Roller App

Dice Roller:User Flow

User clicks on the “Roll” button

Roll action is fired

Update function returns

command

Elm executes the task

“New Number” action is

fired

Update function

gets called

View gets updated

here

here

here

here

Why a possible future?

I don’t need Elm!Functional programming Modern JS is inspired by FP

Components React

Effect as data Flux / Redux

Type checking Flow.js / Typescript

Immutability ImmutableJS / Ramda / Lodash

Modules Webpack / Babel

∎ Syntax∎ Types∎ Immutability

Learning curve

∎ Compiling∎ Maybe and explicit error

handling

Use JS means...

Hard to start new projects

Optional features

Relies on programmers

Everything that is syntactically legal, that the compiler will accept, will eventually wind up in your code base.

John Carmack

Elm instead...

Guided programmers

Code easy to understand

Code easy to test

Elm ecosystem

Elm reactor

Elmpackages

Will Elm be the future?