Future of the Web and HTML5
Tom Hughes-Croucher
Technical Evangelist, Yahoo! Developer
Network
Future of the Web and HTML5
Tom Hughes-Croucher
Technical Evangelist, Yahoo! Developer
Network
Future of the Web and HTML5
Tom Hughes-Croucher
Technical Evangelist, Yahoo! Developer
Network
Future of the Web and HTML5
Tom Hughes-Croucher
Technical Evangelist, Yahoo! Developer
Network
CC Photo by Marien van Os
CC Photo by Marien van Os
cc
Xkcd.com
PHP 5 has goto()
HTML 5 !has goto()
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        processChange...
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        processChange...
Revolutionary Technologies

     Graphics
Revolutionary Technologies

     Graphics

     Fast JavaScript
Revolutionary Technologies

     Graphics

     Fast JavaScript

     Background Processing
Revolutionary Technologies

     Graphics

     Fast JavaScript

     Background Processing

      Beyond the desktop
Revolutionary Technologies

     Graphics

     Fast JavaScript

     Background Processing

      Beyond the desktop

   ...
Graphics
Text
Text
Text
No start-up delay
No start-up delay


Available on mobile devices today
No start-up delay


Available on mobile devices today


Rendering fidelity with browser
 (especially important for typograp...
No start-up delay


Available on mobile devices today


Rendering fidelity with browser
 (especially important for typograp...
No start-up delay


Available on mobile devices today


Rendering fidelity with browser
 (especially important for typograp...
TypeKit
3D Cube Defence
http://nitobi.com/yohei/cube_defense_alpha/#
               by Yoshi Shimomea
Fast JavaScript
2.0                                                Beta                   Alph
                                           ...
irc://chat.nodejs.org
                      #w2e

Chrome’s V8
Background
Processing
1




                     Browser




User Interface




                 2




                 Background
             ...
1




                     Browser




User Interface




                 X
                 2




                 Backg...
1




                     Browser




User Interface




                 X
                 2




                 Backg...
1




                                   Browser




User Interface




                               2


               ...
Fluid            Mozilla
                   Prism




Adobe AIR   Appcelerator Titanium
Beyond the
desktop
“The browser is the most hostile
programming environment ever devised”


                          -Doug Crockford
“I used to think the browser was the most
   hostile programming environment ever
devised, but then I discovered programmi...
The Web?
1,500,000,000+
Huge Deployment


Huge Developer Base


 No Vendor Control
Breaking
through the
sandbox
Geolocation
http://html5demos.com/geo (FF 3.5 only)
280 Slides
http://280slides.com/Editor/
Drag’n’drop
     http://html5demos.com/drag
http://html5demos.com/drag-anything
BROWSER PLUS
Photodrop
http://browserplus.yahoo.com/demos/photodrop/
Gluing it together
Firebug
 By Joe Hewitt
Firebug
   By Joe Hewitt




Yes, that Joe Hewitt
Firebug Plug-ins
YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
Firebug Plug-ins
YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
Firebug Plug-ins
YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
Firebug Plug-ins
YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
Firebug Plug-ins
YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
WebKit Inspector
Now with event listeners, show colors, and much more
Heap Explorer
Task Manager
V8 JSON Debugging
 Protocol

 “Scope” Debugging
 Protocol

 “Crossfire” Debugging
 Protocol

Google Group: WebDebugProtocol
Atul Varma’s Memory Profiler:
In Conclusion
Great
                            Widgets



           Easy                                Great
        Deployment      ...
Thanks

Dion Almaer
Ben Galbraith
Remy Sharp
Tom
                           Hughes-Croucher
                           croucher@yahoo-inc.com




                 t ou...
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
HTML5 and the Future of Apps
Upcoming SlideShare
Loading in...5
×

HTML5 and the Future of Apps

3,292

Published on

1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,292
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
130
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide
  • Dion
  • HTML5 and the Future of Apps

    1. 1. Future of the Web and HTML5 Tom Hughes-Croucher Technical Evangelist, Yahoo! Developer Network
    2. 2. Future of the Web and HTML5 Tom Hughes-Croucher Technical Evangelist, Yahoo! Developer Network
    3. 3. Future of the Web and HTML5 Tom Hughes-Croucher Technical Evangelist, Yahoo! Developer Network
    4. 4. Future of the Web and HTML5 Tom Hughes-Croucher Technical Evangelist, Yahoo! Developer Network
    5. 5. CC Photo by Marien van Os
    6. 6. CC Photo by Marien van Os
    7. 7. cc Xkcd.com
    8. 8. PHP 5 has goto() HTML 5 !has goto()
    9. 9. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { processChange(); } } xhr.open("GET", "/foo/bar"); xhr.send(null);
    10. 10. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { processChange(); } } xhr.open("GET", "/foo/bar"); xhr.send(null);
    11. 11. Revolutionary Technologies Graphics
    12. 12. Revolutionary Technologies Graphics Fast JavaScript
    13. 13. Revolutionary Technologies Graphics Fast JavaScript Background Processing
    14. 14. Revolutionary Technologies Graphics Fast JavaScript Background Processing Beyond the desktop
    15. 15. Revolutionary Technologies Graphics Fast JavaScript Background Processing Beyond the desktop Breaking through the sandbox
    16. 16. Graphics
    17. 17. Text
    18. 18. Text
    19. 19. Text
    20. 20. No start-up delay
    21. 21. No start-up delay Available on mobile devices today
    22. 22. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography)
    23. 23. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography) No bridges necessary
    24. 24. No start-up delay Available on mobile devices today Rendering fidelity with browser (especially important for typography) No bridges necessary Not a plug-in
    25. 25. TypeKit
    26. 26. 3D Cube Defence http://nitobi.com/yohei/cube_defense_alpha/# by Yoshi Shimomea
    27. 27. Fast JavaScript
    28. 28. 2.0 Beta Alph a Beta Chrome’s V8 Safari’s SquirrelFish Extreme Firefox’s TraceMonkey Opera's Carakan
    29. 29. irc://chat.nodejs.org #w2e Chrome’s V8
    30. 30. Background Processing
    31. 31. 1 Browser User Interface 2 Background Thread
    32. 32. 1 Browser User Interface X 2 Background Thread
    33. 33. 1 Browser User Interface X 2 Background Thread
    34. 34. 1 Browser User Interface 2 Web Workers Background Thread
    35. 35. Fluid Mozilla Prism Adobe AIR Appcelerator Titanium
    36. 36. Beyond the desktop
    37. 37. “The browser is the most hostile programming environment ever devised” -Doug Crockford
    38. 38. “I used to think the browser was the most hostile programming environment ever devised, but then I discovered programming for mobile” -Doug Crockford
    39. 39. The Web?
    40. 40. 1,500,000,000+
    41. 41. Huge Deployment Huge Developer Base No Vendor Control
    42. 42. Breaking through the sandbox
    43. 43. Geolocation http://html5demos.com/geo (FF 3.5 only)
    44. 44. 280 Slides http://280slides.com/Editor/
    45. 45. Drag’n’drop http://html5demos.com/drag http://html5demos.com/drag-anything
    46. 46. BROWSER PLUS
    47. 47. Photodrop http://browserplus.yahoo.com/demos/photodrop/
    48. 48. Gluing it together
    49. 49. Firebug By Joe Hewitt
    50. 50. Firebug By Joe Hewitt Yes, that Joe Hewitt
    51. 51. Firebug Plug-ins YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
    52. 52. Firebug Plug-ins YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
    53. 53. Firebug Plug-ins YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
    54. 54. Firebug Plug-ins YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
    55. 55. Firebug Plug-ins YSlow, FirePHP, Pixel Perfect, Firebug Code Coverage, FireUnit
    56. 56. WebKit Inspector Now with event listeners, show colors, and much more
    57. 57. Heap Explorer
    58. 58. Task Manager
    59. 59. V8 JSON Debugging Protocol “Scope” Debugging Protocol “Crossfire” Debugging Protocol Google Group: WebDebugProtocol
    60. 60. Atul Varma’s Memory Profiler:
    61. 61. In Conclusion
    62. 62. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Open Web Easy Desktop Remoting Integration Easy State-of-the-Art Programming Plug-ins Model
    63. 63. Thanks Dion Almaer Ben Galbraith Remy Sharp
    64. 64. Tom Hughes-Croucher croucher@yahoo-inc.com t ou ch eep in twitter.com/sh1mmer K speakerrate.com/sh1mmer The Cloud’s Hidden Lock-in: Thursday 2:25pm Network Latency 1A21
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×