This document discusses Google's development of the YouTube mobile web app using HTML5. It describes how HTML5 features like video playback, local storage, and touch events were used to create a native app-like experience. It also discusses tools like Google Closure that were used for large-scale JavaScript development. The document promotes building web apps over native apps for cross-platform support and lower development costs.

1. YouTube Mobile WebApp
On the Edge of HTML5
Google Confidential and Proprietary
Google Confidential and Proprietary

2. Meet the HTML5 Webapps!
Google Confidential and Proprietary

3. Meet the HTML5 Webapps!
but screenshots don't
do it justice!
m.youtube.com
Google Confidential and Proprietary

4. 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

5. HTML5: Side Perks used
● LocalStorage
○ AJAX Cache
○ Persistent Settings
● Canvas
○ Lighter than images
○ Dynamic Backgrounds
Google Confidential and Proprietary

6. 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

7. 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 Proprietary

8. Tools for the sane
otherwise, we'll be all nuts...
Google Confidential and Proprietary
Google Confidential and Proprietary

9. Large-Scale Javascript Development
Google Closure
● Optionally Compiled + Obviously Minified
Google Confidential and Proprietary

10. Large-Scale Javascript Development
Google Closure
● Optional Types and Static Compiler Checking
● Compiled in DOM Templating
Google Confidential and Proprietary

11. Large-Scale Javascript Development
Google Closure
● CSS Name Mangling
Google Confidential and Proprietary

12. Debugging & Testing Flow
1. Google Chrome + Web Inspector
2. Safari
3. iOS Simulator + iWebInspector
[important]
4. Devices
○ iPhone/iPad
○ Android Browser / Android Chrome
Google Confidential and Proprietary

13. HTML5 + CSS3: Interactions gets transitions
● CSS Transforms rotate skew translate
Google Confidential and Proprietary

14. HTML5 + CSS3: Interactions gets transitions
● CSS Transitions
Google Confidential and Proprietary

15. Why did we do it?
If you had to pick between App vs WebApp
Google Confidential and Proprietary
Google Confidential and Proprietary

16. 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 Proprietary

17. Challenge yourself!
Coz fame and fortune doesn't come easy...
Google Confidential and Proprietary
Google Confidential and Proprietary

18. We have awesome skills & ideas
● Work with Google Apps Script or Google Drive API
● Win Chromebooks or US$ 20,000.
Google Confidential and Proprietary

19. ● 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

20. ● 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

21. ● Links
○ http://developers.google.com/drive
○ http://developers.google.com/google-apps
○ http://developers.google.com/apps-script
○ http://script.google.com
Google Confidential and Proprietary