Introduction to Web application development with Vaadin 7.1 - Tzukanov
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Web application development with Vaadin 7.1 - Tzukanov

on

  • 355 views

Slides from Michael Tzukanov talk @ codemotion roma 2014

Slides from Michael Tzukanov talk @ codemotion roma 2014

Statistics

Views

Total Views
355
Views on SlideShare
347
Embed Views
8

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 8

http://www.slideee.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Web application development with Vaadin 7.1 - Tzukanov Presentation 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