1. Google Maps API v3: Built First for Mobile Susannah Raub Google June 24, 2010

2. Introductions Maps API v3

3. History: Maps API v2

4. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

5. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

6. Defining Latency  User perceived latency - Page appears usable - Maps API: Map is rendered  Page ready time - Page is usable - Maps API: Map is draggable  Page load time - All elements are present - Maps API: Controls are loaded

7. Loading the Maps API Download drag initialization Download map images Map initialization Load user code Load main.js Download bootstrap Developer request to Google. Downloads the current API. 15kB (4kB gzipped) The complete interface. Includes much of the map implementation. 180kB (65kB gzipped) Developer required to instantiate a Map and set the center and zoom level. ~6 30kB images required to show a 400px by 400px map. Dragging functionality is In a delay loaded module. 6kB (2kB gzipped)

8. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

9. Measuring Latency: Desktop  HTTP Watch - Internet Explorer and Firefox  Load time breakdown, sequence  Caching

10. Measuring Latency: Desktop vs Mobile

11. Measuring Latency: Mobile  Using a Fiddler Proxy  Run over 3G  Capture download time

12. Measuring Latency: Mobile  Takes 1s + ~5 ms/kB to parse JavaScript on iPhone 3  *dependent on hardware and OS version  Significant overhead per file  Linear or super linear time as file size increases

13. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

14. Download drag initialization Loading the Maps API  Large synchronous public interface  Slow to start loading map tiles Download map images Developer request to Google. Downloads the current API. 15kB (4kB gzipped) The complete interface. Includes much of the map implementation. 180kB (65kB gzipped) Developer required to instantiate a Map and set the center and zoom level. ~6 30kB images required to show a 400px by 400px map. Dragging functionality is In a delay loaded module. 6kB (2kB gzipped) The complete interface. Includes much of the map implementation. 180kB (65kB gzipped) Map initialization Load user code Load main.js Download bootstrap

15. Reducing Latency: Caching  Mobile more constrained than desktop - File size restrictions - Total size limited  Cleared more frequently  Improving with each hardware and OS update

16. Reducing Latency: HTML5 Database  Allows for data storage within a site  Great for static files  Not so great for dynamic content  Not easy to use cross-site

17. Reducing Latency: Compilers  Obfuscates property names, reducing code size  Optimizes for code size  Plus, lots of helpful error checking - Closure - http://code.google.com/closure/compiler/ - GWT - http://code.google.com/webtoolkit/ - YUI, Packer, Shrinksafe, and more

18. Reducing Latency: Fewer downloads  Techniques - Image spriting - Combining JS files - Client bundles module requests - Server handles single request for multiple files - 3 requests for 15-25kB become 1 request for 57kB  Outcome - Fewer HTTP requests - Less parse time overhead

19. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

20. Download drag initialization Re-architecting the Maps API  Reduce public interface  Start loading map tiles earlier Download map images Map initialization Load user code Load main.js Download bootstrap

21. Architecture: Model-View-Controller (MVC)  Models store state synchronously  Views render objects asynchronously  Controllers are go-betweens  Initial download contains small models  Views and controllers are loaded on-demand

22. Architecture: Model-View-Controller (MVC)  Models: Map, Marker, InfoWindow  Views: DOM rendering  Views are ignorant of "Map" properties (projection, LatLng, etc)

23. Architecture: Loading Views  Marker model stores the position  View updates asynchronously when bound or position changes  All binding handled by MVCObject  // Developer creates the marker and sets the map  var marker = new Marker({position: new LatLng(0, 0)});  marker.setMap(map);  // MarkerModel initializes a marker view when the map property changes.  Marker.prototype.map_changed = function() {  var model = this;  require('map_module', function(module) {  module.initializeMarkerView(model);  });  };  // MarkerView renders the marker when the position property changes.  MarkerView.prototype.position_changed = function() {  // Re-render marker  };

24. Download drag initialization Download map images The complete interface. Includes much of the map implementation. 180kB (65kB gzipped) Developer request to Google. Downloads the current API. 15kB (4kB gzipped) Loading the Maps API v3 Map initialization Load user code Load main.js Download bootstrap Developer request to Google. Downloads the current API. 4kB (725 bytes gzipped) The complete interface. Includes much of the map implementation. 33kB (12.5kB gzipped) Developer required to instantiate a Map and set the center and zoom level.

25. Overview  Latency - Measuring - Reducing  Architecture  Optimizations

26. Download drag initialization Re-architecting the Maps API  Reduce public interface  Start loading map tiles earlier  Reduce time to load map imagery Download map images Map initialization Load user code Load main.js Download bootstrap

27. Optimizing Image Loads  Loading tiles: 4-6 HTTP requests X 25kB  Loading one image: 1 HTTP request X 40kB

28. Dragging functionality is In a delay loaded module. 6kB (2kB gzipped) Dragging functionality is In a delay loaded module. 48kB (18kB gzipped) 6x 30kB image to fit a 400px by 400px map. The complete interface. Includes much of the map implementation. 180kB (65kB gzipped) Developer request to Google. Downloads the current API. 15kB (4kB gzipped) Download map image Loading the Maps API v3 Download drag initialization Map initialization Load user code Load main.js Download bootstrap Developer request to Google. Downloads the current API. 4kB (725 bytes gzipped) The complete interface. Includes much of the map implementation. 33kB (12.5kB gzipped) Developer required to instantiate a Map and set the center and zoom level. 1x 40kB image to fit a 400px by 400px map.

29. Load center map imagery Variation for maps.google.com Load imagery to fill the map Load main.js with map+drag Download bootstrap Center, but not size, is known, so center tiles are loaded immediately. Once the size of the map is known, the rest of the imagery is loaded. As an application, the map implementation can be loaded immediately.  Map center is known  Load center map tiles with initial download

30. Prefetching  Good for latency  Bad for users with limited or expensive data  Prefetch with caution

31. History: Maps API v3

32. Questions? Visit the Google Maps whiteboard session at 3:10