Hackathon - Building vaadin add on components
-
Upload
joonas-lehtinen -
Category
Technology
-
view
1.424 -
download
0
description
Transcript of Hackathon - Building vaadin add on components
![Page 1: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/1.jpg)
HackathonVaadin & Boost Turku19-21.4.2013http://boostvaadinhackathon.eventbrite.com/
![Page 2: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/2.jpg)
Create an awesomeVaadin add-on!
Goal
![Page 3: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/3.jpg)
Rules1-4
personteam
start fromscratch
released invaadindirectory
onlinedemo
![Page 4: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/4.jpg)
Team
Name neededSend team members (name,
email) and team name to [email protected]
Deadline: FridayPrivacy: Public
![Page 5: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/5.jpg)
From scratch
Send code repository URLto [email protected] and
commit regularly throughout the event.
Deadline: FridayPrivacy: Public
![Page 6: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/6.jpg)
Online demo
Usable on browsers you choose (list them in add-on
description) on a public URL
Privacy: Public Deadline: Sun 14:00:00
![Page 7: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/7.jpg)
Directory
Add-on must be publicly available in Vaadin Directory
with link to source and demo.
Privacy: Public Deadline: Sun 14:00:00
![Page 8: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/8.jpg)
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
![Page 9: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/9.jpg)
Have FUN!
![Page 10: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/10.jpg)
slides availableat
slideshare.net/joonaslehtinen
![Page 11: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/11.jpg)
Joonas LehtinenVaadin, Founder & CEO
Creating Vaadin Add-on Components
![Page 12: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/12.jpg)
ScopeAdd-on widgets for Vaadin 7 with Maven
Out of scopeThemes, Vaadin 6, Server-side add-ons, data sources
![Page 13: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/13.jpg)
Q & A
ResourcesPointers for more information
TheoryBest practices
PracticeTools
Agenda
![Page 14: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/14.jpg)
Part 1 Theory
![Page 15: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/15.jpg)
NoteThis is a hackathon - we are here to have fun - feel free to break all the best practices
![Page 16: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/16.jpg)
![Page 17: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/17.jpg)
![Page 18: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/18.jpg)
NeedWe can not get
the UX we need with the existing
widgets
![Page 19: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/19.jpg)
Goals• List of • real• quantifiable• requirements• for UX
![Page 20: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/20.jpg)
Nail downthe minimum viable set of supportedbrowser versionswith the customer
![Page 21: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/21.jpg)
Idea =UX [how it is used]+ Tech [how it works]
![Page 22: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/22.jpg)
Always start fromdefined goals -never let idea torule your design
![Page 23: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/23.jpg)
![Page 24: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/24.jpg)
Works with target browsers?
![Page 25: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/25.jpg)
Interactions work with target browsers?
Performance is good enough for target data?
![Page 26: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/26.jpg)
Definition of done for prototype • Includes main use-cases• Works in target browsers• Handles enough data
![Page 27: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/27.jpg)
Never start design or implementation before prototyping browser compatibilityand performance
![Page 28: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/28.jpg)
![Page 29: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/29.jpg)
Design UX and API first. Never continue fromthe prototypeimplementation
![Page 30: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/30.jpg)
Drawing detailedwireframes & mockupsand testing them withusers will savetime later
![Page 31: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/31.jpg)
Shamelessly copy UX.Then your users alreadyknow how to use it.
![Page 32: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/32.jpg)
![Page 33: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/33.jpg)
Aim for multilayereddesign that lets yourusers (developers)change behavior ofyour component
![Page 34: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/34.jpg)
![Page 35: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/35.jpg)
DOM classes and CSS restrictionsmust be documentedto make styling easy
![Page 36: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/36.jpg)
![Page 37: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/37.jpg)
![Page 38: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/38.jpg)
Keep componentproject separatefrom your realapplication project
![Page 39: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/39.jpg)
Demo applicationmust include all featuresand serve as examplefor your users
![Page 40: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/40.jpg)
![Page 41: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/41.jpg)
There is no substitutefor manual testing anduser experience testing
![Page 42: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/42.jpg)
Skip test driven development, but invest in regression testing
![Page 43: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/43.jpg)
Pixel level regression tests take time to set up, but will be worth it
![Page 44: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/44.jpg)
Never trust thatyour changes would notbreak other browsers and skip cross-browser testing
![Page 45: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/45.jpg)
It is impossible to usetoo much time in polishing UX for a reusable component.
![Page 46: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/46.jpg)
![Page 47: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/47.jpg)
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
![Page 48: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/48.jpg)
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
![Page 49: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/49.jpg)
![Page 50: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/50.jpg)
![Page 51: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/51.jpg)
![Page 52: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/52.jpg)
![Page 53: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/53.jpg)
![Page 54: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/54.jpg)
![Page 55: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/55.jpg)
Try out my Spreadsheet!vaadin.com/addon/spreadsheet
![Page 56: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/56.jpg)
https://github.com/jojule/spreadsheet/issues
![Page 57: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/57.jpg)
![Page 58: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/58.jpg)
![Page 59: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/59.jpg)
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
![Page 60: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/60.jpg)
Part 2 Practice
![Page 61: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/61.jpg)
Unique name
Vaadin XYZ
XYZ for Vaadin
[Use some time for the name, it is really really important]
Naming
![Page 62: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/62.jpg)
Communication 1/3
server
client
Component
Widget
Connector
RPC
State
![Page 63: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/63.jpg)
![Page 64: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/64.jpg)
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
![Page 65: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/65.jpg)
Communication 3/3
http://demo.vaadin.com/sampler/#foundation/state
http://demo.vaadin.com/sampler/#foundation/rpc
![Page 66: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/66.jpg)
Creating a project (1/2)vaadin-archetype-widget
1
3
2
![Page 67: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/67.jpg)
Creating a project (2/2)
Server-side Component
Client-side Widget
Connector
Built in widget stylesThemeDemo
Documentation
![Page 68: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/68.jpg)
Packaging
1
![Page 69: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/69.jpg)
Debugging server-side
1
2
3
![Page 70: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/70.jpg)
Debuggingclient-side
14
3
2
![Page 71: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/71.jpg)
Debuggingclient-side(superdev)
1
4
5
2
<set-configuration-property name="devModeRedirectEnabled" value="true" />
DemoWidgetSet.gwt.xml
3
http://localhost:8080/foo/?superdevmode
![Page 72: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/72.jpg)
Publishing source
1
3
git init . 1
or
2
git commit -a
4
![Page 73: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/73.jpg)
Publishing demo
Check: DemoWidgetSet.gwt.xml1
2
3
4
5
6
http://joonas.jelastic.servint.net/ttcb/
7
![Page 74: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/74.jpg)
Publishing packaging
Set version in pom.xml1
2
3
Upload yourcomponent.zipfrom yourcomponent/target
4
![Page 75: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/75.jpg)
Part 3 Resources
![Page 76: Hackathon - Building vaadin add on components](https://reader033.fdocuments.us/reader033/viewer/2022051513/546276d1b1af9f86228b5050/html5/thumbnails/76.jpg)
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