Pure and functional JavaScript Developer Conference Jakob Westhoff November 7th, 2013

(1)

Pure and functional JavaScript

Developer Conference 2013

Jakob Westhoff (@jakobwesthoff)

November 7th, 2013

(2)

I am

Jakob Westhoff

I

Senior PHP professional

I

Senior JavaScript professional

I

Open source enthusiast

I

Regular speaker at (inter)national

conferences

(3)

We are

Helping people to create high quality web applications.

http://qafoo.com

I

Trainings, Workshops and Consulting

I

Twitter:

@qafoo

(4)

We are

Helping people to create high quality web applications.

http://qafoo.com

I

Trainings, Workshops and Consulting

I

Twitter:

@qafoo

(5)

We are

Helping people to create high quality web applications.

http://qafoo.com

I

Trainings, Workshops and Consulting

I

Twitter:

@qafoo

(6)

We are

Helping people to create high quality web applications.

http://qafoo.com

I

Trainings, Workshops and Consulting

I

Twitter:

@qafoo

(7)

Functional Programming

Functional programming

is a programming paradigm [...], that

[...] avoids state and mutable data. Functional programming

emphasizes functions that produce results that depend only on

their inputs and not on the program state - i.e. pure mathematical

functions.

(8)

Functional Programming

Functional programming

is a

programming paradigm

[...], that

[...] avoids state and mutable data. Functional programming

emphasizes functions that produce results that depend only on

their inputs and not on the program state - i.e. pure mathematical

functions.

(9)

Functional Programming

Functional programming

is a programming paradigm [...], that

[...]

avoids state and mutable data. Functional programming

emphasizes functions that produce results that depend only on

their inputs and not on the program state - i.e. pure mathematical

functions.

(10)

Functional Programming

Functional programming

is a programming paradigm [...], that

[...] avoids state and mutable data. Functional programming

emphasizes

functions

that produce results that depend

only on

their inputs

and not on the program state - i.e. pure mathematical

functions.

(11)

Functional Programming

Functional programming

is a programming paradigm [...], that

[...] avoids state and mutable data. Functional programming

emphasizes functions that produce results that depend only on

their inputs and not on the program state - i.e.

pure

mathematical

functions.

(12)

(13)

(14)

Functions

(15)

A simple function

1

f u n c t i o n

i n c r e m e n t

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

I

Function Declaration

(16)

A simple function

1

f u n c t i o n

i n c r e m e n t

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

I

Function

Declaration

(17)

A simple function

1

f u n c t i o n

i n c r e m e n t

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

I

Function Declaration

(18)

Functions

(19)

Functions are special

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

(20)

Functions are special

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

(21)

Functions are special

1

f u n c t i o n

one

( )

{

2

f u n c t i o n

two

( )

{

3

f u n c t i o n

t h r e e

( )

{

4

/ /

. . .

5

}

6

}

7

}

(22)

Higher-Order Functions

1

window

.

s e t T i m e o u t

(

f u n c t i o n

( )

{

2

a l e r t

(

” A second has passed ”

) ;

3

}

, 1000) ;

(23)

Higher-Order Functions

1

window

.

s e t T i m e o u t

(

f u n c t i o n

( )

{

2

a l e r t

(

” A second has passed ”

) ;

3

}

, 1000) ;

(24)

Higher-Order Functions

1

v a r makeGreeter

=

f u n c t i o n

(

name

)

{

2

r e t u r n f u n c t i o n

( )

{

3

a l e r t

(

” H e l l o ”

+

name

+

” ! ”

) ;

4

}

;

5

}

;

(25)

Higher-Order Functions

1

v a r makeGreeter

=

f u n c t i o n

(

name

)

{

2

r e t u r n f u n c t i o n

( )

{

3

a l e r t

(

” H e l l o ”

+

name

+

” ! ”

) ;

4

}

;

5

}

;

(26)

Higher-Order Functions

I

Functions which

consume

or

return

other functions are called

(27)

What comes next?

(28)

Sideeffects

1

v a r cou nt

=

f u n c t i o n

(

i t e m s

)

{

2

v a r l e n g t h

= 0 ;

3

while

(

i t e m s

.

pop

( ) )

{

4

l e n g t h

+= 1 ;

5

}

6 7

r e t u r n

l e n g t h

;

8

}

9 10

v a r i t e m s

= [ 1 , 2 , 3 ] ;

11

a l e r t

(

cou nt

(

i t e m s

) ) ;

/ / 3

(29)

Sideeffects

1

v a r cou nt

=

f u n c t i o n

(

i t e m s

)

{

2

v a r l e n g t h

= 0 ;

3

while

(

i t e m s

.

pop

( ) )

{

4

l e n g t h

+= 1 ;

5

}

6 7

r e t u r n

l e n g t h

;

8

}

9 10

v a r i t e m s

= [ 1 , 2 , 3 ] ;

11

a l e r t

(

cou nt

(

i t e m s

) ) ;

/ / 3

(30)

Sideeffects

1

v a r cou nt

=

f u n c t i o n

(

i t e m s

)

{

2

v a r l e n g t h

= 0 ;

3

while

(

i t e m s

.

pop

( ) )

{

4

l e n g t h

+= 1 ;

5

}

6 7

r e t u r n

l e n g t h

;

8

}

9 10

v a r i t e m s

= [ 1 , 2 , 3 ] ;

11

a l e r t

(

cou nt

(

i t e m s

) ) ;

/ / 3

I

Modification of state

(31)

Sideeffects

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

(32)

Sideeffects

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

a l e r t

(

a

+1) ;

3

}

(33)

Pure Functions

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

r e t u r n

a

+ 1 ;

3

}

I

No sideeffects

(34)

Pure Functions

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

r e t u r n

a

+ 1 ;

3

}

I

No sideeffects

(35)

Pure Functions

1

v a r i n c r e m e n t

=

f u n c t i o n

(

a

)

{

2

r e t u r n

a

+ 1 ;

3

}

I

No sideeffects

(36)

Pure Functions

I

Functions which are

sideeffect free

are called

(37)

Pure Functions

I

No program can consist of

Pure Functions

only

I

It would simply do nothing

(38)

Pure Functions

I

No program can consist of

Pure Functions

only

I

It would simply do

nothing

(39)

Pure Functions

I

No program can consist of

Pure Functions

only

I

It would simply do

nothing

(40)

What comes next?

(41)

Functional Loops

I

Loops (

for

,

while

,

...

) are quite common in every program

I

Loops are mostly used to

I

_{Cause Sideeffects on every element of a set}

I

Transform or Extract data from a set

(42)

Functional Loops

I

Loops (

for

,

while

,

...

) are quite common in every program

I

Loops are mostly used to

I

_{Cause Sideeffects on every element of a set}

I

Transform or Extract data from a set

(43)

Functional Loops

I

Loops (

for

,

while

,

...

) are quite common in every program

I

Loops are mostly used to

I

_{Cause Sideeffects on every element of a set}

I

Transform or Extract data from a set

I

Aggregate or Accumulate data from a set

(44)

Functional Loops

I

Loops (

for

,

while

,

...

) are quite common in every program

I

Loops are mostly used to

I

_{Cause Sideeffects on every element of a set}

I

Transform or Extract data from a set

(45)

Looping

1

v a r s e s s i o n s

= . . . ;

2 3

v a r i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

doSomething

(

s e s s i o n s

[

i

] ) ;

6

}

I

Loop through data

(46)

Looping

1

v a r s e s s i o n s

= . . . ;

2 3

v a r i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

doSomething

(

s e s s i o n s

[

i

] ) ;

6

}

I

Loop through data

(47)

Looping

1

v a r s e s s i o n s

= . . . ;

2 3

v a r i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

doSomething

(

s e s s i o n s

[

i

] ) ;

6

}

I

Loop through data

(48)

Array.prototype.forEach

1

v a r s e s s i o n s

= . . . ;

2 3

s e s s i o n s

.

f o r E a c h

(

f u n c t i o n

(

s e s s i o n

)

{

4

doSomething

(

s e s s i o n

) ;

5

}

) ;

(49)

Data extraction

1

v a r t i t l e s

= [ ] ;

2 3

v a r i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

t i t l e s

.

push

(

s e s s i o n s

[

i

] .

t i t l e

) ;

6

}

(50)

Data extraction

1

v a r t i t l e s

= [ ] ;

2 3

v a r i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

t i t l e s

.

push

(

s e s s i o n s

[

i

] .

t i t l e

) ;

6

}

(51)

Array.prototype.map

1

v a r t i t l e s

=

s e s s i o n s

.

map

(

f u n c t i o n

(

s e s s i o n

)

{

2

r e t u r n

s e s s i o n

.

t i t l e

;

3

}

) ;

I

This kind of property extraction is needed quite often

(52)

Array.prototype.map

1

v a r t i t l e s

=

s e s s i o n s

.

map

(

f u n c t i o n

(

s e s s i o n

)

{

2

r e t u r n

s e s s i o n

.

t i t l e

;

3

}

) ;

I

This kind of

property extraction

is needed quite often

(53)

Array.prototype.map

1

v a r t i t l e s

=

s e s s i o n s

.

map

(

f u n c t i o n

(

s e s s i o n

)

{

2

r e t u r n

s e s s i o n

.

t i t l e

;

3

}

) ;

I

This kind of

property extraction

is needed quite often

(54)

extract

1

v a r e x t r a c t

=

f u n c t i o n

(

p r o p e r t y

)

{

2

r e t u r n f u n c t i o n

(

o b j e c t

)

{

3

r e t u r n

o b j e c t

[

p r o p e r t y

] ;

4

}

;

5

}

;

1

var

t i t l e s = s e s s i o n s . map ( e x t r a c t ( ” t i t l e ” ) ) ;

(55)

extract

1

v a r e x t r a c t

=

f u n c t i o n

(

p r o p e r t y

)

{

2

r e t u r n f u n c t i o n

(

o b j e c t

)

{

3

r e t u r n

o b j e c t

[

p r o p e r t y

] ;

4

}

;

5

}

;

1

var

t i t l e s

=

s e s s i o n s

.

map

(

e x t r a c t

(

” t i t l e ”

) ) ;

(56)

extract

1

v a r e x t r a c t

=

f u n c t i o n

(

p r o p e r t y

)

{

2

r e t u r n f u n c t i o n

(

o b j e c t

)

{

3

r e t u r n

o b j e c t

[

p r o p e r t y

] ;

4

}

;

5

}

;

1

var

t i t l e s

=

s e s s i o n s

.

map

(

e x t r a c t

(

” t i t l e ”

) ) ;

(57)

extract

1

v a r e x t r a c t

=

f u n c t i o n

(

p r o p e r t y

)

{

2

r e t u r n f u n c t i o n

(

o b j e c t

)

{

3

r e t u r n

o b j e c t

[

p r o p e r t y

] ;

4

}

;

5

}

;

1

var

t i t l e s

=

s e s s i o n s

.

map

(

e x t r a c t

(

” t i t l e ”

) ) ;

(58)

extract

1

v a r e x t r a c t

=

f u n c t i o n

(

p r o p e r t y

)

{

2

r e t u r n f u n c t i o n

(

o b j e c t

)

{

3

r e t u r n

o b j e c t

[

p r o p e r t y

] ;

4

}

;

5

}

;

1

var

t i t l e s

=

s e s s i o n s

.

map

(

e x t r a c t

(

” t i t l e ”

) ) ;

(59)

Data accumulation

1

var

s e s s i o n L i s t

=

” ”

;

2 3

var

i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

s e s s i o n L i s t

+=

”

<

l i

>

”

+

s e s s i o n s

[

i

] .

t i t l e

+

”

<

/

l i

>

”

;

6

}

I

Accumulate information from given data structure

I

Two things are actually done here:

1. Extract each sessions title

(60)

Data accumulation

1

var

s e s s i o n L i s t

=

” ”

;

2 3

var

i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

s e s s i o n L i s t

+=

”

<

l i

>

”

+

s e s s i o n s

[

i

] .

t i t l e

+

”

<

/

l i

>

”

;

6

}

I

Accumulate information from given data structure

I

Two things are actually done here:

1. Extract each sessions title

(61)

Data accumulation

1

var

s e s s i o n L i s t

=

” ”

;

2 3

var

i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

s e s s i o n L i s t

+=

”

<

l i

>

”

+

s e s s i o n s

[

i

] .

t i t l e

+

”

<

/

l i

>

”

;

6

}

I

Accumulate information from given data structure

I

Two things are actually done here:

1. Extract each sessions title

(62)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

f u n c t i o n

(

s e s s i o n

)

{

3

r e t u r n

s e s s i o n

.

t i t l e

;

4

}

)

5

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

6

r e t u r n

a c c u m u l a t i o n

+

”

<

l i

>

”

+

n e x t

+

”

<

/ l i

>

”

7

}

,

” ”

) ;

(63)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

f u n c t i o n

(

s e s s i o n

)

{

3

r e t u r n

s e s s i o n

.

t i t l e

;

4

}

)

5

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

6

r e t u r n

a c c u m u l a t i o n

+

”

<

l i

>

”

+

n e x t

+

”

<

/ l i

>

”

7

}

,

” ”

) ;

(64)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

e x t r a c t

(

” t i t l e ”

) )

3

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

4

r e t u r n

a c c u m u l a t i o n

+

”

<

l i

>

”

+

n e x t

+

”

<

/ l i

>

”

5

}

,

” ”

) ;

(65)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

e x t r a c t

(

” t i t l e ”

) )

3

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

4

r e t u r n

a c c u m u l a t i o n

+

”

<

l i

>

”

+

n e x t

+

”

<

/ l i

>

”

5

}

,

” ”

) ;

(66)

Array.prototype.reduce

1

v a r wrapIn

=

f u n c t i o n

(

element

)

{

2

r e t u r n f u n c t i o n

(

i n p u t

)

{

3

r e t u r n

”

<

”

+

element

+

”

>

”

+

i n p u t

+

”

<

/ ”

+

element

+

”

>

”

;

4

}

;

5

}

;

6 7

v a r s e s s i o n L i s t

=

s e s s i o n s

8

.

map

(

e x t r a c t

(

” t i t l e ”

) )

9

.

map

(

wrapIn

(

” l i ”

) )

10

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

11

r e t u r n

a c c u m u l a t i o n

+

n e x t

12

}

,

” ”

) ;

(67)

Array.prototype.reduce

1

v a r wrapIn

=

f u n c t i o n

(

element

)

{

2

r e t u r n f u n c t i o n

(

i n p u t

)

{

3

r e t u r n

”

<

”

+

element

+

”

>

”

+

i n p u t

+

”

<

/ ”

+

element

+

”

>

”

;

4

}

;

5

}

;

6 7

v a r s e s s i o n L i s t

=

s e s s i o n s

8

.

map

(

e x t r a c t

(

” t i t l e ”

) )

9

.

map

(

wrapIn

(

” l i ”

) )

10

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

11

r e t u r n

a c c u m u l a t i o n

+

n e x t

12

}

,

” ”

) ;

(68)

Array.prototype.reduce

1

v a r wrapIn

=

f u n c t i o n

(

element

)

{

2

r e t u r n f u n c t i o n

(

i n p u t

)

{

3

r e t u r n

”

<

”

+

element

+

”

>

”

+

i n p u t

+

”

<

/ ”

+

element

+

”

>

”

;

4

}

;

5

}

;

6 7

v a r s e s s i o n L i s t

=

s e s s i o n s

8

.

map

(

e x t r a c t

(

” t i t l e ”

) )

9

.

map

(

wrapIn

(

” l i ”

) )

10

.

reduce

(

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

11

r e t u r n

a c c u m u l a t i o n

+

n e x t

12

}

,

” ”

) ;

(69)

Array.prototype.reduce

1

v a r c o n c a t e n a t e

=

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

2

r e t u r n

a c c u m u l a t i o n

+

n e x t

;

3

}

;

4 5

v a r s e s s i o n L i s t

=

s e s s i o n s

6

.

map

(

e x t r a c t

(

” t i t l e ”

) )

7

.

map

(

wrapIn

(

” l i ”

) )

8

.

reduce

(

concatenate

,

” ”

) ;

(70)

Array.prototype.reduce

1

v a r c o n c a t e n a t e

=

f u n c t i o n

(

a c c u m u l a t i o n

,

n e x t

)

{

2

r e t u r n

a c c u m u l a t i o n

+

n e x t

;

3

}

;

4 5

v a r s e s s i o n L i s t

=

s e s s i o n s

6

.

map

(

e x t r a c t

(

” t i t l e ”

) )

7

.

map

(

wrapIn

(

” l i ”

) )

8

.

reduce

(

concatenate

,

” ”

) ;

(71)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

e x t r a c t

(

” t i t l e ”

) )

3

.

map

(

wrapIn

(

” l i ”

) )

4

.

reduce

(

concatenate

,

” ”

) ;

VS.

1

var

s e s s i o n L i s t = ” ” ;

2 3

var

i , l e n ;

4

f o r ( i =0 , l e n = s e s s i o n s . l e n g t h ; i

<

l e n ;

i ++)

{

5

s e s s i o n L i s t += ”

<

l i

>

” + s e s s i o n s [ i ] . t i t l e + ”

<

/

l i

>

” ;

6

}

(72)

Array.prototype.reduce

1

v a r s e s s i o n L i s t

=

s e s s i o n s

2

.

map

(

e x t r a c t

(

” t i t l e ”

) )

3

.

map

(

wrapIn

(

” l i ”

) )

4

.

reduce

(

concatenate

,

” ”

) ;

VS.

1

var

s e s s i o n L i s t

=

” ”

;

2 3

var

i

,

l e n

;

4

f o r

(

i

=0 ,

l e n

=

s e s s i o n s

.

l e n g t h

;

i

<

l e n

;

i

++)

{

5

s e s s i o n L i s t

+=

”

<

l i

>

”

+

s e s s i o n s

[

i

] .

t i t l e

+

”

<

/

l i

>

”

;

6

}

(73)

A little bit more real

world please!

(74)

A little bit more real world

1. Extract

title

,

speaker

and description for display

2. Preprocess the data according to certain rules

I

Uppercase names

I

Highlight certain buzzwords

I

Limit descriptions to a maximal length

(75)

A little bit more real world

1. Extract

title

,

speaker

and description for display

2. Preprocess the data according to certain rules

I

Uppercase names

I

Highlight certain buzzwords

I

Limit descriptions to a maximal length

(76)

A little bit more real world

1. Extract

title

,

speaker

and description for display

2. Preprocess the data according to certain rules

I

Uppercase names

I

Highlight certain buzzwords

I

Limit descriptions to a maximal length

(77)

A little bit more real world

1. Extract

title

,

speaker

and description for display

2. Preprocess the data according to certain rules

I

Uppercase names

I

Highlight certain buzzwords

I

Limit descriptions to a maximal length

3. Finally accumulate everything as HTML

(78)

A little bit more real world

1. Extract

title

,

speaker

and description for display

2. Preprocess the data according to certain rules

I

Uppercase names

I

Highlight certain buzzwords

I

Limit descriptions to a maximal length

(79)

A little bit more real world

1 var t i t l e s = s e s s i o n s 2 .map(e x t r a c t(” t i t l e ”) ) 3 .map(wrapIn(” h2 ”) ) ; 1 var speakers = s e s s i o n s 2 . map ( e x t r a c t ( ” speaker ” ) ) 3 . map ( u p p e r c a s e E v e r y F i r s t ( ) ) 4 . map ( p r e f i x ( ” Speaker : ” ) ) 5 . map ( wrapIn ( ” h3 ” ) ) ; 1 var d e s c r i p t i o n s = s e s s i o n s 2 . map ( e x t r a c t ( ” d e s c r i p t i o n ” ) ) 3 . map ( e l l i p s i s ( 1 6 0 ) ) 4 . map ( h i g h l i g h t ( ” J a v a S c r i p t ” , ”HTML5” ) ) 5 . map ( wrapIn ( ” p ” ) ) ;

(80)

A little bit more real world

1 var t i t l e s = s e s s i o n s 2 .map(e x t r a c t(” t i t l e ”) ) 3 .map(wrapIn(” h2 ”) ) ; 1 var speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 var d e s c r i p t i o n s = s e s s i o n s 2 . map ( e x t r a c t ( ” d e s c r i p t i o n ” ) ) 3 . map ( e l l i p s i s ( 1 6 0 ) ) 4 . map ( h i g h l i g h t ( ” J a v a S c r i p t ” , ”HTML5” ) ) 5 . map ( wrapIn ( ” p ” ) ) ;

(81)

A little bit more real world

1 var t i t l e s = s e s s i o n s 2 .map(e x t r a c t(” t i t l e ”) ) 3 .map(wrapIn(” h2 ”) ) ; 1 var speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 var d e s c r i p t i o n s = s e s s i o n s 2 .map(e x t r a c t(” d e s c r i p t i o n ”) ) 3 .map(e l l i p s i s( 1 6 0 ) ) 4 .map(h i g h l i g h t(” J a v a S c r i p t ”, ”HTML5”) ) 5 .map(wrapIn(” p ”) ) ;

(82)

A little bit more real world

1 v a r speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ;

(83)

A little bit more real world

(84)

A little bit more real world

1 v a r speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 v a r u p p e r c a s e E v e r y F i r s t = f u n c t i o n( ) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n i n p u t 4 .s p l i t(” ”) 5 .map(u p p e r c a s e F i r s t( ) ) 6 .j o i n(” ”) ; 7 } 8 }

(85)

A little bit more real world

1 v a r speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 v a r u p p e r c a s e E v e r y F i r s t = f u n c t i o n( ) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n i n p u t 4 .s p l i t(” ”) 5 .map(u p p e r c a s e F i r s t( ) ) 6 .j o i n(” ”) ; 7 } 8 }

(86)

A little bit more real world

1 v a r speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 v a r u p p e r c a s e E v e r y F i r s t = f u n c t i o n( ) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n i n p u t 4 .s p l i t(” ”) 5 .map(u p p e r c a s e F i r s t( ) ) 6 .j o i n(” ”) ; 7 } 8 } 1 v a r u p p e r c a s e F i r s t = f u n c t i o n( ) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n i n p u t.c h a r A t( 0 ) .toUpperCase( ) 4 + i n p u t.s u b s t r i n g( 1 ) ; 5 } 6 }

(87)

A little bit more real world

(88)

A little bit more real world

1 v a r speakers = s e s s i o n s 2 .map(e x t r a c t(” speaker ”) ) 3 .map(u p p e r c a s e E v e r y F i r s t( ) ) 4 .map(p r e f i x(” Speaker : ”) ) 5 .map(wrapIn(” h3 ”) ) ; 1 v a r p r e f i x = f u n c t i o n(p r e f i x) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n p r e f i x + i n p u t; 4 } 5 };

(89)

A little bit more real world

1 v a r d e s c r i p t i o n s = s e s s i o n s 2 .map(e x t r a c t(” d e s c r i p t i o n ”) ) 3 .map(e l l i p s i s( 1 6 0 ) ) 4 .map(h i g h l i g h t(” J a v a S c r i p t ”, ”HTML5”) ) 5 .map(wrapIn(” p ”) ) ;

(90)

A little bit more real world

(91)

A little bit more real world

1 v a r d e s c r i p t i o n s = s e s s i o n s 2 .map(e x t r a c t(” d e s c r i p t i o n ”) ) 3 .map(e l l i p s i s( 1 6 0 ) ) 4 .map(h i g h l i g h t(” J a v a S c r i p t ”, ”HTML5”) ) 5 .map(wrapIn(” p ”) ) ; 1 v a r e l l i p s i s = f u n c t i o n(maxLength) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 i f (i n p u t.l e n g t h <= maxLength) { 4 r e t u r n i n p u t; 5 } 6 7 r e t u r n i n p u t.s u b s t r i n g( 0 ,maxLength−1) + ”. . .” 8 } 9 }

(92)

A little bit more real world

(93)

A little bit more real world

1 v a r d e s c r i p t i o n s = s e s s i o n s 2 .map(e x t r a c t(” d e s c r i p t i o n ”) ) 3 .map(e l l i p s i s( 1 6 0 ) ) 4 .map(h i g h l i g h t(” J a v a S c r i p t ”, ”HTML5”) ) 5 .map(wrapIn(” p ”) ) ; 1 v a r h i g h l i g h t = f u n c t i o n(/∗ args . . . ∗/) { 2 v a r args = A r r a y.p r o t o t y p e.s l i c e.c a l l(arguments) ; 3 r e t u r n f u n c t i o n(i n p u t) { 4 args.f o r E a c h(f u n c t i o n(replacement) { 5 i n p u t = i n p u t.r e p l a c e(

6 new RegExp(”\ \b ” + replacement + ”\ \b ”) ,

7 ”<em>” + replacement + ”</em>” 8 ) ; 9 }) ; 10 11 r e t u r n i n p u t; 12 } 13 }

(94)

A little bit more real world

1 v a r t i t l e s = . . . , speakers = . . . , d e s c r i p t i o n s = . . . 1 v a r r e s u l t = weave ( t i t l e s , speakers , d e s c r i p t i o n s ) 2 . map ( j o i n ( ) ) 3 . map ( wrapIn ( ” d i v ” ) ) 4 . reduce ( c o n c a t e n a t e ( ) ) ;

(95)

A little bit more real world

1 v a r t i t l e s = . . . , speakers = . . . , d e s c r i p t i o n s = . . . 1 v a r r e s u l t = weave(t i t l e s , speakers, d e s c r i p t i o n s) 2 .map(j o i n( ) ) 3 .map(wrapIn(” d i v ”) ) 4 .reduce(c o n c a t e n a t e( ) ) ;

(96)

A little bit more real world

(97)

A little bit more real world

1 v a r t i t l e s = . . . , speakers = . . . , d e s c r i p t i o n s = . . . 1 v a r r e s u l t = weave(t i t l e s , speakers, d e s c r i p t i o n s) 2 .map(j o i n( ) ) 3 .map(wrapIn(” d i v ”) ) 4 .reduce(c o n c a t e n a t e( ) ) ; 1 [ 1 , 2 , 3 , 4 ] 2 [” a ”,” b ”,” c ”,” d ”] 3 [” ! ”,” ? ”,” $ ”,” = ”] 4 −−−−−−weave−−−−−− 5 [ 6 [ 1 ,” a ”,” ! ”] , 7 [ 2 ,” b ”,” ? ”] , 8 [ 3 ,” c ”,” $ ”] , 9 [ 4 ,” d ”,” = ”] 10 ]

(98)

A little bit more real world

(99)

A little bit more real world

1 v a r t i t l e s = . . . , speakers = . . . , d e s c r i p t i o n s = . . . 1 v a r r e s u l t = weave(t i t l e s , speakers, d e s c r i p t i o n s) 2 .map(j o i n( ) ) 3 .map(wrapIn(” d i v ”) ) 4 .reduce(c o n c a t e n a t e( ) ) ; 1 v a r j o i n = f u n c t i o n(d e l i m i t e r) { 2 r e t u r n f u n c t i o n(i n p u t) { 3 r e t u r n i n p u t.j o i n(d e l i m i t e r) ; 4 } 5 }

(100)

A little bit more real world

1 v a r t i t l e s = s e s s i o n s 2 .map(e x t r a c t(” t i t l e ”) ) 3 .map(wrapIn(” h2 ”) ) ; 4 5 v a r speakers = s e s s i o n s 6 .map(e x t r a c t(” speaker ”) ) 7 .map(u p p e r c a s e E v e r y F i r s t( ) ) 8 .map(p r e f i x(” Speaker : ”) ) 9 .map(wrapIn(” h3 ”) ) ; 10 11 v a r d e s c r i p t i o n s = s e s s i o n s 12 .map(e x t r a c t(” d e s c r i p t i o n ”) ) 13 .map(e l l i p s i s( 1 6 0 ) ) 14 .map(h i g h l i g h t(” J a v a S c r i p t ”, ”HTML5”) ) 15 .map(wrapIn(” p ”) ) ; 16 17 v a r r e s u l t = weave(t i t l e s , speakers, d e s c r i p t i o n s) 18 .map(j o i n( ) ) 19 .map(wrapIn(” d i v ”) ) 20 .reduce(c o n c a t e n a t e( ) ) ;

(101)

(102)

What comes next?

JavaScript is

Asynchronous

(103)

Asynchronous functional handling

I

JavaScript utilizes

Evented-IO

I

A lot of operations are asynchronous

(104)

Asynchronous functional handling

I

JavaScript utilizes

Evented-IO

I

A lot of operations are asynchronous

(105)

Asynchronous functional handling

I

JavaScript utilizes

Evented-IO

I

A lot of operations are asynchronous

(106)

Fetching our

sessions

via XHR

I

Our

sessions

data needs to be retrieved from the server

I

It is devided into multiple chunks by day

1 var u r l s = [ 2 ” / c o n f e r e n c e / s e s s i o n s / day1 ” , 3 ” / c o n f e r e n c e / s e s s i o n s / day2 ” , 4 ” / c o n f e r e n c e / s e s s i o n s / s o c i a l e v e n t ” , 5 ” / c o n f e r e n c e / s e s s i o n s / day3 ” 6 ] ;

(107)

Fetching our

sessions

via XHR

I

Our

sessions

data needs to be retrieved from the server

I

It is devided into multiple chunks by day

1 var u r l s = [ 2 ” / c o n f e r e n c e / s e s s i o n s / day1 ” , 3 ” / c o n f e r e n c e / s e s s i o n s / day2 ” , 4 ” / c o n f e r e n c e / s e s s i o n s / s o c i a l e v e n t ” , 5 ” / c o n f e r e n c e / s e s s i o n s / day3 ” 6 ] ;

(108)

Fetching our

sessions

via XHR

I

Our

sessions

data needs to be retrieved from the server

I

It is devided into multiple chunks by day

1 var u r l s = [ 2 ” / c o n f e r e n c e / s e s s i o n s / day1 ”, 3 ” / c o n f e r e n c e / s e s s i o n s / day2 ”, 4 ” / c o n f e r e n c e / s e s s i o n s / s o c i a l e v e n t ”, 5 ” / c o n f e r e n c e / s e s s i o n s / day3 ” 6 ] ;

(109)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 5 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 6 $.a j a x({ 7 u r l: u r l s[i] , 8 success: f u n c t i o n(data) { 9 r e c e i v e d D a t a[i] = data; 10 i f(r e c e i v e d D a t a.l e n g t h == u r l s.l e n g t h) { 11 done(r e c e i v e d D a t a) ; 12 } 13 } 14 }) 15 } 16 };

(110)

(111)

(112)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 5 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 6 $.a j a x({ 7 u r l: u r l s[i] , 8 success: f u n c t i o n(data) { 9 r e c e i v e d D a t a[i] = data; 10 i f(r e c e i v e d D a t a.l e n g t h == u r l s.l e n g t h) { 11 done(r e c e i v e d D a t a) ; 12 } 13 } 14 }) 15 } 16 };

(113)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 5 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 6 (f u n c t i o n(i) { 7 $.a j a x({ 8 u r l: u r l s[i] , 9 success: f u n c t i o n(data) { 10 r e c e i v e d D a t a[i] = data; 11 i f(r e c e i v e d D a t a.l e n g t h == u r l s.l e n g t h) { 12 done(r e c e i v e d D a t a) ; 13 } 14 } 15 }) 16 }) (i) ; 17 } 18 };

(114)

Btw: It still does not

work!

(115)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 5 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 6 (f u n c t i o n(i) { 7 $.a j a x({ 8 u r l: u r l s[i] , 9 success: f u n c t i o n(data) { 10 r e c e i v e d D a t a[i] = data; 11 i f(r e c e i v e d D a t a.l e n g t h == u r l s.l e n g t h) { 12 done(r e c e i v e d D a t a) ; 13 } 14 } 15 }) 16 }) (i) ; 17 } 18 };

(116)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 v a r r e c e i v e d C o u n t = 0 ; 5 6 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 7 (f u n c t i o n(i) { 8 $.a j a x({ 9 u r l: u r l s[i] , 10 success: f u n c t i o n(data) { 11 r e c e i v e d D a t a[i] = data; 12 r e c e i v e d C o u n t += 1 ; 13 i f(r e c e i v e d C o u n t == u r l s.l e n g t h) { 14 done(r e c e i v e d D a t a) ; 15 } 16 } 17 }) 18 }) (i) ; 19 } 20 };

(117)

Fetching our

sessions

via XHR

1 v a r f e t c h = f u n c t i o n(u r l s, done) { 2 v a r r e c e i v e d D a t a = [ ] ; 3 v a r i, l e n; 4 v a r r e c e i v e d C o u n t = 0 ; 5 6 f o r(i=0 , l e n=u r l s.l e n g t h; i<l e n; i++) { 7 (f u n c t i o n(i) { 8 $.a j a x({ 9 u r l: u r l s[i] , 10 success: f u n c t i o n(data) { 11 r e c e i v e d D a t a[i] = data; 12 r e c e i v e d C o u n t += 1 ; 13 i f(r e c e i v e d C o u n t == u r l s.l e n g t h) { 14 done(r e c e i v e d D a t a) ; 15 } 16 } 17 }) 18 }) (i) ; 19 } 20 };

(118)

(119)

Asynchronous

map

/

reduce

to the

(120)

Asynchronous

map/reduce

I

https://github.com/caolan/async

I

Functional style asynchronous handling

(121)

Asynchronous

map/reduce

I

https://github.com/caolan/async

I

Functional style asynchronous handling

(122)

Asynchronous

map/reduce

I

https://github.com/caolan/async

I

Functional style asynchronous handling

(123)

Asynchronous

map/reduce

1 v a r f e t c h = f u n t i o n(u r l s, done) {

2 async.map(u r l s, a j a x, done) ;

(124)

Asynchronous

map/reduce

(125)

Asynchronous

map/reduce

3 }; 1 v a r a j a x = f u n c t i o n(u r l, done) { 2 $.a j a x({ 3 u r l: u r l, 4 success: done 5 }) ; 6 };