best development practices for gwt web applications

BEST DEVELOPMENT PRACTICES FOR GWT WEB APPLICATIONSJULIEN DRAMAIX

GWT.create 2015

Julien DramaixSoftware Engineer

at Arcbees

+JulienDramaix@jDramaix

MOTIVATIONS

GWT BEST PRACTICES

AVOID WIDGETSAS MUCH AS YOU CAN

BEST PRACTICE 1

WIDGETSARE HEAVY.

BECAUSE

TAKE CONTROL OF YOUR HTML!

Full Event Mechanism

AVOID WIDGETS AS MUCH AS YOU CAN

Even if you don’t need it

AVOID WIDGETS AS MUCH AS YOU CAN

Full Event Mechanism

How to attachevent handlerto elements ?

AVOID WIDGETS AS MUCH AS YOU CAN

Maybe add gwtquery examples

“Speed up your GWT coding with gQuery” by Manuel Carrasco Moñino.

-Tomorrow 10:00 Room 3

When touse widgets

To encapsulate complex component to reuse

» Prefer PresenterWidget if the component has a lot of business logic.

» In the future: Web Components.

AVOID WIDGETS AS MUCH AS YOU CAN

Cell widgets (CellTable, CellList…)

HtmlPanel

AVOID WIDGETS AS MUCH AS YOU CAN

Exceptions

EMBRACE BROWSER HISTORY

BEST PRACTICE 2

Let the usersuse the back button !

EMBRACE BROWSER HISTORY

Let the usersrefresh the page !

EMBRACE BROWSER HISTORY

The url token should contains enough information to determine the state of the app

EMBRACE BROWSER HISTORY

Implement thatat the beginning.

EMBRACE BROWSER HISTORY

USE ANEVENT BUS

BEST PRACTICE 3

Fight spaghetti code !

USE AN EVENT BUS

Alwaysbe decoupling

USE DEPENDENCY INJECTION

BEST PRACTICE 4

USEMVP PATTERN

BEST PRACTICE 5

USE MVP PATTERN

MODEL

PRESENTER

VIEW

USE MVP PATTERN

Your presenters will contain your business logic

USE MVP PATTERN

Your presenters don’t know anything about DOM elements and widgets

USE MVP PATTERN

Your views must be as dumb as possible

Embracebest practices

GWTP

A lot of interesting features

➔ Presenter Lifecycle➔ Presenter Widget➔ Nested Presenter➔ Popup Presenter➔ URL Parameters➔ Route-Place-Tokens➔ Navigation Confirmation➔ Presenter Gatekeeper➔ REST-dispatch➔ RPC-dispatch

GWTP

“How to improve your productivity using GWTP” by Christian Goudreau.

-Tomorrow 10:00 Room 2

USE CSS AS MUCH AS YOU CAN

BEST PRACTICE 6

Use CssResource with GSS.

USE CSS AS MUCH AS YOU CAN

Prefer gss files overUiBinder inline style.

USE CSS AS MUCH AS YOU CAN

Keep your CSSclean.

USE CSS AS MUCH AS YOU CAN

Remove unused styles.

LOAD EVERYTHING YOU CAN IN THE HTMLPAGE

BEST PRACTICE 6

Inject static datain javascript arraysin your html page

LOAD EVERYTHING YOU CAN

Use Dictionnaryto read them

LOAD EVERYTHING YOU CAN

Minimize the number of requestsneeded to load the app

LOAD EVERYTHING YOU CAN

UNIT TESTS

MVP and Dependency injectionTests are now easy to write

UNIT TESTS

Test each protected and publicmethods of your presenters

UNIT TESTS

CODE REVIEWS

IMPROVEQUALITYOF YOUR CODE

CODE REVIEWS

DETECT BUGSEARLIER

CODE REVIEWS

A WAY TO LEARNFROMYOUR PEERS

CODE REVIEWS

WEB BASED CODE REVIEWSYSTEM

CODE REVIEWS

GITHUB STASH BITBUCKET GERRIT

CODE REVIEWSBEST PRACTICES

CODE REVIEWS

TAKE CONTROL OF YOUR HTML!USE A STYLE GUIDE !

Address all commentsbefore merging

CODE REVIEW BEST PRACTICE

CONTINUOUSINTEGRATION

THE FIRST PERSON TODO CODE REVIEWIS YOUR CI SERVER

CONTINUOUS INTEGRATION

ENFORCE STYLE GUIDE WITHCHECKSTYLE

CONTINUOUS INTEGRATION

DEVELOPMENTPROCESS

Designer

Web Integrators

Developpers

SUCCESS

THANK YOU

THANK YOU

please rate this presentation at gwtcreate.com/agenda

Julien DramaixSoftware Engineer

at Arcbees

+JulienDramaix@jDramaix

QUESTIONS ?