My presentation at Vaadin Hackathon 19-21.4.2013. The presentation outlines all the step of creating a new Vaadin add-on component from design to deployment and publishing.

1. Hackathon
Vaadin & Boost Turku
19-21.4.2013
http://boostvaadinhackathon.eventbrite.com/

2. Create an awesome
Vaadin add-on!
Goal

3. Rules
1-4
person
team
start from
scratch
released in
vaadin
directory
online
demo

4. Team
Name needed
Send team members (name,
email) and team name to
joonas@vaadin.com
Deadline: FridayPrivacy: Public

5. From scratch
Send code repository URL
to joonas@vaadin.com and
commit regularly throughout
the event.
Deadline: FridayPrivacy: Public

6. Online demo
Usable on browsers you
choose (list them in add-on
description) on a public URL
Privacy: Public Deadline: Sun 14:00:00

7. Directory
Add-on must be publicly
available in Vaadin Directory
with link to source and demo.
Privacy: Public Deadline: Sun 14:00:00

8. Schedule
Friday
17:00 Open sign-in (all participants/teams must sign in)
18:00 Opening statements and practicalities (Matias Sundberg, Boost Turku)
18:15 Competition guidelines, Intro to Vaadin Add-ons (Joonas Lehtinen, CEO of Vaadin)
19:00 Start hacking!
21:00 Dinner
Saturday
11:30 Lunch
12:00 Pitch 101 (Toni Perämäki, Boost Turku)
12:30 The Hacking continues
15:00 Mid-hackathon status check by teams
20:00 Dinner
Sunday
10.30 Jury starts interviewing the teams
11.30 Lunch
14:00 Demo time
16:00 Prizes are awarded by the Grand Jury of Destiny

9. Have FUN!

10. slides available
at
slideshare.net/
joonaslehtinen

11. Joonas Lehtinen
Vaadin, Founder & CEO
Creating Vaadin
Add-on Components

12. Scope
Add-on widgets for Vaadin
7 with Maven
Out of scope
Themes, Vaadin 6, Server-
side add-ons, data sources

13. Q & A
Resources
Pointers for more information
Theory
Best practices
Practice
Tools
Agenda

14. Part 1 Theory

15. Note
This is a hackathon - we are
here to have fun - feel free
to break all the best practices

18. Need
We can not get
the UX we need
with the existing
widgets

19. Goals
• List of
• real
• quantifiable
• requirements
• for UX

20. Nail down
the minimum viable
set of supported
browser versions
with the customer

21. Idea
=
UX [how it is used]
+
Tech [how it works]

22. Always start from
defined goals -
never let idea to
rule your design

24. Works with
target browsers?

25. Interactions
work with target
browsers?
Performance is
good enough for
target data?

26. Definition of done
for prototype
• Includes main use-cases
• Works in target browsers
• Handles enough data

27. Never start design
or implementation
before prototyping
browser compatibility
and performance

29. Design UX and API first.
Never continue from
the prototype
implementation

30. Drawing detailed
wireframes & mockups
and testing them with
users will save
time later

31. Shamelessly copy UX.
Then your users
already
know how to use it.

33. Aim for multilayered
design that lets your
users (developers)
change behavior of
your component

35. DOM classes and
CSS restrictions
must be documented
to make styling easy

38. Keep component
project separate
from your real
application project

39. Demo application
must include all
features
and serve as example
for your users

41. There is no substitute
for manual testing and
user experience testing

42. Skip test driven
development, but invest
in regression testing

43. Pixel level regression
tests take time to set
up, but will be worth it

44. Never trust that
your changes would not
break other browsers
and skip cross-browser
testing

45. It is impossible to use
too much time in
polishing UX for a
reusable component.

47. commit 7453f467b1
Latest commit to the master branch
Update README.markdown
jojule authored 4 hours ago
Tags Downloads
jojulejojule // spreadsheetspreadsheet
Files Commits Branches
1 1AdminAdmin UnwatchUnwatch ForkFork Pull RequestPull Request
CodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki Stats & GraphsStats & Graphs00 00 00
SSHSSH HTTPHTTP Git Read-OnlyGit Read-Only git@github.com:jojule/spreadsheet.git Read+Write access
Simple spreadsheet component for Vaadin — Read more
https://vaadin.com/addon/spreadsheet
 Clone in Mac Clone in Mac ZIPZIP
mastermasterbranch:branch: 1
historyhistorynamename ageage messagemessage
design a day ago Developing [Joonas Lehtinen]
src 19 hours ago Version 0.1 [Joonas Lehtinen]
README.markdown 4 hours ago Update README.markdown [jojule]
licensing.txt 19 hours ago Version 0.1 [Joonas Lehtinen]
pom.xml 18 hours ago Fixed add-on name [Joonas Lehtinen]
README.markdownREADME.markdown
spreadsheet /
ExploreExplore GistGist BlogBlog HelpHelp jojulejojuleSearch…
35
https://github.com/jojule/spreadsheet

48. README.markdownREADME.markdown
Spreadsheet for Vaadin
The widget shows a spreadsheet - either from XLS file or by setting the cell contents programmatically.
This version is very limited and should be considered to be an early alpha -version. Try out the demo to see if it would be useful for you. I
mainly built it for an upcoming presentation.
SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel by
yourself.
Dependencies
Apache POI 3.8 - http://poi.apache.org/
Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/
Release notes
Initial release with severe limitations:
All columns and rows have fixed sizes
No cell styling is supported
No graphs are supported
No merged cells are supported
Performance for larger spreadsheets is really bad
Only one spreadsheet widget is supported on screen at once
License & Author

55. Try out my Spreadsheet!
vaadin.com/addon/spreadsheet

56. https://github.com/jojule/
spreadsheet/issues

59. Issue
reported by
actual user!
Fix immediately and thank
the user who reported it
Fix after 6 months,
maybe...
Ignore. wont-fix in best case.
(the usual open source way)
Support HOWTO

60. Part 2 Practice

61. Unique name
Vaadin XYZ
XYZ for Vaadin
[Use some time for the name, it is really really important]
Naming

62. Communication 1/3
server
client
Component
Widget
Connector
RPC
State

64. Communication 2/3
public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
RpcProxy.create(ButtonRpc.class, this);
public void onClick(ClickEvent event) {
rpc.click(
new MouseEventDetails(event));
}
private ButtonRpc rpc =
new ButtonRpc() {
public void click(
MouseEventDetails details) {
// do stuff
}
};
public Button() {
registerRpc(rpc);
}
serverclient

65. Communication 3/3
http://demo.vaadin.com/sampler/#foundation/state
http://demo.vaadin.com/sampler/#foundation/rpc

66. Creating a project (1/2)
vaadin-archetype-widget
1
3
2

67. Creating a project (2/2)
Server-side Component
Client-side Widget
Connector
Built in widget stylesTheme
Demo
Documentation

68. Packaging
1

69. Debugging server-side
1
2
3

70. Debugging
client-side
1
4
3
2

71. Debugging
client-side
(superdev)
1
4
5
2
<set-configuration-property
name="devModeRedirectEnabled"
value="true" />
DemoWidgetSet.gwt.xml
3
http://localhost:8080/
foo/?superdevmode

72. Publishing source
1
3
git init . 1
or
2
git commit -a
4

73. Publishing demo
Check: DemoWidgetSet.gwt.xml1
2
3
4
5
6
http://joonas.jelastic.servint.net/ttcb/
7

74. Publishing packaging
Set version in pom.xml1
2
3
Upload yourcomponent.zip
from yourcomponent/target
4

75. Part 3 Resources

76. http://vaadin.com/book
https://developers.google.com/
web-toolkit/doc/latest/DevGuide
http://caniuse.com/
https://vaadin.com/chat
https://vaadin.com/forum
https://vaadin.com/directory