av Nils Eriksson & Christofer Ärleryd
Industriell Ekonomi
nilseriksson89.ne@gmail.com
Datavetenskap
c.arleryd@gmail.com
Process
Bakgrund
Frågeställning
Teori
Genomförande
Utvärdering
Frågor
Analys
Implementation
Utvärdering
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
Ett strukturerat sätt att bygga dina applikationer på.
Text
Arkitektur
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 ?
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 ?
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
Hur specifikt man beskriver vad som ska göras.
Text
Abstraktions nivå
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
Tiden då programmet körs
Run-time
Tiden då programmet översätts.
T.ex. Elm -> JavaScript
Compile-time
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
T
Pure Functions
function add(A, B) {
return A + B;
}
function add(A, B) {
launch_the_missiles();
return A + B;
}
T
Pure Functions
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
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
Det man interagerar med i en applikation.
User Interface(UI)
T
Declarative UI
list.concat("thing") // Immutable
list.push("thing") // Mutable
Inbyggda icke muterande operationer
G
Immutable Data
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
G
Pure Functions
Får det gratis
Underlättar testser
Håller komplexitet under kontroll
Disciplin
HOLY WAR!!!!!!!!!!!!!!!!!!!!
G
Static Types
Dynamiskt |> Statiskt
G
Static Types
G
Static Types
G
Static Types
G
Static Types
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
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 ?
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
Elm svårt, tvingas att skriva bra kod
JavaScript, allt är möjligt, inget är påtvingat