HDC 2010 Keynote: HTML5, jQuery and the Open Web

1,552 views

Published on

What a wild decade it has been for web developers! The post dot com bubble has seen a widening gap between technology used in the mass market and the leading edge of innovation. The slowed adoption of advancing technology has posed a significant challenge for developers as well as an opportunity for creative innovation. Couple these challenges with new demands for engaging the user and you have an environment ripe for rapid change. With the increased dialog and engagement between browser vendors, developers and users; innovative solutions such as jQuery; and the push for unification around the Open Web, what will unfold over the coming years? Join in the discussion as we explore the impact that HTML 5, jQuery and the Open Web will have on businesses, society and the changing market.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,552
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HDC 2010 Keynote: HTML5, jQuery and the Open Web

  1. 1. HTML5, jQuery & The Open Web Heartland Developers Conference 2010 Omaha, Nebraska @jdsharp Monday, September 13, 2010
  2. 2. Who am I? Monday, September 13, 2010
  3. 3. Started developing for the web in 1996 AOL was a popular browser of choice 2400bps modem Monday, September 13, 2010
  4. 4. Co-author of the jQuery Cookbook Monday, September 13, 2010
  5. 5. jQuery Team Member Monday, September 13, 2010
  6. 6. Monday, September 13, 2010
  7. 7. THE jOUERY COMPANY Co-founded appendTo in October 2009 9 employees, 3 contractors, 8 states 5 jQuery Team Members Monday, September 13, 2010
  8. 8. Cowboy after 5PM M-F & weekends Monday, September 13, 2010
  9. 9. Ready for a challenge? Monday, September 13, 2010
  10. 10. we grab hold & hang on... Flickr @evilerin Monday, September 13, 2010
  11. 11. Flickr @ prasoonpics ...with even more enthusiasm Monday, September 13, 2010
  12. 12. ...we run from it Flickr @ prasoonpics Monday, September 13, 2010
  13. 13. Web developers face a constantly changing challenge... Monday, September 13, 2010
  14. 14. “It’s just HTML” “It’s just CSS” “It’s just JavaScript” Monday, September 13, 2010
  15. 15. Monday, September 13, 2010
  16. 16. Internet Explorer 4 Monday, September 13, 2010
  17. 17. Internet Explorer 4 Internet Explorer 5 Monday, September 13, 2010
  18. 18. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 Monday, September 13, 2010
  19. 19. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! Monday, September 13, 2010
  20. 20. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! (j/k LOL!) Monday, September 13, 2010
  21. 21. Internet Explorer 4 Internet Explorer 5 Internet Explorer 6 no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
  22. 22. or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
  23. 23. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Monday, September 13, 2010
  24. 24. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 (Internet Explorer 9) Firefox 1, 2, 3, (4) Monday, September 13, 2010
  25. 25. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 Opera 2 (Internet Explorer 9) , 3, 4, 5, 6 , 7, 8, 9, 1 Firefox 1, 2, 3, (4) 0 Monday, September 13, 2010
  26. 26. AOL B rowser or Internet Explorer 4 Navigat Internet Explorer 5 Mob il e? Internet Explorer 6 pe Netsca no more Internet Explorer! (j/k LOL!) Internet Explorer 7 Internet Explorer 8 Opera 2 (Internet Explorer 9) , 3, 4, 5, 6 , 7, 8, 9, 1 Firefox 1, 2, 3, (4) 0 Monday, September 13, 2010
  27. 27. Can’t forget the one browser to rule them all... Monday, September 13, 2010
  28. 28. 5 Doctypes 3 CSS Versions Flash, Silverlight, ActiveX, JavaApplets ASP (Classic), ASP.net, Java, PHP, Ruby, Python, Filemaker SQL Server, Oracle, MySQL, Postgres, CouchDB, MongoDB, Access HTTP, FTP, SMTP, SSL, gopher:// Ajax, Comet, SOAP, and the REST .flv, .wmv, .mp3, .ogg, .mov Monday, September 13, 2010
  29. 29. 5 Doctypes 3 CSS Versions Flash, Silverlight, ActiveX, JavaApplets ASP (Classic), ASP.net, Java, PHP, Ruby, Python, Filemaker SQL Server, Oracle, MySQL, Postgres, CouchDB, MongoDB, Access HTTP, FTP, SMTP, SSL, gopher:// Ajax, Comet, SOAP, and the REST .flv, .wmv, .mp3, .ogg, .mov and this too => ColdFusion Monday, September 13, 2010
  30. 30. So what is a web developer really? Monday, September 13, 2010
  31. 31. an integrator & creator Monday, September 13, 2010
  32. 32. Face two challenges Monday, September 13, 2010
  33. 33. Face two challenges integration (technical/does it work) Monday, September 13, 2010
  34. 34. Face two challenges integration adoption (technical/does it work) (skills/experience) Monday, September 13, 2010
  35. 35. So how does HTML5, jQuery & the Open Web address these? Monday, September 13, 2010
  36. 36. JavaScript? Integration or adoption? Monday, September 13, 2010
  37. 37. Adoption Monday, September 13, 2010
  38. 38. No one took it seriously Monday, September 13, 2010
  39. 39. jQuery changed that, opened the door for skills acquisition and lowered the barrier to entry... Monday, September 13, 2010
  40. 40. It showed what was possible and brought new life to an established technology Monday, September 13, 2010
  41. 41. What happened? Monday, September 13, 2010
  42. 42. Innovation! & Adoption Monday, September 13, 2010
  43. 43. jQuery !== JavaScript Monday, September 13, 2010
  44. 44. jQuery is written in JavaScript Monday, September 13, 2010
  45. 45. var sessions = document.getElementsByClassName(‘sessions’); for ( var i = 1; i < sessions.length; ) { sessions[i].className += ‘ awesome’; i += 2; } Monday, September 13, 2010
  46. 46. $(‘.sessions:odd’).addClass(‘awesome’) Monday, September 13, 2010
  47. 47. So what does jQuery do? - Selecting Elements from the DOM - Creating new elements - Modifying attributes & styles - Attaching & responding to events - Ajax requests to the server Monday, September 13, 2010
  48. 48. // Selecting elements $(‘your css selector’) Monday, September 13, 2010
  49. 49. // Selecting elements $(‘your css selector’) $(‘#byId’) $(‘.byClass’) $(‘body’) $(‘ul > li’) // supports CSS 1-3 selectors today Monday, September 13, 2010
  50. 50. // Creating elements $(‘<string of html>’) Monday, September 13, 2010
  51. 51. // Creating elements $(‘<string of html>’) $(‘<h1>My title</h1>’).appendTo(‘body’); Monday, September 13, 2010
  52. 52. // Modifying attributes $(‘a’).attr(‘href’, ‘http://appendto.com’); Monday, September 13, 2010
  53. 53. // Modifying attributes $(‘a’).attr(‘href’, ‘http://appendto.com’); $(‘a’).css(‘color’, ‘red’); $(‘a’).addClass(‘hello’); $(‘a’).removeClass(‘hello’); Monday, September 13, 2010
  54. 54. // Attaching events $(‘a’).click(function() { return false; }); Monday, September 13, 2010
  55. 55. // Ajax $.get(‘/restful/api/echo’, { say: “howdy!” }, function(data) { alert(‘the server said: ‘ + data.said); }, ‘json’); Monday, September 13, 2010
  56. 56. jQuery made it easy to do cross browser Monday, September 13, 2010
  57. 57. HTML5? Integration or adoption? Monday, September 13, 2010
  58. 58. Adoption Monday, September 13, 2010
  59. 59. One doctype to rule them all! (consolidation) <!DOCTYPE html> Monday, September 13, 2010
  60. 60. It’s semantic Monday, September 13, 2010
  61. 61. http://joshduck.com/periodic-table.html Monday, September 13, 2010
  62. 62. // He’s using jQuery $('#elements td').click(function(){ var self = $(this).hasClass('active'); $('.active .info').fadeOut(); $('.active').removeClass('active'); if (!self) { $(this).find('.info').fadeIn(); $(this).addClass('active'); } }); $('#elements a').click(function(event){ window.open(event.target.href, 'table'); return false; }); Monday, September 13, 2010
  63. 63. Easier to express the rich web using HTML5 Monday, September 13, 2010
  64. 64. The Open Web? Monday, September 13, 2010
  65. 65. Both Integration & Adoption Monday, September 13, 2010
  66. 66. Integration between layers using open standards (HTML5, CSS3, JavaScript, etc.) Integration of shared data (REST services) Monday, September 13, 2010
  67. 67. Adoption by developers (HTML5, CSS3, JavaScript, etc.) Monday, September 13, 2010
  68. 68. So what does this all mean? Monday, September 13, 2010
  69. 69. We have better tools and tested patterns that are best expressed with HTML5, jQuery and the Open Web Monday, September 13, 2010
  70. 70. But my company doesn’t... Monday, September 13, 2010
  71. 71. Hold it! Flickr @ eschipul Monday, September 13, 2010
  72. 72. Let’s think about 2 years from now... Monday, September 13, 2010
  73. 73. How much experience? Monday, September 13, 2010
  74. 74. There is a severe shortage of “front-end developers” Monday, September 13, 2010
  75. 75. There is a severe shortage of multi-discipline “front-end developers” Monday, September 13, 2010
  76. 76. Demo time http://www.thewildernessdowntown.com/ http://www.dextrose.com/en/projects/aves-engine http://events.jquery.org Monday, September 13, 2010
  77. 77. Monday, September 13, 2010
  78. 78. Monday, September 13, 2010
  79. 79. Where should you be headed? HTML5 (already being implemented) jQuery supports HTML5 today CSS3 is on the radar & implementations Canvas / SVG good support Local & offline storage @font-face downloaded / embedded fonts WebSockets streaming data jQuery Mobile Q4 2010 Monday, September 13, 2010
  80. 80. Quantum leap? Browser vendors are “unified” Client side performance Improved tools Mobile explosion Technology refresh cycle Monday, September 13, 2010
  81. 81. ...embrace & enjoy the ride! Flickr @ martinvirtualtours Monday, September 13, 2010
  82. 82. What are some of the front-end challenges you’re facing today? Monday, September 13, 2010
  83. 83. HTML5, jQuery & The Open Web Heartland Developers Conference 2010 Omaha, Nebraska @jdsharp Monday, September 13, 2010

×