Keynote from the View Source conference in Berlin, Sep 14th 2016.

1. The Future of the Web
@robertnyman

2. Willkommen nach
Deutschland

3. I'm from Sweden
Credit: https://www.flickr.com/photos/stephenbove/184201987

4. I'm from Sweden
Credit: https://www.pinterest.com/pin/313352086545358825/

5. Web life
Web developer since
1999
Mozilla community
from 2009
Mozilla employee
2011-2014

10. The web as of today

11. Web declared dead in 2010

12. Web declared dead in 2010

13. Web very much alive in 2016!

14. Nov 2015, 800 Million users

15. May 2016, 1 Billion users

16. The web is dead?

17. Apps
Credit: http://imgs.xkcd.com/comics/app.png

18. Apps

19. Web is all browsers

20. The web & Chrome

21. Web as of today => Progressive Web Apps

22. Instant Loading
Service Workers
Both for offline and poor
network situations

23. Add to Home Screen
Shortcut on Homescreen
Install banners

24. Push Notifications
Re-engagement
Relevant, timely, and contextual
notifications

25. Fast
Smooth animations, scrolling
and navigation

26. Secure
HTTPS

27. Secure

28. Responsive
Adapting content to any screen size

29. Service workers allow
for offline caching
and instant loading.
Smooth animations,
scrolling and
navigations keep the
experience silky
smooth.
Push notifications
and add to
homescreen help
users re-engage.
HTTPS secures the
connection between you
and your users.
Reliable Fast Engaging Secure
Progressive Web Apps, today

30. We've come a long way

31. The web is almighty powerful

32. It's just the beginning
What we do now is the beginning
What's needed to play
Table stakes

33. What about the future?
Credit: https://www.flickr.com/photos/mssarakelly/9422242223

35. Things we'll talk about today
Knowing who the user is
Credentials Management
Paying for things on the web
Connecting with hardware
Physical Web
WebVR

36. Knowing who the user is
Credit: https://commons.wikimedia.org/wiki/File:Steal_password.jpg

37. Title Text
Password
Forgot password?
Login
LOGIN
Don’t have an account? Sign up!
Did I use that?
$%&§”%$?!
Hm?
Most likely!
Yes, but which one?Email address

38. It's hard to type on a mobile device

39. Most popular password in 2015
123456

40. 2nd most popular password in 2015
password

41. Smart Lock for passwords

42. sign-ins assisted per month
8 billion

43. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text">
<input name="phone" type="text">
<input name="email" type="text">
<input name="password" type="password">
<input type="submit" value="Sign Up!">
</form>
Friendly name?
Identifier?
Idunno?

44. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text" autocomplete="name">
<input name="phone" type="text" autocomplete="home tel">
<input name="email" type="text" autocomplete="username">
<input name="password" type="password">
<input type="submit" value="Sign Up!">
</form>
Aha!

45. Sign In Form
<form id="login" action="login.php" method="post">
<input name="username" type="text" autocomplete="username">
<input name="password" type="password" autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>

46. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text" autocomplete="name">
<input name="phone" type="text" autocomplete="home tel">
<input name="email" type="text" autocomplete="username">
<input name="password" type="password" autocomplete="new-password">
<input type="submit" value="Sign Up!">
</form>

47. password

48. auto-generated password
7nUvA8jyowEk44

49. the Credentials Management API
Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg

50. Automatic Sign-in

51. navigator.credentials.get({
"password": true, "unmediated":
true
}).then(c => {
if (!c) return;
// Hooray, we have a credential!
signInToYourApplication(c);
});

52. Automatic Sign-in
Chrome will offer automatic sign-in if and only if:
✓Automatic sign-in is enabled
✓Only one credential is saved for the site

53. Automatic Sign-in
✓navigator.credentials is
restricted to secure contexts
✓Passwords are not directly
exposed to JavaScript
✓fetch() will only submit
credentials to same-site endpoint

54. function signInToYourApplication(c) {
fetch("/signin", {
"method": "POST", "credentials": c
}).then(r => {
if (r.status == 200)
renderSignedInExperience(r);
else
renderUsefulErrorMessage();
});
}

55. One-tap Sign-in

56. navigator.credentials.get({
"password": true
}).then(c => {
if (!c) return;
// Hooray, we have a credential!
signInToYourApplication(c);
});

57. Storing credentials

58. var f =
document.querySelector("#form");
var c = new PasswordCredential(f);
navigator.credentials.store(c)
.then(_ => {
// ...
});

59. Federated log-ins

60. var c = new FederatedCredential({
"id": "username",
"provider": "https://
accounts.google.com"
});
navigator.credentials.store(c)
.then(_ => {
// ...
});

61. navigator.credentials
.requireUserMediation()
.then(_ => {
// Sign the user
out.
});
Logging out

63. Paying for things on the web
Credit: http://www.publicdomainpictures.net/view-image.php?image=149197

64. 66%
of purchases on
mobile are on web

67. 66%Fewer conversions on
mobile websites vs. desktop

68. Have you ever
abandoned a purchase
because of the
checkout form?

69. Manual Tedious Slow N-taps
Checkout forms today

70. Autofill
Fill web forms
with a single click

71. Card and address
saved to Chrome
Automatic form
detection
95% ACCURACY
Form filled
automatically
How Autofill works
XYZ

72. 25 Increase in conversion
rate from Autofill
%

73. Manual Tedious Slow N-taps
Checkout with Autofill
Automatic Simple

74. Imagine a world
without forms...

75. PaymentRequest
A W3C API to eliminate
checkout forms for users and
standardize payment
collection for sites

76. Designing PaymentRequest at W3C
Cross-browser

77. Designing PaymentRequest at W3C
Cross-browser Open ecosystemCross-platform

78. N-tapsSlowManual Tedious
Checkout with PaymentRequest
Automatic Simple Fast 1-tap

79. new PaymentRequest(
[“visa“, “mastercard“, “amex“, “discover“], {
items: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" }, // $55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" }, // $5.00
},
{
id: "total", label: "Total excluding shipping",
amount: { currencyCode: "USD", value: "60.00" }, // $60.00
}
]
},
{
requestShipping: true
}
).show().then(response => { /* process payment */ }).catch(error => { /* handle */ });

80. new PaymentRequest(
[“visa“, “mastercard“, “amex“, “discover“], {
items: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" }, // $55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" }, // $5.00
},
{
id: "total", label: "Total excluding shipping",
amount: { currencyCode: "USD", value: "60.00" }, // $60.00
}
]
},
{
requestShipping: true
}
).show().then(response => { /* process payment */ }).catch(error => { /* handle */ });

83. var request = new PaymentRequest(
[“visa”, ..., “https://android.com/pay”], // add Android Pay as supported
{
items: [...]
},
{
requestShipping: true
},
{
// add Android Pay application specific parameters
"https://android.com/pay": {
"gateway": "stripe",
"stripe:publishableKey": "put_your_stripe_publishable_key_here",
"stripe:version": "2015-10-16 (latest)"
}
}
);

84. PaymentRequest with
Autofill cards in
Chrome Dev Android
PaymentRequest
available in Chrome
Beta on mobile;
Android Pay
Support for all
platforms & 3rd party
payment apps
May 2016 Aug 2016 Early 2017
When can I use PaymentRequest?

86. Connecting with hardware
Credit: Kenneth Rohde Christiansen

88. The evolution of transfer rates
Wi-Fi (Mbps)
802.11: 2
802.11b: 11
802.11g: 54
802.11n: 135
Ethernet (Mbps)
802.3i: 10
802.3u: 100
802.3ab: 1000
802.3an: 10000
Bluetooth (Mbps)
1.1: 1
2.0: 3
3.0: 54
4.0: 0.3

93. Demo time!
https://webbluetoothcg.github.io/demos/playbulb-candle/

94. Basic BLE terms to know...
“Central” device (my phone)
“Peripheral” device (candle)
GATT (Generic ATTribute profile)

95. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log(device.name);
...
})
.catch(error => { console.log(error); });

96. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => { ... })
.catch(error => { console.log(error); });

97. var options = { filters: [{ services: [’battery_service'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(’battery_service’))
.then(service => service.getCharacteristic(’battery_level’))
.then(characteristic => characteristic.readValue())
.then(value => {
console.log(’Battery percentage is ’ + value.getUint8(0));
})
.catch(error => { console.log(error); });

98. var options = { filters: [{ services: [CANDLE_SERVICE_UUID] }],
optionalServices: ['battery_service'] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(CANDLE_SERVICE_UUID))
.then(service => service.getCharacteristic(CANDLE_COLOR_UUID))
.then(characteristic => {
let data = [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00];
return characteristic.writeValue(new Uint8Array(data));
})
.catch(error => { console.log(error); });

99. Android Developer Options

100. var options = { filters: [{ services: [CANDLE_SERVICE_UUID] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(CANDLE_SERVICE_UUID))
.then(service =>
service.getCharacteristic(CANDLE_BLOW_NOTIFICATIONS_UUID))
.then(characteristic => {
characteristic.addEventListener(’characteristicvaluechanged’, blow);
return characteristic.startNotifications(); })
.catch(error => { console.log(error); });
function blow(event) { console.log(event.target.value); }

101. WebNFC

102. navigator.nfc.watch((message) => {
for (let record of message.data) {
let article =/[aeio]/.test(record.data.title) ? "an" : "a";
console.log(
`$(record.data.name) is $(article) $(record.data.title)`
);
}
}, { url: document.baseURI, recordType: "json" });

103. Danish hero Kenneth Christiansen - @kennethrohde

104. Generic Sensors

105. let sensor = new DirectTirePressureSensor({ position: "rear", side: "left" });
sensor.onchange = event => console.log(event.reading.pressure);

106. try { // No need to feature detect thanks to try..catch block.
let sensor = new GeolocationSensor({});
sensor.start();
sensor.onerror = error => gracefullyDegrade(error);
sensor.onchange = event => updatePosition(event.reading.coords);
} catch(error) {
gracefullyDegrade(error);
}

107. The Physical Web
http://www.physical-web.org
Credit: https://en.wikipedia.org/wiki/Spider_web

109. /* Awesomeness to come */
var referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) {
referringDevice.gatt.connect()
.then(server => { ... })
.catch(error => { console.log(error); });
}

111. Virtual Reality, WebVR

112. WebVR API 1.0 progress!
Landing in browsers:
Firefox Nightly 2 weeks ago
Chrome later this year
Edge has begun development

113. Daydream

114. Daydream

115. https://aframe.io/

116. VR View

117. Oculus CEO & co-founder

118. Tell us what you need
Report bug
https://crbug.com
Feature status
https://chromestatus.com
Slack
https://goo.gl/jCWx5m
Videos
https://www.youtube.com/user/
ChromeDevelopers
@ChromiumDev

119. Credit: https://github.com/alrra/browser-logos

120. Working together on making the web better Credit: https://twitter.com/simonnricketts/
status/699198327338987520

121. The Future of the Web

122. Robert Nyman
robertnyman.com
nyman@google.com
Google
@robertnyman