Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Google IO 2013 by Mind Map: Google IO 2013
5.0 stars - 1 reviews range from 0 to 5

Google IO 2013

WebM VP9

VP8 was getting finalized and now VP9 is new

yah, but it's better

Uses source frames throughout the video for reuse throughout the video

The source frame is highly optimized, vp8's source frame was the basis for WebP the new image format

Goal is 4th Quarter 2013 to integrate production ready software versions

hardware accelerated will be primary focus after release

Instant Mobile Websites

Bandwidth is not the problem - it's latency

Load required css in the initial html response to give the user a response right away before the leave

14kb is of html before another round trip (even if it's one html file) so keep it less than that

prioritize visible content from there

Web Languages and VMs: Why fast code is always in fashion

Same guys wrote the V8 vm/engine that is writing the Dart vm.

worked together for 12 years on vms, smalltalk, hotspot, crankshaft, cldc, jvm, v8, self, Dart

Lars Bak & Kasper Lund

Where is time spent in the V8 vm

gmail, google docs, google search etc, 50-70% V8, 30-50% Blink

twitter, facebook, youtube, 20-40% V8, 60-80% Blink

Moden JavaScript Engine

general process, parser, multi-teir adaptive compilation, deoptimization, generational garbage collection, code flushing, debugging and porfiling support

Identify 'hot' heavily used functoinas, attempt to optimize, but if it does dumb js stuff, fallback to the conventional way

Converts prototypes to classes

Didn't invent this, 60's, lisp, 70's-80's, small talk, 90's, self, They just added all of them up to v8

Garbage Collection, Using generational was new to a browser, Has many problems that java has, many due to how js nodes is cleaned up with tracing while the dom nodes are cleaned up with a number of references pointer

BUT, It's still js..., v8 started at 100,000 lines, now almost 500,000 lines....

Welcome to the Dart Side

Why Dart is inately faster than js, real objects, straightforward language semantics makes it clear the intent and the VM does not have to interrogate an entire block of code to determine its use, fewer special corner cases, Prototype methods can be overridden in js... not dart, less generated code (minify etc)

Benchmarks

Richards & DeltaBlue benchmark

Richards, Dart 1.7x faster than v8, dar2js slightly behind v8

DeltaBlue, Dart 2x faster than v8, dart2js slightly better than v8 --- booyah

What's next?

Project OilPan, re-write the browser garbage collection, do all tracing removals so gc doesn't freeze as much and can be smarter, Entire web application can be serialized, Concurrent manipulation of the DOM

Cognitive Science and Design

Lost my notes

Mostly referenced some books that designers should read

Things like our peripheral vision can identify change faster than our direct vision

Make changes across the board

Don't just change a language, change it to go from right to left, change the back button to be on the right, reverse icons

Upgrading to a Chrome Packaged App

Lots of api's available for chromeos type environments

very new apis, very specific

lots of js and other stuff is actually disabled for security

sounds like a pain in the butt and just not worth it right now

True Grit: Debugging CSS & Render Performance

Chelsea Derric - Senior software engineer on gmail

Fast is better than slow - google 10 things philosophy

http://www.google.com/about/company/philosophy/

Use the Chrome Dev Tools timeline

it shows where rendering time is being spent

The Rendering Cycle, Build the DOM, Calculate CSS property values, Build the rendering tree, Boxes vs Elements, Box - Entity rendered on the page, Some boxes are not in the dom, ::before, line box etc, parent in rendering tree will be a box's containing block, Calculate Layout, tall, wide, top left corner, height, width, padding, border-width, margin- coordinates (top, right, bottom left), Paint, Transparency can be expensive, especially anti-aliased text, layers are painted individually, Compositing, layer bitmaps are transferred to the gpu, combined (composited) and drawn on the screen, opacity, transform etc

Timeline shows what stages are happening

Many animations etc cause calculate layout and painting which take a long time and make things look choppy

tricks can be used to do layouting early and only do compositing which is very light weight

transform translate3d 0,0,0

Never leaving the DevTools

Paul Irish

Workspaces

editing in dev tools can change the source also

And vice versa

SASS (css toolkit) support

ADB Extension to chrome dev tools for android

Lot of cool stuff, need to keep up on this because it would save lots of time

much of what was shown was in canary build so hopefully stable soon enough

Get Unstuck - Gamestorming Not Brainstorming

Book - Must Read

Brainwriting

everyone individually writes ideas, one per note card, for a few minutes

next part pass the cards to the right and everyone elaborate on the previous card, after writing down an additional idea, pass it again to the right until time is up, for ~5+ minutes

Review cards

6-8-5

Fold a single sheet of paper in half 3 times, produces 8 squares

Everyone individually elaborates on an idea, adds one idea per box, can be a single word, a picture, a phrase

Goal is to get 6-8 ideas within 5 minutes

$100 investment

All ideas are place don the wall

Everyone writes down $ amounts that would add up to $100 and invest in certain ideas

This is to reduce ideas and get a feel for where people are leaning toward on the team

Gamestorming Cheat Sheet

bit.ly/gamestorming-cheatsheet

WebP - enabling faster, smaller and more beautiful web

Why WebP is needed

60 % of desktop sites are images

59% of mobile sites are images

Screens are getting higher dpi (retina, pixel etc)

WebP is

Improved data compression

Lossy and lossless modes

Alpha channel, animation ...

Derived from VP8 keyframe (not vp9)

open-source, royalty free formats

Achievements

On average 30% smaller than PNG for lessless compression, Even better for slightly lossy

Encoding and Decoding

Encoding 5-10x slower than JPEG, only bad use case is dynamic imagery... like AFWWEBS

Decoding ~1.3x slower than JPEG

Bandwidth saving vs extra CPU time, Most encoding is done upfront, rarely dynamically

Lots of tools support this

Facebook trial

worked great - FB loved it

People could save a picture but not open it, chrome updated so that it will be an app that can open webp images

People would send a url from chrome to a friend using IE, they can't see webp, make urls extension agnostic and pick off user agent, requires 2 versions or a dynamic parser on the fly but it's a way to transition

Google Is Moving Toward it

google maps

docs

gmail

chrome

youtube

g+, on android already - got 50% bytes savings

google play

google image search

Google Visualization API

What

javascript charting api

timeline is new and looks pretty useful

Scatter chart

Bubble Chart

Geo / Map chart, differet projections

Why?

unsure of why, there are a lot of charting apis in js

the timeline one looks like the only real needed one

Feature Detection in the Real World

Basically walks us through a year of her trying to develop for the cutting edge and all the difficulties she had

lots of examples of checking for a feature is not enough, sometimes a feature is only halfway implemented

checking all the api calls needed to do it's job before ever needing them because it's the only safe way

Ultimate takeaway is don't live on teh chrome (or others) cutting edge for a real serious, money making product

only do it for the experimental and prototype projects needing to help stay ahead of the curve but not super reliable

Big Expectations

Do NOT assume it's going to be easy

Do NOT just copy the first stackoverflow answer

DO use tried and true techniques

DO try feature detection first

Mix & Match - modernizr, blacklist etc

Automating Performance Best Practices with PageSpeed

Lost my notes =(

Google released an apache mod and something else to do this many years ago

really no reason not to do this

ngx_pagespeed also

PageSpeed chrome extension

LOTS of very smart automations

Hacks the outgoing html to reference exact image sizes, of compressed versions of the image, photos/800x450wawesome_cat.png.pagespeed.ic.HASH.webp

Minify JS

Concatenate css files into one, yellow.css+blue.css+big.css+bold.css.pagespeed.cc.HASH.css, cc = combined css, hash = date modified hashing (or smarter)

40+ optimizations, configurable

Google API services

can route your own website through google servers and control all the settings from a google dashboard

live demo, freaking awesome, freaking smart

first request when the mod enabled does nothing, because it doesn't want to slow down the first request, but it will concatenate and cache things for the next requests now that it knows how the page works, second page load had all the benefits

Showed a 3 image page example going from ~3MB to 300kb

developers.google.com/speed/pagespeed/service