Hackathon - Building vaadin add on components


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
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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.