A Single Page Story – http://ffconf.org/

Slide 1

Slide 1 text

A Single Page Story @HenrikJoreteg

Slide 2

Slide 2 text

WHY AM I HERE?

Slide 3

Slide 3 text

http://blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks

Slide 4

Slide 4 text

"Hey! I read your book, Human JavaScript and your recent post about frameworks" - Remy

Slide 5

Slide 5 text

"holy s*** Remy reads my stuff?!"

Slide 6

Slide 6 text

"Come talk at my conference!"

Slide 7

Slide 7 text

*hyperventilates*

Slide 8

Slide 8 text

*dies* x x

Slide 9

Slide 9 text

DEFIBRILLATOR, CPR, etc…

Slide 10

Slide 10 text

"So should I turn that frameworks post into a talk? (I’ve got this)"

Slide 11

Slide 11 text

"No. Talk about clientside apps, in general. Like… should we even do them? What is their place on the web?"

Slide 12

Slide 12 text

LET ME TRANSLATE:

Slide 13

Slide 13 text

"No. Please publicly open Pandora’s box on my stage."

Slide 14

Slide 14 text

"… and take the inevitable beatings that follow."

Slide 15

Slide 15 text

*shudders in fear*

Slide 16

Slide 16 text

*dies* (again) x x

Slide 17

Slide 17 text

*dies* (again) x x

Slide 18

Slide 18 text

OK. Let’s do this.

Slide 19

Slide 19 text

"Like it or not we live in interesting times."

Slide 20

Slide 20 text

"They are times of danger and uncertainty"

Slide 21

Slide 21 text

- Robert F. Kennedy from a prophetic speech in 1966 about clientside javascript today

Slide 22

Slide 22 text

SINGLE PAGE APP

Slide 23

Slide 23 text

HUH?

Slide 24

Slide 24 text

JAVASCRIPT APPS

Slide 25

Slide 25 text

FRONT-END APPS

Slide 26

Slide 26 text

THICK CLIENTS

Slide 27

Slide 27 text

RIAs?

Slide 28

Slide 28 text

NATIVE WEB APP

Slide 29

Slide 29 text

FUNDAMENTAL DISTINCTION…

Slide 30

Slide 30 text

THE BROWSER IS YOUR RUNTIME

Slide 31

Slide 31 text

SEND THE APP ITSELF TO THE BROWSER INSTEAD OF THE RESULT OF RUNNING IT

Slide 32

Slide 32 text

Slide 33

Slide 33 text

IS IT EVEN A GOOD IDEA?

Slide 34

Slide 34 text

SHOULD WE EVEN BE DOING THIS?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

"They are times of danger and uncertainty"

Slide 37

Slide 37 text

SHOULD WE BUILD APPS THAT REQUIRE JAVASCRIPT?

Slide 38

Slide 38 text

Slide 39

Slide 39 text

YES!

Slide 40

Slide 40 text

WHAT SERVICE ARE WE PROVIDING?

Slide 41

Slide 41 text

CONTENT?

Slide 42

Slide 42 text

CONTENT SHOULD JUST WORK™

Slide 43

Slide 43 text

NO REASON TO COMPLICATE THINGS THAT CAN BE SIMPLE

Slide 44

Slide 44 text

BUT THE WEB IS NO LONGER JUST ABOUT LINKED CONTENT!

Slide 45

Slide 45 text

"They are times of danger and uncertainty"

Slide 46

Slide 46 text

THERE ARE CASES WHERE CLIENTSIDE FUNCTIONALITY IS THE CORE VALUE PROVIDED BY SERVICE

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

1. RENDERING 2. NETWORKING 3. FILE READ/WRITE 4. STORAGE 5. WEB AUDIO APIS 6. WEBGL 7. VOICE/VIDEO HIGH PERFORMANCE

Slide 53

Slide 53 text

BROWSERS ARE NOT DUMB DOCUMENT VIEWERS

Slide 54

Slide 54 text

MOST CAPABLE UBIQUITOUS RUNTIMES ON THE PLANET

Slide 55

Slide 55 text

"we live in interesting times."

Slide 56

Slide 56 text

I’M JUST GOING TO SAY IT:

Slide 57

Slide 57 text

THERE ARE TWO TYPES OF APPLICATIONS ON THE WEB

Slide 58

Slide 58 text

1. NATIVE WEB APPS

Slide 59

Slide 59 text

2. SERVER-SIDE WEB APPS

Slide 60

Slide 60 text

THEY ARE FUNDAMENTALLY DIFFERENT

Slide 61

Slide 61 text

AND THAT’S O.K.

Slide 62

Slide 62 text

ANYTHING WE CAN BUILD WITH WEB TECH I THINK WE SHOULD

Slide 63

Slide 63 text

EVEN IF WE CAN’T SUPPORT OLDER BROWSERS

Slide 64

Slide 64 text

THE WEB IS INFINITELY MORE OPEN AND ACCESSIBLE THAN NATIVE PLATFORMS

Slide 65

Slide 65 text

USER EXPECTATIONS HAVE EVOLVED

Slide 66

Slide 66 text

THE WEB IS DOING PRETTY WELL ON DESKTOPS

Slide 67

Slide 67 text

THE WEB IS LOSING ON MOBILE

Slide 68

Slide 68 text

THE WEB IS LOSING ON EXPERIENCE

Slide 69

Slide 69 text

WE OFTEN PREFER NATIVE APPS TO THE WEB

Slide 70

Slide 70 text

QUALITY AND POLISH OF USER EXPERIENCE IS OFTEN MUCH BETTER

Slide 71

Slide 71 text

LET’S FIX THIS!

Slide 72

Slide 72 text

WE’RE TOO FOCUSED ON THE PAST INSTEAD OF COMPETING ON EXPERIENCE

Slide 73

Slide 73 text

SAYING THERE’S A DISTINCTION MAKES SOME PEOPLE MAD

Slide 74

Slide 74 text

"Everything should be an enhancement!"

Slide 75

Slide 75 text

WE’RE ON THE SAME TEAM!

Slide 76

Slide 76 text

WE WANT THE OPEN WEB TO WIN!

Slide 77

Slide 77 text

HOW COULD WE EVEN BUILD A PROGRESSIVELY ENHANCED VERSION OF TALKY.IO?

Slide 78

Slide 78 text

SHOULD WE NOT HAVE BUILT IT?

Slide 79

Slide 79 text

WHERE’S THE DOWNSIDE?

Slide 80

Slide 80 text

LET’S LOOK A BIT CLOSER AT TWITTER

Slide 81

Slide 81 text

WHAT IS TWITTER?

Slide 82

Slide 82 text

IS IT A WEB APP?

Slide 83

Slide 83 text

NO.

Slide 84

Slide 84 text

IT’S A SERVICE

Slide 85

Slide 85 text

APP != SERVICE

Slide 86

Slide 86 text

TWITTER android app iOS app tweetbot twitter.com tweet deck ad dashboard

Slide 87

Slide 87 text

I DIDN’T REALLY CARE HOW THEY BUILT THEIR WEBAPP

Slide 88

Slide 88 text

BECAUSE I DIDN’T USE IT ANYWAY!

Slide 89

Slide 89 text

I WAS USING AN iOS APP!

Slide 90

Slide 90 text

THEIR WEB APP HAD ALREADY FAILED ME!

Slide 91

Slide 91 text

LET’S THINK ABOUT THIS

Slide 92

Slide 92 text

WHEN I FOLLOW A LINK TO A RANDOM TWEET ON MY PHONE…

Slide 93

Slide 93 text

JUST LET ME READ IT!

Slide 94

Slide 94 text

plain text I DON’T MIND IF IT’S

Slide 95

Slide 95 text

DON’T MAKE ME DOWNLOAD 2MB OF JS TO READ 140 CHARACTERS OF TEXT!

Slide 96

Slide 96 text

THIS IS THE PROBLEM THEY FIXED WITH NEW NEW TWITTER

Slide 97

Slide 97 text

BUT…

Slide 98

Slide 98 text

CATCHING UP WITH ALL THINGS TWITTER IS A FUNDAMENTALLY DIFFERENT USE CASE

Slide 99

Slide 99 text

FAILING TO RECOGNIZE DISTINCTION MAKES US FLOUNDER

Slide 100

Slide 100 text

A SERVICE CAN PROVIDE BOTH!

Slide 101

Slide 101 text

TWITTER.COM & TWEETDECK.COM

Slide 102

Slide 102 text

THERE’S STILL SOME GAPS BETWEEN WEB AND NATIVE

Slide 103

Slide 103 text

REAL OFFLINE SUPPORT

Slide 104

Slide 104 text

PLATFORMS THAT TREAT NATIVE WEB APPS AS FIRST CLASS CITIZENS

Slide 105

Slide 105 text

THOSE THINGS ARE CHANGING

Slide 106

Slide 106 text

1. SERVICE WORKER

Slide 107

Slide 107 text

PROGRAMMABLE CACHE LAYER CAN INTERCEPTS ALL NETWORK REQUESTS 1. SERVICE WORKER

Slide 108

Slide 108 text

THIS IS HUGE!

Slide 109

Slide 109 text

2. INSTALLABLE WEB APPS

Slide 110

Slide 110 text

CHROME M39+ FIREFOX https://developer.chrome.com/multidevice/android/installtohomescreen https://w3c.github.io/manifest/ JSON-BASED WEB MANIFEST

Slide 111

Slide 111 text

ANDROID 5.0 AUTOUPDATING WEBVIEW

Slide 112

Slide 112 text

"What about performance?"

Slide 113

Slide 113 text

WHITE PAGE OF DEATH

Slide 114

Slide 114 text

TIME TO FIRST PAINT

Slide 115

Slide 115 text

A PRIMED CACHE LARGELY INVALIDATES THIS ARGUMENT

Slide 116

Slide 116 text

1. GIVE IT A UNIQUE NAME HTTP/1.1 200 OK Cache-Control: max-age=REALLY BIG NUMBER! Content-Encoding: gzip 2. CACHE IT FOREVER

Slide 117

Slide 117 text

MOST OF THESE TYPES OF APPS REQUIRE YOU TO BE LOGGED IN

Slide 118

Slide 118 text

PRE-FETCH APP ON LOGIN PAGE

Slide 119

Slide 119 text

NATIVE WEB APPS CAN STILL HAVE SMALL JS PAYLOADS!

Slide 120

Slide 120 text

ALL JS IN THE AMPERSAND.JS APP ON TODOMVC.COM COMBINED 28kb min + gzip

Slide 121

Slide 121 text

SMALLER THAN JQUERY 2.0

Slide 122

Slide 122 text

THE OTHER ASPECT OF PERFORMANCE…

Slide 123

Slide 123 text

ONCE LOADED, PERFORMANCE IS WAY BETTER!

Slide 124

Slide 124 text

IF I’M GOING TO LEAVE APP OPEN ON MY DESKTOP I CARE WAY LESS ABOUT LOAD TIME

Slide 125

Slide 125 text

"What about dual rendered a.k.a. isomorphic apps?"

Slide 126

Slide 126 text

JUST A CLIENTSIDE APP WITH AN OPTIMIZED INITIAL RENDER

Slide 127

Slide 127 text

OFTEN REQUIRES DRAMATICALLY MORE COMPLEX CODE

Slide 128

Slide 128 text

CLIENT TIGHTLY COUPLED TO SERVER

Slide 129

Slide 129 text

THERE ARE SOME CASES WHERE IT MAKES SENSE

Slide 130

Slide 130 text

WITH STATE OF TOOLING TODAY OFTEN NOT WORTH THE COMPLEXITY

Slide 131

Slide 131 text

SEND RENDERED LAYOUT HTML + STYLES

Slide 132

Slide 132 text

"What about all these clientside frameworks?"

Slide 133

Slide 133 text

FOR A FEW MORE SPECIFICS READ MY POST blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks

Slide 134

Slide 134 text

"In a rapidly evolving web, how can we be sure we’re picking the right tools?"

Slide 135

Slide 135 text

WE CAN’T!

Slide 136

Slide 136 text

"They are times of danger and uncertainty"

Slide 137

Slide 137 text

WHAT DO WE KNOW?

Slide 138

Slide 138 text

THINGS WILL CHANGE

Slide 139

Slide 139 text

SO HOW CAN WE CONFIDENTLY BUILD ANYTHING?

Slide 140

Slide 140 text

OPTIMIZE FOR CHANGE. IT IS THE ONLY CONSTANT.

Slide 141

Slide 141 text

HOW?!

Slide 142

Slide 142 text

LOSE YOUR RELIGION

Slide 143

Slide 143 text

DON’T INVEST TOO HEAVILY IN A SINGLE FRAMEWORK

Slide 144

Slide 144 text

FIGHT COMPLEXITY

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

CLIENTSIDE WEB APPS ARE COMPLEX SYSTEMS

Slide 147

Slide 147 text

HOW DO YOU BUILD COMPLEX SYSTEMS?

Slide 148

Slide 148 text

YOU DON’T

Slide 149

Slide 149 text

YOU ISOLATE AND SOLVE THE SMALLER PROBLEMS

Slide 150

Slide 150 text

THEN BUILD IT LIKE LEGOS: BRICK BY BRICK

Slide 151

Slide 151 text

MODULARITY IN A WORD:

Slide 152

Slide 152 text

IT’S HARDER!

Slide 153

Slide 153 text

"I didn't have the time to write you a short letter, so I wrote you a long letter instead." - Mark Twain

Slide 154

Slide 154 text

YOU HAVE TO DISTILL PROBLEMS INTO DISCREET COMPONENTS

Slide 155

Slide 155 text

YOU HAVE TO VALIDATE THOSE PIECES WORK AS EXPECTED

Slide 156

Slide 156 text

MODULES ARE A MACHINE SHOP NOT A HAMMER AND NAILS

Slide 157

Slide 157 text

YOU CAN PRODUCE AMAZING THINGS! BUT IT REQUIRES MORE OF THE OPERATOR

Slide 158

Slide 158 text

WHAT DO YOU GAIN?

Slide 159

Slide 159 text

MODULARITY LETS YOU REMODEL THE KITCHEN WITHOUT BURNING DOWN THE WHOLE BUILDING

Slide 160

Slide 160 text

Angular 2.0

Slide 161

Slide 161 text

andyet.com

Slide 162

Slide 162 text

~30 DEVELOPERS GOBS OF JS APPS REALTIME APPS

Slide 163

Slide 163 text

AMPERSAND.JS

Slide 164

Slide 164 text

THE NAME "ampersand.js" IS A FILTHY LIE

Slide 165

Slide 165 text

BECAUSE NO SUCH FILE EXISTS!

Slide 166

Slide 166 text

THERE’S NOTHING YOU CAN DROP INTO A SCRIPT TAG WITHOUT A BUILD STEP

Slide 167

Slide 167 text

ampersand-state ampersand-model ampersand-collection ampersand-rest-collection ampersand-view ampersand-router

Slide 168

Slide 168 text

ampersand (the CLI) ampersand-app ampersand-view-switcher ampersand-input-view ampersand-select-view ampersand-form-view etc.

Slide 169

Slide 169 text

INDIVIDUAL GITHUB REPOS

Slide 170

Slide 170 text

ALL COMMON.JS MODULES

Slide 171

Slide 171 text

INSTALLED VIA NPM

Slide 172

Slide 172 text

BUILD WITH BROWSERIFY OR WEBPACK

Slide 173

Slide 173 text

todomvc.com

Slide 174

Slide 174 text

AMPERSAND + REACT

Slide 175

Slide 175 text

SOFTWARE IS A LONG-TERM GAME

Slide 176

Slide 176 text

"I could build that in a weekend!" WE ALL THINK:

Slide 177

Slide 177 text

"Another flaw in the human character is that everybody wants to build and nobody wants to do maintenance." - Kurt Vonnegut

Slide 178

Slide 178 text

IF YOUR APP IS SUCCESSFUL IT WILL OUTLIVE THE ATTENTION SPAN OF ITS CREATORS

Slide 179

Slide 179 text

OPTIMIZE FOR CHANGE. IT IS THE ONLY CONSTANT.

Slide 180

Slide 180 text

"Like it or not we live in interesting times. They are times of danger and uncertainty;" But they are also more open to the creative energy of people than any other time in history."

Slide 181

Slide 181 text

"Like it or not we live in interesting times. They are times of danger and uncertainty;" But they are also more open to the creative energy of people than any other time in history."