Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wendel - Codemotion Amsterdam 2018

Beyond JavaScript Frameworks: 
Writing Reliable Web Apps With
Elm
Erik Wendel 
Codemotion Amsterdam 2018

– Peder Korsveien
Elm is like Jonathan Ive would have designed a
programming language – it is minimalistic, user-friendly
and it just works

How many of you…
…write JavaScript at work?

Did you ever…
…ship an app with conﬁdence it
wouldn`t crash in production? 
(without loads of QA)

Did you ever…
…feel completely safe after a  
large refactor of the frontend code?

Did you ever…
…become overwhelmed by the
amount of frontend tech in 2018?

Did you ever…
…feel like not all team members are
comfortable with frontend tasks?

Check, check, check…
JavaScript fatigue
Worrysome refactors
Nail-biting deploys
Dedicated frontend devs
✅
✅
✅
✅

I will argue that Elm addresses these issues

while also providing
a dedicated pair-programmer
error messages that actually help
no runtime errors

Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wendel - Codemotion Amsterdam 2018

User interface expert, experienced with
javascript and single-page apps
Erik Wendel
Serving Elm in
production to 1M+ users
Web Development Lead at
BEKK Consulting, Oslo  
(450 people)
Worked with large
Norwegian companies like
SpareBank1 and NSB
Founder of 
Oslo Elm Meetup (2016) 
Oslo Elm Day (2017)

Agenda
1. How Elm works 
Compared to the JS of today 
2. App Example 
Counter app
 
3. Does Anyone Use Elm? 
A few stories and examples

1. How Elm works 
Compared to the JS of today 
2. App Example 
Counter app
 
3. Does Anyone Use Elm? 
A few stories and examples 
Agenda

Elm is a language compiling to JavaScript
it is not another library or a framework
How does Elm compare to React?

Elm and JavaScript are totally different
In terms of syntax and semantics

Elm uses pure functions and virtual dom
to create a tree of components

Elm does not allow component state
all state is stored in top-level store, like Redux

Elm uses the Redux architecture
actually, it is the other way around - Redux was inspired by Elm

“Elm is basically React-
Redux with type
safety”

This is how it works
<div id="container"></div>
<script src=“main.js"></script>
<script>
var node = document.getElementById('container');
var app = Elm.Main.embed(node);
</script>

A quick overview
1. Correctness, maintainability and  
developer-friendliness comes ﬁrst 
 
2. A functional language of the ML family 
(F#, OCaml, Haskell) 
 
3. No run-time errors (!) 
 
4. Heavily opinionated

Key Language Features
1. All data is immutable, and there is no null 
 
2. Expression-oriented, no statements 
Everything evaluates to a value 
 
3. Pure (side-effects handled by runtime) 
Like redux-saga 
 
4. Architecture as a built-in feature 
Redux is a JavaScript-adaptation of The Elm Architecture 
 
5. Small but expressive feature set 
Fits together like Lego 
Therefore: it’s pretty easy to learn

increment x =
x + 1
five = increment 4
Functions 
Kind of important in functional
programming

increment : Int -> Int
increment x =
x + 1
five : Int
five = increment 4
Type Inference 
Elm is smart, but you’d still want
to have explicit types

-- constant
x : Int
x = 42
-- tuple
position : (Int, Int)
position = (3, 2)
-- object (called record)
person : { name : String, age : Int }
person =
{ name = "Erik"
, age = 30
}
Data 
Constants, tuples og objects

type alias Coordinates = (Int, Int)
playerPosition : Coordinates
playerPosition = (0,0)
type alias Discount = Int
studentDiscount: Discount
studentDiscount = 10
Type Alias 
Allows us to deﬁne new
types

type alias Customer =
{ name: String
, age: Int
}
erik : Customer
erik =
{ name = "Erik"
, age = 24
}
Type Alias 
Works best with objects

Example 
Three types of customers:  
ordinary, students and companies

2. Hard to ﬁnd the possible values of CustomerType
1. Easy to mistype
3. You don’t get any help from the compiler
4. You end up with lots of ﬁelds with dummy values

type CustomerType
= Student
| Corporate
| Private
Union Types 
Surprisingly useful!

type CustomerType
= Student Int
| Corporate String
| Private
Union Types 
Every branch can contain different values

type CustomerType = Student Discount | Corporate CompanyName | Private
getDiscount : CustomerType -> Discount
getDiscount class =
case class of
Student discount ->
discount
Corporate name ->
0
Private ->
0 Union Types 
Values are unwrapped with
pattern matching

type Maybe a = Just a | Nothing
Maybe 
Eliminating the need for null and
undeﬁned

type alias Game =
{ highscore: Maybe Int
}
Maybe 
Eliminating the need for null and undeﬁned

type alias Game =
{ highscore: Maybe Int
}
getHighscore : Game -> String
getHighscore game =
case game.highscore of
Just score ->
toString score
Nothing ->
"No highscore"
Maybe 
The compiler will force us to
handle all cases (similarily with ajax
and other unsafe operations)

<div class="ninja">
<span>Banzai!</span>
</div>
HTML 
Creating it in Elm

main =
div [ class "ninja" ]
[ span []
[ text "Banzai!" ]
]
HTML 
Like React without JSX (hyperscript)

main : Html a
main =
[ span []
[ text "Banzai!" ]
]
HTML 
What does a mean?

main : Html Msg
main =
[ span [ onClick DoSomethingCool ]
[ text "Banzai!" ]
]
HTML 
The Html-type includes the type that
will be created by user interactions  
(like Redux actions)

-- our entire app state (store)
model: Model
-- represent data with html (react)
view: Model -> Html Msg
-- changes to app state (reducers)
update: Msg -> Model -> Model
The Elm
Architecture

Which JavaScript-libraries would you need to get this out of the box?
1. React 
Virtual DOM
2. Redux 
Our built-in architecture
3. ImmutableJS 
For full immutability 
 
4. TypeScript eller Flow 
For (a considerably weaker) type safety
5. ESLint 
Enforcing code style and code-level sanity

Elm has been around for quite a few years, attracting
attention and generating conference talks, but is it
really ready for production? 
 
 
Is anyone using it in their business-critical, user-facing
applications? If so, what’s their stories? 
So…

First meetup in May 2016 
Huge interest with no marketing 
150 members and 42 attendees 
 
January 2018: 
398 members 
 
Monthly meetups
Oslo Elm Meetup

One-day, single-track conference in  
Oslo, June 2017 
105 attendees 
10 speakers from 5 countries 
All talks are on YouTube 
 
Next edition: most likely fall 2018
Oslo Elm Day

Here’s two example apps 
written in Elm for different reasons

Switcharoo 
Conference information system

NSB
(Norwegian Railways, like SJ) 
Summer interns doing seat
reservation app

1. Many are experimenting with or using Elm 
 
2. People are happy! (100%“would use again”) 
 
3. Easy onboarding, especially for FPers and  
React-developers 
 
4. World’s biggest adoptor has around 250k LOC
Summary Of Experience Reports

you’re making a prototype
…or something else that’s small
when dev speed trumps code quality
you use a lot of third party code (like map libs)
the team doesn’t know func. prog. and don’t want to learn
Bad-use cases for Elm:

you know the refactors are coming
complex domain logic
you’re re-creating Excel et. al in the browser
Great use-cases for Elm:
team has little or no knowledge of javascript
code correctness is especially important

Challenges, adressed!
JavaScript fatigue
Worrysome refactors
Nail-biting deploys
Dedicated frontend devs

a lang without runtime errors
Elm gives you..
superb refactoring support
frontend for the entire team
with Redux built-in
and React’s virtual DOM
a currently small ecosystem
a lang without a huge backer
some boilerplate
en delightful dev experience

Is it a good deal?
I think so!
What do you think?

1. Check out my free workshop material 
github.com/ewendel/elm-workshop 
(shameless plug)
Did this make you curious?
2. Join the Elm slack team 
The elm community is truly amazing 
elmlang.herokuapp.com
3. Check out your local Elm meetup 
meetup.com/topics/elm-programming/

Thanks for listening!
@ewndl
twitter.com/osloelmday
slides and workshop available at  
is.gd/forward_elm

Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wendel - Codemotion Amsterdam 2018

More Related Content

What's hot (17)

Similar to Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wendel - Codemotion Amsterdam 2018 (20)

More from Codemotion (20)

Recently uploaded (20)

Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wendel - Codemotion Amsterdam 2018