Productive UI development in Java with Vaadin Codemotion 2014 (Madrid) Vaadin is a popular web framework that combines web and Java platforms in an unique way. Writing an application that lazily loads large amounts of data from the server, includes drag-and-drop, keyboard navigation and compelling visualizations should not require writing any HTML, JavaScript or designing a REST API. All you need to do is write a component based UI in Java or any other JVM based language. The presentation gives an overview to Vaadin and explains how it works. We'll also discuss on what are the latest new features of Vaadin and how the roadmap looks. The session should give you everything you need to get started building your own apps with the free Apache-licensed Vaadin. Furthermore, we explore the ways of combining the server- and client-side development models. The goal is to be able to use the best of the both models and provide a flexible basis for building high quality user interfaces for enterprise applications.

1. intro

2. Manuel Carrasco Moñino
Vaadin: Senior GWT Expert
GWT: Oficial maintainer
Apache: PMC James
Jenkins: Committer
manolo@vaadin.com
http://manolocarrasco.es
@dodotis

3. What is Vaadin?

5. java html

6. for
HTML5 apps
Java API

7. Rich
UX
Developer
Productivity

8. 12Key Rich
Components
Idea3s
Server
Java

9. Fast development
Good looking apps

10. Server side centric
But easy to extend client side

11. Backend
server
Web
server
Handled by Vaadin
commu-nications
Browser
50% less code

12. UI Components
Rich widget collection

13. User Interface
Components
Data Sources

14. Any Device
Don’t worry about vendors, resolutions …

16. Powerful theme builder

18. Scalable Icons
- Based on fonts
- No images to download

20. Apache 2.0
- No hooks
- Big community

21. 40% of Fortune 100 companies use Vaadin
#2 Java Web Framework
#2 according to Open HUB stats
#3 according with Rebel-labs
130k+ active developers

22. Show me the code

25. • name=”Marcus”
• button clicked
261 bytes

27. • name=”Marcus
• button clicked
261 bytes
• Add notification
267 bytes

28. Enough talk.
Let's build an app!

29. What kind of sorcery is this?

30. Architecture

36. ★ Initial HTML
★ CSS (theme)
★ JavaScript
1M total
307k
compress
135k
reduced
widgetset
All widgets are downloaded and cached once

37. Browser
Server
onStateChanged(evt)
caption = "Click me"
dirty = true
VButton
rpc.click() ButtonConnector
Button setCaption("Click me")
<button clicked>
click()
ButtonState
RPC

38. Entity
Field
Collection
InMemory, Bean,
Method, Collection,
JDBC, JPA,
Hibernate, TextFile,
FileSystem,
Properties,
EclipseLink, Lucene,
Mockups, GAE, ...

39. But wait, there's more!

40. All of Java
- tooling & ecosystem
maven, gradle, Ant, IDE’s, Junit …
- any language in the JVM:
java x-8, scala, groovy, jruby …
- any Java container
Jetty, Tomcat, GAE …
- any Java technology
JEE, Spring, OSGi

41. Built in security
- State in server side
- Integrity, Availability, Authenticity
- No REST services exposed
- Cross-Site Scripting protected
- Request Forgery protection

42. Works in
all browsers
all devices
> no plugins required
> no SDK’s

43. 6/7 8
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
98.1%
3.5 Browsers to support in 2012
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
14% 18% 36% 54%
What kind of devices does your app support?
36.1%
Desktop
browsers
Tablets
Browsers developers expect to support in 2013
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
does your app support?
Phones
25.7%
36.1%
Others
2.1%
“Since gwt in the enterprise, explain why tablets popular than support phones”
Daniel
iPhone
Android
WP
application over 98% of apps
had overtaken
UI for
US, Europe.
the number
36.1%
“Since gwt is used extensively
in the enterprise, this may
explain why tablets are popular than support phones”
iPad
Android
Windows
+
+

44. Responsive layouts

46. OR

47. Server push

48. @Push
public class VaadinUI extends UI {
...
}
ui.access(() -> Notification.show("Alert!"));

49. Stable API

50. /**
* Creates a new push button with click listener.
*
* Parameters: caption - Button caption
* listener - Button click listener
*/
public Button(java.lang.String caption,
Button.ClickListener listener)
Millstone 3, 2002
Vaadin 7, 2014
/**
* Creates a new push button with click listener.
*
* Parameters: caption - Button caption
* listener - Button click listener
*/
public Button(java.lang.String caption,
Button.ClickListener listener)

51. GWT and JS components
- Write Java and let GWT compile to JS
- Wrap JS code in GWT
- Reuse JS from server side

52. Extendable
- Over 500 public Add-ons

54. Getting started

55. Download for Free
vaadin.com/book
952-93-1970-1
728 pages
9789529319701
PDF, ePub, HTML

56. Eclipse
Download plugin
from Martketplace

57. IntelliJ IDEA
Built-in support

58. Netbeans
Download plugin
Netbeans Plugin Portal

59. Maven
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-application
-DarchetypeVersion=7.3.3
mvn vaadin:compile
mvn jetty:run

60. Manuel Carrasco Moñino - manolo@vaadin.com