Hackathon - Building vaadin add on components
-
Upload
joonas-lehtinen -
Category
Technology
-
view
1.432 -
download
0
description
Transcript of Hackathon - Building vaadin add on components
HackathonVaadin & Boost Turku19-21.4.2013http://boostvaadinhackathon.eventbrite.com/
Create an awesomeVaadin add-on!
Goal
Rules1-4
personteam
start fromscratch
released invaadindirectory
onlinedemo
Team
Name neededSend team members (name,
email) and team name to [email protected]
Deadline: FridayPrivacy: Public
From scratch
Send code repository URLto [email protected] 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
ScheduleFriday17: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
Saturday11:30 Lunch 12:00 Pitch 101 (Toni Perämäki, Boost Turku)12:30 The Hacking continues15:00 Mid-hackathon status check by teams20:00 Dinner
Sunday10.30 Jury starts interviewing the teams11.30 Lunch14:00 Demo time16:00 Prizes are awarded by the Grand Jury of Destiny
Have FUN!
slides availableat
slideshare.net/joonaslehtinen
Joonas LehtinenVaadin, Founder & CEO
Creating Vaadin Add-on Components
ScopeAdd-on widgets for Vaadin 7 with Maven
Out of scopeThemes, Vaadin 6, Server-side add-ons, data sources
Q & A
ResourcesPointers for more information
TheoryBest practices
PracticeTools
Agenda
Part 1 Theory
NoteThis is a hackathon - we are here to have fun - feel free to break all the best practices
NeedWe can not get
the UX we need with the existing
widgets
Goals• List of • real• quantifiable• requirements• for UX
Nail downthe minimum viable set of supportedbrowser versionswith the customer
Idea =UX [how it is used]+ Tech [how it works]
Always start fromdefined goals -never let idea torule your design
Works with target browsers?
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 compatibilityand performance
Design UX and API first. Never continue fromthe prototypeimplementation
Drawing detailedwireframes & mockupsand testing them withusers will savetime later
Shamelessly copy UX.Then your users alreadyknow how to use it.
Aim for multilayereddesign that lets yourusers (developers)change behavior ofyour component
DOM classes and CSS restrictionsmust be documentedto make styling easy
Keep componentproject separatefrom your realapplication project
Demo applicationmust include all featuresand serve as examplefor your users
There is no substitutefor manual testing anduser 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 thatyour changes would notbreak other browsers and skip cross-browser testing
It is impossible to usetoo 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 Requests Pull Requests Issues Issues Wiki Wiki Stats & GraphsStats & Graphs00 00 00
SSHSSH HTTPHTTP Git Read-OnlyGit Read-Only [email protected]:jojule/spreadsheet.git Read+Write access
Simple spreadsheet component for Vaadin — Read morehttps://vaadin.com/addon/spreadsheet
Clone in Mac Clone in Mac ZIPZIP
master masterbranch: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.markdown README.markdown
Spreadsheet for VaadinThe 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. Imainly built it for an upcoming presentation.
SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel byyourself.
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
Apache License 2.0
Joonas Lehtinen - https://vaadin.com/joonas
spreadsheet /
ExploreExplore GistGist BlogBlog HelpHelp jojulejojuleSearch…35
https://github.com/jojule/spreadsheet
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 Requests Pull Requests Issues Issues Wiki Wiki Stats & GraphsStats & Graphs00 00 00
SSHSSH HTTPHTTP Git Read-OnlyGit Read-Only [email protected]:jojule/spreadsheet.git Read+Write access
Simple spreadsheet component for Vaadin — Read morehttps://vaadin.com/addon/spreadsheet
Clone in Mac Clone in Mac ZIPZIP
master master 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.markdown README.markdown
Spreadsheet for VaadinThe 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. Imainly built it for an upcoming presentation.
SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel byyourself.
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
Apache License 2.0
Joonas Lehtinen - https://vaadin.com/joonas
spreadsheet /
ExploreExplore GistGist BlogBlog HelpHelp jojulejojuleSearch…35
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-fix in best case.(the usual open source way)
Support HOWTO
Part 2 Practice
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 stylesThemeDemo
Documentation
Packaging
1
Debugging server-side
1
2
3
Debuggingclient-side
14
3
2
Debuggingclient-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.zipfrom yourcomponent/target
4
Part 3 Resources
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