Bakgrund

Javascript

Language of the web

Skapat på 10 dagar

Typisk Javascript App

Första designen sällan bra

Itterera

Konceptuellt lätt

men mekaniskt

felbenäget

Våra tester testar en desing som inte finns längre

elm

Elm översätts till Javascript

Rötterna i funktionell programmering

Hjälper dig skriva bra program

Har en medföljande arkitektur

Inga run-time exceptions

Big word alert

Ett strukturerat sätt att bygga dina applikationer på.
 

Text

Arkitektur

Big word alert

Ett fel som uppstår först när programmet körs.

Text

Run-time exception

elm

Evan Czaplicki

2012

Fick idéen efter internship

Växer stort

Center

Kan Javascript bli mer som Elm ?

Frågeställning

Kan vi få Elms utveckling upplevelse

i Javascript ?

Vad är funktionell programmering i avsende på Elm ?

Vad är det som är speciellt för att utveckla i Elm ?

Teori

Programmeringsparadigm

• Imperativ programmering
• Funtionell programmering

IMPERATIV
PROGRAMMERING

Assembler, 1949

global start

section .text
start:
    push    dword msg.len
    push    dword msg
    push    dword 1
    mov     eax, 4
    sub     esp, 4
    int     0x80
    add     esp, 16

    push    dword 0
    mov     eax, 1
    sub     esp, 12
    int     0x80

section .data

msg:    db      "Hello, world!", 10
.len:   equ     $ - msg

Imperativ programmering

Imperativ programmering

• Programkod beskriver datorns instruktioner
• Beskriv specifikt vad som ska göras
• Låg nivå av abstraktion

Big word alert

Hur specifikt man beskriver vad som ska göras.
 

Text

Abstraktions nivå

FUNKTIONELL PROGRAMMERING

Funktionell programmering

• APL 1964
• Populärt inom akademin
• Subtyp av deklarativ programmering
• Säg vad som ska göras, beskriv inte hur

Big word alert

Någonting som lagrar information.

x = 10, animal = "dog"
 

Text

Variabel

colors = [ "green", "red", "blue", "orange" ];

for(var i = 0; i < colors.length; i++) {
    console.log(colors[i]); // Skriv ut färg
}

Imperativt

Låg abstraktion

Egenskaper från Elm

Big word alert

Tiden då programmet körs

Run-time

Big word alert

Tiden då programmet översätts.

T.ex. Elm -> JavaScript

Compile-time

Immutable data structures

T

Immutable Data

company_colors = ["red", "orange", "purple"]

T

Immutable Data

company_colors = ["red", "orange", "purple"]


// I want different colors
cat_colors = company_colors
cat_colors.push("green")
create_cat_picture(cat_colors)

T

Immutable Data

company_colors = ["red", "orange", "purple"]


// I want different colors
cat_colors = company_colors
cat_colors.push("green")
create_cat_picture(cat_colors)


// Important operation
create_logo(company_colors)  // PROBLEM!

T

Immutable Data

company_colors = ["red", "orange", "purple"]


// I want different colors
cat_colors = company_colors
cat_colors.push("green")
create_cat_picture(cat_colors)


// Important operation
create_logo(company_colors)  // PROBLEM!


print(cat_colors) // ["red", "orange", "purple", "green"]
print(company_colors) // ["red", "orange", "purple", "green"]

T

Immutable Data

PURE FUNCTIONS

T

Pure Functions

function add(A, B) {
    return A + B;
}

function add(A, B) {
    launch_the_missiles();
    return A + B;
}

T

Pure Functions

STATIC TYPE CHECKING

Ingen Type Checking

function multiplicera(A, B) {
    return A * B;
}

T

Static Type Checking

Static Type Checking

function multiplicera(number A, number B) {
    return A * B;
}

multiplicera(5, 10);

// Resultat:
// 50

multiplicera("fem", "tio");

// Compile time error:
// cannot multiply
// "fem" with "tio"

T

Static Type Checking

DECLARATIVE UI

Big word alert

Det man interagerar med i en applikation.

User Interface(UI)

T

Declarative UI

Genomförande

IMMUTABLE DATA

list.concat("thing") // Immutable
list.push("thing") // Mutable

Inbyggda icke muterande operationer

G

Immutable Data

Big word alert

En samling färdiga funktioner samlade under ett namn
 

Text

Bibliotek

G

Immutable Data

G

Immutable Data

G

Immutable Data

G

Immutable Data

G

Immutable Data

Är det inte långsamt och bara göra massa kopior ?

G

Immutable Data

G

Immutable Data

PURE FUCTIONS

G

Pure Functions

STATIC TYPE CHECKING

HOLY WAR!!!!!!!!!!!!!!!!!!!!

G

Static Types

• Hack
• TypeScript
• Flow

G

Static Types

G

Static Types

G

Static Types

G

Static Types

DECLARATIVE UI

G

Declarative Ui

G

Declarative Ui

function modify_qty(val) {
    var qty = document.getElementById('qty').value;
    var new_qty = parseInt(qty,10) + val;
    
    if (new_qty < 0) {
        new_qty = 0;
    }
    
    
    document.getElementById('qty').value = new_qty;
    return new_qty;
}

<div class="box">    
    <input id="qty" value="0" />
    <button id="up" onclick="modify_qty(1)">+1</button>
</div>

G

Declarative Ui

class View extends React.Component {
      constructor(props) {
      super(props);
      this.state = { count: 0}
    }

    add(){
      this.setState({count: this.state.count + 1});
    }

    render () {
      return (
        <div>
          <div>{this.state.count}</div>
          <button onClick={this.add()}>+
          </button>
        </div>
        );
    }
}

Genomförande

Summering

Immutable

Pure functions

Static Types

Declarative Ui

immutable.js

Gratis

Flow

React

Trygghet

Ganska mastigt

Bara fördelar

Incrementel adoption

Andra bibliotek

Underlättar Ui

Inte helt functionellt

Utvärdering

Delfrågor

Kan vi få Elms utveckling upplevelse

i Javascript ?

Egenskaper från Elm

Elm

Enkel lösning

Summering