A Practical Introduction to Elm

50 000 lines of elm code

0 runtime exceptions

100 000 lines of elm code

0 runtime exceptions

200 000 lines of elm code

0 runtime exceptions

A Practical Introduction to Elm

• What is Elm
• The syntax
• Type system
• Architecture
• Tools provided by Elm

Hello Elm!

• Syntax
• Elm-repl
• Types
• Currying

Buttons

• Interactive
• Architecture
• Elm-Reactor

Websockets

• Pure Functional
• Commands
• Subscriptions

What is Elm?

“Elm is a domain-specific programming language for declaratively creating web browser-based graphical user interfaces.

Elm is purely functional, and is developed with emphasis on usability, performance, and robustness.

It advertises "no runtime exceptions in practice," made possible by the Elm compiler's static type checking.”

Elm characteristics

• Pure Functional language
• All functions are curried
• Elm is strongly typed
• All values are immutable
• Elm is fast

Hello Elm example

function add(x) {
    return function (y) {
        return x + y;
    }
}

add(5)(10) // Returns 15

let addFive = add(5)
addFive(10) // Returns 15
addFive(3)   // Returns 8
					

Quick Recap

• Elm application starts at the function main
• Function application by spaces
• Elm does not need "return"
• The last part of the function type is the return type
• All functions in Elm are curried
• Use the repl to play with functions and types
• The compiler is your friend

Buttons example

Show me code

Quick Recap

• Elm logic is broken into: Model, view and update
• Messages are data
• Changes in the model are caused by messages

Websockets example

Quick Recap

• Elm is pure functional
• Cmd: Tell elm "engine" to do something
• Sub: Listen to events in the Elm "engine"
• Elm can communicate with javascript in the same way

Quick Recap on the tools

• elm make is the compiler (and your friend)
• elm repl lets you play with elm functions
• elm reactor is a tool for easy development
• elm install/diff/bumb/publish

Where to go from here

• elm-lang.org
• guide.elm-lang.org
• package.elm-lang.org
• play with the elm-repl
• (Re)write something in elm!

Additional reads

• elm-tutorial.org
• elm-news.com
• Elm slack chat

When to use Elm?

• Whenever you can use React / Angular / Ember
• Fullscreen / Just this element

Final Words

• Ask me
• Show me

Thank You