What's this jQuery? Where it came from, and how it will drive innovation

35
@jdsharp The San Francisco Java User Group San Francisco, California What’s this jQuery?

description

In this talk jQuery Project Team member, Johnathan Sharp, sets out to answer four main questions: Where'd jQuery Come from?, Why is it so popular? How has it changed development? How will it drive innovation? **see the video at http://marakana.com/f/211 ** In the scope of his talk Johnathan also touches on: - What jQuery is not - Core concepts to understand before jumping into jQuery (CSS & Selectors, DOM, Events, JavaScript patterns, etc) - jQuery core, and jQuery project plugins - The larger jQuery Project including the jQuery core, jQuery UI, and jQuery mobile - jQuery going forward (HTML5, mobile browser support, official Plugins, growing corporate support services) Finally, Johnathan will dig deep into a few code demos to illustrate some of the core concepts of jQuery, like events, JavaScript patterns, and making Ajax requests.

Transcript of What's this jQuery? Where it came from, and how it will drive innovation

Page 1: What's this jQuery? Where it came from, and how it will drive innovation

@jdsharpThe San Francisco Java User GroupSan Francisco, California

What’s this jQuery?

Page 2: What's this jQuery? Where it came from, and how it will drive innovation

Who am I?

Page 3: What's this jQuery? Where it came from, and how it will drive innovation

Started developing for the web in 1996

AOL was a popular browser of choice2400bps modem

Page 4: What's this jQuery? Where it came from, and how it will drive innovation
Page 5: What's this jQuery? Where it came from, and how it will drive innovation

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

8 employees, 2 contractors, 7 states

Co-founded appendTo in October 2009

Page 6: What's this jQuery? Where it came from, and how it will drive innovation

Cowboy after 5PM M-F & weekends

Page 7: What's this jQuery? Where it came from, and how it will drive innovation

Ready for jQuery?

Page 8: What's this jQuery? Where it came from, and how it will drive innovation

here we go...

Flickr @evilerin

Page 9: What's this jQuery? Where it came from, and how it will drive innovation

... a little more enthusiasmFlickr @ prasoonpics

Page 10: What's this jQuery? Where it came from, and how it will drive innovation

4 Questions- Where’d jQuery Come from?- Why is it so popular?- How has it changed development?- How will it drive innovation?

- Then code!

Page 11: What's this jQuery? Where it came from, and how it will drive innovation

The web as we know it...- Complex

- Highly technical- Highly dynamic

- Exponential growth

Page 12: What's this jQuery? Where it came from, and how it will drive innovation

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

“It’s just JavaScript”

Page 13: What's this jQuery? Where it came from, and how it will drive innovation

5 Doctypes3 CSS Versions

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

ColdFusion, FilemakerSQL Server, Oracle, MySQL, Postgres, CouchDB,

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

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

Page 14: What's this jQuery? Where it came from, and how it will drive innovation

The web is rich with innovation...- Open Source

- High distribution- Large community

- Numerous problems to solve

Page 15: What's this jQuery? Where it came from, and how it will drive innovation

Go back to 2006...- Client side wasn’t (terribly) exciting

- Tedious DOM programming- “Unique” browsers

- and jQuery was born

Page 16: What's this jQuery? Where it came from, and how it will drive innovation

So what is a web developer really?

Page 17: What's this jQuery? Where it came from, and how it will drive innovation

They are a craftsman...- Skilled at integration- We’re about the tools

- Good tools win! (unless they’re bought and abandoned)

Page 18: What's this jQuery? Where it came from, and how it will drive innovation

jQuery’s Key to Success- It integrates.

Page 19: What's this jQuery? Where it came from, and how it will drive innovation

Why jQuery Grew...- Leveraged existing skills

- Improved developer efficiency- Lowered barrier to entry- Fostered a community- Protected its core focus

Page 20: What's this jQuery? Where it came from, and how it will drive innovation

What is jQuery?- DOM Centric library and API

- Plugin architecture - Makes working with a

living DOM easy- Make Ajax easy

Page 21: What's this jQuery? Where it came from, and how it will drive innovation

What is jQuery Not?- Shortcut to avoid learning JavaScript- Bullet proof vest to keep you from

shooting yourself in the foot- Excuse to avoid learning web

development best practices

Page 22: What's this jQuery? Where it came from, and how it will drive innovation

jQuery Core- DOM Centric

- Ajax- Events

- Effects/Animations

Page 23: What's this jQuery? Where it came from, and how it will drive innovation

The jQuery Project Plugins- jQuery Templating

- jQuery Data Linking- Script Loading

Page 24: What's this jQuery? Where it came from, and how it will drive innovation

The Larger jQuery Project- jQuery Core- jQuery UI

- jQuery Mobile- QUnit

- Test Swarm- Sizzle

Page 25: What's this jQuery? Where it came from, and how it will drive innovation

jQuery Mobile

Page 26: What's this jQuery? Where it came from, and how it will drive innovation

jQuery UI

Page 27: What's this jQuery? Where it came from, and how it will drive innovation

QUnit

Page 28: What's this jQuery? Where it came from, and how it will drive innovation

The Community- Tutorials- Plugins- API docs

- Community Forums- Meetups

- Conferences

Page 29: What's this jQuery? Where it came from, and how it will drive innovation

Web Development w/ jQuery- DOM

- Events & Propagation- CSS & Selectors

- HTML5- HTTP (Get / Post)

- Cross Domain & Security- JSON

- JavaScript patterns (scope/closure)

Page 30: What's this jQuery? Where it came from, and how it will drive innovation

jQuery Going Forward- HTML5 is supported today by jQuery

- Support for new browsers- Mobile browser support- Official jQuery Plugins

- Growing Corporate Support Services

Page 31: What's this jQuery? Where it came from, and how it will drive innovation

Code- Demos

- Mockjax- QUnit

- jQuery Mobile

Page 32: What's this jQuery? Where it came from, and how it will drive innovation

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

// Ajax

Page 33: What's this jQuery? Where it came from, and how it will drive innovation

Code: Mockjax- Transparent Ajax mocking w/ jQuery

http://github.com/appendto/jquery-mockjax

Page 34: What's this jQuery? Where it came from, and how it will drive innovation

Flickr @ martinvirtualtours

...yee haw!

Page 35: What's this jQuery? Where it came from, and how it will drive innovation

@jdsharpThe San Francisco Java User GroupSan Francisco, California

What’s this jQuery?