Upload
peter-lehto
View
349
Download
1
Embed Size (px)
Citation preview
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
Session’s content
Session’s content
• The roots, where are we coming from?
Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
Session’s content
• The roots, where are we coming from?
• What constitutes a Web Component?
• Progressive Web Apps (PWA), Vaadin, Future?
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.
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.
Vaadin Framework
Vaadin Framework
.1 .2 3 4 5 6 7
Vaadin Framework
.1 .2 3 4 5 6 720
0120
0220
0220
0720
0720
0920
13
> var foo = [0];> foo == !foo;
> var foo = [0];> foo == !foo;> true
> [] + [];
> var foo = [0];> foo == !foo;> true
> [] + [];>
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> NaN == NaN;
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> NaN == NaN;> false
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> NaN == NaN;> false
> typeof NaN;
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> NaN == NaN;> false
> typeof NaN;> number
> var foo = [0];> foo == !foo;> true
> [] + [];>
> [] + {};> [object Object]
> {} + [];> 0
> {} + {};> NaN
> NaN == NaN;> false
> typeof NaN;> number
> var foo = [0];> foo == !foo;> true
A History of Stability
OVER 15+ YEARS OFSHIELDING YOU FROMCONSTANT CHANGE
< Millstone 3.0 (2002)
IT Mill Toolkit 5 (2009)
Vaadin 7.6.0 (2016) >
Vaadin Framework
.1 .2 3 4 5 6 720
0120
0220
0220
0720
0720
0920
13
Vaadin Framework
.1 .2 3 4 5 6 7 820
0120
0220
0220
0720
0720
0920
1320
17
Framework
8Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Framework
8Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Vaadin Framework
.1 .2 3 4 5 6 7 820
0120
0220
0220
0520
0720
0920
1320
17
GWTAJAXHTML
Backend
Server
UI Backend
Server
Browser
UI Backend
Server
Widgets Components
Them
e
Browser
UI Backend
Server
Widgets Components
Them
e
Browser
UI Backend
Server
Widgets Components
Shared StateRPC
GWT
Java -> JavaScript - Optimizing compiler
GWT
Browser specific compilation - No browser differences
GWT
Pure Java - Web apps without JavaScript
GWT
JSInterop - JavaScript interoperability
GWT
Vaadin Framework
.1 .2 3 4 5 6 7 820
0120
0220
0220
0520
0720
0920
1320
17
Web ComponentsGWTAJAXHTML
Framework
8Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Framework
8Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Vaadin Framework
.1 .2 3 4 5 6 7 8
Web ComponentsGWTAJAXHTML
Vaadin Framework
.1 .2 3 4 5 6 7 8
Vaadin Core Elements
Web ComponentsGWTAJAXHTML
Vaadin Core Elements
Vaadin Framework
4 5 6 7 8
Vaadin Core Elements
Vaadin Framework
4 5 6 7 8
2
“9”
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.
Web Components? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Web Components? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Web Components? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Web Components? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Templates
<template id=“my-template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="/img/logo.svg"> </div> </template>
Custom Elements
<my-new-element></my-new-element>
S H A D O W D O M
HTML Imports
<link rel="import" href="my-el.html">
• Encapsulation
• Reusability
Benefits of using Web Components
Web Components in Practice 1/2
• A new TAG for your browser ‘<my-ui-component>’
• Based on standard specifications (no frameworks!)
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
Polyfills? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Polyfills? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Polyfills? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
Polyfills? Vaadin Elements• Web Components
A new, major standard to create components for the Web “Custom tags for HTML”
• Vaadin ElementsHigh-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
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.
B U I L D I N G A P W A
Reliable
User experiences need to be...
Reliability means never showing the offline dinosaur
Reliable Fast
User experiences need to be...
of users abandon sites that take longer than 3 seconds to load53%
Reliable Fast Engaging
User experiences need to be...
Immersive Notifications
Engaging
Home Screen
Full screen, theming,
orientation, etc.
Immersive Notifications
Engaging
Home Screen
Full screen, theming,
orientation, etc.
Immersive Notifications
Engaging
Auto-adding to Home Screen
Home Screen
Full screen, theming,
orientation, etc.
Push notifications
Immersive Notifications
Engaging
Auto-adding to Home Screen
Home Screen
`
Web Push Notifications
D E M O
Lessons learned
Lessons learned
• TODO: Remember to add items before the talk…
@peter_lehto
T H A N K Y O U !