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?
- Wrappers for all common languages
- Integration with build-tools Brunch or Webpack
Sass Resources
- Guide: https://sass-lang.com/guide
- Language wrappers list: https://sass-lang.com/libsass
- Integration with WebPack: https://github.com/webpack-contrib/sass-loader
- Integration with Brunch: https://github.com/brunch/sass-brunch
- Semantic-UI Styling Framework: https://semantic-ui.com/
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 "+" ]
]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:
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
- https://elm-lang.org/
- Guide: https://guide.elm-lang.org/
- Packages: https://package.elm-lang.org/
- Webpack starter app: https://github.com/romariolopezc/elm-webpack-4-starter
- Forum: https://discourse.elm-lang.org/
- The GitHub User Info example app:
Elm (and Sass)
By qqwy
