Hackathon - Building vaadin add on components

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

Create an awesome
Vaadin add-on!
Goal

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

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

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

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

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

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

slides available
at
slideshare.net/
joonaslehtinen

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

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

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

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

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

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

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

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

Always start from
deﬁned goals -
never let idea to
rule your design

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

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

Never start design
or implementation
before prototyping
browser compatibility
and performance

Design UX and API ﬁrst.
Never continue from
the prototype
implementation

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

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

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

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

Keep component
project separate
from your real
application project

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

There is no substitute
for manual testing and
user experience testing

Skip test driven
development, but invest
in regression testing

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

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

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

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

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

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

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

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

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

Communication 1/3
server
client
Component
Widget
Connector
RPC
State

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

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

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

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

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

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

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

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

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

Hackathon - Building vaadin add on components

More Related Content

What's hot

Similar to Hackathon - Building vaadin add on components

More from Joonas Lehtinen

Recently uploaded

Hackathon - Building vaadin add on components