Vaadin Pro

Business benefits of Vaadin Pro

and how to get most out of it
 Vaadin Pro

Vaadin Pro ensures higher productivity, better code quality and, improved
usability. These combined, your projects will outperform your previous efforts.
Releasing early and often, staying within budget, accelerating time-to-market
and increasing customer satisfaction are goals that every development team
aims for. This document describes how tools and components included in
Vaadin Pro helps your team to reach them.
 Training benefits
Be confident that you’re building your app in the right
way

Learn how to code, test, build and deploy web apps that look good and perform well.
The training courses cover everything from the basics of components and data
binding to the advanced topics of customizations and integrations. You get 40+
courses of on-demand videos with course materials and exercises. You can choose to
have access to live training courses with an opportunity to ask an expert. The courses

Unlimited Training cover Vaadin 10+ and Vaadin 8.

FAST TRACK TO BECOME AN EXPERT IN WEB

APP DEVELOPMENT
 Designer benefits
Build your UI faster

Vaadin Designer enables you to create better UIs, faster. With Vaadin Designer you can
create UI concepts quickly, without writing a single line of code, building on top ready
templates or beginning from scratch. Focusing on the result instead of building the
layout by trial and error, brings along many business benefits.

Here are five ways Vaadin Designer saves you time and money:

Vaadin Designer 1. Save time while gathering and discovering your UI requirements

2. Eliminate rework needed to be done by your development team

THE DRAG AND DROP VISUAL DESIGNER FOR VAADIN
3. Use your design as a communication tool between peers.
PROJECTS
4. Ensure greater user satisfaction with the “user experience first” approach

5. Get a better technical understanding of how Vaadin layouting should be done

Our developers have been building business UIs for over a decade and Designer
WORKS WITH
reflects the accumulation of our experiences in this field. Once you integrate Vaadin
Eclipse | IntelliJ IDEA Designer to your development process, and experience the benefits, you will not want
to go back!
Designer How-To
3 easy steps to success
Creating rapid UI concepts will help your development process remarkably. The key aspect is to
save your manual coding and fine-tuning efforts until UI concept is ready and agreed upon by all
the stakeholders. If you are new to this approach, just follow these simple steps:

1. Create a UI based on initial requirements with Vaadin Designer. This is fast and convenient
with our simple drag and drop interface.

2. Show your concept to your peers and ask “is this what we want?”. Try everything out with
different screen sizes with the live preview and tune the look and feel of the UI with live
theming.

3. Iterate based on feedback until all the stakeholders agree that the UI precisely meets the
requirements. Now you can start coding.

What you now have is a reference point for your development team that is in native Vaadin code
and with native Vaadin components, a real Vaadin application.

The next steps depend on the requirements of your project and preferences of your team. Two
equally common methods are to start implementing UI functionality directly to the design in
hand; or to build your UI from scratch in plain Java. Whenever possible try to maximize the
amount of re-usable designs, this will increase your velocity. Some developers can find it more
comfortable to write the highly interactive and complicated views in plain Java and that’s OK too.
Many Vaadin developers uses an hybrid approach according to the requirements.

LEARN MORE ABOUT VAADIN DESIGNER CONTACT ME AND SHOW HOW THIS IS DONE
 Testbench benefits
Testing = Quality = Savings

Testing is something we all know we should be doing but we tend to overlook due to
the misconceptions about time and resource related constraints. These
misconceptions mostly originate from premature or belated testing efforts of
yesterday.

Once you debunk these misconceptions within your team, the benefits become

Vaadin TestBench
obvious: better code quality, predictability and user satisfaction. The key is to start
testing at the right time and automate as soon as possible. Testing avoids wasting time
and money in the multiple ways:

REGRESSION TESTING AUTOMATION FOR VAADIN 1. Last minute bug fixing that leads to missed deadlines

PROJECTS
2. Panic-fixing issues in production

3. Uncertainty that causes stress and low team morale during deployments

4. Negative hit on your reputation as a professional IT vendor

BUILD ON Vaadin TestBench is one of the easiest ways to integrate regression testing to your
Vaadin project. It tests how your system responds to user interactions and how your
Selenium & JUnit
users see your system visually. It can be used manually by individuals or integrated to
any DevOps tool and Continuous Integration servers where all testing is fully
automated.
Testbench How-To
5 easy steps to success

Getting started with a new process is always the hardest. Follow the next five
steps to make testing an essential piece of the puzzle. Once you consider this
steps, you When you have done this your first reaction will be “why didn’t we do
this earlier?”

1. Do not start with automated tests until your requirements have stabilized;
manual testing will be just fine in the beginning

Start testing once your project requirements are shaped. Premature testing will
2. Automate the testing of user stories immediately after the requirements
only lead to frustration and unnecessary rework causing your team to reject
have stabilized
testing when it would bring value to your project. Writing Vaadin TestBench test
3. Write Vaadin TestBench test cases for atomic operations like creating an cases is as straightforward as Java programming. Write simple test cases for
entity, or navigating to a view atomic operations, execute locally for Test Driven Development, continue with
Continuous Integration (CI) and run your tests on every commit ensuring the
4. Use a higher level testing framework for combining these atomic test cases quality matches your end-user expectations.
to actual user stories
You can use a high level testing framework like TestNG or Behavior-Driven
5. Automate the testing of these user stories in your Continuous Integration Development tools like JBehave. Combining your test cases with these
server and run them after each commit or within your nightly builds frameworks will yield the best results.

LEARN MORE ABOUT VAADIN TESTBENCH CONTACT ME AND SHOW HOW THIS IS DONE
 Starter Packs benefits
Kickstart and build on top of best practices
Vaadin Starter Packs reflects an opinionated view of the best practices for all layers
when building a business grade web application with Vaadin. They are the result of our
experiences developing web applications across industries, and as such they provide a
comfortable and reassuring head start for any commercial project.   

Whether you build a full business app with dashboard, built-in authentication,
authorization and views that are ready for mobile, a Liferay portal or a simple
application example for a POC our starter packs are will get you up and running in no
time.

Starter Packs The App Starters also make use of other components and tools that are part of the
Vaadin Pro suite.

GET UP AND RUNNING WITH READY TEMPLATES

Business App Starter
Build great looking mobile-first web apps, fast

The Business App starter is a collection of best practices, patterns, and components
that help you build a web app that works great on desktop and mobile.

The starter builds on Vaadin’s productive Java development model and large library of
components, adding application level building blocks like a vertical side menu, a
hideable navigation bar, and responsive CRUD editors.

The view templates in the Business App starter are responsive layouts that are work on
mobile phones, tablets, and desktops.

With a  Vaadin Pro or Prime subscription, you can create a new software project out of
Business App Starter, modify it and freely or commercially distribute the resulting
application.
Full Stack App Starter
A complete package of our best practices

“Full stack App Starter” helps you to kickstart your Vaadin project in best terms
providing a learning and experimentation platform:

● Learn about our opinionated take on the architecture including service and UI
layers, patterns for application components, and communication between
them

● Experiment with views. You can modify existing views, and add new ones. The
views are built with Vaadin Designer and act as a reference point for your
specific needs.

● Bakery app also comes with integration tests built with Vaadin Testbench that
acts as examples for your own tests.

● Change the database and learn how to configure your Spring or Java EE
application to use your database.

With a  Vaadin Pro or Prime subscription, you can create a new software project out of
Full Stack App Starter, modify it and freely or commercially distribute the resulting
application.
 Grid Pro
Grid Pro is an extension of Grid. It has the same features
as the Grid, while adding inline editing with full
keyboard navigation support on top. It is optimized
toward enabling quick data entry and updating tabular
data. Singular cells can be turned into edit mode with
multiple options for how data is entered, while tab, enter
and arrows can be used for navigating the data.
LEARN ABOUT GRID PRO
SEE EXAMPLE
CRUD
A lot of business views are about creating, reading,
updating, and deleting data. Building CRUD views
require some work, and getting the buttons’
enable/disable mode right in various states and
warning when navigating away with unsaved changes
take extra development time. The CRUD components
gives you all these out of the box.
LEARN ABOUT CRUD
SEE EXAMPLE
 Charts
If you need to visualize your data, you will want to use
Vaadin Charts. Data visualization needs became a staple
of the requirement lists on most of the business
applications, and Vaadin Charts is the most versatile and
best-looking charting option available both for Vaadin
and frameworks such as Polymer. Using an out of the
box solution, you will save time and provide immediate
value to your user base.
Rich Text Editor
Rich Text Editor fills your need when you need a powerful
tool for text that goes beyond plain text. You can configure
headers, text variants like bold and italics, configure text
alignments, build lists, add images and links, and more.
The content uses the Delta format, which is very robust for
visual editing, and the component can export Delta into
HTML.
Vaadin Board
When your project needs to support various screen
sizes, which is almost always the case nowadays, using
Vaadin Board is the easiest way to build responsive
behavior that just works out of the box. You do not need
to do any manual programming. Its most significant
benefit is ensuring responsive UIs right from the start.
It is also a powerful tool for building business grade
dashboards together with Vaadin Charts.

LEARN ABOUT CHARTS LEARN ABOUT RICH TEXT EDITOR LEARN ABOUT BOARD

SEE EXAMPLE SEE EXAMPLE SEE EXAMPLE

The tools and components are available under a commercial license (CVAL3) that is valid New Business, Global US Sales D-A-CH Sales
during your Vaadin Pro or Prime subscription period. All developers who contribute to
Murat Yamak Amir Al-Majdalawi Seza Alkan
the project using the tools and components included in Vaadin Pro and Prime plans
need to have a valid license during development and maintenance stages of their
Head of New Business Head of US Sales Account Executive
project. The resulting project can be commercially distributed, and there are no murat@vaadin.com amir@vaadin.com seza@vaadin.com
limitations on the number of projects and deployments. +358 44 769 2608 1 (844) 4-VAADIN +49 1525 3923614

SEE PRICING