Using GWT and Eclipse to Build Great Mobile Web Apps discusses how to build mobile web applications that provide great user interfaces for any device, optimize the user experience for different form factors and orientations, improve responsiveness, and enable offline usage. Key techniques include using deferred binding and device-specific UIs to optimize for different devices, capturing orientation changes, leveraging MVP to maximize code reuse, bundling resources to reduce requests, code splitting to only load necessary code, and compiler optimizations to reduce code size and improve performance.
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
1.
2.
3. Using GWT and Eclipse to Build Great
Mobile Web Apps
Chris Ramsdale
Product Manager, GWT and Google Plugin for Eclipse
Feedback: http://goo.gl/mn6Y4
Twitter: #io2011 #gwt
5. The Problems
• Mobile devices
– ...have smaller screens
– ...can have different orientations
– ...have slower processors
– ...can be disconnected
4
6. The Solution
• Use GWT and Google's Plugin for Eclipse (GPE) to build great mobile web apps
for iPhone and Android
• And helps you
– ...build great mobile UIs for any form factor
– ...optimize the user experience
– ...make it snappy
– ...work without a connection
5
7. Example App: Cloud Tasks
• Web based task mgmt app
• UIs for Android, iPhone, iPad, and desktop browsers
• Orientation change handling
• Offline support
• Source code available at the end
6
8.
9. • Build great UIs for any form factor
• Optimize the user experience
• Make it snappy
• Work without a connection
10. Build Great Mobile UIs For Any Form Factor
• UI code like you expect it
– Declarative UI layout with UiBinder
• Speed up UI development with WYSIWYG tools
– Using GWT Designer to build great UIs
8
11. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<ui:style>
.addButton {
color: white;
font-size: 18pt;
background: none;
border: none;
text-align: right;
font-weight: bold;
}
</ui:style>
...
</ui:UiBinder>
9
12. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<ui:style>
.addButton {
color: white;
font-size: 18pt;
background: none;
border: none;
text-align: right;
font-weight: bold;
}
</ui:style>
...
</ui:UiBinder>
10
13. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<g:DockLayoutPanel>
<!-- Header -->
<g:north size="32">
<g:HTMLPanel></g:HTMLPanel>
</g:north>
<g:center>
<g:DockLayoutPanel>
<!-- Task List. -->
<g:west size="30">
<g:SimpleLayoutPanel addStyleNames="{style.taskList}"/>
</g:west>
<!-- Content. -->
<g:center>
<g:DeckLayoutPanel></g:DeckLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
11
14. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<g:DockLayoutPanel>
<!-- Header -->
<g:north size="32">
<g:HTMLPanel></g:HTMLPanel>
</g:north>
<g:center>
<g:DockLayoutPanel>
<!-- Task List. -->
<g:west size="30">
<g:SimpleLayoutPanel addStyleNames="{style.taskList}"/>
</g:west>
<!-- Content. -->
<g:center>
<g:DeckLayoutPanel></g:DeckLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
12
15. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
13
16. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<g:DockLayoutPanel>
<!-- Header -->
<g:north size="32">
<g:HTMLPanel></g:HTMLPanel>
</g:north>
<g:center>
<g:DockLayoutPanel>
<!-- Task List. -->
<g:west size="30">
<g:SimpleLayoutPanel addStyleNames="{style.taskList}"/>
</g:west>
<!-- Content. -->
<g:center>
<g:DeckLayoutPanel></g:DeckLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
14
17. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
15
18. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
<ui:UiBinder>
<g:DockLayoutPanel>
<!-- Header -->
<g:north size="32">
<g:HTMLPanel></g:HTMLPanel>
</g:north>
<g:center>
<g:DockLayoutPanel>
<!-- Task List. -->
<g:west size="30">
<g:SimpleLayoutPanel addStyleNames="{style.taskList}"/>
</g:west>
<!-- Content. -->
<g:center>
<g:DeckLayoutPanel></g:DeckLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
16
19. Build Great Mobile UIs For Any Form Factor
UI code like you expect it
17
20. Build Great Mobile UIs For Any Form Factor
Speed up UI development with WYSIWYG tools
18
21. Build Great Mobile UIs For Any Form Factor
Speed up UI development with WYSIWYG tools
19
22. Build Great Mobile UIs For Any Form Factor
Device-specific, declarative UIs
ListViewPhone.ui.xml
ListViewTablet.ui.xml
20
23.
24. • Build great UIs for any form factor
• Optimize the user experience
• Make it snappy
• Work without a connection
25. Optimize the User Experience
• Desktops, tablets, and phones...oh my!
– Deferred binding to sort them out
• Landscape vs. portrait
– Capture and respond to orientation changes
• Icing on the cake
– Maximize code reuse by using the Model-View-Presenter (MVP) design pattern
22
26. Optimize the User Experience
Select the right UI using deferred binding
Deferred what?
23
27. Optimize the User Experience
Deferred binding - optimize for the browser
24
28. Optimize the User Experience
Select the right UI using deferred binding
25
29. Optimize the User Experience
Select the right UI using deferred binding
26
30. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT app config)
<!-- Use ViewFactoryImplMobile for mobile form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplMobile">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="mobile"/>
</replace-with>
27
31. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT app config)
<!-- Use ViewFactoryImplMobile for mobile form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplMobile">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="mobile"/>
</replace-with>
28
32. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT app config)
<!-- Use ViewFactoryImplMobile for tablet form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplTablet">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="tablet"/>
</replace-with>
29
33. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT app config)
<!-- Use ViewFactoryImplMobile for tablet form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplTablet">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="tablet"/>
</replace-with>
30
34. Optimize the User Experience
Select the right UI using deferred binding
FormFactor.gwt.xml
<property-provider name="formfactor">
<![CDATA[
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("ipad") != -1) {
return "tablet";
} else if (ua.indexOf("iphone") != -1 || ) {
return "mobile";
} else if (ua.indexOf("android") != -1) {
// Overly complex hueristic for determining Android form factor
...
}
]]>
</property-provider>
31
35. Optimize the User Experience
Select the right UI using deferred binding
FormFactor.gwt.xml
<property-provider name="formfactor">
<![CDATA[
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("ipad") != -1) {
return "tablet";
} else if (ua.indexOf("iphone") != -1 || ) {
return "mobile";
} else if (ua.indexOf("android") != -1) {
// Overly complex hueristic for determining Android form factor
...
}
]]>
</property-provider>
32
36. Optimize the User Experience
Select the right UI using deferred binding
FormFactor.gwt.xml
<property-provider name="formfactor">
<![CDATA[
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("ipad") != -1) {
return "tablet";
} else if (ua.indexOf("iphone") != -1 || ) {
return "mobile";
} else if (ua.indexOf("android") != -1) {
// Overly complex hueristic for determining Android form factor
...
}
]]>
</property-provider>
33
37. Optimize the User Experience
Select the right UI using deferred binding
FormFactor.gwt.xml
<property-provider name="formfactor">
<![CDATA[
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("ipad") != -1) {
return "tablet";
} else if (ua.indexOf("iphone") != -1 || ) {
return "mobile";
} else if (ua.indexOf("android") != -1) {
// Overly complex heuristic for determining Android form factor
...
}
]]>
</property-provider>
34
38. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT app config)
<!-- Use ViewFactoryImplMobile for tablet form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplTablet">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="tablet"/>
</replace-with>
35
39. Optimize the User Experience
Select the right UI using deferred binding
36
40. Build Great Mobile UIs For Any Form Factor
Device-specific, declarative UIs
ListViewPhone.ui.xml
ListViewTablet.ui.xml
37
41. Optimize the User Experience
Capture and respond to orientation changes
38
42. Optimize the User Experience
Capture and respond to orientation changes
39
43. Optimize the User Experience
Capture and respond to orientation changes
40
44. Optimize the User Experience
Capture and respond to orientation changes
/*
* Listen for changes in the window size so we can adjust the
* orientation of the app. This will also catch orientation changes
* on mobile devices.
*/
windowResizeHandler = Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
if (isOrientationPortrait != calculateOrientationPortrait()) {
isOrientationPortrait = !isOrientationPortrait;
adjustOrientation(isOrientationPortrait);
}
}
});
41
45. Optimize the User Experience
Capture and respond to orientation changes
/*
* Listen for changes in the window size so we can adjust the
* orientation of the app. This will also catch orientation changes
* on mobile devices.
*/
windowResizeHandler = Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
if (isOrientationPortrait != calculateOrientationPortrait()) {
isOrientationPortrait = !isOrientationPortrait;
adjustOrientation(isOrientationPortrait);
}
}
});
42
46. Optimize the User Experience
Capture and respond to orientation changes
private static boolean calculateOrientationPortrait() {
return Window.getClientHeight() > Window.getClientWidth();
}
43
47. Optimize the User Experience
Capture and respond to orientation changes
/*
* Listen for changes in the window size so we can adjust the
* orientation of the app. This will also catch orientation changes
* on mobile devices.
*/
windowResizeHandler = Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
if (isOrientationPortrait != calculateOrientationPortrait()) {
isOrientationPortrait = !isOrientationPortrait;
adjustOrientation(isOrientationPortrait);
}
}
});
44
48. Optimize the User Experience
Capture and respond to orientation changes
45
49. Optimize the User Experience
Capture and respond to orientation changes
46
50. Optimize the User Experience
Maximize code reuse using the MVP pattern
47
51. Optimize the User Experience
Maximize code reuse using the MVP pattern
• MVP recap
– Model-View-Presenter design pattern
– Similar to MVC - less logic in the View
– Business logic goes are part of Model/Presenter
– Keep Views as simple as possible
– Faster test cycles: run tests as vanilla JRE tests
48
52. Optimize the User Experience
Maximize code reuse using the MVP pattern
• Tablet vs Phone
– Business logic is the same
– Views change
– Ideal design pattern for supporting multiple form factors
49
53. Optimize the User Experience
Maximize code reuse using the MVP pattern
50
54. Optimize the User Experience
Maximize code reuse using the MVP pattern
51
55. Optimize the User Experience
Select the right UI using deferred binding
CloudTasks.gwt.xml (GWT module config)
<!-- Use ViewFactoryImplTablet for tablet form factor. -->
<replace-with class="com.google.mobilecalendar.client.ViewFactoryImplTablet">
<when-type-is class="com.google.mobilecalendar.client.ViewFactory"/>
<when-property-is name="formfactor" value="tablet"/>
</replace-with>
52
56.
57. • Build great UIs for any form factor
• Optimize the user experience
• Make it snappy
• Work without a connection
58. Make it Snappy
• Increase responsiveness
– Problem: HTTP requests are expensive over 3G connections
• Minimize startup time
– Problem: Mobile processing power still trails desktops/laptops
– Problem: Parsing large amounts of Javascript can be a large source of latency
54
59. Make it Snappy
• Increase responsiveness
– Solution: Use GWT's Client Bundle to batch resource fetches
• Minimize startup time
– Solution: Use Code Splitting to grab only the code you need
– Solution: Remove unused code, reduce overall code size using GWT compiler optimizations
55
61. Make it Snappy
Increase responsiveness by bundling resource fetches
• Even worse, mobile browsers limit the number of concurrent requests
• Ex http request waterfall chart for Android - 4 concurrent TCP connections
http://calendar.perfplanet.com/2010/mobile-performance-analysis-using-pcapperf/
57
62. Make it Snappy
Increase responsiveness by bundling resources
public interface Resources extends ClientBundle {
@Source("image0.gif")
public ImageResource image0();
@Source("image1.gif")
public ImageResource image1();
...
}
58
63. Make it Snappy
Increase responsiveness by deferring resource fetching
void onShowImagesButtonClicked() {
GWT.runAsync(new RunAsyncCallback() {
public void onSuccess() {
showImagesDialog();
}
}
}
59
64. Make it Snappy
Increase responsiveness by deferring resource fetching
void onShowImagesButtonClicked() {
GWT.runAsync(new RunAsyncCallback() {
public void onSuccess() {
showImagesDialog();
}
}
}
60
65. Make it Snappy
Increase responsiveness by deferring resource fetching
HTTP Request Overhead
2000
Total time spent waiting (ms)
1500
• Not bundled: 1409ms
1000
• Bundled: 594ms
500
• Bundled and code split: 664ms 0
Not bundled Bundled Bundled/code split
Startup Image dialog
61
66. Make it Snappy
Reduce overall code size, reduce startup time
• More Javascript == more parsing == increased load time, cpu cycles
• Increased cpu cycles == battery drain == poor user experience
Optimized vs Unoptimized Output
1100
• GWT compiler optimizations can help
– Dead code elimination 825
– Duplicate function removal
550
– Obfuscation
275
0
Size of Javascript in KB
Optimized Unoptimized
62
67.
68. • Build great UIs for any form factor
• Optimize the user experience
• Make it snappy
• Work without a connection
69. Work Without a Connection
• Run wherever, whenever
– Use Application Cache to load resources locally
• Access data wherever, whenever
– Use Local Storage as a caching mechanism for RPCs
64
70. Work Without a Connection
Run wherever, whenever using Application Cache
• Part of the HTML5 feature set
• Loads resources like HTML, CSS, and JS from disk
• Works with iPhone and Android (+ Chrome, Safari, and Firefox)
65
71. Work Without a Connection
Run wherever, whenever using Application Cache
• appcache.nocache.manifest
– Lists all of the files that you want to browser to cache
• Include HTML, CSS, JS
– Exclude GWT-RPC-related files (security)
– "nocache" - always requested
• web.xml
– mime-type for manifest files (text/plain)
• <your_app>.html
– include <html manifest="app.nocache.manifest">
66
72. Work Without a Connection
Run wherever, whenever using Application Cache
...or check out the GWT 2.4 SDK :-)
67
73. Work Without a Connection
Run wherever, whenever using Application Cache
<!-- Define a custom App Cache linker -->
<define-linker name="appcachelinker"
class="com.google.gwt.sample.mobilewebapp.linker.AppCacheLinker"/>
<!-- Use it -->
<add-linker name="appcachelinker"/>
68
74. Work Without a Connection
Access data wherever, whenever using Local Storage
• Part of the HTML5 feature set
• Utilizes a local database for reading/writing data
• Key/value-pair persistence
• Works with iPhone and Android (+ Chrome, Safari, and Firefox)
• Included in the GWT 2.3 SDK
69
75. Work Without a Connection
Access data wherever, whenever using Local Storage
• Grab an instance of the Local Storage interface
localStorage = Storage.getLocalStorageIfSupported();
• Read cache and then request any updates
public List<Tasks> getTasks() {
String taskListString = localStorage.getItem(TASKLIST_SAVE_KEY);
List<Tasks> tasks = deserialize(taskListString);
requestFactory.taskRequest().queryForUpdates().fire(...) {
...
}
return tasks;
}
70
76. Work Without a Connection
Access data wherever, whenever using Local Storage
• Upon response, update cache and any listeners
public List<Tasks> getTasks() {
...
requestFactory.taskRequest().queryForUpdates().fire(
new Receiver<List<Tasks>>() {
public onSuccess(List<Tasks> tasks) {
String tasksListString = serialize(tasks);
localStorage.setItem(TASKSLIST_SAVE_KEY, tasksListString);
// update everyone listening for task list updates
}});
...
}
71
77. Summary
• There are many challenges when building great mobile web apps
• GWT and GPE can help
• Tools for quickly building great UIs
• Frameworks for optimizing the user experience
• Compilers and code generators to improve speed
• API support for working offline
72
78. More Info...
• You can download the source and tools here:
– http://code.google.com/webtoolkit/download.html
• Other sessions to check out
– Use Page Speed to Optimize Your Web Site For Mobile (Check back for YouTube link)
– Mobile Web Development: From Zero to Hero (12:30pm)
– HTML5 versus Android: Apps or Web for Mobile Development? (3pm)
73