gwtcon 2015 - best development practices for gwt web applications
TRANSCRIPT
BEST DEVELOPMENT PRACTICES FOR GWT WEB APPLICATIONSCHRISTIAN GOUDREAU
NOVEMBER 11th 2015
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 attach event handlerto elements ?
AVOID WIDGETS AS MUCH AS YOU CAN
Maybe add gwtquery examples
When to use widgets
To encapsulate complex component to reuse» Try to simplify your HTML and use CSS
AVOID WIDGETS AS MUCH AS YOU CAN
https://hacks.mozilla.org/2015/06/the-state-of-web-components/
Cell widgets (CellTable, CellList…) HtmlPanelSimplePanel -> ReplacePanel
AVOID WIDGETS AS MUCH AS YOU CAN
Exceptions
EMBRACEBROWSER HISTORY
BEST PRACTICE 2
Let the usersuse the back button !
EMBRACE BROWSER HISTORY
EMBRACE BROWSER HISTORY
Let the usersrefresh the page !
EMBRACE BROWSER HISTORY
The url token should containenough information to determinethe state of the app
EMBRACE BROWSER HISTORY
Implement thatat the beginning.
USE ANEVENT BUS
BEST PRACTICE 3
USE AN EVENT BUS
Alwaysbe decoupling
Fight spaghetti code !
USE DEPENDENCY INJECTION
BEST PRACTICE 4
USEMVP PATTERN
BEST PRACTICE 5
USE MVP PATTERN
USE MVP PATTERN
Your presenters will containyour business logic
USE MVP PATTERN
Your presenters don’t know anything aboutDOM elements and widgets
USE MVP PATTERN
Your views must beas dumb as possible
Embracebest practices
GWTP
A lot ofinterestingfeatures
GWTP
- Presenter Lifecycle- Presenter Widget- Nested Presenter- Popup Presenter- URL Parameters- Route-Place-Tokens- Navigation Confirmation- Presenter Gatekeeper- REST-dispatch- RPC-dispatch
USE CSS AS MUCH AS YOU CAN
BEST PRACTICE 6
Use CssResourcewith 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.Use a code style even for your CSS!
LOAD EVERYTHING YOU CAN IN THE HTML PAGE
BEST PRACTICE 7
Inject static data in javascript arrays in your html page
LOAD EVERYTHING YOU CAN
LOAD EVERYTHING YOU CAN
Use Dictionnaryto read them
Minimize the number of requestsneeded to load the app
LOAD EVERYTHING YOU CAN
HOMEGROWN FRAMEWORK
BEST PRACTICE 8
Build reusable components for every visual artifacts Atomic design
HOMEGROWN FRAMEWORK
We’re not designing pages, we’re designing systems of components. — Stephen Hay
HOMEGROWN FRAMEWORK
UNIT TESTS
BEST PRACTICE 9
MVP and Dependency injectionTests are now easy to write
UNIT TESTS
Test each protected and publicmethods of your presenters.
UNIT TESTS
JUKITO
CODE REVIEW
BEST PRACTICE 10 - A
Improve qualityof your code
CODE REVIEW
Detect Bugsearlier
CODE REVIEW
A way to learn from your peers
CODE REVIEW
Web based code review system
CODE REVIEW
GITHUB STASH BITBUCKET GERRIT
CODE REVIEWSBEST PRACTICES
BEST PRACTICE 10 - B
TAKE CONTROL OF YOUR HTML!USE A STYLE GUIDE !
Addressall commentsbefore merging
CODE REVIEW - BEST PRACTICE
CONTINUOUS INTEGRATION
BEST PRACTICE 11
The first to do code reviewis your CI Server
CONTINOUS INTEGRATION
Enforce checkstyle
CONTINOUS INTEGRATION
DEVELOPMENT PROCESS
BEST PRACTICE 12
Designer
Web Integrators
Developpers
SUCCESS
THANK YOU
QUESTIONS ?