JavaOne 2017

SINGLE-PAGE WEB APPS IN PLAIN JAVA WITH VAADIN

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

Matti Tahvonen, Vaadin Ltd

WEB APP WIZARD

Matti Tahvonen

Web pages from 1994

Web apps from 1996 (JavaScript, Perl, PHP…)

Java web apps from 2006 (Vaadin R&D + helping our customers)

Since 2014, mostly DevRel/marketing as daily job

NetBeans fan since 2014

DEVELOPER ADVOCATE

@mattitahvonen

Web isn't built for apps.

Vaadin is a perfect choice for web app

developers, especially for NetBeans/Swing/JavaFX/

SWT developers.

The most helpful IDE plugins should integrate to

the code editor.

What you’ll learn?

Agenda

Questions and answers as they appear

HANDS ON INTRODUCTION TO VAADIN USING OUR NETBEANS PLUGIN

THE ENDSHORT INTRODUCTION ON VAADIN & OUR NETBEANS PLUGIN

1 2 3

DEFINING VAADIN & VAADIN NETBEANS PLUGIN

Vaadin is a collection of tools to efficiently build

awesome web apps.

Components (OS)

Framework for app and component developers

(OS)

Extensions, IDE extensions and additional

productivity tools (OS + Pro/Prime)

What is Vaadin?

Why Vaadin developers would need a plug-in?

Vaadin is just a Java library!Vaadin NetBeans Plugin

Project templates

Component templates

Theme templates

Project settings

Validators for Vaadin specific code

Integrated Add-on Directory support

Vaadin NetBeans PluginFeatures

Based on strong Maven support by NetBeans

Many of features hooked directly to the code

editor, the part that developers use the most.

We hired the right guy, Denis Anisimov :-)

Vaadin NetBeans PluginHow was it built?

WHY SO MANY WEB FRAMEWORKS?A N D H O W VA A D I N I S D I F F E R E N T … . .

Originally just very simple <form></form> + inputs

resulting server side visit.

No custom inputs, re-usable components,

dynamic graphics, asynchronous access to server.

Only JavaScript available for minor enhancement.

Everything for modern SPAs are just built and

hacked on the existing standards.

Web was not designed to be an application platform!

Pete HuntTHE REACT FELLOW, FACEBOOK

“Web technologies are designed for documents. If you would be building a UI toolkit, it would look

nothing like a DOM.” JavaOne 2015, Web Framework Smackdown

LINUS TORVALDS, GOOGLE+ DISCUSSION 2014

XML is crap. Really. There are no excuses.

XML is nasty to parse for humans, and it's a

disaster to parse even for computers. There's just no reason for that horrible crap to exist.

All/most web app frameworks try to somehow

abstract or simplify the broken app platform.

Vaadin comes from a different direction. Vaadin

has been designed to be an app UI framework,

we just happen use web as a "rendering engine”.

Vaadin development reminds more of developing

with traditional UI libraries than most web

frameworks.

Trivia: 10+ years ago, we actually had a plan to

implement multiple “terminal adapters”, for

different kind of devices and use cases. There was

working prototypes for Swing, J2ME/Midlet.

Vaadin FrameworkHow is Vaadin different?

"All" Java

Strong abstraction of DOM

Really strong abstraction of the whole client-

server development model

Extensible with Java (and web technologies)

Still an awesome user experience: good

components + good looking theme

Vaadin FrameworkHow is Vaadin different?

HOW VAADIN WORKS?A D E M O N S T R AT I O N F R O M I D E

SWEET SPOTS FOR VAADINN O TOO L F I T S F O R A L L

BIG apps with dozens or even thousands of views

Apps with long lifecycle, easy to maintain, easy to

upgrade to newer versions (for “modernisation”)

Apps, NOT sites. Remember, web is good for

hyper text!

Insurance, banking, healthcare.

Vaadin

Sweet spots

PROBLEMSA N D S O L U T I O N S

Missing components

Theme building

Co-operation with UI (HTML) designers

Performance against "stateless" web technologies

Vaadin FrameworkProblems

Compose it from existing

See community contributed extension, 700+ add-

ons in the Directory service

Wrap an existing web component or Web

Component component for Vaadin

Create the component using low level web

technologies (GWT, JS, CSS, HTML)

Missing a component?Problems

No abstraction for this part, you need to know

CSS

Configurable Valo Theme engine

<demo via NetBeans>

Theme building

Problems

What if you have a separate UI designer who

masters HTML/CSS, but not Java?

Vaadin Designer?

CustomLayout, HTML template as a layout

Declarative format

Co-operation with (HTML) designersProblems

Performance of what? The UI or the server?

You are not Google! But even they send every key

press to the server

For sure, it saves more stuff to session than e.g.

React + REST. But often less stress for DB and

business logic.

Concern by many, problem for rare.

Scales well enough, most often same bottlenecks

as with everybody else.

End user performance often better than with

traditional SPAs, on mobile connections as well!

Performance against "stateless" web technologiesProblems

WHAT NEXT?W H E R E A R E W E CO M I N G F R O M A N D W H E R E A R E W E G O I N G N E X T

2000

2002

The company Vaadin was founded.

18kCOMMITS*

2009

2012

2013

Vaadin 7, improvements for windowing, data binding,

extensibility

Vaadin 3.0 (MillStone) was open sourced.

Vaadin 6, easily extensible GWT based client side

rendering engine

Vaadin 7.3, WebSocket based communication

channel

Vaadin 2000-2017

9kTICKETS

136CODE

CONTRIBUTORS

182MAINTENANCE

RELEASES

2007

First stable version of AJAX adapter.

2017Vaadin 8 Large API

modernisation

* ) S I N C E V E R S I O N 3

CORE PRO PRIME

Core Elements

Flow Framework

Extensive Documentation

Add-on Directory

TestBench

Chart Elements

Pro Elements

Warranty

Expert Chat

Development on Demand

FREE$100 / MONTH

PER 1 DEVELOPER

ANNUAL SUBSCRIPTION

$890 / MONTH MORE THAN 3 DEVELOPERS

ANNUAL SUBSCRIPTION

Open core business model

What next?

We’ll keep on fighting for simplicity!

Big release tomorrow, visit out booth!

• Web Components

• Vaadin Elements

๏ Improved modularisation

๏ Expanding also for non-Java developers

• Improving core APIs Java

๏ Routing/navigation/deep linking

๏ Data binding

๏ More advanced, client-sided enabled

template support

How to get started?How to try out Vaadin?

How to get inspired by the features of Vaadin NetBeans plugin?

• Install Vaadin NetBeans Plugin via the plugins

dialog

• Follow Vaadin tutorial: vaadin.com/framework

• github.com/vaadin (Vaadin Framework, Vaadin

Elements, Vaadin NetBeans Plugin)

• github.com/mstahv (my numerous Vaadin

examples)

Matti Tahvonen

DEVELOPER ADVOCATE, VAADIN

Questions?Thank you!

@mattitahvonen