The document discusses Vaadin, a technology that empowers developers to build web apps for business purposes. Vaadin prioritizes developer productivity by simplifying the developer experience and saving developers' time so they can focus on building great user interfaces. The founder and CEO hopes that users are as excited about living and breathing the Vaadin brand, which aims to fight for simplicity for both users and developers.

1. 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
@peter_lehto
W E B C O M P O N E N T S

2. Session’s content

3. Session’s content
• The roots, where are we coming from?

4. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?

5. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?

6. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?
• Using Web Components with Vaadin today.

7. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?
• Using Web Components with Vaadin today.

8. Vaadin Framework

9. Vaadin Framework
.1 .2 3 4 5 6 7

10. Vaadin Framework
.1 .2 3 4 5 6 7
2001
2002
2002
2007
2007
2009
2013

12. > var foo = [0];
> foo == !foo;

13. > var foo = [0];
> foo == !foo;
> true

14. > [] + [];
> var foo = [0];
> foo == !foo;
> true

15. > [] + [];
>
> var foo = [0];
> foo == !foo;
> true

16. > [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true

17. > [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true

18. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true

19. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true

20. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true

21. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true

22. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true

23. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true

24. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true

25. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true

26. > [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true

28. A History of Stability
OVER 15+ YEARS OF
SHIELDING YOU FROM
CONSTANT CHANGE
< Millstone 3.0 (2002)
IT Mill Toolkit 5 (2009)
Vaadin 7.6.0 (2016) >

29. Vaadin Framework
.1 .2 3 4 5 6 7
2001
2002
2002
2007
2007
2009
2013

30. Vaadin Framework
.1 .2 3 4 5 6 7 8
2001
2002
2002
2007
2007
2009
2013
2017

31. Framework
8
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
Recent Changes

32. Framework
8
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
Recent Changes
• Java 8
• New data binding
• Focus on new browsers
• HTML imports (Web components)
• Improved performance

33. Vaadin Framework
.1 .2 3 4 5 6 7 8
2001
2002
2002
2005
2007
2009
2013
2017
GWTAJAXHTML

34. Backend
Server

35. UI Backend
Server

36. Browser
UI Backend
Server
Widgets Components

37. Theme
Browser
UI Backend
Server
Widgets Components

38. Theme
Browser
UI Backend
Server
Widgets Components
Shared State
RPC

39. GWT

40. Java -> JavaScript
- Optimizing compiler
GWT

41. Browser specific
compilation
- No browser differences
GWT

42. Pure Java
- Web apps without JavaScript
GWT

43. JSInterop
- JavaScript interoperability
GWT

45. Vaadin Framework
.1 .2 3 4 5 6 7 8
2001
2002
2002
2005
2007
2009
2013
2017
Web ComponentsGWTAJAXHTML

46. Framework
8
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
Web Components
.2

47. Framework
8
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
Web Components
• Toolchain integration (Bower, npm)
• Integration with Vaadin Elements
.2

48. Vaadin Framework
.1 .2 3 4 5 6 7 8
Web ComponentsGWTAJAXHTML

49. Vaadin Framework
.1 .2 3 4 5 6 7 8
Vaadin Core Elements
Web ComponentsGWTAJAXHTML

50. Vaadin Core Elements
Vaadin Framework
4 5 6 7 8

51. Vaadin Core Elements
Vaadin Framework
4 5 6 7 8
2
“9”

52. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?
• Using Web Components with Vaadin today.

53. Web Components?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework

54. Web Components?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• HTML Templates

55. Web Components?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• HTML Templates
• Custom Elements

56. Web Components?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• HTML Templates
• Custom Elements
• Shadow DOM

57. Web Components?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• HTML Templates
• Custom Elements
• Shadow DOM
• HTML Imports

58. Templates
<template id=“my-template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="/img/logo.svg">
</div>
</template>

59. Custom Elements
<my-new-element></my-new-element>

60. S H A D O W D O M

62. HTML Imports
<link rel="import" href="my-el.html">

63. • Encapsulation
• Reusability
Benefits of using Web Components

64. Web Components in
Practice 1/2
• A new TAG for your browser ‘<my-
ui-component>’
• Based on standard specifications
(no frameworks!)

65. Web Components in
Practice 2/2
Advantages:
1. Goodbye to browser plugins (WC + HTML5)
2. Isolated from other elements in DOM
3. Easy to share (bower)
4. Easy to integrate

68. Polyfills?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework

69. Polyfills?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• Make standards work with
today’s browsers

70. Polyfills?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• Make standards work with
today’s browsers
• Able to detect native
support

71. Polyfills?
Vaadin Elements
• Web Components
A new, major standard to create
components for the Web
“Custom tags for HTML”
• Vaadin Elements
High-quality UI components for users
of client-side frameworks such as
Angular, ionic …
• A new generation of UI components
to be used also with future versions
of the Vaadin server-side framework
• Make standards work with
today’s browsers
• Able to detect native
support
• Standards should out
power polyfills in future

72. Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?
• Using Web Components with Vaadin today.

73. B U I L D I N G A P W A

74. Reliable
User experiences need to be...

75. Reliability means never showing
the offline dinosaur

76. Reliable Fast
User experiences need to be...

77. of users abandon sites that take
longer than 3 seconds to load53%

78. Reliable Fast Engaging
User experiences need to be...

79. Immersive Notifications
Engaging
Home Screen

80. Full screen,
theming,
orientation, etc.
Immersive Notifications
Engaging
Home Screen

81. Full screen,
theming,
orientation, etc.
Immersive Notifications
Engaging
Auto-adding to
Home Screen
Home Screen

82. Full screen,
theming,
orientation, etc.
Push
notifications
Immersive Notifications
Engaging
Auto-adding to
Home Screen
Home Screen

83. `
Web Push
Notifications

93. D E M O

94. Lessons learned

95. Lessons learned
• TODO: Remember to add items before the talk…

96. @peter_lehto
T H A N K Y O U !