Vaadin Introduction at OOP 2014
Upcoming SlideShare
Loading in...5
×
 

Vaadin Introduction at OOP 2014

on

  • 471 views

 

Statistics

Views

Total Views
471
Views on SlideShare
471
Embed Views
0

Actions

Likes
1
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vaadin Introduction at OOP 2014 Vaadin Introduction at OOP 2014 Presentation Transcript

  • Introduction to 7 Vaadin OOP 2014, Münich .1 Johannes Eriksson Vaadin Ltd
  • What? Why?
  • How does it work? new L abel( “Hell o wor ld”) How do I use it?
  • How do I get star ted? QA
  • User interface framework for rich web applications
  • java html JavaScript DOM AJAX JSON …
  • Apache 2.0 license
  • Why?
  • expectations
  • reality
  • Challenge How to build consumer grade UX with business system budget
  • How? 1 Rich components 2 Server + Client 3 Embracing Java
  • User Interface Data Source Theme
  • demo.vaadin.com/sampler
  • demo.vaadin.com/dashboard github.com/vaadin/dashboard-demo
  • s 3 3.5 Browsers to support in 2012 yo ur ap Desktop 3.5 Browsers to support in 2012 browsers pp p su lic pp at r 9 io n or t? 8% U I fo ov of er ap r th take ps e nu n ro pe mb er . 36 .1% 6/7 IE 6/7 6/7 Opera Safari 14% IE 6/7 14% Ta bl et s 18% 9 10 36% 36% 18% Safari IE 9 79% 79% 9 IE 9 98.1% IE 10 80% 80% 10 IE 10 2. O Opera th er Chrome s 1% 94% Chrome iP ad 94% An 3 W dr6 in o.1 do id% “S w What kind of devices does yourh app support? in ince ex t e gw s po plai ent t is 8 ph pul n w erp us e r a h Browsers developers expect to support in 2013 Browsers developers expect to support in 2013 on r is d es tha y ta e, t ex ” n ble his ten su ts m si in 8 54% 54% IE 8 Firefox Ph on es 94% iPh A 94%nd one 2 Firefox inc e ex the gw po plain ente ph pula wh rp on r t y t es ha ab n ” su pp 8 IE 8 “S W 5 ro P .7 id 8% Da ni el
  • 400+ add-on components
  • User Interface Data Source Theme
  • InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • User Interface Data Source Theme
  • sass (syntactically awesome stylesheets)
  • constants and functions .scss $blue: #3bbfce;! $margin: 16px;! ! .content-navigation {! border-color: $blue;! color:! darken($blue, 9%);! }! ! .border {! padding: $margin / 2;! margin: $margin / 2;! border-color: $blue;! } .css .content-navigation {! border-color: #3bbfce;! color: #2b9eab;! }! ! .border {! padding: 8px;! margin: 8px;! border-color: #3bbfce;! }
  • mixins .scss @mixin table-base {! th {! text-align: center;! font-weight: bold;! }! td,th {padding: 2px}! }! ! @mixin left($dist) {! float: left;! margin-left: $dist;! }! ! #data {! @include left(10px);! @include table-base;! } #data {! float: left;! margin-left: 10px;! }! ! #data th {! text-align: center;! font-weight: bold;! }! ! #data td, #data #th {! padding: 2px;! } .css
  • 1 Rich components 2 Server + Client 3 Embracing Java
  • Web application layers Backend server Web server Communication JavaScript
  • Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
  • Backend server Web server Communication Java to JavaScript JavaScript GWT required required required required optional JS Web application layers required required required required
  • Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required required
  • How does it work, really?
  • Widget Connector client server State RPC Component
  • • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k 135k reduced widgetset and theme
  • • name=”Johannes” • button clicked ! 263 bytes

  • • name=”Johannes • button clicked ! 263 • Add notification ! 269 bytes

  • vaadin.com/learn github.com/vaadin/documentmanager
  • 1 Rich components 2 Server + Client 3 Embracing Java
  • Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …
  • Eclipse IntelliJ IDEA Multiple Netbeans development Maven Ant environments ŁŁŁ
  • GWT Compatible
  • Vaadin += GWT
  • ity tiv or df ize tim uc Op od Pr O tim p fo ed iz e rol d ont i C s r e v r e S r tien Cl
  • How do I get started?
  • Eclipse Download plugin from Marketplace
  • IntelliJ IDEA Built-in support
  • Netbeans Download plugin Netbeans Plugin Portal
  • Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  • Download for Free vaadin.com/book -93- 1970 -1 01 > 600 pages PDF, ePub, HTML
  • Apache License
  • Community of 100.000+ developers Ohloh #2 used Java Web Framework
  • ? slideshare.com/ JohannesEriksson joheriks@vaadin.com