web.next render - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

web.next Bruce Lawson, Opera Software

Slide 3

Slide 3 text

My pledge to the Web ▪ Never gonna give you up ▪ Never gonna let you down ▪ Never gonna run around and desert you ▪ Never gonna make you cry ▪ Never gonna say goodbye ▪ Never gonna tell a lie and hurt you

Slide 4

Slide 4 text

Make the web better for… Consumers Business owners The next 4 billion 4bn Developers

Slide 5

Slide 5 text

THE CUSTOMER IS ALWAYS RIGHT

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2009 HTML [is] in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight. “ - Ian Hickson, editor HTML, Living Standard

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

There’s an app API for that ▪ ▪ ▪ Geolocation ▪ Audio API ▪ WebRTC

Slide 13

Slide 13 text

It’s an App World. The Web Just Lives in It Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web. “ - blog.flurry.com April, 2013

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

WHAT DO   CONSUMERS WANT?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

I wanna, I wanna, I wanna, I wanna, I wanna really really really wanna zigazig ha. “ I’ll tell you what I want

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

USER EXPERIENCE IS A FEATURE TOO!

Slide 27

Slide 27 text

THE CAPABILITIES OF THE WEB.   THE UX OF NATIVE.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Progressive Web Apps ▪ “install” to the home screen ▪ have their own icon (defined by the web developer) ▪ can launch full-screen, portrait or landscape ▪ but “live” on the Web

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Downloading a typical app with 20 MB APK can take more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network.    https://code.facebook.com/posts/1365439333482197/how-we- built-facebook-lite-for-every-android-phone-and-network

Slide 32

Slide 32 text

One last deciding factor in whether or not to adopt an app is whether or not the user is willing to give away their precious disk space to the app…  With space this limited, the user is comparing their personal photo collection with the adoption of a new app on their phone.  Mobile App Developers Are Suffering, Branch   https://blog.branch.io/mobile-app-developers-are-suffering

Slide 33

Slide 33 text

Africa: mobile phone use

Slide 34

Slide 34 text

Birdly we didn’t stand a chance as we were fighting with both our competitors and other apps for a few more MB of room inside people’s phones.  https://medium.com/inside-birdly/why-you-shouldn-t-bother- creating-a-mobile-app-328af62fe0e5#.ufoave1x4

Slide 35

Slide 35 text

Manifest file stores metadata for your web app: icons, description, colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.

Slide 36

Slide 36 text

all in the

Slide 37

Slide 37 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

STARTING A PWA

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "browser", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 57

Slide 57 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 58

Slide 58 text

{ "name": "Air Horner", "short_name": "Air Horner", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" }

Slide 59

Slide 59 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/

Slide 60

Slide 60 text

Simple way to keep track of launch trends { "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 61

Slide 61 text

Tools Manifest Generator http://brucelawson.github.io/manifest/   Manifest validator manifest-validator.appspot.com  List of PWAs https://pwa.rocks

Slide 62

Slide 62 text

Opera differences ▪ HTTP-hosted sites will only display with browser UI, regardless of what the manifest states  ▪ When the user follows a link that takes the user out of the domain of the installed app, a new tab is spawned, with browser chrome. ▪ Opera doesn’t (yet) support background_color; this will be added in a forthcoming release.

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Flipkart Lite ▪ 40% returning visitors week over week  ▪ +63% conversions from Home screen visits  ▪ 3x time spent on FlipKart Lite

Slide 65

Slide 65 text

Progressive Web Apps ▪ live on the server so no update distribution lag  ▪ require no app store or gatekeeper  ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones  ▪ searchable, indexable, linkable  ▪ can work offline

Slide 66

Slide 66 text

GOING OFFLINE

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Appcache http://www.lollercoasterlab.com/2011/05/foreveralonethispartyiscrp.html

Slide 69

Slide 69 text

The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess. “ SlapDache - Hixie

Slide 70

Slide 70 text

AppCache is declarative - you give the browser a manifest and magic happens. This has well documented limitations. “ What's wrong with AppCache? - Alex Russell (sinister mastermind at Google)

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Also with Service Worker ▪ Push Notifications  ▪ Background Sync

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Why is everything else around us developing so fast, but the web is so slow to adopt anything? “ Why are Standards slow? - Mark Roberts' email to WHATWG, 10 Oct 2013

Slide 79

Slide 79 text

Hixie’s reply: 1. Have someone design the feature. 2. Have someone write a specification for it. 3. Have some people write tests for it. 4. Have one browser implement it. 5. Have another browser implement it. 6. [etc] 7. Have people document it.

Slide 80

Slide 80 text

This is in contrast to "everything else", which just needs:  1. Someone to implement it. “ Compared with…

Slide 81

Slide 81 text

Extensible Web Manifesto Browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high- level APIs through JavaScript implementations of new features “

Slide 82

Slide 82 text

Fetch standard At a high level, fetching a resource is a fairly simple operation. A request goes in, a response comes out. The details of that operation are however quite involved and used to not be written down carefully and differ from one API to the next. “

Slide 83

Slide 83 text

The Fetch Standard provides a unified architecture for these features so they are all consistent when it comes to various aspects of fetching “ Explaining the platform

Slide 84

Slide 84 text

The Fetch Standard also defines the fetch() JavaScript API,which exposes most of the networking functionality at a fairly low level of abstraction. “ Fetch API - Fetch Living Standard

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Magic

Slide 87

Slide 87 text

The JavaScriptiﬁcation of the Web? “ We want web developers to write more declarative code, not less. This calls for eliminating the standards bottleneck to introducing new declarative forms, and giving library and framework authors the tools to create them. - extensiblewebmanifesto.org

Slide 88

Slide 88 text

Selectors API

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

CSS Magic ▪ Parsing when it drops unknown stuff ▪ specificity, inheritance, imports, @rules ▪ shorthands ▪ apply it live, as the page is still loading ▪ reapply any time the DOM changes

Slide 92

Slide 92 text

Parser API Existing preprocessors and polyfills aren’t fully capable, or fully compatible and they don’t agree on the output, and need to be updated.

Slide 93

Slide 93 text

Font Metrics API

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Custom Layout Custom layouts will allow us to register a custom display value and own layout computations making whole classes of new proposals possible to figure out in the community and without impossibly complex barriers. pantomime-horse: {display: --unicorn;}

Slide 98

Slide 98 text

Custom Paint allows you to have other things as a background apart from still images, without abusing the DOM or markup.

Slide 99

Slide 99 text

#myElement { --circle-color: red; background-image: paint(circle); } CSS

Slide 100

Slide 100 text

this.registerPaint({ name: 'circle', dependencies: ['--circle-color'], paintCallback: function(ctx, geom, properties) { } // Change the fill color. var color = properties['--circle-color']; ctx.fillStyle = color; …

Slide 101

Slide 101 text

Composited Scrolling • position-sticky, • image carousels, • custom scroll animations, • iphone-style contact lists, • physics-based animations. Scripted effects (driven by requestAnimationFrame, response to onscroll, etc) are flexible and powerful, but are subject to main thread jank.     they're the only way to create common effects such as

Slide 102

Slide 102 text

Composited Scrolling Introduce CompositorWorker whose global scope exposes requestAnimationFrame which runs at the rate of threaded scrolling and animation.     Allow DOM elements to be wrapped in a CompositorProxy which may be sent to a CompositorWorker and which exposes a limited set of accelerated properties and input events.

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

This extensibility and ability to adapt, refine and share sensible high-level features are the cornerstone on which we will allow the Web not just to generally improve, but to remain interesting and competitive for decades — and recapture some of the most important things that made it successful in the first place. “ Brian Kardell

Slide 105

Slide 105 text

Include developers In order for the open web to compete with its walled competitors, there must be a clear path for good ideas by web developers to become part of the infrastructure of the web. “ - extensiblewebmanifesto.org

Slide 106

Slide 106 text

responsiveimages.org @respimg

Slide 107

Slide 107 text

HTML5 video with MQs Notes on Adaptive Images (yet again!), Dec 2011

Slide 108

Slide 108 text

My strawman

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

the RICG’s main contribution to the web platform wasn’t picture, srcset, or sizes… To get them done we had to punch a hole through the thick technical, cultural, and institutional walls that separate the people who make browsers from the people who make websites. “ element - Mat Marquis (Wilto)

Slide 115

Slide 115 text

Join WICG

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

Slide 118

Slide 118 text

brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

Slide 119

Slide 119 text

Thanks • Me by HTML sign in Tokyo by Doug Schepers (@shepazu), used with permission • The Selecter: By Braunov - Own work, CC BY-SA 3.0,   https://commons.wikimedia.org/w/index.php?curid=3140115 • Stare photo Milner Moshe   https://commons.wikimedia.org/wiki/File:Sartre_1967_crop.jpg • Apps vs Web graphs by Flurry, used by permission • World Development Report 2016: Digital Dividends   http://www.worldbank.org/en/publication/wdr2016