Android Performance Bootcamp: Installation, Review, and Sessions

Table of Contents

Background

Focus was on Android and Performance. Ignored most of the API sections.

Talked briefly with Google TV about the process for creating new content for an environment.

Bootcamp

http://www.io-bootcamp.com/sessions

Get to the following hotel by 7:00am or just catch a cab. Cab might pay for itself if early enough.

San Francisco Marriott Marquis 55 Fourth Street San Francisco, CA 94103 (415) 896-1600

AM InterContinenal > Marriott Marquis > Mission Bay Conference: 7am – 9am W Hotel > Westin > Mission Bay Conference: 7am – 9am

PM Mission Bay Conference > Moscone West > Marriott Marquis > InterContinental: 6pm – 7pm Mission Bay Conference > Moscone West > W Hotel, Westin: 6pm– 7pm

Installations

Android SDK

Go

Used from github and

$ brew install go

Tested

Sessions

Beginner's Guide to Android - Robertson 1

http://goo.gl/XLLgk

Activity, Service, Content Provider, Broadcast REciever, Intents Mainifest.

Activity

This is a single screen.

Anatomy:

Activity created -> onStart -> onPause… onResume -> activity -> call…

Activity can be destroyed after delays.

Service

Long running logic behind the UI.

Surfacing content
UI

UI is composed based on nested view and view groups.

this is done in <LinearLayout> that sits in the res/layout/main.xml folder.

Different device configurations can be suppored by the configuraiton in res/ .

Support multiple screens.

http://developer.android.com/guide/practices/ui_guidelines/index.html

Sensors

Look at what sensors are available when building the application.

SensorManager.getSensorList() SensorManager.registerListener()

Getting Started with HTML5

http://html5-intro.appspot.com/

IndexDB for storing data and offline access.

Web Workers used to get the tweets and push into the data store. The example application is available at:

http://html5-intro.appspot.com/TweetReader/index.html

Speech Input

TODO: Check the targets used.

Geolocation

navigator.geolocation.

2d Transforms

Used a standard .

-webkit, -moz, -ie, -o for all CSS prefixing.

Web Fonts
Web Notifications

This available in the example directory.

Local Storage
IndexDB

All of the requests for data generally incude the trans, store, request.

Works on a cursor-based system…

Stores

add() is different from push().

Web Workers
Markup: required (binary attribute), semantics (section, header, sidebar)
Application Cache

<html manifest='http://wal.sh/app.appcache'…

http://www.html5rocks.com/tutorials/appcache/beginner/

Has a number of events that are available with the cache.

Tools and Resources
  • Boilerplate

Android Best Practices

Optimizing Your Web Performance for Success

HTML5 Development with the Chrome Dev Tool - Fisher East

Get Started with Go (Repeat Session)

http://stackoverflow.com/questions/1715464/emacs-lisp-mode-for-go

Installed an confirmed that go was working in a shell and under Emacs.

Office Hours & Page Speed Consultations

Sandboxes

Looked at the GoogleTV.

O'Reilly

NFC from O'Reilly

Day 1

Keynote

  • USB Hosting
  • Honeycomb becomes universal

Developers in Crisis

Tools used to provide APIs, maps,

Google Crisis Response

How to improve crisis reportings.

Use technology to make lives better. Better communication, create APIs, consolidate information people care about.

'Open systems win': Jonathan Rosenberg

New APIs based on existing format

TODO tablecast.org

CAP: Common Alerting Protocol

TODO Fusion Tables

Can be used as first person citizen for Maps API.

Example: Japan earthquake

Noted on the home page indicating a tsunami.

Tools aggergate the data. Google provided the bais for storing and saving data.

sinsai.info.

Scrape PDFs and pages and push into fusion tables.

Consolidate data entered by people at shelters.

Product Managers and developers in Google Japan.

Created a task queueing system.

TODO Contributing

Frontline SMS.

TODO Random Hacks of Kindness

June 4th and 5th.

Make the Web Faster

#wpo, #techtalk, #googleio

http://goo.gl/VF47I

Joshua Marantz Richard Rabbat Hâkon Wium Lie

Justification

Need to understand the tradeoffs:

  • maintainability: manual sprites,
  • agility: given caching when can you release new features

modpagespeed

Provide benefits without manually keeping track of what needs to be consolidated and compressed.

What are the trade-offs with the full site.

Image resizers and inline images

Is there a trivial way to approach?

Combining CSS

Uses a md5 sum for the stylesheets in the page.

How can one whitelist the files.

How about full site? Aren't there global, app, and page specific stylesheets?

Is the core audience those who don't have the resources to apply logic to resource consolidation?

Architecture

Includes parsers, v8, zlib for Apache.

Latency improvements

Used MSIE8 with Web Page Test.

Tests were done over 28 sites showed a 25% re

Parsing the website is additional overhead and will slow the site down.

Analysis

  1. Look at the headers to show site performance
  2. Review with Web Page Test

Check http://androidacademy.com waterfall.

Reduced the overall number of objects by inlining some images and consolidating resources.

The most significant improvement was from the repeat view.

Is it possible that modpagespeed on wal.sh is something that is changing the performance profile.

Repeat view waterfull shows the benefit of the md5 sums.

Methodology: 50 runs

Base run against a page repated with both values set. What custom work would need to be done to define what consistitues site page.

Site or page benefits

WebP

Consolidated sprite format:

<img src='group.webp#john'/>

Opera Mini 5

Look at the way that Opera proxies content to optimize the content.

Opera Turbo

This is a proxy server for improving the performance.

Test could be run where we just run against a local instance.

Optimize Site for Page Speed

Background

  • Gomez Recorder

How is Mobile Different

  • Increased round trip time
  • Bandwidth

Need to remember that mobile devices aren't connected all the time -> decreased bandwidth and increased latency.

3g networks will require 3s for getting the intial DNS request while the device requests a channel.

High Channel Establishment Times

Key issue with how the pages load.

JavaScript parse 10x greater cost

Less mememory > amount of required garbage collection.

Interacton delays a 300ms to trigger click evnet

10x slower just by doing a base port from desktop to mobile

Mobile benefits from App Cache

Recommendations

HTML5 Application Cache

<html manifest="mymanifest… </html>

Defer apase js

The cost of JavaScirpt parsing approximately 1x / 1kb from review of core JS libraries

mobile gmail performance

Make landing page redirect cacheable

Make cache control update to make privace with long expires so the cached value is used to avoid the DNS lookup.

TODO Prefer touch events

Problem: onclick event havs 300sms - 500ms delay

http://pcapperf.appspot.com/fastbutton viewed via mobile

Very noticeable delay when

Enable Keep-Alive
Tools
  • Gomez / Compuware

    Mobile users are abandoning sites with high latencies.

    After 2s quick jump to 30% abandonment up to 6s then increases but stable.

    Monitoring looks across other pages.

    Combine static resources

  • Pcapperf

    Helps analyze mobile by using a proxy.

    Starts with HAR support. Next step is to use pcap conversion.

  • Page Speed Online
  • JDrop
  • Blaze.io

Day 2

Keynote

Learning to Love JavaScript

History

  • Small functional
  • 1995: First implementation with DOM0
  • 1999: ECMAScript v. 3

The competition now generally comes down to performance rather than new language features.

Core concepts

Reads top to bottom.

All objects, most are mutable.

Functions are first-class.

Can hide data in functions.

Delegation and not classes.

Behavior with private variables by default

Inverts the relationships generally considered with other OO languages by virture of closures.

Objects carry behavior rather than behavior operating on objects.

Why functional

closures, first-class functions, tools for passing functions (forEach).

Everything is an object

> [] instanceof Object true > {} instanceof Object true > (function(){}) instanceof Object true

Arrays

Integer indexing is just a form of converting an index into a string then check the property.

Class construction

Just use this bound to passed formal parameters.

function Behavior(config) { }

Create a behavior generator

Pass in the configuration rather than using the new operator.

Alternative:

function bindBehavior(config) { }

ES5: Object.create() and delegates

Mixins for Instance-Level Composition

  • Requires use of traits for general composition of class-like behavior
  • Limited since it's just semantics but is per-library

The flexibility comes at a maintence cost

"Good when you can do it, not when everyone can do it."

Modularity

Self-executing anonymous functions.

See goog.require and goog.provides as dependency management.

Modules in Harmony

module, require, imports…

Want to be able to have the semantics of the language support inheritance.

De-sugaring

Describe the new language feature in terms of the old language but maps to patters of what is implemented.

Seen if one is doing boilerplate.

Example: variable arguments support requires slice() on arguments after 2.

Traceur

"Language evolution isn't a straight-line thing."

String.prototype.printf() = function(format='…', params) { console.log(params[0]); }

"My string".printf('…', 'Arguments')

Traceur has

  • Classes, Traints
  • Harmony modules
  • Async
  • Destructuring assigments (?)
  • Scoped object extensions

Focus on the Chrome web store for applicaiton

Implement just against V8 for fast-moving support:

  • Chrome Web Store
  • Crome Frame
  • Mobile

Simple Module Proposal

Deferreds and promises currently have some error handling.

Use weight or async keywords.

"Macros they way you would want them aren't possible with JavaScript."

"Not hopeful for type systems…"

If you get impedence mismatches between the source language and JavaScript.

Tom Bancoffs traits(?)

Eloquent JavaScript   book

JDG current version   book

Use the console and node rather than trying to use the UI.

"Strict mode turns off some of the worst foot guns…"

Use strict inside of all functions.

Debug

HTML5 & What's Next

requestFileSystem

Can get storage quota. Looking at implementing in Chrome 13.

New StorageInfo interface allows temporary and persistent storage.

  • queryUsage()
  • requestQuota()

WebSockets

Just ongoing work.

3D

3D initial CSS support is in Chrome 12.

What needs changing

Platform changes needed when building very large applications.

CSS Variables

Refactoring is hard. Would move this back to the Creative team.

CSS mixins via @traitable attempts to solve the issue of vendor prefixing for new properties.

Macros in CSS…

This seems similar to prefixing used for FB since there is server processing.

CSS nesting and hierarchy are the new elements where behavior and visual formatting just goes back to HTML.

CSS Animations and Transistions

Move away from using JavaScript libraries to move stuff around the browser.

Moving between two states from points are transitions.

Express visual behavior once your arrived at a state.

New state-interaction roles.

Improving JavaScript

This includes the DOM. Includes templating and model-drive views.

Has a migration path for adding application-level functionality:

HTML -> CSS -> JavaScript

<template>

This looks like the use of the

<script type='mytemplate'></script>

document.body.model = Model.get…

Inheritable model property on all DOM nodes.

http://code.google.com/p/mdv/feeds

This has live data binding.

Thie now creates an enforceable contract between the DOM and the underlying object structure.

/traceur-compiler /experimental-css /mdv

This moves toward an improved process for allowing feedback.

Creating Accessible Interactive Web Apps using HTML5

JavaScript Programming in the Large with Closure Tools

Projects

Android application to show yearbooks

Allow this to use Android:

Win $25,000 with the PayPal X Developer Challenge for Android. Submit your Android app featuring a PayPal mobile solution by May 14, 2011. Cash prizes for 1st, 2nd, and 3rd place winners. Follow the link for more information.

https://www.x.com/community/ppx/devchallenge

POC modpagespeed on QA09

What would be the overall risk to the site? Likely none if perforance done by hand.

Add bundle data-bundle tags for link rel for Stylesheets

Question: What session prompted this? The HTML combiner discussion from work? ffffe Example:

<link rel='stylesheet' href='feature.css'/> <link rel='stylesheet' href='utility.css'/> <link data-bundle='core' rel='stylesheet' href='core.css'/> <link data-bundle='core' rel='stylesheet' href='jquery.css'/> <link data-bundle='core' rel='stylesheet' href='underscore.css'/>

Add bundle-data tags

TODO Define a methodology for confirming the benefits for a site

What is the velocity of changes for certain types of files?

  1. Define a base run without pagespeed
  2. Create a set of test pages
  3. Begin flagging files into buckets
  4. Look at a release history to determine rates of change

Begin a test process for how to segment the files:

  1. createSitePageReleaseRuns
  2. consume a release history

Pass in release information Pass in static resource change rates (what you need to ship) Pass in page flow information

This should yeild a number of runs with different configurations where the runs are aggregated by the individual pages.

The process for a web applicaiton:

  1. Define the set of URLs to monitor during the test
  2. Define the resources provided per page
  3. Set a tool to define a base test
  4. Define typical revisit behavior

This is all required to allow for some sane caching policy since it's used to break the assumptions of the sustem.

Run two separate proxy servers:

  1. modpagespeed | Opera Turbo
  2. HTML proxier that changes the underlying HTML that would change the behavior to reflect the underlying test updates

The prototype of this process could be done with the existing tools surrounding several types of interactions:

  • View some summary information about

The goal of the system would be to provide analytical data to support any performance changes but would likely require dedicated environment + proxy support.

Some risks would be taken just by having the overhead of the two layers of proxying behavior.

TODO Site speed measurement added to Analytics

Can a proxier be run to rewrite content

Create a nodejs proxy

Reqiurements:

  • Read in a list of URLs for a base location
  • Instrument the URLs with either concatonated values or data-bundles

CPU cost for the front-end servers

How to disable for load: trade-off user performance for aggregated

Are there tools for supporting debugging to show the original JS or CSS sourcing

What are the preprocessing options to reduce the

Hardware supporting Google TV

Page Speed data-pagespeed='no'

Allow page elements to be reviewed.

Get statistics from Google analytics

Reduce redirect chain for foo.com -> www.foo.com -> m.example.com

Desktop porting performance summary

  • Manifest
  • Add touch support

Restrict the scope and get in front of perfermormance on mobile

TODO Planning for Mobile Performance

Goals

Create expectations for mobile performance for the mobile solution.

Tooling

What is the baseline for how pages get loaded.

Expectations

  • Should see initial manifest load; shows that the state
  • Should have a set of core rules to evaluate the time of the load

Create tests to not load ads by adding header

Create a mobile version of the site with some sane defaulting

Use the Page Speed Online reommended Application Cache

Create new booklet that pushes to JDrop

Always provide a summary for all talks

Test App Cache even with desktop browsers

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7