Your SlideShare is downloading. ×
Javantura Zagreb 2014 - Vaadin - Peter Lehto
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javantura Zagreb 2014 - Vaadin - Peter Lehto


Published on

Konferencija Javantura Zagreb 2014 by HUJAK …

Konferencija Javantura Zagreb 2014 by HUJAK

Vaadin - thinking of U and I - by Peter Lehto

Vaadin ( je Java framework za rapidni razvoj visoko interaktivnih HTML5 web aplikacija na poslužitelju. On sakriva tehnologije prijenosa dokumenata i stanja (DOM, AJAX, JSON) i omogućuje da web aplikacije budu razvijene u Javi prema metafori desktop aplikacija. Vaadin iskorištava svu moć GWT-a, Java-to-JavaScript prevoditelja, pa je moguće razviti cijeli stog web aplikacija i nove komponente na strani klijenta bez napuštanja Java okruženja. Brzi razvoj olakšava veliki izbor komponenata i trenutni deployment na poslužitelj. Vaadin aplikacije koje se izvode na poslužitelju pružaju veliko povećanje sigurnosti, kao i povezivanje Vaadin sučelja na bilo koji postojeći backend sustav. U predavanju bit će prikazan pregled Vaadin 7.1 mogučnosti, pogled na Vaadin arhitekturu i što se zapravo događa iza kulisa frameworka, a bit će raspravljene i značajke koje donosi Vaadin 7.2.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Introduction to Peter Lehto 7 Vaadin .1Javantura 2014, Zagreb
  • 2. What? Why?
  • 3. How do I use it? new Label(“Hello world”) How does it work?
  • 4. How do Igetstarted? QAWhat’s newin Vaadin 7.2
  • 5. ?
  • 6. User interface framework for Rich Internet Applications
  • 7. Why?
  • 8. To strive on developer productivity
  • 9. JavaScript DOM AJAX JSON … htmljava
  • 10. 1Server-side RIA 2Rich components 3Embracing Java How?
  • 11. Servlet backend GWT frontend
  • 12. Server-side RIA DOM Client Server ViewHTML Page over HttpResponse Controller Model Parameters over HttpRequest DB 4 5 6 2 TerminalAdapter TerminalAdapter Automated by the RIA framework 3 7 1 9 8 Handled by the framework
  • 13. Example
  • 14. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M 307k compress 135k reduced widgetset and theme
  • 15. • name=”Johannes” • button clicked 263 bytes
  • 16. • name=”Johannes” • button clicked 263 bytes • Add notification 269 bytes
  • 17. Demo
  • 18. The architecture of Vaadin
  • 19. server client Component Widget Connector RPC State
  • 20. 1Server-side RIA 2Rich components 3Embracing Java How?
  • 21. User Interface Data Source Theme
  • 22. What kind of devices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% p support? 98.1% 25.7% Phones 36.1% blets Others 2.1% “Since gwt is used ext in the enterprise, this m explain why tablets are m popular than support for phones” Daniel iPhoneAndroidWP 8 n UI for of appstaken numberpe. Phones 36.1% Tablets Others “Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones” Daniel iPad AndroidWindows 8
  • 23. 400+ add-on components
  • 24. User Interface Data Source Theme
  • 25. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 26. User Interface Data Source Theme
  • 27. sass (syntactically awesome stylesheets)
  • 28. $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } .scss constants and functions .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } .css
  • 29. @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; } .scss .css mixins
  • 30. 1Server-side RIA 2Rich components 3Embracing Java How?
  • 31. Any language on JVM Java Scala Groovy Clojure Python Ruby Ceylon …
  • 32. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙ ∙ ∙ Multiple development environments
  • 33. GWT Compatible
  • 34. Vaadin += GWT
  • 35. Server- Client- sideOptim izedfor ProductivityOptim izedfor Control
  • 36. What’s new in Vaadin 7.2 Beta release Roadmapped to Q1/2014
  • 37. Grid component Table and TreeTable component “replacement” Usable also as pure client side widget Client side data source API
  • 38. Grid component Low level Escalator widget for optimized rendering performance Frozen columns Variable row and column sizes
  • 39. Grid component Components in header and footer Clean and Extensible implementation
  • 40. New Theme Customizable theme based on SASS Effortlessly change sizings, paddings, margins and color schemes.
  • 41. Responsive layout support integrated New Theme “Breakpoints” allow changing layouts based on device resolution or browser window size
  • 42. “Unit tests” for UI with new VaadinDriver Support for TestBench 4.0 Easier and cleaner way to select and interact with elements in DOM tree
  • 43. Official support for Windows Phone Support for TouchKit 4.0 New touckit theme in addition of current iOS theme
  • 44. How do I get started?
  • 45. Eclipse Download plugin from Marketplace
  • 46. IntelliJ IDEA Built-in support
  • 47. Netbeans Download plugin Netbeans Plugin Portal
  • 48. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.1.11 Maven
  • 49. Download for Free > 600 pages 01 -93-1970-1 PDF, ePub, HTML
  • 50. Ohloh #2 used Java Web Framework Community of 100.000+
  • 51. By Marko Grönroos ABOUT VAADIN .dzone.comGetMoreRefcardz! Getting Started with Vaadin CONTENTS INCLUDE: About Vaadin Creating An Application Components Layout Components Themes Data Binding and more... Vaadin is a server-side Ajax web application development framework that allows you to build web applications just like with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components. In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache License 2.0. Figure 1: Vaadin Client-Server Architecture If the built-in selection of components is not enough, you can Figure 2: Architecture for Vaadin Applications Hot Tip You can get a reference to the application object from any component attached to the application with Event Listeners In the event-driven model, user interaction with user interface components triggers server-side events, which you can handle Web Browser Client-Side Engine Java Web Server Vaadin UI Components Your Java Application Web Service EJB DB Servlet Container User Application Event Listener Data Model Application Themes Application Resources Default Theme File Resources External Resources Database Data Binding Inherits Events Changes AJAX Requests Inherits UI Component Java Servlet Application Class Web Browser Client-Side Engine brought to you by...
  • 52. Questions? Comments?