The Frontend is a Fullstack

Slide 1

Slide 1 text

Do the right thing. next

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

The Frontend is a Fullstack ! @xbill82

Slide 4

Slide 4 text

WHAT PROBLEM ARE WE TRYING TO SOLVE?

Slide 5

Slide 5 text

Since the ‘90s Native Applications Web Pages Web Applications Snappy, interactive UI Ease of distribution

Slide 6

Slide 6 text

Native Application vs Web Page View Logic Business Logic ORM (or kind of) Persistence UI (interactive, dynamic)

Slide 7

Slide 7 text

Native Application vs Web Page View Logic Business Logic ORM (or kind of) Persistence UI (static)

Slide 8

Slide 8 text

Native Application vs Web Page View Logic Business Logic ORM (or kind of) Persistence UI (static) "

Slide 9

Slide 9 text

INTERACTIVE ALL THE PAGES!

Slide 10

Slide 10 text

Change the appearance without reloading the page

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

1995

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Change the content without reloading the page

Slide 16

Slide 16 text

1995

Slide 17

Slide 17 text

1995 2005

Slide 18

Slide 18 text

We’re done!!1!

Slide 19

Slide 19 text

We’re done!!1!

Slide 20

Slide 20 text

Separation of concerns? View Logic Business Logic ORM (or kind of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS

Slide 21

Slide 21 text

1995 2005

Slide 22

Slide 22 text

1995 2005 2010

Slide 23

Slide 23 text

UI libs to the rescue! Business Logic ORM (or kind of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic

Slide 24

Slide 24 text

UI libs to the rescue! Business Logic ORM (or kind of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic

Slide 25

Slide 25 text

UI libs to the rescue! Business Logic ORM (or kind of) Persistence UI (dynamic) " HTTP calls (ajax) View Logic REST API JSON

Slide 26

Slide 26 text

YEEEEEEAH!

Slide 27

Slide 27 text

YEEEEEEAH!

Slide 28

Slide 28 text

How others were building UIs…

Slide 29

Slide 29 text

How we were building UIs

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

We needed to get more productive

Slide 32

Slide 32 text

2005 2010

Slide 33

Slide 33 text

2005 2010 2013

Slide 34

Slide 34 text

Say hello to the components

Slide 35

Slide 35 text

Polymer Designer

Slide 36

Slide 36 text

What do we still need?

Slide 37

Slide 37 text

Ofﬂine Experience

Slide 38

Slide 38 text

Let’s kill the dinosaur

Slide 39

Slide 39 text

Let’s kill the dinosaur

Slide 40

Slide 40 text

Application Icon We make ﬁrst class applications

Slide 41

Slide 41 text

Push Notiﬁcations We want to bother the user!

Slide 42

Slide 42 text

2010 2013

Slide 43

Slide 43 text

2010 2013 ?? Progressive Web Applications

Slide 44

Slide 44 text

Data. Let’s talk about it.

Slide 45

Slide 45 text

What if data changes? The UI The Data

Slide 46

Slide 46 text

Where’s the state? $(‘#button’).click(function(e) { if (!$(‘#menu’).hasClass(‘open’)) { $(‘#menu’).addClass(‘open’) } else { $(‘#menu’).removeClass(‘open’) } })

Slide 47

Slide 47 text

The state has always been there. The question is: « How do you want to describe it? »

Slide 48

Slide 48 text

Externalizing the state var menuOpen = false $(‘#button’).click(function(e) { if (menuOpen) { menuOpen = true $(‘#menu’).addClass(‘open’) } else { menuOpen = false $(‘#menu’).removeClass(‘open’) } })

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Manipulate the state, not the DOM. The DOM is abstracted. You shouldn’t bother about it.

Slide 51

Slide 51 text

Where should the state live?

Slide 52

Slide 52 text

The State can be scattered across components… like getInitialState()

Slide 53

Slide 53 text

…or, live within a store. (like in Redux)

Slide 54

Slide 54 text

Look Ma! The store! View Logic UI (dynamic) " HTTP calls (ajax) JSON Business Logic ORM (or kind of) Persistence REST API

Slide 55

Slide 55 text

Look Ma! The store! View Logic UI (dynamic) " HTTP calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store

Slide 56

Slide 56 text

The store is actually a local cache. Of the data coming from the server.

Slide 57

Slide 57 text

IF THE STORE IS A LOCAL CACHE AND THE CACHE IS MEANT TO BE IN SYNC…

Slide 58

Slide 58 text

Look Ma! Data binding! View Logic UI (dynamic) " HTTP calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store Data Binding!

Slide 59

Slide 59 text

REST API Calls Might mean trouble

Slide 60

Slide 60 text

{ "user": { "firstName": "Luca", "lastName": "Marchesini", "friends": [ { "firstName": "Anthony", "lastName": "Sendra" }, { "firstName": "Melanie", "lastName": "Olivier" } // . . . ] } } My UI needs this

Slide 61

Slide 61 text

{ "user": { "firstName": "Luca", "lastName": "Marchesini", "city": "Montpellier", "job": "Fullstack Engineer", "twitter": "@xbill82", "friends": [91, 22, 73, 14, 8, 82, 37] } } My API returns this GET http://my-server.com/api/user/6

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

REST API Calls Underfetching / Overfetching Speciﬁc API endpoints

Slide 65

Slide 65 text

TIGHT COUPLING AGAIN

Slide 66

Slide 66 text

How do they do on the backend?

Slide 67

Slide 67 text

They query.

Slide 68

Slide 68 text

2010 2013

Slide 69

Slide 69 text

2010 2013 2015

Slide 70

Slide 70 text

Say hello to queries { user(id: 6) { firstName, lastName, friends: { firstName, lastName } } }

Slide 71

Slide 71 text

Look Ma! Single Endpoint! View Logic UI (dynamic) " Query JSON Business Logic ORM (or kind of) The Store REST API

Slide 72

Slide 72 text

Look Ma! Single Endpoint! View Logic UI (dynamic) " Query JSON Business Logic ORM (or kind of) Single Endoint API The Store

Slide 73

Slide 73 text

No clear way to leverage front-end cache for request optimization

Slide 74

Slide 74 text

2010 2013 2015

Slide 75

Slide 75 text

2010 2013 2015

Slide 76

Slide 76 text

The DOM Say hello to Abstraction Developer

Slide 77

Slide 77 text

The DOM Say hello to Abstraction The Network Developer

Slide 78

Slide 78 text

Look Ma! Network Abstraction! View Logic UI (dynamic) The Store " Query JSON Business Logic ORM (or kind of) Single Endoint API

Slide 79

Slide 79 text

Look Ma! Network Abstraction! View Logic UI (dynamic) The Store " Query JSON Business Logic Single Endoint API OGM (Relay/Falcor)

Slide 80

Slide 80 text

DEMO TIME

Slide 81

Slide 81 text

Are we done or what?

Slide 82

Slide 82 text

Are we done or what?

Slide 83

Slide 83 text

WEB APPLICATION Y U NO GO FAST

Slide 84

Slide 84 text

Data requests should go query Let’s go beyond the REST endpoints.

Slide 85

Slide 85 text

HTTP 2 ‘nuff said.

Slide 86

Slide 86 text

Data binding comes down to observing

Slide 87

Slide 87 text

App State Component The DOM observes maps

Slide 88

Slide 88 text

Events (Backbone) Dirty Checking (AngularJS) Virtual DOM + Redraw Everything like in the ‘90s (React) Reactivity (Angular 2, Vuejs, Cycle.js) One problem, many implementations

Slide 89

Slide 89 text

Data-binding should go native By getting Observables, right into the language. https://tc39.github.io/proposal-observable/

Slide 90

Slide 90 text

VirtualDOM is good for performances It acts as a buffer for DOM manipulations (avoiding relayout, restyle and redraw cycles)

Slide 91

Slide 91 text

DOM change

Slide 92

Slide 92 text

DOM change Restyle Relayout Repaint

Slide 93

Slide 93 text

DOM change Restyle Relayout Repaint DOM change Restyle Relayout Repaint DOM change Restyle Relayout Repaint

Slide 94

Slide 94 text

DOM change

Slide 95

Slide 95 text

DOM change DOM change

Slide 96

Slide 96 text

DOM change DOM change DOM change

Slide 97

Slide 97 text

DOM change DOM change DOM change Restyle Relayout Repaint

Slide 98

Slide 98 text

Virtual DOM should go native. Or, at least, the browser should expose some sort of low- level ofﬂine and ﬂushable DOM

Slide 99

Slide 99 text

WHAT WAS THE PROBLEM ANYWAY?

Slide 100

Slide 100 text

Providing an application-like user experience

Slide 101

Slide 101 text

In a distributed environment

Slide 102

Slide 102 text

Instantly accessible via a single URL

Slide 103

Slide 103 text

Available across all the existing browsers

Slide 104

Slide 104 text

And all the existing devices and OS

Slide 105

Slide 105 text

In all the possible network conditions

Slide 106

Slide 106 text

In order to achieve the largest amount of users

Slide 107

Slide 107 text

And make them happy.

Slide 108

Slide 108 text

We keep searching and discussing new ideas because the problem is darn complex

Slide 109

Slide 109 text

And our work can beneﬁt other industries Network abstraction is useful for every developer that deals with network latency.

Slide 110

Slide 110 text

View Logic Business Logic ORM (or kind of) Persistence UI (interactive, dynamic) View Logic UI (dynamic) The Store " Business Logic Single Endoint API OGM (Relay/Falcor) Native Application Web Application

Slide 111

Slide 111 text

Today, the Front End embraces the Full Stack This is mostly due to the incredible evolution of Javascript.

Slide 112

Slide 112 text

Javascript. The language of an awesome community.

Slide 113

Slide 113 text

A community made of dreamers, not hipsters.

Slide 114

Slide 114 text

FIN.

Slide 115

Slide 115 text

This is Tim.

Slide 116

Slide 116 text

HyperText Something you are meant to read Something that contains links

Slide 117

Slide 117 text

The Need for Applications Being able to get something done.

Slide 118

Slide 118 text

Say hello to Co-location component HOC (GraphQL Fragment) {{model.get('user.name')}} async fetch

Slide 119

Slide 119 text

Look Ma! Co-location! UI (dynamic) Single API Endpoint Business Logic Network Ajax Calls (queries) JSON Data The Frontend View Logic The Store (Data Layer) ORM / OGM (Relay / Falcor) Query

Slide 120

Slide 120 text

Browsers are becoming OS They expose tons of technology.

Slide 121

Slide 121 text

All the new frameworks/libs provide components

Slide 122

Slide 122 text

UI composition should go native

Slide 123

Slide 123 text

https://github.com/w3c/webcomponents/

Slide 124

Slide 124 text

let ui$ = state$.map( (state) => { return component(state) } )

Slide 125

Slide 125 text

The Front End Data Layer should go native By leveraging the power of in-browser DBs.

Slide 126

Slide 126 text

is the new