HDC 2010 Keynote: HTML5, jQuery and the Open Web

HTML5, jQuery & The Open Web
Heartland Developers Conference 2010
Omaha, Nebraska

@jdsharp

Monday, September 13, 2010

Who am I?


Started developing for the web
in 1996

AOL was a popular browser of choice
2400bps modem


Co-author of the jQuery Cookbook


jQuery Team Member


THE jOUERY COMPANY

Co-founded appendTo in October 2009

9 employees, 3 contractors, 8 states
5 jQuery Team Members


Cowboy after 5PM M-F & weekends


Ready for a challenge?


we grab hold & hang on...

Flickr @evilerin


Flickr @ prasoonpics

...with even more enthusiasm

...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 4
Internet Explorer 5


Internet Explorer 4
Internet Explorer 5
Internet Explorer 6


Internet Explorer 4
Internet Explorer 5
Internet Explorer 6
no more Internet Explorer!


Internet Explorer 4
Internet Explorer 5
Internet Explorer 6
no more Internet Explorer! (j/k LOL!)


Internet Explorer 4
Internet Explorer 5
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
(Internet Explorer 9)


or Internet Explorer 4
Navigat

Internet Explorer 5
Internet Explorer 6
pe
Netsca

Internet Explorer 7
Internet Explorer 8


AOL B
rowser
Navigat

Internet Explorer 5
Internet Explorer 6
pe
Netsca

Internet Explorer 7
Internet Explorer 8


AOL B
rowser
Navigat

Internet Explorer 5
Internet Explorer 6
pe
Netsca

Internet Explorer 7
Internet Explorer 8
Firefox 1, 2, 3, (4)

AOL B
rowser
Navigat

Internet Explorer 5
Internet Explorer 6
pe
Netsca

Internet Explorer 7
Internet Explorer 8
Opera 2
, 3, 4, 5, 6
, 7, 8, 9, 1 Firefox 1, 2, 3, (4)
0

AOL B
rowser
Navigat

Internet Explorer 5

Mob il e?
Internet Explorer 6
pe
Netsca

Internet Explorer 7
Internet Explorer 8
Opera 2
, 3, 4, 5, 6
, 7, 8, 9, 1 Firefox 1, 2, 3, (4)
0

Can’t forget the
one browser to rule them
all...


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
.ﬂv, .wmv, .mp3, .ogg, .mov


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
.ﬂv, .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 adoption
(technical/does it work) (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


// Selecting elements

$(‘your css selector’)


// Selecting elements

$(‘your css selector’)

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


// Creating elements

$(‘<string of html>’)


// Creating elements

$(‘<string of html>’)

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


// Modifying attributes

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


// Modifying attributes

$(‘a’).attr(‘href’, ‘http://appendto.com’);
$(‘a’).css(‘color’, ‘red’);
$(‘a’).addClass(‘hello’);
$(‘a’).removeClass(‘hello’);


// Attaching events

$(‘a’).click(function() {

return false;
});


// Ajax

$.get(‘/restful/api/echo’, { say: “howdy!” },

function(data) {

alert(‘the server said: ‘ + data.said);

}, ‘json’);


jQuery made it easy to
do cross browser


HTML5?

Integration or 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?


Both
Integration & 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 time
http://www.thewildernessdowntown.com/

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

http://events.jquery.org


Where should you be
headed?
HTML5 (already being implemented)
jQuery supports HTML5 today
CSS3 is on the radar & implementations
Canvas / SVG good support
Local & ofﬂine storage
@font-face downloaded / embedded fonts
WebSockets streaming data
jQuery Mobile Q4 2010

Quantum leap?
Browser vendors are “uniﬁed”
Client side performance
Improved tools
Mobile explosion
Technology refresh cycle


...embrace
& enjoy the
ride!

Flickr @ martinvirtualtours


What are some of the
front-end challenges you’re
facing today?


HDC 2010 Keynote: HTML5, jQuery and the Open Web

Recommended

Recommended

More Related Content

Similar to HDC 2010 Keynote: HTML5, jQuery and the Open Web

Similar to HDC 2010 Keynote: HTML5, jQuery and the Open Web (20)

HDC 2010 Keynote: HTML5, jQuery and the Open Web