Introduction to-web-application-development-with-vaadin7
Upcoming SlideShare
Loading in...5
×
 

Introduction to-web-application-development-with-vaadin7

on

  • 210 views

 

Statistics

Views

Total Views
210
Views on SlideShare
210
Embed Views
0

Actions

Likes
0
Downloads
5
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

Introduction to-web-application-development-with-vaadin7 Introduction to-web-application-development-with-vaadin7 Presentation Transcript

  • Introduction to web application development with 7 Vaadin .1 Johannes Eriksson Vaadin Developer
  • 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
  • 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
  • hundreds of 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 https://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 Martketplace
  • 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 728 pages PDF, ePub, HTML
  • Apache License
  • community of 100.000+ developers Ohloh #2 used Java Web Framework
  • ? slideshare.com/ JohannesEriksson joheriks@vaadin.com