Patterns of a frontend framework

Federico Pereiro

(yes, I wrote my own framework)

burnout.js

What we're talking about today

Scope: frontend of web applications (SPAs)

Takeaway: patterns

Experience: moderate 

No code!

Terrain patterns

web pages (y < 2005)

HTML & CSS

link

Server

render

web apps (y > 2005)

HTML & CSS

action

Server

bootstrap

ajax

update

Web page

- Sending or receiving info requires a page refresh.

- The page is rendered once.

Web app

- Background communication with server.

- The page must be updated.

compare with batch program & web server route

Web apps need javascript

At a minimum:

- Perform bidirectional ajax

- Update parts of the view

- Navigation (SPA)

Optionally:

- Generate HTML/CSS (CSR)

- Hold client state

Solution patterns

Static patterns

1) HTML/CSS generation

2) Holding client state

HTML generation

<p>Hello!</p>

[‘p’, ‘Hello!’]

HTML generation

<p class=”nice”></p>

[‘p’, {class: ‘nice’}]

HTML generation

<div>
   <p class=”nice”>Hello</p>
</div>


['div', [
   [‘p’, {class: ‘nice’}, 'Hello']
]]

HTML generation

Conditional #1: cond ? [‘p’, ‘Hello!’] : []

Conditional #2:
[‘p’, {class: cond ? ‘h2’ : ‘’}, ‘Hello!’]

Iteration:
[‘table’, ITEMS.map (function (item) {

   return [‘tr’, [‘td’, item]];
})]

First static pattern

function (...) {

// return object literals that represent HTML/CSS

}

The state is king

The state with no frills

 {}

Static patterns #1 & #2

function (State) {

// return object literals that represent HTML/CSS

}

Dynamic patterns

1) Data events

2) Complex events

Event system!

verb

path

arguments

Data events

add

set

rem

+

path

Data events

set ['users'] [{id: 1}, {id: 2}]

add ['users'] {id: 3}

rem ['users'] 1

Data events pattern

- Modify store

- Fire an event

Complex events pattern

submit ['user'] {id: 4}

retrieve ['users'] {filter: ...}

Complex events pattern

- Read store

- Perform computation or AJAX

- Update store

- Trigger other events

The juggernaut

View (path, complex_events, function (state) {

// object literals with stringified event triggers

});

Implementation patterns

Redrawing approach

nuke (innerHTML)

flatten (Myers diff)

Flatten & diff

- Make tree into array of strings

- Diff 'em

- Give up after n millis (O (nd))

View redrawing

- Descending priority for nested

-change verb

- Listeners path wildcard

Where's the verb?

add
set
rem

change

path wildcard

set ['users'] [{name: 'pepe'}]

set ['users', 0, 'name'] 'pepe'

change ['users']

change ['users', 0]

change ['users', 0, 'name']

change ['users', 0, 'email']

event

listener

github.com/fpereiro/gotoB

Questions?

Thank you!

fpereiro@gmail.com