fowd javascript libraries
TRANSCRIPT
-
7/31/2019 Fowd Javascript Libraries
1/35
JavaScript LibrariesFuture of Web DesignNYC08
-
7/31/2019 Fowd Javascript Libraries
2/35
Karl Swedberg
Email: [email protected]
Twitter: @kswedberg Slides, links, and examples:
training.learningjquery.com
mailto:[email protected]:[email protected] -
7/31/2019 Fowd Javascript Libraries
3/35
Roseland BallroomYou can
-
7/31/2019 Fowd Javascript Libraries
4/35
Roseland BallroomYou can
Be like Glenn
-
7/31/2019 Fowd Javascript Libraries
5/35
Why Use JavaScript?
Keep HTML squeaky clean User Interaction & immediate feedback
Server interaction without page refresh
-
7/31/2019 Fowd Javascript Libraries
6/35
Why Not Use Flash?
Flash is great! You shoulduse it. But its not the answer to every question,
or the solution to every problem
-
7/31/2019 Fowd Javascript Libraries
7/35
Why Use a
JavaScript Library? Crazy fast development Cross-browser solutions without the mess Leverage what you already know about
HTML & CSS
Better CSS support than CSS(cf. www.quirksmode.org)
-
7/31/2019 Fowd Javascript Libraries
8/35
Why Use a
JavaScript Library?
Animation, movement, effects with ease Painlessly Unobtrusive
Encourages Progressive Enhancement
-
7/31/2019 Fowd Javascript Libraries
9/35
Whats Available?
Prototype / Scriptaculous
Dojo Toolkit Mootools
YUI : Yahoo! User Interface
jQuery
The Big Five:
-
7/31/2019 Fowd Javascript Libraries
10/35
Prototype
www.prototypejs.org script.aculo.us
Extensions: scripteka.com
http://script.aculo.us/http://www.scripteka.com/http://www.scripteka.com/http://script.aculo.us/http://script.aculo.us/http://www.prototypejs.org/http://www.prototypejs.org/ -
7/31/2019 Fowd Javascript Libraries
11/35
Dojo
www.dojotoolkit.org
Dojo Core Dijit
DojoX
http://www.dojotoolkit.org/http://www.dojotoolkit.org/ -
7/31/2019 Fowd Javascript Libraries
12/35
Mootools
mootools.net
mootorial.com
Extensions: clientcide.com
mooforum.net esteak.net
http://www.moord.it/http://www.clientcide.com/jshttp://www.moord.it/http://www.moord.it/http://www.clientcide.com/jshttp://www.clientcide.com/jshttp://mootools.net/http://mootools.net/ -
7/31/2019 Fowd Javascript Libraries
13/35
Yahoo! User Interface
YUI
developer.yahoo.com/yui
http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/ -
7/31/2019 Fowd Javascript Libraries
14/35
jQuery
jquery.com Plugins: plugins.jquery.com
jQuery UI: ui.jquery.com
http:///plugins/jquery.com/http:///plugins/jquery.com/http:///plugins/jquery.com/http://jquery.com/http://jquery.com/ -
7/31/2019 Fowd Javascript Libraries
15/35
Whats Available?
Mochikit
Adobe Spry
SproutCore
Cappuccino
ExtJS
DOMAssistant
base2
DED|Chain
JavaScriptMVC
qooxdoo
midori
June
UIZE
SimpleJS
fleegix.js
Foundation
GWT
and many more!
Others:
-
7/31/2019 Fowd Javascript Libraries
16/35
What Can They Do
For Me?
Find elements on a web page. Do something with them.
-
7/31/2019 Fowd Javascript Libraries
17/35
-
7/31/2019 Fowd Javascript Libraries
18/35
What Can They Do
For Me? Incorporate widgets (date pickers,
dialogs, data grids, sliders, etc.)
Send information to the server. And receive information from the server.
And do stuff with that information.
Help with more programmery things.
-
7/31/2019 Fowd Javascript Libraries
19/35
What Do they look like?
A lot more familiar than you might expect.
-
7/31/2019 Fowd Javascript Libraries
20/35
A lot like CSS
element {} div: #id {} #myid: .class {} .myclass:
selector1, selector2 {} p, a:
ancestor descendant {} p span:parent > child {} p > span:
:nth-child() {} li:nth-child(2):
http://www.w3.org/TR/css3-selectors/
http://www.w3.org/TR/css3-selectors/http://www.w3.org/TR/css3-selectors/ -
7/31/2019 Fowd Javascript Libraries
21/35
A lot like CSS
$('element') div: $('#id') #myid: $('.class') .myclass:
$('selector1, selector2') p, a:
$('ancestor descendant') p span:$('parent > child') p > span:
$(':nth-child()') li:nth-child(2):
http://docs.jquery.com/Selectors
http://www.w3.org/TR/css3-selectors/http://www.w3.org/TR/css3-selectors/ -
7/31/2019 Fowd Javascript Libraries
22/35
A lot like real words
$('#myid span')
.addClass('newclass')
.parents('div:first')
.fadeIn('slow')
.find('a')
.click(function() {
confirm('You really wanna go there?');
});
-
7/31/2019 Fowd Javascript Libraries
23/35
A lot like real words
$('#policy-cta a')
.media({
width: 500,
height: 300,
flashVars: {
autostart: 'true',
controlbar: 'none',
flvPath: '/assets/videos/intro.flv'
}
});
-
7/31/2019 Fowd Javascript Libraries
24/35
Basic Example 1
Table row striping
jQuery$('tr:nth-child(odd)').addClass('alt');
Mootools$$('tr:odd').addClass('alt');
Dojodojo.query('tr:nth-child(odd)').addClass('alt');
-
7/31/2019 Fowd Javascript Libraries
25/35
Basic Example 2
Hover
Dojo
dojo.query('tr').onmouseenter(function(e) {
e.target.className+= ' highlight';}).onmouseleave(function(e) {
e.target.className = e.target.className.replace(/ highlight/, '');
});
-
7/31/2019 Fowd Javascript Libraries
26/35
Basic Example 2
Hover
Mootools
$$('tr').addEvents({ mouseover: function() { this.addClass('highlight');
}, mouseout: function() {
this.removeClass('highlight');}
});
-
7/31/2019 Fowd Javascript Libraries
27/35
Basic Example 2
Hover
jQuery
$('tr').mouseover(function() {
$(this).addClass('highlight');
})
.mouseout( function() {$(this).removeClass('highlight');
});
-
7/31/2019 Fowd Javascript Libraries
28/35
Basic Example 2
Hover
jQuery
$('tr').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');});
-
7/31/2019 Fowd Javascript Libraries
29/35
Lets See It
Demo
http://book.kswedberg/bookstore/news/http://book.kswedberg/bookstore/news/ -
7/31/2019 Fowd Javascript Libraries
30/35
How Do I Choose?
Library Maturity (alpha, beta, number of releases?Unit tests?)
Documentation (official, unofficial, online, offline,books?)
Community (Forums, Google groups, blogs, IRC,Twitter? Tone, helpfulness, responsiveness?)
Project requirements (web site or application?ajax, effects, events?)
Performance (benchmarks?)
-
7/31/2019 Fowd Javascript Libraries
31/35
How Do I Choose?
Server-side Framework(Does it come bundledwith a JS library?)
Extensibility (Plugins, widgets, components availableand easy to find? Create your own easily?)
Style (What does the code look like? Is it easy tofigure out what's going on? Does it look familiar atall?)
Commitment to Unobtrusive JavaScript andAccessibility
Cost and Licensing (fee? open source? MIT, GNU,GPL, LGPL, BSD, etc.)
-
7/31/2019 Fowd Javascript Libraries
32/35
How Do I Get Them? Go to their websites
-
7/31/2019 Fowd Javascript Libraries
33/35
How Do I Get Them? Go to their websites dojotoolkit.org
jquery.com mootools.net prototypejs.org
developer.yahoo.com/yui
http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/ -
7/31/2019 Fowd Javascript Libraries
34/35
How Do I Get Them? Go to the Google AJAX Libraries API
code.google.com/apis/ajaxlibs/
http://code.google.com/apis/ajaxlibs/http://code.google.com/apis/ajaxlibs/ -
7/31/2019 Fowd Javascript Libraries
35/35
Thank You!