Your SlideShare is downloading. ×
0
Using GWT and Eclipse to Build GreatMobile Web AppsChris RamsdaleProduct Manager, GWT and Google Plugin for EclipseFeedbac...
Why Are We Here?3
The Problems• Mobile devices    – ...have smaller screens    – ...can have different orientations    – ...have slower proc...
The Solution• Use GWT and Googles Plugin for Eclipse (GPE) to build great mobile web apps  for iPhone and Android• And hel...
Example App: Cloud Tasks• Web based task mgmt app• UIs for Android, iPhone, iPad, and desktop browsers• Orientation change...
•   Build great UIs for any form factor•   Optimize the user experience•   Make it snappy•   Work without a connection
Build Great Mobile UIs For Any Form Factor• UI code like you expect it    – Declarative UI layout with UiBinder• Speed up ...
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <ui:style>        .addButton {       ...
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <ui:style>        .addButton {       ...
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <g:DockLayoutPanel>        <!-- Heade...
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <g:DockLayoutPanel>        <!-- Heade...
Build Great Mobile UIs For Any Form FactorUI code like you expect it13
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <g:DockLayoutPanel>        <!-- Heade...
Build Great Mobile UIs For Any Form FactorUI code like you expect it15
Build Great Mobile UIs For Any Form FactorUI code like you expect it<ui:UiBinder>    <g:DockLayoutPanel>        <!-- Heade...
Build Great Mobile UIs For Any Form FactorUI code like you expect it17
Build Great Mobile UIs For Any Form FactorSpeed up UI development with WYSIWYG tools18
Build Great Mobile UIs For Any Form FactorSpeed up UI development with WYSIWYG tools19
Build Great Mobile UIs For Any Form FactorDevice-specific, declarative UIs                                             Lis...
•   Build great UIs for any form factor•   Optimize the user experience•   Make it snappy•   Work without a connection
Optimize the User Experience• Desktops, tablets, and phones...oh my!     – Deferred binding to sort them out• Landscape vs...
Optimize the User ExperienceSelect the right UI using deferred binding                                        Deferred wha...
Optimize the User ExperienceDeferred binding - optimize for the browser24
Optimize the User ExperienceSelect the right UI using deferred binding25
Optimize the User ExperienceSelect the right UI using deferred binding26
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT app config)     <!-- Us...
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT app config)     <!-- Us...
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT app config)     <!-- Us...
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT app config)     <!-- Us...
Optimize the User ExperienceSelect the right UI using deferred binding     FormFactor.gwt.xml     <property-provider name=...
Optimize the User ExperienceSelect the right UI using deferred binding     FormFactor.gwt.xml     <property-provider name=...
Optimize the User ExperienceSelect the right UI using deferred binding     FormFactor.gwt.xml     <property-provider name=...
Optimize the User ExperienceSelect the right UI using deferred binding     FormFactor.gwt.xml     <property-provider name=...
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT app config)     <!-- Us...
Optimize the User ExperienceSelect the right UI using deferred binding36
Build Great Mobile UIs For Any Form FactorDevice-specific, declarative UIs                                             Lis...
Optimize the User ExperienceCapture and respond to orientation changes38
Optimize the User ExperienceCapture and respond to orientation changes39
Optimize the User ExperienceCapture and respond to orientation changes40
Optimize the User ExperienceCapture and respond to orientation changes     /*      * Listen for changes in the window size...
Optimize the User ExperienceCapture and respond to orientation changes     /*      * Listen for changes in the window size...
Optimize the User ExperienceCapture and respond to orientation changes     private static boolean calculateOrientationPort...
Optimize the User ExperienceCapture and respond to orientation changes     /*      * Listen for changes in the window size...
Optimize the User ExperienceCapture and respond to orientation changes45
Optimize the User ExperienceCapture and respond to orientation changes46
Optimize the User ExperienceMaximize code reuse using the MVP pattern47
Optimize the User ExperienceMaximize code reuse using the MVP pattern• MVP recap     – Model-View-Presenter design pattern...
Optimize the User ExperienceMaximize code reuse using the MVP pattern• Tablet vs Phone     – Business logic is the same   ...
Optimize the User ExperienceMaximize code reuse using the MVP pattern50
Optimize the User ExperienceMaximize code reuse using the MVP pattern51
Optimize the User ExperienceSelect the right UI using deferred binding     CloudTasks.gwt.xml (GWT module config)     <!--...
•   Build great UIs for any form factor•   Optimize the user experience•   Make it snappy•   Work without a connection
Make it Snappy• Increase responsiveness     – Problem: HTTP requests are expensive over 3G connections• Minimize startup t...
Make it Snappy• Increase responsiveness     – Solution: Use GWTs Client Bundle to batch resource fetches• Minimize startup...
Make it SnappyIncrease responsiveness by bundling resource fetches                                             Demo56
Make it SnappyIncrease responsiveness by bundling resource fetches• Even worse, mobile browsers limit the number of concur...
Make it SnappyIncrease responsiveness by bundling resources     public interface Resources extends ClientBundle {         ...
Make it SnappyIncrease responsiveness by deferring resource fetching     void onShowImagesButtonClicked() {         GWT.ru...
Make it SnappyIncrease responsiveness by deferring resource fetching     void onShowImagesButtonClicked() {         GWT.ru...
Make it SnappyIncrease responsiveness by deferring resource fetching                                                      ...
Make it SnappyReduce overall code size, reduce startup time• More Javascript == more parsing == increased load time, cpu c...
•   Build great UIs for any form factor•   Optimize the user experience•   Make it snappy•   Work without a connection
Work Without a Connection• Run wherever, whenever     – Use Application Cache to load resources locally• Access data where...
Work Without a ConnectionRun wherever, whenever using Application Cache• Part of the HTML5 feature set• Loads resources li...
Work Without a ConnectionRun wherever, whenever using Application Cache• appcache.nocache.manifest     – Lists all of the ...
Work Without a ConnectionRun wherever, whenever using Application Cache                 ...or check out the GWT 2.4 SDK :-...
Work Without a ConnectionRun wherever, whenever using Application Cache<!-- Define a custom App Cache linker --><define-li...
Work Without a ConnectionAccess data wherever, whenever using Local Storage• Part of the HTML5 feature set• Utilizes a loc...
Work Without a ConnectionAccess data wherever, whenever using Local Storage• Grab an instance of the Local Storage interfa...
Work Without a ConnectionAccess data wherever, whenever using Local Storage• Upon response, update cache and any listeners...
Summary• There are many challenges when building great mobile web apps• GWT and GPE can help• Tools for quickly building g...
More Info...• You can download the source and tools here:     – http://code.google.com/webtoolkit/download.html• Other ses...
Q&A74
</presentation>75
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps
Upcoming SlideShare
Loading in...5
×

Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps

1,037

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,037
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-mobile-web-apps"

    1. 1. Using GWT and Eclipse to Build GreatMobile Web AppsChris RamsdaleProduct Manager, GWT and Google Plugin for EclipseFeedback: http://goo.gl/mn6Y4Twitter: #io2011 #gwt
    2. 2. Why Are We Here?3
    3. 3. The Problems• Mobile devices – ...have smaller screens – ...can have different orientations – ...have slower processors – ...can be disconnected4
    4. 4. The Solution• Use GWT and Googles 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 connection5
    5. 5. 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 end6
    6. 6. • Build great UIs for any form factor• Optimize the user experience• Make it snappy• Work without a connection
    7. 7. 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 UIs8
    8. 8. Build Great Mobile UIs For Any Form FactorUI 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
    9. 9. Build Great Mobile UIs For Any Form FactorUI 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
    10. 10. Build Great Mobile UIs For Any Form FactorUI 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
    11. 11. Build Great Mobile UIs For Any Form FactorUI 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
    12. 12. Build Great Mobile UIs For Any Form FactorUI code like you expect it13
    13. 13. Build Great Mobile UIs For Any Form FactorUI 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
    14. 14. Build Great Mobile UIs For Any Form FactorUI code like you expect it15
    15. 15. Build Great Mobile UIs For Any Form FactorUI 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
    16. 16. Build Great Mobile UIs For Any Form FactorUI code like you expect it17
    17. 17. Build Great Mobile UIs For Any Form FactorSpeed up UI development with WYSIWYG tools18
    18. 18. Build Great Mobile UIs For Any Form FactorSpeed up UI development with WYSIWYG tools19
    19. 19. Build Great Mobile UIs For Any Form FactorDevice-specific, declarative UIs ListViewPhone.ui.xml ListViewTablet.ui.xml20
    20. 20. • Build great UIs for any form factor• Optimize the user experience• Make it snappy• Work without a connection
    21. 21. 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 pattern22
    22. 22. Optimize the User ExperienceSelect the right UI using deferred binding Deferred what?23
    23. 23. Optimize the User ExperienceDeferred binding - optimize for the browser24
    24. 24. Optimize the User ExperienceSelect the right UI using deferred binding25
    25. 25. Optimize the User ExperienceSelect the right UI using deferred binding26
    26. 26. Optimize the User ExperienceSelect 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
    27. 27. Optimize the User ExperienceSelect 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
    28. 28. Optimize the User ExperienceSelect 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
    29. 29. Optimize the User ExperienceSelect 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
    30. 30. Optimize the User ExperienceSelect 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
    31. 31. Optimize the User ExperienceSelect 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
    32. 32. Optimize the User ExperienceSelect 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
    33. 33. Optimize the User ExperienceSelect 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
    34. 34. Optimize the User ExperienceSelect 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
    35. 35. Optimize the User ExperienceSelect the right UI using deferred binding36
    36. 36. Build Great Mobile UIs For Any Form FactorDevice-specific, declarative UIs ListViewPhone.ui.xml ListViewTablet.ui.xml37
    37. 37. Optimize the User ExperienceCapture and respond to orientation changes38
    38. 38. Optimize the User ExperienceCapture and respond to orientation changes39
    39. 39. Optimize the User ExperienceCapture and respond to orientation changes40
    40. 40. Optimize the User ExperienceCapture 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
    41. 41. Optimize the User ExperienceCapture 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
    42. 42. Optimize the User ExperienceCapture and respond to orientation changes private static boolean calculateOrientationPortrait() { return Window.getClientHeight() > Window.getClientWidth(); }43
    43. 43. Optimize the User ExperienceCapture 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
    44. 44. Optimize the User ExperienceCapture and respond to orientation changes45
    45. 45. Optimize the User ExperienceCapture and respond to orientation changes46
    46. 46. Optimize the User ExperienceMaximize code reuse using the MVP pattern47
    47. 47. Optimize the User ExperienceMaximize 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 tests48
    48. 48. Optimize the User ExperienceMaximize code reuse using the MVP pattern• Tablet vs Phone – Business logic is the same – Views change – Ideal design pattern for supporting multiple form factors49
    49. 49. Optimize the User ExperienceMaximize code reuse using the MVP pattern50
    50. 50. Optimize the User ExperienceMaximize code reuse using the MVP pattern51
    51. 51. Optimize the User ExperienceSelect 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
    52. 52. • Build great UIs for any form factor• Optimize the user experience• Make it snappy• Work without a connection
    53. 53. 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 latency54
    54. 54. Make it Snappy• Increase responsiveness – Solution: Use GWTs 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 optimizations55
    55. 55. Make it SnappyIncrease responsiveness by bundling resource fetches Demo56
    56. 56. Make it SnappyIncrease 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
    57. 57. Make it SnappyIncrease responsiveness by bundling resources public interface Resources extends ClientBundle { @Source("image0.gif") public ImageResource image0(); @Source("image1.gif") public ImageResource image1(); ... }58
    58. 58. Make it SnappyIncrease responsiveness by deferring resource fetching void onShowImagesButtonClicked() { GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { showImagesDialog(); } } }59
    59. 59. Make it SnappyIncrease responsiveness by deferring resource fetching void onShowImagesButtonClicked() { GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { showImagesDialog(); } } }60
    60. 60. Make it SnappyIncrease responsiveness by deferring resource fetching HTTP Request Overhead 2000Total 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 dialog61
    61. 61. Make it SnappyReduce 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 Unoptimized62
    62. 62. • Build great UIs for any form factor• Optimize the user experience• Make it snappy• Work without a connection
    63. 63. 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 RPCs64
    64. 64. Work Without a ConnectionRun 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
    65. 65. Work Without a ConnectionRun 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
    66. 66. Work Without a ConnectionRun wherever, whenever using Application Cache ...or check out the GWT 2.4 SDK :-)67
    67. 67. Work Without a ConnectionRun 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
    68. 68. Work Without a ConnectionAccess 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 SDK69
    69. 69. Work Without a ConnectionAccess 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
    70. 70. Work Without a ConnectionAccess 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
    71. 71. 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 offline72
    72. 72. 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
    73. 73. Q&A74
    74. 74. </presentation>75
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×