Elm

(and Sass)

Who am I?

  • Marten (Wiebe-Marten Wijnja) / Qqwy
  • ~12 years of professional webdev

Purpose

  • Showcasing Elm and Sass
    • What? Why? When?
  • Not complete crash course

 

Ask Questions!

Sass (SCSS)

Syntactically Awesome StyleSheets

Sass: Why?

  • You don't want to write Machine Code
  • You don't want to write Assembly
  • You don't want to write C
  • You don't want to write flat CSS!

Sass: Why?

  • Browsers =/= Programmers
  • Preprocessing: Improve development + compatibility
    • HAML:  HTML
    • Babel: JS
    • SASS:  CSS

Sass: Features

  • Nesting CSS selectors.
    • Use an '&' to refer to same element.
  • Variables
    • Computations!
  • Mixins: Re-use groups of styling.
    • Browser quirks!
$bg-color: #ffa;
$main-button-color: red;

$mobile-break: 768px;
$tablet-break: 1024px;

.my-app {
  background-color: $bg-color;
  padding: 10px 50px;
  
  @media screen and (max-width: $mobile-break) {
    padding: 5px 5px;
  }
  
  header, footer {
    button, a.button {
      background-color: $main-button-color;
      text-color: white;
      
      &:hover {
        background-color: darken($main-button-color, 20%);
      }
      
      // On phones, make text side larger:
      @media screen and (max-width: $mobile-break) {
        font-size: 1.5em; 
      }
    }    
  }
}
.my-app {
  background-color: #ffa;
  padding: 10px 50px;
}
@media screen and (max-width: 768px) {
  .my-app {
    padding: 5px 5px;
  }
}
.my-app header button, .my-app header a.button, .my-app footer button, .my-app footer a.button {
  background-color: red;
  text-color: white;
}
.my-app header button:hover, .my-app header a.button:hover, .my-app footer button:hover, .my-app footer a.button:hover {
  background-color: #990000;
}
@media screen and (max-width: 768px) {
  .my-app header button, .my-app header a.button, .my-app footer button, .my-app footer a.button {
    font-size: 1.5em;
  }
}

SCSS

CSS

Sass: How to use?

Sass Resources

ELM

A delightful language for reliable webapps.

Generate JavaScript with great performance and no runtime exceptions.

 

Elm

  • What is it?
  • Basic Concepts
  • Simple Example
  • GitHub User Info example
  • Pros/Cons, When to use?

Intentionally left blank

What is Elm?

  • Pure Functional front-end language
    • Purely functional
    • ML-style Static Typing:
      • Compiler-enforced
      • Type Inference
      • Product & Sum types
  • Virtual DOM, Compiles to JavaScript

A tiny bit of Elm history

  • Evan Czaplicki, 2012
  • Current version: 0.19
  • New versions ~6 months

"Like Haskell"

  • Very similar Syntax & Semantics
  • Elm lacks:
    • Lazy evaluation
    • `do` notation
    • typeclasses
  • But Elm has:
    • Extra: Record Types
    • Easier-to-comprehend compilation messages

Why use Elm?

  • Why (purely) functional?
    • Makes it trivial to keep extending and refactoring applications.
    • Compiler optimizations: Blazing Fast
  • Why Elm?
    • Comes batteries-included
    • Very good documentation
    • Helpful compiler

The Elm Architecture (TEA)

The Elm Architecture (TEA)

The Elm Architecture (TEA)

Example Application

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main =
  Browser.sandbox
    { init = { count = 0 } 
    , update = update
    , view = view
    }

type Msg = Increment | Decrement

update msg model =
  case msg of
    Increment ->
      { model | count = count + 1 }

    Decrement ->
      { model | count = count - 1 }

view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model.count) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

https://ellie-app.com/new

TEA (the full picture)

Github example App

  • Search Username
  • Fetch User
  • Display user info
    • Error handling

Shoutout to George Argyrousis!

{
    "name": "Qqwy / Wiebe-Marten",
    "avatar_url": "https://avatars2.githubusercontent.com/u/5345745?v=4",
    "html_url": "https://github.com/Qqwy",
    "public_repos": 116,
    .... // More fields
}
api.github.com/users/:username

API endpoint:

https://qqwy.github.io/RUG-WebEngineering-Elm/

Pros

  • Single, well-defined app architecture
  • near-impossible to forget edge-cases
    • or introduce race-conditions
  • Very good for maintainable applications

Cons

  • Slightly higher initial learning-curve
    • But very good documentation!
  • Still pre-1.0
    • Versions stable but incompatible changes between them.
  • Interaction with other JS code deliberately a hurdle

When to use?

  • not when 'sprinkling interactivity'
  • Single Page Applications:
    • Significantly faster than React, Angular et al.
    • More maintainable
    • But: higher initial learning curve

Elm Resources

 

Made with Slides.com