83
BEST DEVELOPMENT PRACTICES FOR GWT WEB APPLICATIONS JULIEN DRAMAIX GWT.create 2015

Best development practices for gwt web applications

  • Upload
    arcbees

  • View
    431

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Best development practices for gwt web applications

BEST DEVELOPMENT PRACTICES FOR GWT WEB APPLICATIONSJULIEN DRAMAIX

GWT.create 2015

Page 2: Best development practices for gwt web applications

Julien DramaixSoftware Engineer

at Arcbees

+JulienDramaix@jDramaix

Page 3: Best development practices for gwt web applications

MOTIVATIONS

Page 4: Best development practices for gwt web applications

GWT BEST PRACTICES

Page 5: Best development practices for gwt web applications

AVOID WIDGETSAS MUCH AS YOU CAN

BEST PRACTICE 1

Page 6: Best development practices for gwt web applications

WIDGETSARE HEAVY.

BECAUSE

Page 7: Best development practices for gwt web applications
Page 8: Best development practices for gwt web applications

TAKE CONTROL OF YOUR HTML!

Page 9: Best development practices for gwt web applications
Page 10: Best development practices for gwt web applications
Page 11: Best development practices for gwt web applications
Page 12: Best development practices for gwt web applications

Full Event Mechanism

AVOID WIDGETS AS MUCH AS YOU CAN

Page 13: Best development practices for gwt web applications

Even if you don’t need it

AVOID WIDGETS AS MUCH AS YOU CAN

Full Event Mechanism

Page 14: Best development practices for gwt web applications

How to attachevent handlerto elements ?

AVOID WIDGETS AS MUCH AS YOU CAN

Page 15: Best development practices for gwt web applications
Page 16: Best development practices for gwt web applications

Maybe add gwtquery examples

Page 17: Best development practices for gwt web applications

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

-Tomorrow 10:00 Room 3

Page 18: Best development practices for gwt web applications

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

Page 19: Best development practices for gwt web applications

Cell widgets (CellTable, CellList…)

HtmlPanel

AVOID WIDGETS AS MUCH AS YOU CAN

Exceptions

Page 20: Best development practices for gwt web applications

EMBRACE BROWSER HISTORY

BEST PRACTICE 2

Page 21: Best development practices for gwt web applications

Let the usersuse the back button !

EMBRACE BROWSER HISTORY

Page 22: Best development practices for gwt web applications

Let the usersrefresh the page !

EMBRACE BROWSER HISTORY

Page 23: Best development practices for gwt web applications

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

EMBRACE BROWSER HISTORY

Page 24: Best development practices for gwt web applications

Implement thatat the beginning.

EMBRACE BROWSER HISTORY

Page 25: Best development practices for gwt web applications

USE ANEVENT BUS

BEST PRACTICE 3

Page 26: Best development practices for gwt web applications

Fight spaghetti code !

USE AN EVENT BUS

Alwaysbe decoupling

Page 27: Best development practices for gwt web applications

USE DEPENDENCY INJECTION

BEST PRACTICE 4

Page 28: Best development practices for gwt web applications

USEMVP PATTERN

BEST PRACTICE 5

Page 29: Best development practices for gwt web applications

USE MVP PATTERN

MODEL

PRESENTER

VIEW

Page 30: Best development practices for gwt web applications

USE MVP PATTERN

Your presenters will contain your business logic

Page 31: Best development practices for gwt web applications

USE MVP PATTERN

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

Page 32: Best development practices for gwt web applications

USE MVP PATTERN

Your views must be as dumb as possible

Page 33: Best development practices for gwt web applications
Page 34: Best development practices for gwt web applications

Embracebest practices

GWTP

Page 35: Best development practices for gwt web applications

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

Page 36: Best development practices for gwt web applications

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

-Tomorrow 10:00 Room 2

Page 37: Best development practices for gwt web applications

USE CSS AS MUCH AS YOU CAN

BEST PRACTICE 6

Page 38: Best development practices for gwt web applications

Use CssResource with GSS.

USE CSS AS MUCH AS YOU CAN

Page 39: Best development practices for gwt web applications

Prefer gss files overUiBinder inline style.

USE CSS AS MUCH AS YOU CAN

Page 40: Best development practices for gwt web applications

Keep your CSSclean.

USE CSS AS MUCH AS YOU CAN

Remove unused styles.

Page 41: Best development practices for gwt web applications

LOAD EVERYTHING YOU CAN IN THE HTMLPAGE

BEST PRACTICE 6

Page 42: Best development practices for gwt web applications

Inject static datain javascript arraysin your html page

LOAD EVERYTHING YOU CAN

Page 43: Best development practices for gwt web applications

Use Dictionnaryto read them

LOAD EVERYTHING YOU CAN

Page 44: Best development practices for gwt web applications

Minimize the number of requestsneeded to load the app

LOAD EVERYTHING YOU CAN

Page 45: Best development practices for gwt web applications

UNIT TESTS

Page 46: Best development practices for gwt web applications

MVP and Dependency injectionTests are now easy to write

UNIT TESTS

Page 47: Best development practices for gwt web applications

Test each protected and publicmethods of your presenters

UNIT TESTS

Page 48: Best development practices for gwt web applications
Page 49: Best development practices for gwt web applications
Page 50: Best development practices for gwt web applications
Page 51: Best development practices for gwt web applications
Page 52: Best development practices for gwt web applications
Page 53: Best development practices for gwt web applications
Page 54: Best development practices for gwt web applications

CODE REVIEWS

Page 55: Best development practices for gwt web applications

IMPROVEQUALITYOF YOUR CODE

CODE REVIEWS

Page 56: Best development practices for gwt web applications

DETECT BUGSEARLIER

CODE REVIEWS

Page 57: Best development practices for gwt web applications

A WAY TO LEARNFROMYOUR PEERS

CODE REVIEWS

Page 58: Best development practices for gwt web applications

WEB BASED CODE REVIEWSYSTEM

CODE REVIEWS

Page 59: Best development practices for gwt web applications

GITHUB STASH BITBUCKET GERRIT

Page 60: Best development practices for gwt web applications

CODE REVIEWSBEST PRACTICES

CODE REVIEWS

Page 61: Best development practices for gwt web applications
Page 62: Best development practices for gwt web applications

TAKE CONTROL OF YOUR HTML!USE A STYLE GUIDE !

Page 63: Best development practices for gwt web applications

Address all commentsbefore merging

CODE REVIEW BEST PRACTICE

Page 64: Best development practices for gwt web applications

CONTINUOUSINTEGRATION

Page 65: Best development practices for gwt web applications
Page 66: Best development practices for gwt web applications

THE FIRST PERSON TODO CODE REVIEWIS YOUR CI SERVER

CONTINUOUS INTEGRATION

Page 67: Best development practices for gwt web applications
Page 68: Best development practices for gwt web applications

ENFORCE STYLE GUIDE WITHCHECKSTYLE

CONTINUOUS INTEGRATION

Page 69: Best development practices for gwt web applications

DEVELOPMENTPROCESS

Page 70: Best development practices for gwt web applications
Page 71: Best development practices for gwt web applications
Page 72: Best development practices for gwt web applications

Designer

Page 73: Best development practices for gwt web applications

Web Integrators

Page 74: Best development practices for gwt web applications

Developpers

Page 75: Best development practices for gwt web applications
Page 76: Best development practices for gwt web applications
Page 77: Best development practices for gwt web applications
Page 78: Best development practices for gwt web applications
Page 79: Best development practices for gwt web applications

SUCCESS

Page 80: Best development practices for gwt web applications

THANK YOU

Page 81: Best development practices for gwt web applications

THANK YOU

please rate this presentation at gwtcreate.com/agenda

Page 82: Best development practices for gwt web applications

Julien DramaixSoftware Engineer

at Arcbees

+JulienDramaix@jDramaix

Page 83: Best development practices for gwt web applications

QUESTIONS ?