Android Performance Bootcamp: Installation, Review, and Sessions
Table of Contents
- Background
- Bootcamp
- Installations
- Reviewed
- Sessions
- Day 1
- Keynote
- Developers in Crisis
- Make the Web Faster
- Optimize Site for Page Speed
- Day 2
- Keynote
- Learning to Love JavaScript
- History
- Core concepts
- Behavior with private variables by default
- Why functional
- Everything is an object
- Arrays
- Class construction
- Create a behavior generator
- ES5: Object.create() and delegates
- Mixins for Instance-Level Composition
- The flexibility comes at a maintence cost
- Modularity
- Modules in Harmony
- De-sugaring
- Traceur
- Focus on the Chrome web store for applicaiton
- Simple Module Proposal
- Eloquent JavaScript book
- JDG current version book
- "Strict mode turns off some of the worst foot guns…"
- Debug
- HTML5 & What's Next
- Creating Accessible Interactive Web Apps using HTML5
- JavaScript Programming in the Large with Closure Tools
- Projects
- Android application to show yearbooks
- POC modpagespeed on QA09
- Add bundle data-bundle tags for link rel for Stylesheets
- Add bundle-data tags
- TODO Define a methodology for confirming the benefits for a site
- TODO Site speed measurement added to Analytics
- Can a proxier be run to rewrite content
- Create a nodejs proxy
- 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'
- Get statistics from Google analytics
- Reduce redirect chain for foo.com -> www.foo.com -> m.example.com
- Desktop porting performance summary
- Restrict the scope and get in front of perfermormance on mobile
- TODO Planning for Mobile Performance
- 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
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
Eclipse 3.6
Android SDK
http://www.io-bootcamp.com/sessions/android
This is largely complete.
Chrome
http://www.io-bootcamp.com/sessions/chrome-html5-pre-requisites
http://code.google.com/p/chromedevtools/wiki/DebuggerTutorial
Installed the Chrome debugger. This looks very similar to the
Go
Used from github and
$ brew install go
Tested
Reviewed
Sessions
Beginner's Guide to Android - Robertson 1
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()
Developing
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:
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
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
- Look at the headers to show site performance
- 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.
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?
- Define a base run without pagespeed
- Create a set of test pages
- Begin flagging files into buckets
- Look at a release history to determine rates of change
Begin a test process for how to segment the files:
- createSitePageReleaseRuns
- 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:
- Define the set of URLs to monitor during the test
- Define the resources provided per page
- Set a tool to define a base test
- 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:
- modpagespeed | Opera Turbo
- 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