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

1. BEST DEVELOPMENT
PRACTICES
FOR GWT WEB APPLICATIONS
CHRISTIAN GOUDREAU
NOVEMBER 11th 2015

2. Christian Goudreau
BEE-EO
+ChristianGoudreau
@imchrisgoudreau

3. MOTIVATIONS

4. GWT
BEST PRACTICES

5. AVOID WIDGETS
AS MUCH
AS YOU CAN
BEST PRACTICE 1

6. WIDGETS
ARE HEAVY.
BECAUSE

8. TAKE CONTROL
OF YOUR HTML!

12. Full Event
Mechanism
AVOID WIDGETS AS MUCH AS YOU CAN

13. Even if you don’t need it
AVOID WIDGETS AS MUCH AS YOU CAN
Full Event
Mechanism

14. How to attach event handler
to elements ?
AVOID WIDGETS AS MUCH AS YOU CAN

16. Maybe add gwtquery examples

17. 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/

18. Cell widgets (CellTable, CellList…)
HtmlPanel
SimplePanel -> ReplacePanel
AVOID WIDGETS AS MUCH AS YOU CAN
Exceptions

19. EMBRACE
BROWSER HISTORY
BEST PRACTICE 2

20. Let the users
use the back button !
EMBRACE BROWSER HISTORY

21. EMBRACE BROWSER HISTORY
Let the users
refresh the page !

22. EMBRACE BROWSER HISTORY
The url token should contain
enough information to determine
the state of the app

23. EMBRACE BROWSER HISTORY
Implement that
at the beginning.

24. USE AN
EVENT BUS
BEST PRACTICE 3

25. USE AN EVENT BUS
Always
be decoupling
Fight spaghetti code !

26. USE
DEPENDENCY
INJECTION
BEST PRACTICE 4

27. USE
MVP PATTERN
BEST PRACTICE 5

28. USE MVP PATTERN

29. USE MVP PATTERN
Your presenters will contain
your business logic

30. USE MVP PATTERN
Your presenters
don’t know anything about
DOM elements and widgets

31. USE MVP PATTERN
Your views must be
as dumb as possible

33. Embrace
best practices
GWTP

34. 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

35. USE CSS
AS MUCH AS YOU CAN
BEST PRACTICE 6

36. Use CssResource
with GSS.
USE CSS AS MUCH AS YOU CAN

37. Prefer gss files over
UiBinder inline style.
USE CSS AS MUCH AS YOU CAN

38. Keep your CSS
clean.
USE CSS AS MUCH AS YOU CAN
Remove unused styles.
Use a code style even
for your CSS!

39. LOAD EVERYTHING
YOU CAN
IN THE HTML PAGE
BEST PRACTICE 7

40. Inject static data in javascript arrays
in your html page
LOAD EVERYTHING YOU CAN

41. LOAD EVERYTHING YOU CAN
Use Dictionnary
to read them

42. Minimize the number
of requests
needed to load the app
LOAD EVERYTHING YOU CAN

43. HOMEGROWN
FRAMEWORK
BEST PRACTICE 8

44. Build reusable components
for every visual artifacts
Atomic design
HOMEGROWN FRAMEWORK

45. We’re not designing pages,
we’re designing systems
of components. — Stephen Hay
HOMEGROWN FRAMEWORK

46. UNIT TESTS
BEST PRACTICE 9

47. MVP and Dependency injection
Tests are now easy to write
UNIT TESTS

48. Test each protected and public
methods of your presenters.
UNIT TESTS

54. JUKITO

55. CODE REVIEW
BEST PRACTICE 10 - A

56. Improve quality
of your code
CODE REVIEW

57. Detect Bugs
earlier
CODE REVIEW

58. A way to learn
from your peers
CODE REVIEW

59. Web based
code review system
CODE REVIEW

60. GITHUB STASH BITBUCKET GERRIT

61. CODE REVIEWS
BEST PRACTICES
BEST PRACTICE 10 - B

63. TAKE CONTROL
OF YOUR HTML!USE A STYLE GUIDE !

64. Address
all comments
before merging
CODE REVIEW - BEST PRACTICE

65. CONTINUOUS
INTEGRATION
BEST PRACTICE 11

67. The first
to do code review
is your CI Server
CONTINOUS INTEGRATION

69. Enforce
checkstyle
CONTINOUS INTEGRATION

70. DEVELOPMENT PROCESS
BEST PRACTICE 12

73. Designer

74. Web Integrators

75. Developpers

80. SUCCESS

81. THANK YOU

82. QUESTIONS ?