Your SlideShare is downloading. ×
0
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
Vaadin codemotion2014rome
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 codemotion2014rome

96

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
96
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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

×