Vaadin Introduction at OOP 2014

730 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
730
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Vaadin Introduction at OOP 2014

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

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

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

×