Your SlideShare is downloading. ×
0
Introduction to Web application
development with
Michael Tzukanov
Vaadin Developer
7Vaadin
.1
What?
Why?
How do I
use it?
new Label(“Hello world”)
How does it
work?
How do Iget started?
QA
User interface
framework for rich
web applications
JavaScript
DOM
AJAX
JSON
…
htmljava
Apache 2.0 license
Why?
expectations
reality
Challenge
How to build consumer
grade UX with business
system budget
How?
1Rich components
2Server + Client
3Embracing Java
User Interface
Data Source
Theme
demo.vaadin.com/sampler
demo.vaadin.com/dashboard
What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Brow...
hundreds of add-on
components
User Interface
Data Source
Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
...
User Interface
Data Source
Theme
sass(syntactically awesome stylesheets)
$blue: #3bbfce;!
$margin: 16px;!
!
.content-navigation {!
border-color: $blue;!
color:!
darken($blue, 9%);!
}!
!
.border {...
1Rich components
2Server + Client
3Embracing Java
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
require...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
G...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
How does it work,
really?
server
client
Component
Widget
Connector
RPC
State
• Initial HTML
• CSS (theme)
• Images
• JavaScript
!
1.2M total

307k
compress
135k
reduced
widgetset
and theme
• name=”Johannes”
• button clicked
!
263 bytes

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

https://github.com/vaadin/documentmanager
vaadin.com/learn
1Rich components
2Server + Client
3Embracing Java
Any
language
on JVM
Java
Scala
Groovy
Clojure
Python
Ruby
Ceylon
…
Eclipse
IntelliJ IDEA
Netbeans
Maven
Gradle
Ant
Ł Ł Ł
Multiple
development
environments
GWT
Compatible
Vaadin +=
GWT
How do I
get started?
Eclipse
Download plugin
from Martketplace
IntelliJ IDEA
Built-in support
Netbeans
Download plugin
Netbeans Plugin Portal
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersi...
Download for Free
vaadin.com/book
> 600 pages
01
-93-1970-1
PDF, ePub, HTML
Apache
License
community of
100.000+
developers
Ohloh
#2 used
Java Web
Framework
? michael.tzukanov
@vaadin.com
slideshare.net/
MTzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Introduction to Web application development with Vaadin 7.1 - Tzukanov
Upcoming SlideShare
Loading in...5
×

Introduction to Web application development with Vaadin 7.1 - Tzukanov

350

Published on

Slides from Michael Tzukanov talk @ codemotion roma 2014

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
350
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Web application development with Vaadin 7.1 - Tzukanov"

  1. 1. Introduction to Web application development with Michael Tzukanov Vaadin Developer 7Vaadin .1
  2. 2. What? Why?
  3. 3. How do I use it? new Label(“Hello world”) How does it work?
  4. 4. How do Iget started? QA
  5. 5. User interface framework for rich web applications
  6. 6. JavaScript DOM AJAX JSON … htmljava
  7. 7. Apache 2.0 license
  8. 8. Why?
  9. 9. expectations
  10. 10. reality
  11. 11. Challenge How to build consumer grade UX with business system budget
  12. 12. How? 1Rich components 2Server + Client 3Embracing Java
  13. 13. User Interface Data Source Theme
  14. 14. demo.vaadin.com/sampler
  15. 15. demo.vaadin.com/dashboard
  16. 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. 17. hundreds of add-on components
  18. 18. User Interface Data Source Theme
  19. 19. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  20. 20. User Interface Data Source Theme
  21. 21. sass(syntactically awesome stylesheets)
  22. 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. 23. 1Rich components 2Server + Client 3Embracing Java
  24. 24. Web application layers Backend server Web server Commu- nication JavaScript
  25. 25. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  26. 26. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required
  27. 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. 28. How does it work, really?
  29. 29. server client Component Widget Connector RPC State
  30. 30. • Initial HTML • CSS (theme) • Images • JavaScript ! 1.2M total
 307k compress 135k reduced widgetset and theme
  31. 31. • name=”Johannes” • button clicked ! 263 bytes

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×