The Evolution of the "Web App" - FluentConf 2015

Slide 1

Slide 1 text

Evolution of the "Web App" @HenrikJoreteg

Slide 2

Slide 2 text

@Hoarse_JS

Slide 3

Slide 3 text

THIS USED TO BE SIMPLE!

Slide 4

Slide 4 text

1. WRITE SOME HTML 2. LAY IT OUT WITH FRAMES OR TABLES 3. FTP IT TO A SERVER! 4. BAM!

Slide 5

Slide 5 text

CONGRATULATIONS, YOU’RE A WEB DEVELOPER!

Slide 6

Slide 6 text

THEN IT GOT HARDER

Slide 7

Slide 7 text

WHO’S WRITTEN THEIR OWN BLOG SOFTWARE?

Slide 8

Slide 8 text

OVER ENGINEERING A BLOG WAS A RITE OF PASSAGE

Slide 9

Slide 9 text

1. WRITE SOME PHP/PYTHON/ASP/COLDFUSION 2. SET UP RELATIONAL DATABASE 3. WRITE SOME BAD SQL 4. SHOVE DYNAMIC DATA INTO OUR HTML 5. LAY IT OUT WITH CSS (NO TABLES THIS TIME) 6. RUN IT ON SHARED HOSTING SOMEWHERE

Slide 10

Slide 10 text

CONGRATULATIONS, YOU’RE A WEB DEVELOPER!

Slide 11

Slide 11 text

PHEW!!

Slide 12

Slide 12 text

THEN WE GOT "SMART"

Slide 13

Slide 13 text

USE A FRAMEWORK!!

Slide 14

Slide 14 text

1. RAILS 2. ALL THEM PHP FRAMEWORKS 3. DJANGO 4. ETC.

Slide 15

Slide 15 text

OUR EXCESSIVLELY DYNAMIC BLOG… IS NOW BETTER ORGANIZED AND HAS MORE DEPENDENCIES

Slide 16

Slide 16 text

CONGRATULATIONS, YOU’RE A WEB DEVELOPER!

Slide 17

Slide 17 text

WHAT ABOUT TODAY?

Slide 18

Slide 18 text

BACK-END FRONT-END ISOMORPHIC RESPONSIVE ES6(2015) BABEL TRACEUR AMD COMMONJS MVC MVVM FLUX RELAY GULP GRUNT API-GATEWAY CORS JSON-WEB-TOKENS NODE.JS HTTP 2.0 OFFLINE-FIRST MOBILE-FIRST WEBGL WEBRTC WEBSOCKET GRAPHQL AMPERSAND EMBER REALTIME REDIS RIAK LEVELDB RABBITMQ PUSH-NOTIFICATION ENABLED BACKBONE APP WITH POLYFILLED POLYMER WEB COMPONENTS

Slide 19

Slide 19 text

CONGRATULATIONS YOU MIGHT BE A "WEB DEVELOPER"

Slide 20

Slide 20 text

WHAT DOES "WEB DEVELOPER" EVEN MEAN?

Slide 21

Slide 21 text

WHAT DOES "WEB APP" EVEN MEAN?

Slide 22

Slide 22 text

THE BROWSER ISN’T OUR RENDERER

Slide 23

Slide 23 text

THE BROWSER IS OUR RUNTIME

Slide 24

Slide 24 text

THE WEBVIEW IS OUR RUNTIME

Slide 25

Slide 25 text

MORE LOGIC MOVING TO FRONT-END JS

Slide 26

Slide 26 text

DEVS WITH DIFFERENT BACKGROUNDS CONVERGING ON JS

Slide 27

Slide 27 text

BRINGING THEIR PATTERNS AND PREFERENCES

Slide 28

Slide 28 text

Slide 29

Slide 29 text

SINGLE PAGE APPS

Slide 30

Slide 30 text

HUH?

Slide 31

Slide 31 text

SINGLE PAGE APPS

Slide 32

Slide 32 text

"NATIVE"

Slide 33

Slide 33 text

I’M A WEB DEVELOPER

Slide 34

Slide 34 text

NATIVE WEB APP

Slide 35

Slide 35 text

1. JAVASCRIPT 2. HTML 3. CSS 4. BROWSER APIS

Slide 36

Slide 36 text

FUNDAMENTAL DISTINCTION…

Slide 37

Slide 37 text

THE BROWSER IS YOUR RUNTIME

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

SHOULD WE EVEN BE DOING THIS?

Slide 41

Slide 41 text

SHOULD WE BUILD APPS THAT REQUIRE JAVASCRIPT?

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

SHOULD WE BUILD APPS THAT REQUIRE JAVASCRIPT?

Slide 44

Slide 44 text

Slide 45

Slide 45 text

YES!

Slide 46

Slide 46 text

WHAT SERVICE ARE WE PROVIDING?

Slide 47

Slide 47 text

CONTENT?

Slide 48

Slide 48 text

CONTENT SHOULD JUST WORK™

Slide 49

Slide 49 text

NO REASON TO COMPLICATE THINGS THAT CAN BE SIMPLE

Slide 50

Slide 50 text

BUT THE WEB IS NO LONGER JUST ABOUT LINKED CONTENT!

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

BROWSERS ARE NOT DUMB DOCUMENT VIEWERS

Slide 58

Slide 58 text

MOST CAPABLE UBIQUITOUS RUNTIMES ON THE PLANET

Slide 59

Slide 59 text

I’M JUST GOING TO SAY IT:

Slide 60

Slide 60 text

THERE ARE TWO TYPES OF APPLICATIONS ON THE WEB

Slide 61

Slide 61 text

1. NATIVE WEB APPS

Slide 62

Slide 62 text

2. SERVER-SIDE WEB APPS

Slide 63

Slide 63 text

THEY ARE FUNDAMENTALLY DIFFERENT

Slide 64

Slide 64 text

AND THAT’S O.K.

Slide 65

Slide 65 text

ANYTHING WE CAN BUILD WITH WEB TECH I THINK WE SHOULD

Slide 66

Slide 66 text

EVEN IF WE CAN’T SUPPORT OLDER BROWSERS

Slide 67

Slide 67 text

THE WEB IS INFINITELY MORE OPEN THAN NATIVE PLATFORMS

Slide 68

Slide 68 text

USER EXPECTATIONS HAVE EVOLVED

Slide 69

Slide 69 text

THE WEB IS DOING PRETTY WELL ON DESKTOPS

Slide 70

Slide 70 text

THE WEB IS LOSING ON MOBILE

Slide 71

Slide 71 text

THE WEB IS LOSING ON EXPERIENCE

Slide 72

Slide 72 text

WE OFTEN PREFER NATIVE APPS TO THE WEB

Slide 73

Slide 73 text

QUALITY AND POLISH OF USER EXPERIENCE IS OFTEN MUCH BETTER

Slide 74

Slide 74 text

LET’S FIX THIS!

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

SAYING THERE’S A DISTINCTION MAKES SOME PEOPLE MAD

Slide 77

Slide 77 text

"Everything should be an enhancement!"

Slide 78

Slide 78 text

WE’RE ON THE SAME TEAM!

Slide 79

Slide 79 text

WE WANT THE OPEN WEB TO WIN!

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

SHOULD WE NOT HAVE BUILT IT?

Slide 82

Slide 82 text

WHERE’S THE DOWNSIDE?

Slide 83

Slide 83 text

LET’S LOOK A BIT CLOSER AT TWITTER

Slide 84

Slide 84 text

WHAT IS TWITTER?

Slide 85

Slide 85 text

IS IT A WEB APP?

Slide 86

Slide 86 text

NO.

Slide 87

Slide 87 text

IT’S A SERVICE

Slide 88

Slide 88 text

APP != SERVICE

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

I DIDN’T REALLY CARE HOW THEY BUILT THEIR WEBAPP

Slide 91

Slide 91 text

BECAUSE I DIDN’T USE IT ANYWAY!

Slide 92

Slide 92 text

I WAS USING AN iOS APP!

Slide 93

Slide 93 text

THEIR WEB APP HAD ALREADY FAILED ME!

Slide 94

Slide 94 text

LET’S THINK ABOUT THIS

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

JUST LET ME READ IT!

Slide 97

Slide 97 text

plain text I DON’T MIND IF IT’S

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

THIS IS THE PROBLEM THEY FIXED WITH NEW NEW TWITTER

Slide 100

Slide 100 text

BUT…

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

FAILING TO RECOGNIZE DISTINCTION MAKES US FLOUNDER

Slide 103

Slide 103 text

A SERVICE CAN PROVIDE BOTH!

Slide 104

Slide 104 text

TWITTER.COM & TWEETDECK.COM

Slide 105

Slide 105 text

THERE’S STILL SOME GAPS BETWEEN WEB AND NATIVE

Slide 106

Slide 106 text

REAL OFFLINE SUPPORT

Slide 107

Slide 107 text

PLATFORMS THAT TREAT NATIVE WEB APPS AS FIRST CLASS CITIZENS

Slide 108

Slide 108 text

THOSE THINGS ARE CHANGING

Slide 109

Slide 109 text

1. SERVICE WORKER

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

THIS IS HUGE!

Slide 112

Slide 112 text

2. INSTALLABLE WEB APPS

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

1. SIGNAL INTENT 2.UNINSTALL 3.DEEPER DEVICE APIS

Slide 115

Slide 115 text

"What about performance?"

Slide 116

Slide 116 text

WHITE PAGE OF DEATH

Slide 117

Slide 117 text

TIME TO FIRST PAINT

Slide 118

Slide 118 text

A PRIMED CACHE LARGELY INVALIDATES THIS ARGUMENT

Slide 119

Slide 119 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 120

Slide 120 text

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

Slide 121

Slide 121 text

PRE-FETCH APP ON PUBLIC PAGES OR LOGIN PAGE

Slide 122

Slide 122 text

NATIVE WEB APPS CAN STILL HAVE SMALL JS PAYLOADS!

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

SMALLER THAN JQUERY 2.0

Slide 125

Slide 125 text

THE OTHER ASPECT OF PERFORMANCE…

Slide 126

Slide 126 text

ONCE LOADED, PERFORMANCE IS WAY BETTER!

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

JUST A CLIENTSIDE APP WITH AN OPTIMIZED INITIAL RENDER

Slide 130

Slide 130 text

GOING FULL-ISOMORPHIC RENDERING, WITH USER DATA AND ALL…

Slide 131

Slide 131 text

OFTEN REQUIRES DRAMATICALLY MORE COMPLEX CODE

Slide 132

Slide 132 text

THERE ARE SOME CASES WHERE IT MAKES SENSE

Slide 133

Slide 133 text

WITH STATE OF TOOLING TODAY OFTEN NOT WORTH THE COMPLEXITY

Slide 134

Slide 134 text

HOWEVER…

Slide 135

Slide 135 text

DOESN’T HAVE TO BE ALL OR NOTHING

Slide 136

Slide 136 text

WE CAN PRE-RENDER EVERYTHING THAT’S NOT USER-SPECIFIC DATA

Slide 137

Slide 137 text

WE CAN DO THIS AS A FULLY STATIC SITE

Slide 138

Slide 138 text

site.com/pic.png -> pic.png site.com -> index.html site.com/page -> page.html site.com/asdf -> 404.html or 200.html Route: Asset:

Slide 139

Slide 139 text

WOAH!

Slide 140

Slide 140 text

APPS USUALLY HAVE: 1. public/marketing pages 2. all the stuff behind the login

Slide 141

Slide 141 text

WRITE "PUBLIC" PAGES AND APP LAYOUT HTML AS ISOMORPHIC COMPONENTS

Slide 142

Slide 142 text

PRE-RENDER THEM TO STATIC PAGES AT BUILD TIME!

Slide 143

Slide 143 text

SLIP IN THE BUILT JS BEFORE:

Slide 144

Slide 144 text

index.html: public home page 200.html: application layout

Slide 145

Slide 145 text

COULD POTENTIALLY EVEN DO THIS FOR DYNAMIC/PUBLIC DATA

Slide 146

Slide 146 text

THINK ABOUT WHAT WE GET

Slide 147

Slide 147 text

pixels on the screen immediately

Slide 148

Slide 148 text

TOTALLY CRAWLABLE (SEO)

Slide 149

Slide 149 text

JS TAKES OVER ROUTING WHEN LOADED

Slide 150

Slide 150 text

DEPLOYMENT AND OPS BECOME AS SIMPLE AS FTP

Slide 151

Slide 151 text

WRITE 1 VERSION OF YOUR APP GET 90% OF BENEFIT FROM ISOMORPHIC RENDERING

Slide 152

Slide 152 text

USERS WILL END UP WITH A PRIMED CACHE JUST BY VISITING YOUR MARKETING PAGES

Slide 153

Slide 153 text

READY FOR: PHONEGAP/CORDOVA DESKTOP APP

Slide 154

Slide 154 text

NOW WE HAVE AN APP WITH A SINGULAR CONCERN: PRESENTATION

Slide 155

Slide 155 text

I’VE STARTING BUILDING ALL MY APPS AS STATIC NATIVE WEB APPS

Slide 156

Slide 156 text

TOTALLY <3 IT!

Slide 157

Slide 157 text

FOR SO LONG THE TREND HAS BEEN TOWARD COMPLEXITY

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

WHAT’S THE NEXT STEP IN THE EVOLUTION OF THE "WEB APP"?

Slide 160

Slide 160 text

GOING BACK TO SIMPLE

Slide 161

Slide 161 text

GOING BACK TO THE STATIC WEB

Slide 162

Slide 162 text

STATIC NATIVE WEB APPS

Slide 163

Slide 163 text

Slide 164

Slide 164 text

surge.sh hood.ie firebase.com auth0.com divshot.com

Slide 165

Slide 165 text

SIMPLE OPEN SOURCE EXAMPLE: HubTags.com

Slide 166

Slide 166 text

•React •Ampersand.js •Webpack (hjs-webpack) •GitHub API •Surge.sh

Slide 167

Slide 167 text

andyet.com

Slide 168

Slide 168 text

HOW CAN WE BE SURE WE’RE BUILDING WITH THE RIGHT TOOLS?!

Slide 169

Slide 169 text

WE CAN’T!

Slide 170

Slide 170 text

WHAT DO WE KNOW?

Slide 171

Slide 171 text

THINGS WILL CHANGE

Slide 172

Slide 172 text

BUILD MODULAR SYSTEMS THAT STRIVE TO BE AS SIMPLE AS THEY CAN BE

Slide 173

Slide 173 text

OFFLOADING PRESENTATION STATIC NATIVE WEB APPS

Slide 174

Slide 174 text

BUILDING MICROSERVICES TO ENABLE THAT TYPE OF APP

Slide 175

Slide 175 text

OPTIMIZE FOR CHANGE. IT IS THE ONLY CONSTANT.

Slide 176

Slide 176 text

LET’S KEEP PUSHING FOR SIMPLICITY

Slide 177

Slide 177 text

LET’S BUILD FOR THE FUTURE OF THE WEB, NOT ITS PAST

Slide 178

Slide 178 text

THANKS! @HenrikJoreteg, andyet.com