youtube mobile webapp: on the edge of html5
TRANSCRIPT
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