Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BEST DEVELOPMENT
PRACTICES
FOR GWT WEB APPLICATIONS
CHRISTIAN GOUDREAU
NOVEMBER 11th 2015
Christian Goudreau
BEE-EO
+ChristianGoudreau
@imchrisgoudreau
MOTIVATIONS
GWT
BEST PRACTICES
AVOID WIDGETS
AS MUCH
AS YOU CAN
BEST PRACTICE 1
WIDGETS
ARE 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 handler
to 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 MUC...
Cell widgets (CellTable, CellList…)
HtmlPanel
SimplePanel -> ReplacePanel
AVOID WIDGETS AS MUCH AS YOU CAN
Exceptions
EMBRACE
BROWSER HISTORY
BEST PRACTICE 2
Let the users
use the back button !
EMBRACE BROWSER HISTORY
EMBRACE BROWSER HISTORY
Let the users
refresh the page !
EMBRACE BROWSER HISTORY
The url token should contain
enough information to determine
the state of the app
EMBRACE BROWSER HISTORY
Implement that
at the beginning.
USE AN
EVENT BUS
BEST PRACTICE 3
USE AN EVENT BUS
Always
be decoupling
Fight spaghetti code !
USE
DEPENDENCY
INJECTION
BEST PRACTICE 4
USE
MVP PATTERN
BEST PRACTICE 5
USE MVP PATTERN
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
Embrace
best practices
GWTP
A lot of
interesting
features
GWTP
- Presenter Lifecycle
- Presenter Widget
- Nested Presenter
- Popup Presenter
- URL Par...
USE CSS
AS MUCH AS YOU CAN
BEST PRACTICE 6
Use CssResource
with GSS.
USE CSS AS MUCH AS YOU CAN
Prefer gss files over
UiBinder inline style.
USE CSS AS MUCH AS YOU CAN
Keep your CSS
clean.
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 Dictionnary
to read them
Minimize the number
of requests
needed 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 injection
Tests are now easy to write
UNIT TESTS
Test each protected and public
methods of your presenters.
UNIT TESTS
JUKITO
CODE REVIEW
BEST PRACTICE 10 - A
Improve quality
of your code
CODE REVIEW
Detect Bugs
earlier
CODE REVIEW
A way to learn
from your peers
CODE REVIEW
Web based
code review system
CODE REVIEW
GITHUB STASH BITBUCKET GERRIT
CODE REVIEWS
BEST PRACTICES
BEST PRACTICE 10 - B
TAKE CONTROL
OF YOUR HTML!USE A STYLE GUIDE !
Address
all comments
before merging
CODE REVIEW - BEST PRACTICE
CONTINUOUS
INTEGRATION
BEST PRACTICE 11
The first
to do code review
is your CI Server
CONTINOUS INTEGRATION
Enforce
checkstyle
CONTINOUS INTEGRATION
DEVELOPMENT PROCESS
BEST PRACTICE 12
Designer
Web Integrators
Developpers
SUCCESS
THANK YOU
QUESTIONS ?
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
Upcoming SlideShare
Loading in …5
×

GWTcon 2015 - Best development practices for GWT web applications

2,109 views

Published on

Best development practices for GWT web applications
Conference by Christian Goudreau, at GWT Con 2015.

Christian Goudreau is BEE-EO AND CO-FOUNDER
at Arcbees.

You can follow Christian on Twitter : @imchrisgoudreau

Published in: Technology
  • Be the first to comment

GWTcon 2015 - Best development practices for GWT web applications

  1. 1. BEST DEVELOPMENT PRACTICES FOR GWT WEB APPLICATIONS CHRISTIAN GOUDREAU NOVEMBER 11th 2015
  2. 2. Christian Goudreau BEE-EO +ChristianGoudreau @imchrisgoudreau
  3. 3. MOTIVATIONS
  4. 4. GWT BEST PRACTICES
  5. 5. AVOID WIDGETS AS MUCH AS YOU CAN BEST PRACTICE 1
  6. 6. WIDGETS ARE HEAVY. BECAUSE
  7. 7. TAKE CONTROL OF YOUR HTML!
  8. 8. Full Event Mechanism AVOID WIDGETS AS MUCH AS YOU CAN
  9. 9. Even if you don’t need it AVOID WIDGETS AS MUCH AS YOU CAN Full Event Mechanism
  10. 10. How to attach event handler to elements ? AVOID WIDGETS AS MUCH AS YOU CAN
  11. 11. Maybe add gwtquery examples
  12. 12. 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/
  13. 13. Cell widgets (CellTable, CellList…) HtmlPanel SimplePanel -> ReplacePanel AVOID WIDGETS AS MUCH AS YOU CAN Exceptions
  14. 14. EMBRACE BROWSER HISTORY BEST PRACTICE 2
  15. 15. Let the users use the back button ! EMBRACE BROWSER HISTORY
  16. 16. EMBRACE BROWSER HISTORY Let the users refresh the page !
  17. 17. EMBRACE BROWSER HISTORY The url token should contain enough information to determine the state of the app
  18. 18. EMBRACE BROWSER HISTORY Implement that at the beginning.
  19. 19. USE AN EVENT BUS BEST PRACTICE 3
  20. 20. USE AN EVENT BUS Always be decoupling Fight spaghetti code !
  21. 21. USE DEPENDENCY INJECTION BEST PRACTICE 4
  22. 22. USE MVP PATTERN BEST PRACTICE 5
  23. 23. USE MVP PATTERN
  24. 24. USE MVP PATTERN Your presenters will contain your business logic
  25. 25. USE MVP PATTERN Your presenters don’t know anything about DOM elements and widgets
  26. 26. USE MVP PATTERN Your views must be as dumb as possible
  27. 27. Embrace best practices GWTP
  28. 28. A lot of interesting features GWTP - Presenter Lifecycle - Presenter Widget - Nested Presenter - Popup Presenter - URL Parameters - Route-Place-Tokens - Navigation Confirmation - Presenter Gatekeeper - REST-dispatch - RPC-dispatch
  29. 29. USE CSS AS MUCH AS YOU CAN BEST PRACTICE 6
  30. 30. Use CssResource with GSS. USE CSS AS MUCH AS YOU CAN
  31. 31. Prefer gss files over UiBinder inline style. USE CSS AS MUCH AS YOU CAN
  32. 32. Keep your CSS clean. USE CSS AS MUCH AS YOU CAN Remove unused styles. Use a code style even for your CSS!
  33. 33. LOAD EVERYTHING YOU CAN IN THE HTML PAGE BEST PRACTICE 7
  34. 34. Inject static data in javascript arrays in your html page LOAD EVERYTHING YOU CAN
  35. 35. LOAD EVERYTHING YOU CAN Use Dictionnary to read them
  36. 36. Minimize the number of requests needed to load the app LOAD EVERYTHING YOU CAN
  37. 37. HOMEGROWN FRAMEWORK BEST PRACTICE 8
  38. 38. Build reusable components for every visual artifacts Atomic design HOMEGROWN FRAMEWORK
  39. 39. We’re not designing pages, we’re designing systems of components. — Stephen Hay HOMEGROWN FRAMEWORK
  40. 40. UNIT TESTS BEST PRACTICE 9
  41. 41. MVP and Dependency injection Tests are now easy to write UNIT TESTS
  42. 42. Test each protected and public methods of your presenters. UNIT TESTS
  43. 43. JUKITO
  44. 44. CODE REVIEW BEST PRACTICE 10 - A
  45. 45. Improve quality of your code CODE REVIEW
  46. 46. Detect Bugs earlier CODE REVIEW
  47. 47. A way to learn from your peers CODE REVIEW
  48. 48. Web based code review system CODE REVIEW
  49. 49. GITHUB STASH BITBUCKET GERRIT
  50. 50. CODE REVIEWS BEST PRACTICES BEST PRACTICE 10 - B
  51. 51. TAKE CONTROL OF YOUR HTML!USE A STYLE GUIDE !
  52. 52. Address all comments before merging CODE REVIEW - BEST PRACTICE
  53. 53. CONTINUOUS INTEGRATION BEST PRACTICE 11
  54. 54. The first to do code review is your CI Server CONTINOUS INTEGRATION
  55. 55. Enforce checkstyle CONTINOUS INTEGRATION
  56. 56. DEVELOPMENT PROCESS BEST PRACTICE 12
  57. 57. Designer
  58. 58. Web Integrators
  59. 59. Developpers
  60. 60. SUCCESS
  61. 61. THANK YOU
  62. 62. QUESTIONS ?

×