Introduction to Web application development with Vaadin 7.1 - Tzukanov

  • 248 views
Uploaded on

Slides from Michael Tzukanov talk @ codemotion roma 2014

Slides from Michael Tzukanov talk @ codemotion roma 2014

More 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
248
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