Skip to content

Latest commit

 

History

History
223 lines (138 loc) · 2.41 KB

deck.mdx

File metadata and controls

223 lines (138 loc) · 2.41 KB

import { syntaxHighlighterPrism } from '@mdx-deck/themes' import { future } from '@mdx-deck/themes' import { Appear } from '@mdx-deck/components' import { FullScreenCode } from '@mdx-deck/layouts'

export const themes = [ future, syntaxHighlighterPrism ]

Hello, Elm!

What is Elm?

Elm is a statically typed functional language that compiles to JavaScript, focusing on building frontend application.

How does it looks like?

this is javascript

const add = (a, b) => a + b

this is elm

add a b = a + b

But.. where is type?

type inference ftw!

add : number -> number -> number
add a b = a + b
add 1 2 -- 3 : number

what does

->

mean

why not..

add : (number, number) -> number

but

add : number -> number -> number

?

add 1
-- <function> : number -> number

cuz

add : number -> number -> number

=

add : number -> (number -> number)

Everything is expression

oneIsPositive =
    if 1 > 0 then
        "positive"

    else
        "not positive"
checkIfPositive n =
    if n > 0 then
        "positive"

    else
        "not positive"

oneIsPositive = checkIfPositive 1

NULL / UNDEFINED / NaN

const xs = []

xs[0]
❌ TypeError: undefined is not a function

const numbers = []

numbers[0] * 10

undefined NaN

List.head []
List.head []
-- Nothing : Maybe a
List.head ["hello", "world"]
-- Just "hello" : Maybe String
type Maybe a
    = Just a
    | Nothing

compiler that talks to you

error

Elm Architechture

"The Elm Architecture is a simple pattern for architecting webapps. It is great for modularity, code reuse, and testing. Ultimately, it makes it easy to create complex web apps that stay healthy as you refactor and add features."

model / view / update

Counter example (no pun intended)

<iframe style={{ backgroundColor: "white" }} src="http://localhost:8000/" />

And that's the intro.

Hopes that it generates interest and curiosity!