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

Like this? Share it with your network

Share

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

on

  • 219 views

 

Statistics

Views

Total Views
219
Views on SlideShare
219
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 Presentation Transcript

  • 1. Introduction to web application development with 7 Vaadin .1 Johannes Eriksson Vaadin Developer
  • 2. What? Why?
  • 3. How does it work? new L abel( “Hell o wor ld”) How do I use it?
  • 4. How do I get star ted? QA
  • 5. User interface framework for rich web applications
  • 6. java html JavaScript DOM AJAX JSON …
  • 7. Apache 2.0 license
  • 8. Why?
  • 9. expectations
  • 10. reality
  • 11. Challenge How to build consumer grade UX with business system budget
  • 12. How? 1 Rich components 2 Server + Client 3 Embracing Java
  • 13. User Interface Data Source Theme
  • 14. demo.vaadin.com/sampler
  • 15. demo.vaadin.com/dashboard
  • 16. 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
  • 17. hundreds of add-on components
  • 18. User Interface Data Source Theme
  • 19. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 20. User Interface Data Source Theme
  • 21. sass (syntactically awesome stylesheets)
  • 22. 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;! }
  • 23. 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
  • 24. 1 Rich components 2 Server + Client 3 Embracing Java
  • 25. Web application layers Backend server Web server Communication JavaScript
  • 26. Web application layers JS Backend server Web server Communication required required required Java to JavaScript JavaScript required
  • 27. Backend server Web server Communication Java to JavaScript JavaScript GWT required required required required optional JS Web application layers required required required required
  • 28. 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
  • 29. How does it work, really?
  • 30. Widget Connector client server State RPC Component
  • 31. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k 135k reduced widgetset and theme
  • 32. • name=”Johannes” • button clicked ! 263 bytes

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

  • 34. vaadin.com/learn https://github.com/vaadin/documentmanager
  • 35. 1 Rich components 2 Server + Client 3 Embracing Java
  • 36. Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …
  • 37. Eclipse IntelliJ IDEA Multiple Netbeans development Maven Ant environments ŁŁŁ
  • 38. GWT Compatible
  • 39. Vaadin += GWT
  • 40. 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
  • 41. How do I get started?
  • 42. Eclipse Download plugin from Martketplace
  • 43. IntelliJ IDEA Built-in support
  • 44. Netbeans Download plugin Netbeans Plugin Portal
  • 45. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7
  • 46. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  • 47. Apache License
  • 48. community of 100.000+ developers Ohloh #2 used Java Web Framework
  • 49. ? slideshare.com/ JohannesEriksson joheriks@vaadin.com