IoT with Vaadin Elements

Vaadin ElementsIoT with

Jürgen Treml, Key Account Manager [email protected], @juergentreml

mailto:[email protected]?subject=

https://twitter.com/juergentreml

Server-side

Java

Rich Set of

UI Components

Server-side

Java

Rich Set of

UI Components

IDE Support

Mature language

Extensive tooling

Third-party libraries

Server-side

Java

Rich Set of

UI Components

IDE Support

Mature language

Extensive tooling


Component based UI

Enterprise-grade

quality & performance

Rich selection

All problems solved for Java developers!

Client-side only?

Client-side only?

High-latency network

Offline capability

Millions of concurrent users

Team knowledge

Not long ago:

You’re screwed

Not long ago:

You’re screwed

Conflicting selectors

Lack of tooling

Language features

Not long ago:

You’re screwed

div > div > div


Lack of tooling

Language features

Not long ago:

You’re screwed

div > div > div


Lack of tooling

Language features

Libraries to the rescue?

SelectorsTemplates

Language features

Importing & Loading

Style Extensions

Things have changed:

You’ll be just fine

Lack of tooling

Language features

Selector conflicts

Lack of semantics



Lack of tooling

Language features

Selector conflicts

Lack of semantics

:-):-)

:-):-)





Gulp, Bower, IDE Support

ECMAScript 6



Gulp, Bower, IDE Support

ECMAScript 6

Web Components

Web Components Component-oriented UI for the Web

BenefitsComposition

Separation

Reusability

How?

Custom Elements

Shadow DOM

Templates

HTML Imports

How?

Custom Elements

<my-component> </my-component>

How?

Shadow DOM

<audio></audio>

How?

Templates

<template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>

How?

Templates

var tmp = document.querySelector(‘#tmp');

var clone = document.importNode(tmp.content, true);

var host = document.querySelector(‘#host');

host.appendChild(clone);

How?

Imports

my-component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js">

How?

Imports

index.html<link rel="import" href="my-component.html">

my-component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js">

Browser Support

When?

“Things have changed”

“Things have changed”are changing

Custom Element

HTML Template

Shadow DOM

HTML Import

CHROME OPERA FIREFOX SAFARI IE

Native Browser Support

Browser Support with Polyfills

Polyfill

Framework

Set of ComponentsPolymer

<dom-module id="my-counter">

<template> <style> /*...*/ </style> <div id="label"><content></content></div> Value: <span id="counterVal">{{counter}}</span><br> <button on-tap="{{increment}}">Increment</button> </template>

<script> … </script>

</dom-module>

Polymer({ is: 'my-counter',

properties: { counter: { type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });

What does Vaadin have to do with Web Components?

We add one more element…

… in fact many Elements

We add one more element…

Vaadin

Server-side

Java

Rich Set of

UI Components

IDE Support

Mature language

Extensive tooling


Component based UI

Enterprise-grade

quality & performance

Rich selection

Let me show you…

github.com/jtreml/home-command

https://github.com/jtreml/home-command

vaadin.com/elements

[email protected]

@juergentreml

https://vaadin.com/elements



vaadin.com/elements

[email protected]

@juergentreml ?

https://vaadin.com/elements



IoT with Vaadin Elements

Software

Transcript of IoT with Vaadin Elements