HDC 2010 Keynote: HTML5, jQuery and the Open Web

@jdsharp

HTML5, jQuery & The Open Web

Heartland Developers Conference 2010Omaha, Nebraska

Monday, September 13, 2010

Who am I?


Started developing for the web in 1996

AOL was a popular browser of choice2400bps modem


Co-author of the jQuery Cookbook


jQuery Team Member



T H E j O U E R Y C O M P A N Y

9 employees, 3 contractors, 8 states5 jQuery Team Members

Co-founded appendTo in October 2009


Cowboy after 5PM M-F & weekends


Ready for a challenge?


we grab hold & hang on...

Flickr @evilerin


...with even more enthusiasmFlickr @ prasoonpics


...we run from it

Flickr @ prasoonpics


Web developers face a constantly changing

challenge...


“It’s just HTML”“It’s just CSS”

“It’s just JavaScript”



Internet Explorer 4


Internet Explorer 4Internet Explorer 5


Internet Explorer 4Internet Explorer 5Internet Explorer 6



no more Internet Explorer!



no more Internet Explorer! (j/k LOL!)




Internet Explorer 7Internet Explorer 8(Internet Explorer 9)





Net

scap

e N

avig

ator





Net

scap

e N

avig

ator

AOL Browser





Net

scap

e N

avig

ator

Firefox 1, 2, 3, (4)

AOL Browser





Net

scap

e N

avig

ator

Firefox 1, 2, 3, (4)

AOL Browser

Opera 2, 3, 4, 5, 6, 7, 8, 9, 10Monday, September 13, 2010




Net

scap

e N

avig

ator

Firefox 1, 2, 3, (4)

AOL Browser

Opera 2, 3, 4, 5, 6, 7, 8, 9, 10

Mobile?


Can’t forget theone browser to rule them

all...


5 Doctypes3 CSS Versions

Flash, Silverlight, ActiveX, JavaAppletsASP (Classic), ASP.net, Java, PHP, Ruby, Python,

FilemakerSQL Server, Oracle, MySQL, Postgres, CouchDB,

MongoDB, AccessHTTP, FTP, SMTP, SSL, gopher://

Ajax, Comet, SOAP, and the REST.flv, .wmv, .mp3, .ogg, .mov


5 Doctypes3 CSS Versions

Flash, Silverlight, ActiveX, JavaAppletsASP (Classic), ASP.net, Java, PHP, Ruby, Python,

FilemakerSQL Server, Oracle, MySQL, Postgres, CouchDB,

MongoDB, AccessHTTP, FTP, SMTP, SSL, gopher://

Ajax, Comet, SOAP, and the REST.flv, .wmv, .mp3, .ogg, .mov

and this too => ColdFusion


So what is a web developer really?


an integrator & creator


Face two challenges


Face two challenges

integration(technical/does it work)


Face two challenges

integration(technical/does it work)

adoption(skills/experience)


So how does HTML5, jQuery & the Open Web address these?


JavaScript?

Integration or adoption?


Adoption


No one took it seriously


jQuery changed that, opened the door for skills acquisition and lowered the barrier to entry...


It showed what was possible and brought new

life to an established technology


What happened?


Innovation! & Adoption


jQuery !== JavaScript


jQuery is written in JavaScript


var sessions = document.getElementsByClassName(‘sessions’);for ( var i = 1; i < sessions.length; ) { sessions[i].className += ‘ awesome’; i += 2;}


$(‘.sessions:odd’).addClass(‘awesome’)


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


$(‘your css selector’)

// Selecting elements


$(‘your css selector’)

$(‘#byId’)$(‘.byClass’)$(‘body’)$(‘ul > li’)// supports CSS 1-3 selectors today

// Selecting elements


$(‘<string of html>’)

// Creating elements


$(‘<string of html>’)

$(‘<h1>My title</h1>’).appendTo(‘body’);

// Creating elements


$(‘a’).attr(‘href’, ‘http://appendto.com’);

// Modifying attributes


$(‘a’).attr(‘href’, ‘http://appendto.com’);

$(‘a’).css(‘color’, ‘red’);$(‘a’).addClass(‘hello’);$(‘a’).removeClass(‘hello’);

// Modifying attributes


$(‘a’).click(function() { return false;});

// Attaching events


$.get(‘/restful/api/echo’, { say: “howdy!” }, function(data) { alert(‘the server said: ‘ + data.said); }, ‘json’);

// Ajax


jQuery made it easy to do cross browser


HTML5?

Integration or adoption?


Adoption


One doctype to rule them all!(consolidation)

<!DOCTYPE html>


It’s semantic


http://joshduck.com/periodic-table.html


// 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;});


Easier to express the rich web using HTML5


The Open Web?


BothIntegration & Adoption


Integration between layers using open standards

(HTML5, CSS3, JavaScript, etc.)

Integration of shared data(REST services)


Adoption by developers(HTML5, CSS3, JavaScript, etc.)


So what does this all mean?


We have better tools and tested patterns

that are best expressed with HTML5, jQuery and the

Open Web


But my company doesn’t...


Hold it!

Flickr @ eschipul


Let’s think about 2 years from now...


How much experience?


There is a severe shortage of “front-end developers”


There is a severe shortage of multi-discipline

“front-end developers”


Demo timehttp://www.thewildernessdowntown.com/

http://www.dextrose.com/en/projects/aves-engine

http://events.jquery.org


http://www.thewildernessdowntown.com/

http://www.thewildernessdowntown.com/





Where should you be headed?

HTML5 (already being implemented)jQuery supports HTML5 today

CSS3 is on the radar & implementationsCanvas / SVG good support

Local & offline storage@font-face downloaded / embedded fonts

WebSockets streaming datajQuery Mobile Q4 2010


Quantum leap?

Browser vendors are “unified”Client side performanceImproved toolsMobile explosionTechnology refresh cycle


Flickr @ martinvirtualtours

...embrace & enjoy the

ride!


What are some of thefront-end challenges you’re

facing today?


@jdsharp

HTML5, jQuery & The Open Web

Heartland Developers Conference 2010Omaha, Nebraska


HDC 2010 Keynote: HTML5, jQuery and the Open Web

Documents

navigat internet explorer

jk lol

jquery cookbook

aol browser

jquery team membersmonday

jquery team membermonday

aol b rowser

filemakersql server