Google Confidential and ProprietaryGoogle Confidential and Proprietary

YouTube Mobile WebAppOn the Edge of HTML5

Google Confidential and Proprietary

Meet the HTML5 Webapps!

Google Confidential and Proprietary

Meet the HTML5 Webapps!

but screenshots don'tdo it justice!

m.youtube.com

Google Confidential and Proprietary

HTML5: YouTube is all about <video>

● Playback Options○ Fullscreen Video Playback

○ Inline Playback experience

● Video Playback Events○ timeupdate

○ play / pause / stop

Google Confidential and Proprietary

HTML5: Side Perks used

● LocalStorage○ AJAX Cache

○ Persistent Settings

● Canvas○ Lighter than images

○ Dynamic Backgrounds

Google Confidential and Proprietary

HTML5: Side Perks used

● Navigator Online Status○ Detection whether on 3G or Wifi

○ Offline detection

● Touch Events○ Faster than clicks

○ Mobile App-like interactions

Google Confidential and Proprietary

HTML5: Faster than a Website

● Hybrid Application Cache○ No Internet needed to start

○ Internet access needed for everything else

○ Cut loading time by 40%

● Single-Page WebApp○ No page loads

○ Limited by Javascript speed of the device

Google Confidential and ProprietaryGoogle Confidential and Proprietary

Tools for the saneotherwise, we'll be all nuts...

Google Confidential and Proprietary

Large-Scale Javascript DevelopmentGoogle Closure

● Optionally Compiled + Obviously Minified

Google Confidential and Proprietary

Large-Scale Javascript DevelopmentGoogle Closure

● Optional Types and Static Compiler Checking

● Compiled in DOM Templating

Google Confidential and Proprietary

Large-Scale Javascript DevelopmentGoogle Closure

● CSS Name Mangling

Google Confidential and Proprietary

Debugging & Testing Flow

1. Google Chrome + Web Inspector

2. Safari

3. iOS Simulator + iWebInspector

4. Devices [important]

○ iPhone/iPad

○ Android Browser / Android Chrome

Google Confidential and Proprietary

HTML5 + CSS3: Interactions gets transitions

● CSS Transforms rotate skew translate

Google Confidential and Proprietary

HTML5 + CSS3: Interactions gets transitions

● CSS Transitions

Google Confidential and ProprietaryGoogle Confidential and Proprietary

Why did we do it?If you had to pick between App vs WebApp

Google Confidential and Proprietary

All Depends:Pick WebApp When

1. Need to support as many platforms as possible.

○ The least common denominator

2. Super Snazzy not a real requirement.

○ CSS 3 is usually enough.

3. Access to Device via Toolkits (PhoneGap)

4. Some leeway on look and feel

Google Confidential and ProprietaryGoogle Confidential and Proprietary

Challenge yourself!Coz fame and fortune doesn't come easy...

Google Confidential and Proprietary

We have awesome skills & ideas

● Work with Google Apps Script or Google Drive API● Win Chromebooks or US$ 20,000.

Google Confidential and Proprietary

● Compete with South East Asia region

● Build Apps in any of these Categories:

a. Enterprise / Small Business Solutions

b. Social / Personal Productivity / Games / Fun

c. Education / Not for Profit / Water / Food & Hunger /

Health

Google Confidential and Proprietary

● If Bragging Rights ain't enough:

○ up to 30 SEA Semi-Finalists get:

■ Chromebooks

■ US$ 1,000 for Students

■ US$ 1,000 for Highlight Female Innovations

○ up to 3 SEA Winners get:

■ US$ 20,000

■ + US$ 18,000 (for their Department)

Google Confidential and Proprietary

● Links○ http://developers.google.com/drive

○ http://developers.google.com/google-apps

○ http://developers.google.com/apps-script

○ http://script.google.com