0
HackathonVaadin & Boost Turku19-21.4.2013http://boostvaadinhackathon.eventbrite.com/
Create an awesomeVaadin add-on!Goal
Rules1-4personteamstart fromscratchreleased invaadindirectoryonlinedemo
TeamName neededSend team members (name,email) and team name tojoonas@vaadin.comDeadline: FridayPrivacy: Public
From scratchSend code repository URLto joonas@vaadin.com andcommit regularly throughoutthe event.Deadline: FridayPrivacy: ...
Online demoUsable on browsers youchoose (list them in add-ondescription) on a public URLPrivacy: Public Deadline: Sun 14:0...
DirectoryAdd-on must be publiclyavailable in Vaadin Directorywith link to source and demo.Privacy: Public Deadline: Sun 14...
ScheduleFriday17:00 Open sign-in (all participants/teams must sign in)18:00 Opening statements and practicalities (Matias ...
Have FUN!
slides availableatslideshare.net/joonaslehtinen
Joonas LehtinenVaadin, Founder & CEOCreating VaadinAdd-on Components
ScopeAdd-on widgets for Vaadin7 with MavenOut of scopeThemes, Vaadin 6, Server-side add-ons, data sources
Q & AResourcesPointers for more informationTheoryBest practicesPracticeToolsAgenda
Part 1 Theory
NoteThis is a hackathon - we arehere to have fun - feel freeto break all the best practices
NeedWe can not getthe UX we needwith the existingwidgets
Goals• List of• real• quantifiable• requirements• for UX
Nail downthe minimum viableset 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 withtarget browsers?
Interactionswork with targetbrowsers?Performance isgood enough fortarget data?
Definition of donefor prototype• Includes main use-cases• Works in target browsers• Handles enough data
Never start designor implementationbefore prototypingbrowser 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 usersalreadyknow how to use it.
Aim for multilayereddesign that lets yourusers (developers)change behavior ofyour component
DOM classes andCSS restrictionsmust be documentedto make styling easy
Keep componentproject separatefrom your realapplication project
Demo applicationmust include allfeaturesand serve as examplefor your users
There is no substitutefor manual testing anduser experience testing
Skip test drivendevelopment, but investin regression testing
Pixel level regressiontests take time to setup, but will be worth it
Never trust thatyour changes would notbreak other browsersand skip cross-browsertesting
It is impossible to usetoo much time inpolishing UX for areusable component.
commit 7453f467b1Latest commit to the master branchUpdate README.markdownjojule authored 4 hours agoTags Downloadsjojulejo...
README.markdownREADME.markdownSpreadsheet for VaadinThe widget shows a spreadsheet - either from XLS file or by setting th...
Try out my Spreadsheet!vaadin.com/addon/spreadsheet
https://github.com/jojule/spreadsheet/issues
Issuereported byactual user!Fix immediately and thankthe user who reported itFix after 6 months,maybe...Ignore. wont-fix in...
Part 2 Practice
Unique nameVaadin XYZXYZ for Vaadin[Use some time for the name, it is really really important]Naming
Communication 1/3serverclientComponentWidgetConnectorRPCState
Communication 2/3public interface ButtonRpc extends ServerRpc {public void click(MouseEventDetails details);}private Butto...
Communication 3/3http://demo.vaadin.com/sampler/#foundation/statehttp://demo.vaadin.com/sampler/#foundation/rpc
Creating a project (1/2)vaadin-archetype-widget132
Creating a project (2/2)Server-side ComponentClient-side WidgetConnectorBuilt in widget stylesThemeDemoDocumentation
Packaging1
Debugging server-side123
Debuggingclient-side1432
Debuggingclient-side(superdev)1452<set-configuration-propertyname="devModeRedirectEnabled"value="true" />DemoWidgetSet.gwt...
Publishing source13git init . 1or2git commit -a4
Publishing demoCheck: DemoWidgetSet.gwt.xml123456http://joonas.jelastic.servint.net/ttcb/7
Publishing packagingSet version in pom.xml123Upload yourcomponent.zipfrom yourcomponent/target4
Part 3 Resources
http://vaadin.com/bookhttps://developers.google.com/web-toolkit/doc/latest/DevGuidehttp://caniuse.com/https://vaadin.com/c...
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
Upcoming SlideShare
Loading in...5
×

Hackathon - Building vaadin add on components

1,138

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Hackathon - Building vaadin add on components"

  1. 1. HackathonVaadin & Boost Turku19-21.4.2013http://boostvaadinhackathon.eventbrite.com/
  2. 2. Create an awesomeVaadin add-on!Goal
  3. 3. Rules1-4personteamstart fromscratchreleased invaadindirectoryonlinedemo
  4. 4. TeamName neededSend team members (name,email) and team name tojoonas@vaadin.comDeadline: FridayPrivacy: Public
  5. 5. From scratchSend code repository URLto joonas@vaadin.com andcommit regularly throughoutthe event.Deadline: FridayPrivacy: Public
  6. 6. Online demoUsable on browsers youchoose (list them in add-ondescription) on a public URLPrivacy: Public Deadline: Sun 14:00:00
  7. 7. DirectoryAdd-on must be publiclyavailable in Vaadin Directorywith link to source and demo.Privacy: Public Deadline: Sun 14:00:00
  8. 8. 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 DinnerSaturday11:30 Lunch12:00 Pitch 101 (Toni Perämäki, Boost Turku)12:30 The Hacking continues15:00 Mid-hackathon status check by teams20:00 DinnerSunday10.30 Jury starts interviewing the teams11.30 Lunch14:00 Demo time16:00 Prizes are awarded by the Grand Jury of Destiny
  9. 9. Have FUN!
  10. 10. slides availableatslideshare.net/joonaslehtinen
  11. 11. Joonas LehtinenVaadin, Founder & CEOCreating VaadinAdd-on Components
  12. 12. ScopeAdd-on widgets for Vaadin7 with MavenOut of scopeThemes, Vaadin 6, Server-side add-ons, data sources
  13. 13. Q & AResourcesPointers for more informationTheoryBest practicesPracticeToolsAgenda
  14. 14. Part 1 Theory
  15. 15. NoteThis is a hackathon - we arehere to have fun - feel freeto break all the best practices
  16. 16. NeedWe can not getthe UX we needwith the existingwidgets
  17. 17. Goals• List of• real• quantifiable• requirements• for UX
  18. 18. Nail downthe minimum viableset of supportedbrowser versionswith the customer
  19. 19. Idea=UX [how it is used]+Tech [how it works]
  20. 20. Always start fromdefined goals -never let idea torule your design
  21. 21. Works withtarget browsers?
  22. 22. Interactionswork with targetbrowsers?Performance isgood enough fortarget data?
  23. 23. Definition of donefor prototype• Includes main use-cases• Works in target browsers• Handles enough data
  24. 24. Never start designor implementationbefore prototypingbrowser compatibilityand performance
  25. 25. Design UX and API first.Never continue fromthe prototypeimplementation
  26. 26. Drawing detailedwireframes & mockupsand testing them withusers will savetime later
  27. 27. Shamelessly copy UX.Then your usersalreadyknow how to use it.
  28. 28. Aim for multilayereddesign that lets yourusers (developers)change behavior ofyour component
  29. 29. DOM classes andCSS restrictionsmust be documentedto make styling easy
  30. 30. Keep componentproject separatefrom your realapplication project
  31. 31. Demo applicationmust include allfeaturesand serve as examplefor your users
  32. 32. There is no substitutefor manual testing anduser experience testing
  33. 33. Skip test drivendevelopment, but investin regression testing
  34. 34. Pixel level regressiontests take time to setup, but will be worth it
  35. 35. Never trust thatyour changes would notbreak other browsersand skip cross-browsertesting
  36. 36. It is impossible to usetoo much time inpolishing UX for areusable component.
  37. 37. commit 7453f467b1Latest commit to the master branchUpdate README.markdownjojule authored 4 hours agoTags Downloadsjojulejojule // spreadsheetspreadsheetFiles Commits Branches1 1AdminAdmin UnwatchUnwatch ForkFork Pull RequestPull RequestCodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki Stats & GraphsStats & Graphs00 00 00SSHSSH HTTPHTTP Git Read-OnlyGit Read-Only git@github.com:jojule/spreadsheet.git Read+Write accessSimple spreadsheet component for Vaadin — Read morehttps://vaadin.com/addon/spreadsheet Clone in Mac Clone in Mac ZIPZIPmastermasterbranch:branch: 1historyhistorynamename ageage messagemessagedesign 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.markdownspreadsheet /ExploreExplore GistGist BlogBlog HelpHelp jojulejojuleSearch…35https://github.com/jojule/spreadsheet
  38. 38. README.markdownREADME.markdownSpreadsheet 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.DependenciesApache POI 3.8 - http://poi.apache.org/Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/Release notesInitial release with severe limitations:All columns and rows have fixed sizesNo cell styling is supportedNo graphs are supportedNo merged cells are supportedPerformance for larger spreadsheets is really badOnly one spreadsheet widget is supported on screen at onceLicense & Author
  39. 39. Try out my Spreadsheet!vaadin.com/addon/spreadsheet
  40. 40. https://github.com/jojule/spreadsheet/issues
  41. 41. Issuereported byactual user!Fix immediately and thankthe user who reported itFix after 6 months,maybe...Ignore. wont-fix in best case.(the usual open source way)Support HOWTO
  42. 42. Part 2 Practice
  43. 43. Unique nameVaadin XYZXYZ for Vaadin[Use some time for the name, it is really really important]Naming
  44. 44. Communication 1/3serverclientComponentWidgetConnectorRPCState
  45. 45. Communication 2/3public 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
  46. 46. Communication 3/3http://demo.vaadin.com/sampler/#foundation/statehttp://demo.vaadin.com/sampler/#foundation/rpc
  47. 47. Creating a project (1/2)vaadin-archetype-widget132
  48. 48. Creating a project (2/2)Server-side ComponentClient-side WidgetConnectorBuilt in widget stylesThemeDemoDocumentation
  49. 49. Packaging1
  50. 50. Debugging server-side123
  51. 51. Debuggingclient-side1432
  52. 52. Debuggingclient-side(superdev)1452<set-configuration-propertyname="devModeRedirectEnabled"value="true" />DemoWidgetSet.gwt.xml3http://localhost:8080/foo/?superdevmode
  53. 53. Publishing source13git init . 1or2git commit -a4
  54. 54. Publishing demoCheck: DemoWidgetSet.gwt.xml123456http://joonas.jelastic.servint.net/ttcb/7
  55. 55. Publishing packagingSet version in pom.xml123Upload yourcomponent.zipfrom yourcomponent/target4
  56. 56. Part 3 Resources
  57. 57. http://vaadin.com/bookhttps://developers.google.com/web-toolkit/doc/latest/DevGuidehttp://caniuse.com/https://vaadin.com/chathttps://vaadin.com/forumhttps://vaadin.com/directory
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×