I attended Google I/O Developers Conference again this year (May 10-11). I have attended the last three conferences now and it keeps getting better and better (and I’m not referring to the free stuff I have received either). I have been able to learn which types of session I can get more out of and which things will make the best use of my time there.
Following is a detailed list of some of the sessions I attended along with some important bits of information I learned in the sessions.
Google Fusion Tables
Fusion tables provide a simple and easy way to store and visualize data.
Features (brief notes)
- Easy to import data (KML, XSL, CVS, etc.)
- Easily merge tables
- Simple to create visualizations
- Easily customize info windows
- Simple to configure
- Easy to share
- APIs
You could build an application that uses FusionTables as a database through the RESTful APIs that are provided by sending SQL type queries. OAuth is used for authorization to a users account. - FusionTablesLayer
Can be used FusionTables with Google Maps JavaScript API to make faster maps with tons of markers. Images/markers are placed on the server side for quicker creation and dynamic updates.
mod_pagespeed
mod_pagespeed is an open source Apache module that speeds up web pages without changing what a developer has to do. Optimization of your web files (html, css, javascript, images) is done automatically (on the web server) before being sent to the users browser. Everything mod_pagespeed does is to limit both the number of files being sent back to the browser and the size of those files. Here is some more information too.
Also it is really simple and easy to set up (assuming your version of Apache is supported).
Some of what mod_pagespeed does before sending content to a users browser is:
- optimizes (compresses) images
- merges css files
- minifies JavaScript
- in-lines smaller resources
- plus more
Google Storage for Developers
Google Storage for Developers provides the ability for developers to store data in the cloud (on Google servers). Currently there is a free trial available until December 2011. There is a browser client, command line utilities, and a REST API all provided to interact with the storage system.
Some other nice features mentioned include:
- Built in load balancing and backups
- OAuth2 and web browser loging (google account) for authentication
- Tailored towards developers worried about scalability
- resumable transfers (some quick notes):
- uses Google data resumable protocol
- uses an upload id for uploading
- resumable download uses GET range request
What can it be used for?
- storage of applications
- data sharing
- static content hosting
- storage for computation
- backup and recovery
Google Chart Tools
Google Chart Tools provide a simple and easy way to visualize your data. With one data source many charts (visualizations) can be created (also works with FusionTables). It is programatically available through the Apps Scripts (ChartWrapper, ChartEditor). Also provides the ability to create controls for the data and visualizations and even dashboards.
Google Web Fonts
Web Fonts (in general)
The use of web fonts has the following benefits:
- semantic
- translatable
- accessible
- zoomable
- efficient
Other key benefits are that the use of web fonts makes the web more searchable — Google loves web fonts. Web fonts are supported in 95% of all browsers and 100% of modern browsers. The standard way to use web fonts is with the use of the @font-face CSS rule. There are some major pitfalls of using the @font-face rule:
- Font file conversion
- hosting (mom and pop blogs ex)
- css maintenance
- browser quirks (Firefox)
- licensing complexities
It is for these reasons that Google Web Fonts exists, to provide another simple and easy way for anyone to use web fonts to that they are used more. Google’s goal is to make web fonts ubiquitous.
Google Web Fonts
- Google web fonts handles the browser quirks
- no licensing worries
- speed and reliability
- font updates, optimizations and quality improvements
- innovative font serving features
It is simple to use Google Web Fonts, just include the appropriate Google Web Font CSS file, then use the font in CSS (no need to specify the @font-face rule).
What’s next? (for Google Web Fonts)
- More fonts (currently 175)
- aiming for 1000
- follow @googlefonts to news of new fonts added
- faster fonts
- getting just the text of the font that you are going to use. Awesome! (text=”chad”)
- cached aggressively – fonts used on your site and on other sites, will be cached between the sites (on the browser).
- in more places – TypeDNA – providing Google Web fonts through Adobe software
Speedy Maps
Some tips and pointers on making your map applications fast and responsive.
- make each of your files as small as possible
- require as few files as nessesary
- Run your code through a compiler or a minifyer
- smaller
- simpler
- maintainable – you can have many comments and stuff in your code and it doesn’t get sent to the user. Closure compiler – provides syntax checking!
- use multiple files for development, but then bundle the resources
- use image sprits
- consider embedding images in the html – when in production
- data url – ex: src=”data:images/png;base64,woeijasdf”
- reduces http requests
- simpler than spriting (conseptually)
- limited support in older browsers
- base64 increases image size by 1/3
- bundle JavaScript files
- only load essentials in head tag
- keep common scripts seperate from infrequently-used scripts
- bundle CSS files
- avoid @import
- place styles before scripts
- Caching
- generally don’t case html
- aways cache JS and CSS, but use versioning to force them to be downloaded
Chrome Developer Tools
Chromes developer tool is just a web app (you can use inspect element on the developer tools!). Some of the features and tips listed below are in future releases of the developer tools.
- Ctr-Shift-I to launch developer tools
- (click on file name) revisions are kept of all the css changes that you make
- free form style sheet editing
- network tab – can record whatever is happening on in the browser
- for JavaScript console functionality see commandline API (documented by firebug wiki)
A few examples:- console.log
- dir() – gives you access to an object
- inspect()
- ESC – toggles on and off the console
- $0 refers to which ever element is selected in the dev tool
- copy() copies to your clipboard
- Script Debugging
- Ctr-g – goto line
- hover over variable to see all its values at break
- break on subtree modifications – very handy if you don’t know where some code it happening.
- can set breaks for specific events
- can free form edit JavaScript
- unminifies minified code
- remote debugging –remote-debugging-port=1337
- hit ? for keyboard shortcuts
HTML5 vs Native (Android)
One session had an interesting discussion on the pros and cons to building either an HTML5 app for mobile devices and the pros and cons to building native mobile apps (obviously focused on Android as the mobile platform).
HTML5 case
- it is everywhere
- natively working on most mobile devices (more coming each day)
- in browser or embedded in a native app (web view)
- flexible
- html – content – execs, users, customers
- javascript – logic – programmers
- css – style – designers
- graceful degradation – app doesn’t explode if something isn’t supported on a given device
- CSS – common.css, mobile.css, android.css (cascading!)
- reusing same backend, different frontends (desktop, mobile, car, tv, etc)
- capable
- geolocation
- (multi) touch
- device orientation
- device api (catch different types of media/events)
- speech recognition
- semantic markup (meaning)
- rich graphics and canvas
- video / audio
- device cameras
- networking (ajax, cross-origin resource sharing, websockets)
- offline
- open
- standards based
- searchable
- well understood tech
- well supported (libraries, debugging and dev tools, community)
Native case (Android)
- anything running and built specifically for the app – android scripting layer using python (?)
- gives you a richer experience
- optimized for the system the user is running (device)
- pros
- speed
- power
- control
- integration
- “if you can’t improve using the native APIs, your not trying hard enough”
- a standardized user experience
- standards trail innovation
- leverage the hardware that is available (cars, picture frames, tv, tablets, phones, etc)
- native apps can interact with other apps
- can be truely run in the background
- alarms (cron job type apps)
- full offline support (rich and already completely there on apps (coming to HTML5))
- rich notifications
- apps can be built on top of each other
Summary
- HTML5 is here now, mobile, capable, open
- Native is integrated, current, user experience
Be smart, use both, but at least use one.
