Functional Interface Programming

Functional
Interface
Programming
/
Martin Klepsch @martinklepsch

View Slide

Building Interfaces

View Slide

This is my first talk

View Slide

React

View Slide

Components
receive data
render DOM nodes
maintain state
respond to events

View Slide

v
a
r E
x
p
a
n
d
a
b
l
e = R
e
a
c
t
.
c
r
e
a
t
e
C
l
a
s
s
(
{
g
e
t
I
n
i
t
i
a
l
S
t
a
t
e
: f
u
n
c
t
i
o
n
(
) { r
e
t
u
r
n {
e
x
p
a
n
d
: f
a
l
s
e
}
; }
,
t
o
g
g
l
e
E
x
p
a
n
d
: f
u
n
c
t
i
o
n
(
) { t
h
i
s
.
s
e
t
S
t
a
t
e
(
{
e
x
p
a
n
d
: !
t
h
i
s
.
s
t
a
t
e
.
e
x
p
a
n
d
}
)
; }
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
v
a
r l
e
n
g
t
h = (
t
h
i
s
.
s
t
a
t
e
.
e
x
p
a
n
d =
= t
r
u
e ? -
0 : 1
7
5
)
v
a
r t
e
x
t = (
t
h
i
s
.
s
t
a
t
e
.
e
x
p
a
n
d =
= t
r
u
e ? t
h
i
s
.
p
r
o
p
s
.
t
e
x
t : t
h
i
s
.
p
r
o
p
s
.
t
e
x
t
.
s
l
i
c
e
(
0
,
1
7
5
v
a
r l
a
b
e
l = (
t
h
i
s
.
s
t
a
t
e
.
e
x
p
a
n
d =
= t
r
u
e ? '
s
h
r
i
n
k
' : '
e
x
p
a
n
d
'
)
;
v
a
r d
i
v
S
t
y
l
e = { t
e
x
t
A
l
i
g
n
: '
l
e
f
t
'
, f
o
n
t
S
i
z
e
: '
1
.
2
e
m
' }
r
e
t
u
r
n (
<
d
i
v s
t
y
l
e
=
{
d
i
v
S
t
y
l
e
}
>
<
p
>
{
t
e
x
t
}
<
/
p
>
<
a h
r
e
f
=
'
j
a
v
a
s
c
r
i
p
t
:
;
' o
n
C
l
i
c
k
=
{
t
h
i
s
.
t
o
g
g
l
e
E
x
p
a
n
d
}
>
{
l
a
b
e
l
}
<
/
a
>
<
/
d
i
v
>
)
;
}
}
)
;
R
e
a
c
t
.
r
e
n
d
e
r
C
o
m
p
o
n
e
n
t
(
<
E
x
p
a
n
d
a
b
l
e t
e
x
t
=
"
S
o
m
e l
o
n
g t
e
x
t
" /
>
,
<
b
r
> d
o
c
u

View Slide

Composing Components
<
s
p
a
n
>
<
T
h
r
e
a
d m
e
s
s
a
g
e
s
=
{
m
e
s
s
a
g
e
s
}
>
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
; f
o
n
t
-
s
i
z
e
: 1
6
.
0
4
6
2
1
3
1
5
0
0
2
4
4
1
4
p
x
; f
o
n
t
-
s
t
y
l
e
: n
o
r
m
a
l
;
.
.
.
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
; f
o
n
t
-
s
i
z
e
: 1
6
.
0
4
6
2
1
3
1
5
0
0
2
4
4
1
4
p
x
; f
o
n
t
-
s
t
y
l
e
: n
o
r
m
a
l
;
v
a
r m
e
s
s
a
g
e
s = t
h
i
s
.
p
r
o
p
s
.
m
e
s
s
a
g
e
s
.
m
a
p
(
f
u
n
c
t
i
o
n
(
m
) {
r
e
t
u
r
n <
M
e
s
s
a
g
e t
e
x
t
=
{
m
.
t
e
x
t
} a
u
t
h
o
r
=
{
m
.
a
u
t
h
o
r
} /
>
;
}
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
; f
o
n
t
-
s
i
z
e
: 1
6
.
0
4
6
2
1
3
1
5
0
0
2
4
4
1
4
p
x
; f
o
n
t
-
s
t
y
l
e
: n
o
r
m
a
l
;
r
e
t
u
r
n (
<
d
i
v c
l
a
s
s
N
a
m
e
=
'
t
h
r
e
a
d
'
>
{
m
e
s
s
a
g
e
s
}
<
C
o
m
p
o
s
e
F
o
r
m <
/
s
p
a
n
>
<
s
p
a
n c
l
a
s
s
=
"
n
x
" s
t
y
l
e
=
"
f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
; b
o
r
d
e
r
-
s
t
y
l
e
:
<
/
s
p
a
n
>
<
s
p
a
n
> <
/
d
i
v
>
<
/
s
p
a
n
>
<
s
p
a
n
> )
;
<
/
s
p
a
n
>
<
s
p
a
n
> }
}
)
<
/
s
p
a
n
>

View Slide

Virtual DOM

View Slide

A better API to the DOM
It's a misconception that React needs the virtual
DOM for performance. It's foremost an
immutable shim over an inherently mutable
DOM API.
— Sebastian Markbåge (@sebmarkbage)
February 6, 2014

View Slide

A better API to the DOM
To say it another way, even if browsers become
faster, we'll still want a better immutable DOM
API for architectural reasons.
— Sebastian Markbåge (@sebmarkbage)
#reactjs
February 6, 2014

View Slide

Community
#reactjs on freenode

View Slide

Clojurescript
a LISP

View Slide

View Slide

Data Structures
(
l
i
s
t 1 2 3
)
(
s
e
t
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
;
"
> (
l
i
s
t 1 1 2 3 3
)
)
(
h
a
s
h
-
m
a
p :
a 1 :
b 2
)
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
s
i
z
e
: 1
8
p
x
; f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
;
"
>
'
(
1 2 3
)
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
s
i
z
e
: 1
8
p
x
; f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
;
"
>
#
{
1 2 3
}
<
/
s
p
a
n
>
<
s
p
a
n s
t
y
l
e
=
"
f
o
n
t
-
s
i
z
e
: 1
8
p
x
; f
o
n
t
-
f
a
m
i
l
y
: m
o
n
o
s
p
a
c
e
;
"
>
{
:
a 1 :
b 2
}
<
/
s
p
a
n
>

View Slide

Function calls
;
; i
n
v
o
k
i
n
g a f
u
n
c
t
i
o
n
(
l
i
s
t 1 2 3
) ;
=
> (
1 2 3
)
(
r
e
d
u
c
e + (
l
i
s
t 1 2 3
)
) ;
=
> 6
;
; i
n
t
e
r
-
o
p w
i
t
h J
S
(
.
l
o
g j
s
/
c
o
n
s
o
l
e "
H
e
l
l
o
, w
o
r
l
d
!
"
)

View Slide

Immutability

View Slide

Referential Equality
only pointer needs to be checked
not each value

View Slide

Reference Types
(atom { })
kind of like an implicit
Object.observe
by enforcing explicit functions to modify the content

View Slide

Om
by @swannodette

View Slide

(
d
e
f
n t
o
g
g
l
e
-
e
x
p
a
n
d [
e o
w
n
e
r s
t
a
t
e
]
(
o
m
/
s
e
t
-
s
t
a
t
e
! o
w
n
e
r :
e
x
p
a
n
d
e
d (
n
o
t (
:
e
x
p
a
n
d
e
d s
t
a
t
e
)
)
)
(
p
r
i
n
t
l
n (
n
o
t (
:
e
x
p
a
n
d
e
d s
t
a
t
e
)
)
)
)
(
d
e
f
n e
x
p
a
n
d
a
b
l
e [
a
p
p o
w
n
e
r
]
(
r
e
i
f
y
o
m
/
I
I
n
i
t
S
t
a
t
e
(
i
n
i
t
-
s
t
a
t
e [
_
]
{
:
e
x
p
a
n
d
e
d f
a
l
s
e
}
)
o
m
/
I
R
e
n
d
e
r
S
t
a
t
e
(
r
e
n
d
e
r
-
s
t
a
t
e [
t
h
i
s s
t
a
t
e
]
(
d
o
m
/
d
i
v n
i
l
(
d
o
m
/
p n
i
l (
c
o
n
d (
:
e
x
p
a
n
d
e
d s
t
a
t
e
)
(
:
t
e
x
t a
p
p
)
:
e
l
s
e
(
a
p
p
l
y s
t
r (
c
o
n
j (
v
e
c (
t
a
k
e 1
7
5 (
:
t
e
x
t a
p
p
)
)
) "
.
.
.
"
)
)
)
)
(
d
o
m
/
a #
j
s {
:
h
r
e
f "
#
" :
o
n
C
l
i
c
k #
(
t
o
g
g
l
e
-
e
x
p
a
n
d % o
w
n
e
r s
t
a
t
e
)
} "
e
x
p
a
n
d
"
)
)
)
)
)

View Slide

Global App State
(
d
e
f a
p
p
-
s
t
a
t
e (
a
t
o
m {
:
m
e
s
s
a
g
e
s [
{
:
t
h
r
e
a
d 1 :
b
o
d
y "
H
e
l
l
o
" :
a
u
t
h
o
r 1 .
.
.
}
.
.
.
]
:
t
h
r
e
a
d
s [
{
:
t
o
p
i
c "
T
a
l
k
" :
i
d 1 :
p
a
r
t
i
c
i
p
a
n
t
s [
2
3 3
1 4
2
] .
.
.
}
.
.
.
]
:
u
s
e
r
s [
{
:
u
s
e
r
n
a
m
e "
r
m
e
h
n
e
r
" :
i
d 1 .
.
.
}
.
.
.
]
}
)
)
(
o
m
/
r
o
o
t y
o
u
r
-
a
p
p
-
c
o
m
p
o
n
e
n
t
a
p
p
-
s
t
a
t
e
{
:
t
a
r
g
e
t (
. j
s
/
d
o
c
u
m
e
n
t (
g
e
t
E
l
e
m
e
n
t
B
y
I
d "
a
p
p
"
)
)
}
)

View Slide

Transactions
listen to transactions in your global app-state
(
o
m
/
r
o
o
t y
o
u
r
-
a
p
p
-
c
o
m
p
o
n
e
n
t
a
p
p
-
s
t
a
t
e
{
:
t
a
r
g
e
t (
. j
s
/
d
o
c
u
m
e
n
t (
g
e
t
E
l
e
m
e
n
t
B
y
I
d "
a
p
p
"
)
)
:
t
x
-
l
i
s
t
e
n (
f
n [
t
x
-
d
a
t
a r
o
o
t
-
c
u
r
s
o
r
]
(
p
u
t
! t
x
-
c
h
a
n [
t
x
-
d
a
t
a r
o
o
t
-
c
u
r
s
o
r ]
)
)
}
)

View Slide

Instrumentation
(
o
m
/
r
o
o
t y
o
u
r
-
a
p
p
-
c
o
m
p
o
n
e
n
t
a
p
p
-
s
t
a
t
e
{
:
t
a
r
g
e
t (
. j
s
/
d
o
c
u
m
e
n
t (
g
e
t
E
l
e
m
e
n
t
B
y
I
d "
a
p
p
"
)
)
:
i
n
s
t
r
u
m
e
n
t (
f
n [
f c
u
r
s
o
r m
]
(
i
f (
= f s
u
b
-
v
i
e
w
)
(
o
m
/
b
u
i
l
d
* s
o
m
e
t
h
i
n
g
-
e
l
s
e [
f c
u
r
s
o
r m
]
)
:
:
o
m
/
p
a
s
s
)
)
}
)

View Slide

Rounding up
React is a HUGE step
the ability to compose components
like ordinary functions offers great flexibility
immutable data-structures improve
performance significantly
declarativeness removes explicit
coupling to browser
Structuring an application still challenging.

View Slide

Thanks
@martinklepsch
Some Links
1. by @swannodette
2. (check the wiki)
3.
The Future of Javascript MVCs
Om on Github
Omchaya - a larger Om setup

View Slide

/html>

View Slide

Functional Interface Programming

Functional Interface Programming

mklappstuhl

More Decks by mklappstuhl

Other Decks in Programming

Featured

Transcript