Getting to know Elm: the functional front-end language

Getting to know Elm: the functional frontend language Anne van
den Berg & Bas Knopper 12-6-2018

Who are we? Anne van den Berg Dutch (¼ Polish)
JCore Full-stack Developer Sports Travel #share Bas Knopper Dutch JCore Full-stack Developer AI Running #share acvdb bknopper @BWknopper

Agenda 1. What is Elm? 2. Elm basics 3. Hello
World 4. Demo 5. Developer Practicalities 6. Comparison with Angular 7. Community 8. Lessons learned

What is Elm?

not with Elm

Facts Evan Czaplicki 2012 Pleasure Accessibility Idea → reality Safety
Open source Haskell

v 0.18 npm install -g elm & more

Background

Language Characteristics

Functional language no side effects

Pure functions vs impure functions (in JavaScript)

Immutable

Don’t mutate previous values...

No runtime exceptions compile time though...

Compiles to JavaScript, HTML and CSS

Semantic Versioning

Elm basics

Elm basics • think in functions ◦ consider every edge
case ◦ void functions don’t exist • operator (++, -, *) = function • if-else = function • constant = function without argument • HTML & CSS are in functions • EVERYTHING = function

Function syntax • function definition → not necessary <function name>
: <input type> -> <output type> • `=` to denote function body <function name> <input arg> = <function body> • function call: <function name> <input arg>

Function with multiple arguments function definition function itself function call

What does this look like in JavaScript?

Currying translating function with multiple arguments into function with one
argument

… more about functions • pipe functions: |> or <|

… more about functions • anonymous functions (lambda expressions): \

union type

type alias • alias for something • ‘records’

tuple • to return multiple values

type Maybe • for optional values

HTML in Elm • HTML package ◦ functions ◦ Elements
(div, p, h1, …) ◦ Attributes (class, style, …) ◦ Events (onClick, onMouseDown, …) • Don’t forget to import them

HTML in Elm • div with input and button •
two pair of brackets (lists): div [<attributes>] [<body>]

Hello World

Hello World • main function ◦ model ◦ update ◦
view

Counter demo • Demo from official Elm tutorial (recommended)

Developer practicalities

Development Environment • Install Elm ◦ elm-reactor → live server
with debugger ◦ elm-make → build ◦ elm-repl → read eval print loop ◦ elm-package → package manager • Install other tools ◦ elm-format ◦ elm-lint ◦ elm-live ◦ elm-test • Install editor + plugins

Build • Use code bundler for: ◦ loading external CSS
◦ minifying ◦ prettifying ◦ ... • For example Webpack & yarn:

Testing • elm test init • elm test --watch

Testing

elm test --watch

Standard modules for app development • Routing ◦ elm-lang/navigation •
Http calls ◦ elm-lang/http ◦ typed http calls

Project structure • determined by your data-structure

Comparison with Angular

Comparison with AngularJS (1) Elm AngularJS Typed + - Speed
+ - Errors ++ - Clean code ++ - Learning curve - + Community - +

Comparison with Angular 2+ Elm AngularJS Angular 2+ Typed +
- + Speed + - +/- Errors ++ -- - Clean code ++ - + Learning curve - + + Community - + ++

Community

Community Slack channel elmlang.herokuapp.com /r/elm Twitter @elmlang @czaplic #elmlang Discourse
Meetup group (Warsaw) Stackoverflow (not too big) Elm conference (July, 5-6th 2018, France) http://2018.elmeurope.org/

Companies

Lessons learned

Lessons learned • Steeper learning curve ◦ Thought we knew
functional programming ◦ Keep practicing • Small community (but very helpful) • Accept its formatting

Lessons learned Source: https://www.brianthicks.com/post/2017/07/27/state-of-elm-2017-results/

Lessons learned Source: https://www.brianthicks.com/post/2017/07/27/state-of-elm-2017-results/ Count

Getting started elm-lang.org https://ellie-app.com/rMJRpqb7Gma1 https://github.com/acvdb/

Dziękuję Thank you Questions?

Getting to know Elm: the functional front-end l...

Getting to know Elm: the functional front-end language

Other Decks in Programming

Featured

Transcript