SlideShare a Scribd company logo
Introduction to Vaadin

         Leonard Siu
            @lsiu
 http://about.me/leonardsiu
Why Vaadin?
• Develop desktop-like web application (single-
  page)
• Very fast development time!
• Why?
  – Server-centric approach hide client/server
    complexity
  – Component/Event/Listener – Swing-like
    development
  – Vaadin takes care of cross-browser compatibility
Excellent documentation
• https://vaadin.com/book
Sampler for available widgets
• http://demo.vaadin.com/sampler
Growing Add-on Directory
• https://vaadin.com/directory
Skinnable
• http://demo.vaadin.com/VaadinTunesLayout/
My Asset Management Project




 http://ext.quantum.com.hk/qam/app
Architecture Overview




 Source: https://vaadin.com/book/-/page/intro.html#intro.overview
Source: https://vaadin.com/book/-/page/architecture.html
                                                           Architecture Overview 2
Let’s start coding
• What you need:
  – Java
  – Maven
  – Eclipse or Spring STS
New Vaadin Project
mvn archetype:generate 
      -DarchetypeGroupId=com.vaadin 
      -DarchetypeArtifactId=vaadin-archetype-clean 
      -DarchetypeVersion=LATEST 
      -DgroupId=com.example 
      -DartifactId=vaadin-example1 
      -Dversion=1.0 
      -Dpackaging=war


Following the development example on
    https://github.com/lsiu/vaadin-example1
Tip #1 - Avoid Restart on code change
• Use DCEVM to avoid restart application server
  on code change
• http://ssw.jku.at/dcevm/
• Remember to disable “Auto-Reload” on the
  web Module
What we got here?
         • 1 Java file
         • 1 POM file
         • 1 web.xml file

         • No struct-config.xml,
           faces-config.xml
         • No javascript plugins
           files
Discuss Code On Git Hub



https://github.com/lsiu/vaadin-example1
Where to from here?
• Get Visual Editor Eclipse Plugin
   – https://vaadin.com/eclipse/
• Learn about Vaadin Component Data Binding
   – https://vaadin.com/book/-/page/datamodel.html
• Vaadin + Spring
   – IoC, Data Access, Spring Security, etc..
   – Plays well together!
• Vaadin + Roo
   – Supercharge Prototyping!
• Make you own Vaadin Widget!

More Related Content

PPTX
Vaadin filtering table example
PDF
Nürnberg WooCommerce Talk - 11/24/16
PPTX
Best Practices for creating WP REST API by Galkin Nikita
PDF
Node.js to the rescue
PDF
ColdFusion builder plugins
PPTX
The Next Step in Responsive - RESS
PDF
Managing a WordPress Site as a Composer Project by Rahul Bansal @ WordCamp Na...
PDF
Coding with jetpack
Vaadin filtering table example
Nürnberg WooCommerce Talk - 11/24/16
Best Practices for creating WP REST API by Galkin Nikita
Node.js to the rescue
ColdFusion builder plugins
The Next Step in Responsive - RESS
Managing a WordPress Site as a Composer Project by Rahul Bansal @ WordCamp Na...
Coding with jetpack

What's hot (20)

PDF
Working in harmony
PDF
How to Ensure You're Launching the Most Secure Website - Michael Tremante
PDF
CIRCUIT 2015 - Monitoring AEM
PPTX
An Introduction to hapi.js
PDF
Way of the Future
PDF
Using hapi plugins to version your API (hapiDays 2014)
PDF
EVOLVE'14 | Enhance | Anshul Chhabra & Akhil Aggrawal | Cisco - AEM High Avai...
PDF
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)
PDF
Locking Down CF Servers
PPTX
Making Watir and Cucumber an efficient tool for Web UI Automation
PDF
O365Con18 - SharePoint Framework for Administrators - Waldek Mastykarz
PDF
The Themer's Guide to WP-CLI
PDF
Securing applications
PDF
Using CI for continuous delivery Part 2
PDF
Modern Web Application Development Workflow - EclipseCon US 2014
PPTX
MeteorJS Session
PPT
"Spring Boot. Boot up your development" Сергей Моренец
PDF
Drupal Step-by-Step: Building a Drupal Site with Acquia Cloud Site Factory
PDF
Aem offline content
ODP
How I Learned to Stop Worrying and Backup WordPress
Working in harmony
How to Ensure You're Launching the Most Secure Website - Michael Tremante
CIRCUIT 2015 - Monitoring AEM
An Introduction to hapi.js
Way of the Future
Using hapi plugins to version your API (hapiDays 2014)
EVOLVE'14 | Enhance | Anshul Chhabra & Akhil Aggrawal | Cisco - AEM High Avai...
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)
Locking Down CF Servers
Making Watir and Cucumber an efficient tool for Web UI Automation
O365Con18 - SharePoint Framework for Administrators - Waldek Mastykarz
The Themer's Guide to WP-CLI
Securing applications
Using CI for continuous delivery Part 2
Modern Web Application Development Workflow - EclipseCon US 2014
MeteorJS Session
"Spring Boot. Boot up your development" Сергей Моренец
Drupal Step-by-Step: Building a Drupal Site with Acquia Cloud Site Factory
Aem offline content
How I Learned to Stop Worrying and Backup WordPress
Ad

Similar to Introduction to vaadin (20)

PDF
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
PDF
Dmitriy Mustafin (HYS Enterprise) "Web UI for Back-end developer."
PPTX
Vaadin slides for @Devoxx 2012
PDF
Book of-vaadin
PDF
Building i pad apps in pure java with vaadin
PDF
Rc085 010d-vaadin7
PDF
Book of-vaadin-br Book of-vaadin-br Book of-vaadin-br
PDF
Vaadin 7 CN
PDF
PDF
Vaadin += GWT
PDF
PDF
Vaadin 8 によるオール java web アプリ開発の仕組みと実践
PDF
Introduction to Vaadin
PDF
Rock Your Web Apps with Vaadin: Coding Serbia 2014
PDF
Migration from vaadin 6 to vaadin 7 devoxx france 2013
PDF
Introduction to Web application development with Vaadin 7.1 - Tzukanov
PDF
Vaadin codemotion2014rome
PDF
Building web apps with vaadin 8
PDF
Vaadin Jump Start
PDF
Vaadin codemotion 2014
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
Dmitriy Mustafin (HYS Enterprise) "Web UI for Back-end developer."
Vaadin slides for @Devoxx 2012
Book of-vaadin
Building i pad apps in pure java with vaadin
Rc085 010d-vaadin7
Book of-vaadin-br Book of-vaadin-br Book of-vaadin-br
Vaadin 7 CN
Vaadin += GWT
Vaadin 8 によるオール java web アプリ開発の仕組みと実践
Introduction to Vaadin
Rock Your Web Apps with Vaadin: Coding Serbia 2014
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Vaadin codemotion2014rome
Building web apps with vaadin 8
Vaadin Jump Start
Vaadin codemotion 2014
Ad

Recently uploaded (20)

PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PPTX
Cloud computing and distributed systems.
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Advanced IT Governance
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
Advanced Soft Computing BINUS July 2025.pdf
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
GamePlan Trading System Review: Professional Trader's Honest Take
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
Unlocking AI with Model Context Protocol (MCP)
Chapter 3 Spatial Domain Image Processing.pdf
Cloud computing and distributed systems.
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
“AI and Expert System Decision Support & Business Intelligence Systems”
Diabetes mellitus diagnosis method based random forest with bat algorithm
Dropbox Q2 2025 Financial Results & Investor Presentation
Advanced IT Governance
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Advanced Soft Computing BINUS July 2025.pdf
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Review of recent advances in non-invasive hemoglobin estimation
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
Understanding_Digital_Forensics_Presentation.pptx
NewMind AI Weekly Chronicles - August'25 Week I
GamePlan Trading System Review: Professional Trader's Honest Take

Introduction to vaadin