Hackathon - Building vaadin add on components

transcript

HackathonVaadin & Boost Turku19-21.4.2013http://boostvaadinhackathon.eventbrite.com/

Create an awesomeVaadin add-on!

Rules1-4

personteam

start fromscratch

released invaadindirectory

onlinedemo

Name neededSend team members (name,

email) and team name to joonas@vaadin.com

Deadline: FridayPrivacy: Public

From scratch

Send code repository URLto 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

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

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 git@github.com: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 git@github.com: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

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

Creating a project (2/2)

Server-side Component

Client-side Widget

Connector

Built in widget stylesThemeDemo

Documentation

Packaging

Debugging server-side

Debuggingclient-side

Debuggingclient-side(superdev)

<set-configuration-property name="devModeRedirectEnabled" value="true" />

DemoWidgetSet.gwt.xml

http://localhost:8080/foo/?superdevmode

Publishing source

git init . 1

git commit -a

Publishing demo

Check: DemoWidgetSet.gwt.xml1

http://joonas.jelastic.servint.net/ttcb/

Publishing packaging

Set version in pom.xml1

Upload yourcomponent.zipfrom yourcomponent/target

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

Hackathon - Building vaadin add on components

Technology