Your SlideShare is downloading. ×
  • Like
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Web application development with Vaadin 7.1 - Tzukanov

  • 266 views
Published

Slides from Michael Tzukanov talk @ codemotion roma 2014

Slides from Michael Tzukanov talk @ codemotion roma 2014

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
266
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
1

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. Introduction to Web application development with Michael Tzukanov Vaadin Developer 7Vaadin .1
  • 2. What? Why?
  • 3. How do I use it? new Label(“Hello world”) How does it work?
  • 4. How do Iget started? QA
  • 5. User interface framework for rich web applications
  • 6. JavaScript DOM AJAX JSON … htmljava
  • 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? 1Rich components 2Server + Client 3Embracing Java
  • 13. User Interface Data Source Theme
  • 14. demo.vaadin.com/sampler
  • 15. demo.vaadin.com/dashboard
  • 16. 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% s your app support? 25.7% Phones 36.1% O thers2.1% “Since gw in the enterp explain why tab popular than supp phones” Daniel iPhone Android W P 8 pplication UI for r 98% of apps overtaken the num ber rope. 36.1% Tablets “Since gwt is used extensi in the enterprise, this m explain why tablets popular than su phones” iPadAndroid W indow s 8
  • 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. $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 SASS COMPILER
  • 23. 1Rich components 2Server + Client 3Embracing Java
  • 24. Web application layers Backend server Web server Commu- nication JavaScript
  • 25. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  • 26. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required
  • 27. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
  • 28. How does it work, really?
  • 29. server client Component Widget Connector RPC State
  • 30. • Initial HTML • CSS (theme) • Images • JavaScript ! 1.2M total
 307k compress 135k reduced widgetset and theme
  • 31. • name=”Johannes” • button clicked ! 263 bytes

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

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