Elmulating Javascript

av Nils Eriksson & Christofer Ärleryd

Nils Eriksson

Industriell Ekonomi

nilseriksson89.ne@gmail.com

Christofer Ärleryd

Datavetenskap

c.arleryd@gmail.com

Process

Bakgrund

Frågeställning

Teori

Genomförande

Utvärdering

Frågor

Process

Analys

Implementation

Utvärdering

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

Det här ju hur utveckling borde vara !

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
}
colors = [ "green", "red", "blue", "orange" ];

colors.forEach((color) => {
    console.log(color); // Skriv ut färg
});

Imperativt

Funktionellt

Låg abstraktion

Hög abstraktion

Immutable data structures
Pure functions
Higher-order functions
Currying
Static type checking
No concept of null
Reactivity
The Elm Architecture
Declarative UI

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

Mutable

Immutable

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;
}
multiplicera(5, 10);

// Resultat:
// 50
multiplicera("fem", "tio");

// Run-time exception:
// cannot multiply
// "fem" with "tio"

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

Får det gratis

Underlättar testser

Håller komplexitet under kontroll

Disciplin

STATIC TYPE CHECKING

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

G

Static Types

Dynamiskt |> Statiskt

  • 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

Immutable data structures
Pure functions
Higher-order functions
Currying
Static type checking
No concept of null
Reactivity
The Elm Architecture
Declarative UI

Vad är funktionell programmering i avsende på Elm ?

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

Delfrågor

Kan vi få Elms utveckling upplevelse

i Javascript ?

Egenskaper från Elm

Immutable data structures Immutable.js
Pure functions Stöd
Higher-order functions Stöd
Currying Ramda.js
Static type checking Flow
No concept of null data.maybe
Reactivity Rx.js
The Elm Architecture Redux
Declarative UI React
Egenskap JavaScript

Elm

Enkel lösning

Summering

Elm svårt, tvingas att skriva bra kod

JavaScript, allt är möjligt, inget är påtvingat

Opponering

Made with Slides.com