Things I learned writing a frontend framework

Federico Pereiro

whoami?

- JS dev since 2010 (mostly backend, go figure)

- Founder @ altocode.nl

- Engineer @ bridgefund.nl

whyamihere?

Summarize the most important concepts I learned from building (and using) a frontend framework

(Framework: github.com/fpereiro/gotob)

What I'm aiming for

Obvious

New

Wrong

Demo time!

(with thanks to browserstack.com)

Try it yourself: altocode.nl/gotob

Why did you do that to yourself?

Interesting
Maybe useful in the real world

It all starts here

(Source: http://info.cern.ch/hypertext/WWW/TheProject.html)

It all starts here

<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A
NAME=0 HREF="WhatIs.html">
hypermedia</A> information retrieval
initiative aiming to give universal
access to a large universe of documents.<P>
Everything there is online about
W3 is linked directly or indirectly
to this document, including an <A
NAME=24 HREF="Summary.html">executive
summary</A> of the project, <A
NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A>
, <A
NAME=30 HREF="Policy.html">Policy</A> , November's <A
NAME=34 HREF="News/9211.html">W3 news</A> ,
<A
NAME=41 HREF="FAQ/List.html">Frequently Asked Questions</A> .
<DL>
<DT><A
NAME=44 HREF="../DataSources/Top.html">What's out there?</A>
<DD> Pointers to the
world's online information,<A
NAME=45 HREF="../DataSources/bySubject/Overview.html"> subjects</A>
, <A
NAME=z54 HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc.
<DT><A
NAME=46 HREF="Help.html">Help</A>
<DD> on the browser you are using
<DT><A
NAME=13 HREF="Status.html">Software Products</A>
<DD> A list of W3 project
components and their current state.
(e.g. <A
NAME=27 HREF="LineMode/Browser.html">Line Mode</A> ,X11 <A
NAME=35 HREF="Status.html#35">Viola</A> , <A
NAME=26 HREF="NeXT/WorldWideWeb.html">NeXTStep</A>
, <A
NAME=25 HREF="Daemon/Overview.html">Servers</A> , <A
NAME=51 HREF="Tools/Overview.html">Tools</A> ,<A
NAME=53 HREF="MailRobot/Overview.html"> Mail robot</A> ,<A
NAME=52 HREF="Status.html#57">
Library</A> )
<DT><A
NAME=47 HREF="Technical.html">Technical</A>
<DD> Details of protocols, formats,
program internals etc
<DT><A
NAME=40 HREF="Bibliography.html">Bibliography</A>
<DD> Paper documentation
on W3 and references.
<DT><A
NAME=14 HREF="People.html">People</A>
<DD> A list of some people involved
in the project.
<DT><A
NAME=15 HREF="History.html">History</A>
<DD> A summary of the history
of the project.
<DT><A
NAME=37 HREF="Helping.html">How can I help</A> ?
<DD> If you would like
to support the web..
<DT><A
NAME=48 HREF="../README.html">Getting code</A>
<DD> Getting the code by<A
NAME=49 HREF="LineMode/Defaults/Distribution.html">
anonymous FTP</A> , etc.</A>
</DL>
</BODY>

So how did we get here?

Page + State = App

username: 'fpereiro'

balance: 0.81

theme: 'dark'

<div style="background-color:black;color:white;font-family:monospace;padding:20px;">
  <p>Welcome, fpereiro</p>
  <p>Your balance is 0.81</p>
  <button onclick="toggleTheme()">
    Switch to light theme
  </button>
</div>

UI + State = App

(Web page + State = Web app)

UI allows the user to:

1. See state: <p>Welcome, fpereiro</p>

2. Change state: <button onclick="toggleTheme ()"></button>

This is the entire game!

Generate HTML that allows the user to:

1) see state

2) change state.

Requirements

Static requirement:

HTML in sync with state.

Dynamic requirement:

User actions* on DOM elements change the state.

(the static is the hard one!)

Static requirement

requires us to use logic to generate HTML

- Variable substitution: username -> 'fpereiro'

- Conditional: darkTheme ? 'background-color: black' : 'background-color: white'

- Iteration: (lists, tables)

Static requirement

also needs to know

when to update the HTML

Immediate Mode

vs

Retained Mode

Immediate Mode

vs

Retained Mode

Frame

Update

Retained mode requires

client-side JS

(at least to update the existing HTML

which new HTML from the server)

Bonus 1: offline functionality

Bonus 2: avoid page refreshes

It is very convenient to use client-side JS to generate HTML

- Performance (no round trip)

- Separation of concerns

What is a view, really?

A view is a function that takes the state as its argument,

and which returns HTML

var View = function (state) {
   // Your working hours go here.
   return html;
}

What is a view, really?

A view is a function that

takes certain parts of the state as its argument,

and which returns HTML

var View = function (statePart1, statePart2) {
   // Your working hours go here.
   return html;
}

(And the output of the view is placed somewhere in the DOM)

My mental model for how any frontend framework works:

The Declarative Sandwich

The D'éclatative Sandwich

Views: f (s1, ...) => ...

Diff: compare old HTML & new, update

Events: when s1, s2 change, call the right views

The D'éclatative Sandwich

Ghostbusters!

Cleanup the apartment/hotel/NYC

On state change, who you gonna call?

Top of the sandwich: events

Why events? Because it's 1 -> n

(and n can be 0)

Bottom of the sandwich: diff

How can you get to B from A?

Bottom of the sandwich: graph diff

How can you get to graph B from graph A?

(quadratic problem!)

jQuery

vs

gotoB

(as told by the d'éclatative sandwich)

jQuery implements toggleTheme

Top of the sandwich:

var toggleTheme = function () {
   var oldTheme = window.theme;
   var newTheme = oldTheme === 'dark' ? 'light' : 'dark';
   window.theme = newTheme;
   updateHeader ();
   updateSidebar ();
   updateMainView ();
   updateFooter ();
};

jQuery implements toggleTheme

Center & bottom of the sandwich:

var updateHeader = function () {
   var theme = oldTheme === 'dark' ? 'light' : 'dark';
   // Your working hours from 2009 go here.
   $ ('#header').innerHTML (html);
};

gotoB implements toggleTheme

Top of the sandwich:
var toggleTheme = function () {
   var oldTheme = B.get ('theme');
   var newTheme = oldTheme === 'dark' ? 'light' : 'dark';
   B.call ('set', 'theme', newTheme);
};

gotoB implements toggleTheme

Center of the sandwich:
var header = function () {
   return B.view ('theme', function (theme) {
      // My unpaid working hours go here.
   }
};

gotoB implements toggleTheme

Bottom of the sandwich:
['O div {"background-color":"black","color":"white"}', 'O p', 'L Welcome, fpereiro', 'C p', 'O p', 'L Your balance is 0.81', 'C p', 'O button {"onclick":"toggleTheme ()"}', 'L Switch theme', 'C button', 'C div']

['O div {"background-color":"white"}', 'O p', 'L Welcome, fpereiro', 'C p', 'O p', 'L Your balance is 0.81', 'C p', 'O button {"onclick":"toggleTheme ()"}', 'L Switch theme', 'C button', 'C div']

The diff trick!

Myers diff algorithm:

linear performance for text

(The same that when you run `git diff`)

How? Flatten the graph into text.

What did you learn from IE6 compatibility?

What did you get from IE6 compatibility that is useful?

From The Art of console.log

Things I learned writing a frontend framework

Why did you do that to yourself?

Why did you do that to yourself?

It all starts here

It all starts here

So how did we get here?

Page + State = App

Page + State = App

UI + State = App

UI allows the user to:

This is the entire game!

Generate HTML that allows the user to:

1) see state

2) change state.

Requirements

Static requirement:

HTML in sync with state.

Dynamic requirement:

User actions* on DOM elements change the state.

Static requirement

requires us to use logic to generate HTML

Static requirement

also needs to know

when to update the HTML

Immediate Mode

vs

Retained Mode

Immediate Mode

vs

Retained Mode

Retained mode requires

client-side JS

(at least to update the existing HTML

which new HTML from the server)

It is very convenient to use client-side JS to generate HTML

What is a view, really?

What is a view, really?

(And the output of the view is placed somewhere in the DOM)

My mental model for how any frontend framework works:

The Declarative Sandwich

The D'éclatative Sandwich

The D'éclatative Sandwich

Top of the sandwich: events

Bottom of the sandwich: diff

Bottom of the sandwich: graph diff

jQuery

vs

gotoB

jQuery implements toggleTheme

jQuery implements toggleTheme

gotoB implements toggleTheme

gotoB implements toggleTheme

gotoB implements toggleTheme

The diff trick!

What did you learn from IE6 compatibility?

What did you get from IE6 compatibility that is useful?

From The Art of console.log

to the Event Log

Questions!

Thank you!

fpereiro@gmail.com