Vaadin DevDay 2017 - Web Components

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


• What constitutes a Web Component?

Session’s content



• Progressive Web Apps (PWA), Vaadin, Future?

Session’s content




• Using Web Components with Vaadin today.

Session’s content





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

> [] + [];


> [] + [];>


> [] + [];>

> [] + {};


> [] + [];>

> [] + {};> [object Object]


> [] + [];>


> {} + [];


> [] + [];>


> {} + [];> 0


> [] + [];>


> {} + [];> 0

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

> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN

> NaN == NaN;> false


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;> number


> [] + [];>


> {} + [];> 0

> {} + {};> NaN


> typeof NaN;> number


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





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





Web Components

.2

Framework





Web Components• Toolchain integration (Bower, npm)

• Integration with Vaadin Elements

.2

Vaadin Framework

.1 .2 3 4 5 6 7 8


Vaadin Framework

.1 .2 3 4 5 6 7 8

Vaadin Core Elements



Vaadin Framework

4 5 6 7 8


Vaadin Framework

4 5 6 7 8

2

“9”

Session’s content





Web Components? Vaadin Elements• Web Components








• HTML Templates





• HTML Templates• Custom Elements





• HTML Templates• Custom Elements• Shadow DOM





• 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








• Make standards work with today’s browsers






• Able to detect native support






• Able to detect native support

• Standards should out power polyfills in future

Session’s content





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


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

Reliable Fast Engaging


Immersive Notifications

Engaging

Home Screen

Full screen, theming,

orientation, etc.


Engaging

Home Screen


orientation, etc.


Engaging

Auto-adding to Home Screen

Home Screen


orientation, etc.

Push 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 !