Your SlideShare is downloading. ×
Vaadin intro at GWT.create conference
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

Vaadin intro at GWT.create conference

1,446

Published on

Introduction to Vaadin given at GWT.create conference

Introduction to Vaadin given at GWT.create conference

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,446
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 7 Vaadin introduction to @joonaslehtinen Founder & CEO
  • 2. Intro to Vaadin “Hello world”) new Label(
  • 3. New in 7
  • 4. Getting started QA
  • 5. User interface framework for rich web applications
  • 6. Sounds like GWT? Kinda…
  • 7. Building blocks
  • 8. Developer Productivity Rich UX
  • 9. java html
  • 10. 123 Key Ideas
  • 11. 1 Rich Components
  • 12. User Interface Data Source Theme
  • 13. 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 98.1% IE 10 80% 80% 10 2. O Opera th er Chrome s 1% 94% 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 IE 9 IE 10 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 Chrome 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
  • 14. 350+ add-on components
  • 15. User Interface Data Source Theme
  • 16. User Interface Data Source Theme
  • 17. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 18. 2 Server + Client
  • 19. Web application layers Backend server Web server Communication JavaScript
  • 20. 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
  • 21. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer required vs required 3 layers -50% codelines -50% development required required -50% maintenance easier to learn required required optional
  • 22. Server-side Client-side GWT-RPC Client-side Vaadin-RPC First name Last name Phone number Table cell Table cell Server-side Email address Table cell Offline Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Far far away, behind the far from the countries Vok Consonantia, there live th Separated they live in Bo right at the coast of the S large language ocean. Table cell Edit First name Phone number Delete New Last name Email address Save Cancel A small river named Dude place and supplies it with regelialia. It is a paradise which roasted parts of se your mouth. Even the all-powerful Poi control about the blind tex almost unorthographic life however a small line of b name of Lorem Ipsum de for the far World of Gram Oxmox advised her not to because there were thou Commas.
  • 23. Server-side! (with Vaadin) Client-side! (with GWT-RPC) AddressbookEditor ~270loc implements Proxy
 0loc (generated) Client ServiceAsync Server AddressbookEditor 17loc ~150loc 68loc RPCServlet Frontend equal Service implements Backend Address AddressbookBackend Impl 19loc
  • 24. How does it work, really?
  • 25. • • • • Initial HTML CSS (theme) Images JavaScript ! 1.2M total
 compress 307k reduced widgetset 135k
  • 26. • name=”Joonas” • button clicked ! 261 bytes

  • 27. • name=”Joonas” • button clicked ! 261 bytes • Add notification ! 267 bytes

  • 28. Development cycle
  • 29. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  • 30. 3 Embracing Java
  • 31. Any language on JVM
  • 32. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 33. No browser plugins ! Nothing to install
  • 34. Servlet Portlet (most) clouds
  • 35. Eclipse IntelliJ IDEA Netbeans Maven Ant ŁŁŁ
  • 36. Vaadin += GWT 1/7
  • 37. GWT Compatible
  • 38. 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
  • 39. Architecture
  • 40. Bleeding edgE
  • 41. Renewed from Inside JS Sass HTML5 += GWT sh RPC State Pu Complete stack UI Field
  • 42. vaadin.com/7
  • 43. Demo Sass
 Syntactically Awesome Stylesheets
  • 44. JavaScript Add-ons
  • 45. Publish API from Java getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
  • 46. Server-side Java API for Widget ! public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } ! public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); } ! ! }
  • 47. Widget implementation in JavaScript window.com_example_MyWidget = function() { var element = $(this.getWidgetElement()); // Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); } ! // Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } }); }
  • 48. Server Push
  • 49. @Push MyUI ! ! <async-supported/> ! ! vaadin-push dependency
  • 50. RPC State
  • 51. 7 Demo Widget Connector client server State RPC Component
  • 52. getting started
  • 53. Eclipse Download plugin from Martketplace
  • 54. IntelliJ IDEA Built-in support
  • 55. Netbeans Download plugin Netbeans Plugin Portal
  • 56. Maven mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.9
  • 57. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
  • 58. Apache License
  • 59. community of ~100.000 developers Ohloh #2 used Java Web Framework
  • 60. Hybrid Applications ! Theming Workshop ! Vaadin Intro Workshop 1:30pm
  • 61. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×