These added capabilities will likely move many application developers to the web, creating a third vibrant app ecosystem. Having an open web app ecosystem will make apps more accessible to users in emerging markets and make it easier for new device manufacturers and operating systems to enter the market.

1. G O I N G W E B N AT I V E
T H E E X C I T I N G F U T U R E O F T H E W E B
@ M A R C U S H E L L B E R G
5
S T O R Y A N D P H I L O S O P H Y
Software is eating the world and what most of us see of it is the user interface. The user
interface has become the key component of how the users experience the business
behind it. Competition is lost or won due to user experience. Simplicity is king and the
users get frustrated by anything ugly, slow or not working on the device they happen to
use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight.
Together we want to build a user interface that puts a smile on the user’s face.
Vaadin is the technology that empowers developers to build the best web-apps for
business purposes. Our priority over everything else is developer productivity because
we believe that by simplifying the developer experience and saving the developer’s
time, they are best able to focus on building great user interfaces.
Our brand is what we want everyone to think about us. When everyone - both us and
the people around us - have a consistent understanding of what Vaadin is and what we
stand for, it enables that image to spread and amplify. This book defines what we want
that image to be. It defines what the Vaadin brand is.
I hope that You are as excited and proud of living and breathing the Vaadin brand as
I am. You are the one who is shaping what everyone thinks about Vaadin - using this
brand as a tool and a guideline every day.
Let’s fight for simplicity for both the users and the developers!
Joonas Lehtinen
Founder & CEO
Vaadin
I N T R O D U C T I O N

6. Source: comScore 2016 report
0
3
6
9
12
# Visitors (MM)
Native apps Mobile web
Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties

7. Source: comScore 2016 report
0
3
6
9
12
# Visitors (MM)
3x
Native apps Mobile web
Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties

8. Source: comScore 2016 report
0
3
6
9
12
# Visitors (MM)
0
50
100
150
200
Minutes
3x 20x
Native apps Mobile web
Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties

9. 🤔

10. EXPECTATION REALITY

13. A P P I N S TA L L S / M O N T H :

14. A P P I N S TA L L S / M O N T H :
0

15. While we haven’t yet reached ‘Peak App’ the market
is definitely tightening, and app publishers need to
rethink how to break through to the consumer’s
screen.
comScore 2016 US Mobile App report
comscore.com/Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile-App-Report

16. gartner.com/smarterwithgartner/gartner-predicts-2017-marketers-expect-the-unexpected
GARTNER: 20% WILL ABANDON THEIR
MOBILE APPS BY 2019

17. Despite significant investment and hopes for positive ROI,
mobile applications are not paying off for many
brands.
Compelling alternatives such as progressive web apps
mean the branded app economy is poised for change.
gartner.com/smarterwithgartner/gartner-predicts-2017-marketers-expect-the-unexpected
GARTNER: 20% WILL ABANDON THEIR
MOBILE APPS BY 2019

18. T H E P R O B L E M I S F R I C T I O N

19. T H E P R O B L E M I S F R I C T I O N
(Fs = μs + N)

20. xkcd.com/1367

26. MAIN ISSUES:
4No component model
No application model
Limited hardware access
Performance and reliability

33. class MyComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() { }
disconnectedCallback() { }
}
customElements.define('my-component', MyComponent);

34. class MyComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() { }
disconnectedCallback() { }
}
customElements.define('my-component', MyComponent);

35. class MyComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() { }
disconnectedCallback() { }
}
customElements.define('my-component', MyComponent);

36. class MyComponent extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = 'Hey there!';
}
connectedCallback() { }
disconnectedCallback() { }
}
customElements.define('my-component', MyComponent);

39. M I S S I N G : A P P L I C AT I O N M O D E L

41. Progressive Web Apps!
PROGRESSIVE WEB APPS!

42. Progressive Web Apps!
PROGRESSIVE WEB APPS!

46. {
"name": "Todo App",
"icons": [{
"src": "todo.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait"
}
https://developer.mozilla.org/en-US/docs/Web/Manifest
W E B A P P M A N I F E S T

47. <head>
...
<link rel="manifest" href="/manifest.json">
</head>

48. 
S E R V I C E W O R K E R

49. if ('serviceWorker' in navigator) {
}

50. if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}

51. self.addEventListener('fetch', event => {
});
/sw.js

52. self.addEventListener('fetch', event => {
event.respondWith(
);
});

53. self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
);
});

54. self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

55. self.addEventListener('push', event => {
});
/sw.js

56. self.addEventListener('push', event => {
const title = 'A thing happened!';
const options = {
body: 'Very exciting.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
});
/sw.js

57. self.addEventListener('push', event => {
const title = 'A thing happened!';
const options = {
body: 'Very exciting.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration
.showNotification(title, options));
});
/sw.js

59. Your t-shirt order has shipped. Track it here.
5
S T O R Y A N D P H I L O S O P H Y
Software is eating the world and what most of us see of it is the user interface. The user
interface has become the key component of how the users experience the business
behind it. Competition is lost or won due to user experience. Simplicity is king and the
users get frustrated by anything ugly, slow or not working on the device they happen to
use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight.
Together we want to build a user interface that puts a smile on the user’s face.
Vaadin is the technology that empowers developers to build the best web-apps for
business purposes. Our priority over everything else is developer productivity because
we believe that by simplifying the developer experience and saving the developer’s
time, they are best able to focus on building great user interfaces.
Our brand is what we want everyone to think about us. When everyone - both us and
the people around us - have a consistent understanding of what Vaadin is and what we
stand for, it enables that image to spread and amplify. This book defines what we want
that image to be. It defines what the Vaadin brand is.
I hope that You are as excited and proud of living and breathing the Vaadin brand as
I am. You are the one who is shaping what everyone thinks about Vaadin - using this
brand as a tool and a guideline every day.
Let’s fight for simplicity for both the users and the developers!
Joonas Lehtinen
Founder & CEO
Vaadin
I N T R O D U C T I O N
Vaadin Store

64. PERFORMANCE & HARDWARE

65. 20 00
50
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b

66. 20 00
50
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b
int factorial(int n) {
if (n == 0) {
return 1;
} else {
return n * factorial(n-1);
}
}

67. https://v8project.blogspot.com/2016/08/firing-up-ignition-interpreter.html

69. Payment Request
Credential Management
WebGL
WebVR
StorageQuota
Bluetooth
https://developer.mozilla.org/en-US/docs/WebAPI
Contacts API
Proximity
...

71. Web Components

72. Web Components
Progressive Web Apps

73. Web Components
Progressive Web Apps
Web Assembly

74. Web Components
Progressive Web Apps
Web Assembly+

75. Web Components
Progressive Web Apps
Web Assembly
WEB NATIVE APPS
+

76. 😅

77. I’ve found it’s been a better long-term
investment for me to learn the Web Platform
than any particular library, framework or tool
– Paul Lewis
”

78. TOOLS

79. Polymer

84. Ɂ ɂ ɚ Ƀ
WEB COMPONENTS
PROGRESSIVE WEB APPS
WEB ASSEMBLY

87. BROWSER OPERATING SYSTEM

91. FIGHT FOR SIMPLICITY

92. FIGHT FOR SIMPLICITY

94. vaadin.com/elements

95. 5
S T O R Y A N D P H I L O S O P H Y
Software is eating the world and what most of us see of it is the user interface. The user
interface has become the key component of how the users experience the business
behind it. Competition is lost or won due to user experience. Simplicity is king and the
users get frustrated by anything ugly, slow or not working on the device they happen to
use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight.
Together we want to build a user interface that puts a smile on the user’s face.
Vaadin is the technology that empowers developers to build the best web-apps for
business purposes. Our priority over everything else is developer productivity because
we believe that by simplifying the developer experience and saving the developer’s
time, they are best able to focus on building great user interfaces.
Our brand is what we want everyone to think about us. When everyone - both us and
the people around us - have a consistent understanding of what Vaadin is and what we
stand for, it enables that image to spread and amplify. This book defines what we want
that image to be. It defines what the Vaadin brand is.
I hope that You are as excited and proud of living and breathing the Vaadin brand as
I am. You are the one who is shaping what everyone thinks about Vaadin - using this
brand as a tool and a guideline every day.
Let’s fight for simplicity for both the users and the developers!
Joonas Lehtinen
Founder & CEO
Vaadin
I N T R O D U C T I O N

96. 5
S T O R Y A N D P H I L O S O P H Y
Software is eating the world and what most of us see of it is the user interface. The user
interface has become the key component of how the users experience the business
behind it. Competition is lost or won due to user experience. Simplicity is king and the
users get frustrated by anything ugly, slow or not working on the device they happen to
use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight.
Together we want to build a user interface that puts a smile on the user’s face.
Vaadin is the technology that empowers developers to build the best web-apps for
business purposes. Our priority over everything else is developer productivity because
we believe that by simplifying the developer experience and saving the developer’s
time, they are best able to focus on building great user interfaces.
Our brand is what we want everyone to think about us. When everyone - both us and
the people around us - have a consistent understanding of what Vaadin is and what we
stand for, it enables that image to spread and amplify. This book defines what we want
that image to be. It defines what the Vaadin brand is.
I hope that You are as excited and proud of living and breathing the Vaadin brand as
I am. You are the one who is shaping what everyone thinks about Vaadin - using this
brand as a tool and a guideline every day.
Let’s fight for simplicity for both the users and the developers!
Joonas Lehtinen
Founder & CEO
Vaadin
I N T R O D U C T I O N
T H A N K Y O U
@ M A R C U S H E L L B E R G
# U S E T H E P L AT F O R M