web.next render

web.next Bruce Lawson, Opera Software

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

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

THE CUSTOMER IS ALWAYS RIGHT

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

There’s an app API for that ▪ <canvas> ▪ <video>
▪ Geolocation ▪ Audio API ▪ WebRTC

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

WHAT DO   CONSUMERS WANT?

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

USER EXPERIENCE IS A FEATURE TOO!

THE CAPABILITIES OF THE WEB.   THE UX OF NATIVE.

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

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

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

Africa: mobile phone use

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

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.

{ "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" }

{ "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" }

STARTING A PWA

{ "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" } CSS @media (display-mode: standalone) { h3:after {content: " in standalone mode!"} }

{ "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" }

{ "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" }

{ "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" }

{ "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/

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" }

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

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.

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

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

GOING OFFLINE

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

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

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)

Also with Service Worker ▪ Push Notifications  ▪ Background Sync

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

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.

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

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 “

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. “

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

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

<input> <video controls> <img> Magic

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

Selectors API

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

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.

Font Metrics API

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;}

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

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

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

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

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.

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

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

responsiveimages.org @respimg

<video> <source src=foo-lowres.webm media="max-width:480px"> <source src=foo-hires.webm> 
</video> HTML5 video with MQs Notes on Adaptive Images (yet again!), Dec 2011

<picture> <source src=foo-lores.jpg media="max-width:480px"> <source src=foo-full.jpg> 
<img src="foo-lores.jpg" alt="…"> </picture> My <picture> strawman

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. “ <picture> element - Mat Marquis (Wilto)

Join WICG

[email protected] opera.com/developer brucelawson.co.uk @brucel

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

web.next render

web.next render

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript