prezentace

Srovnání JS frameworků
Jiří Kunčar & Jiří Martišek
Technologie vývoje webových aplikací
Osnova
•
•
•
•
•
•
•
•
•
proč JS framework?
ukázky kódu
CSS selektory, manipulace s DOM
JSON
AJAX
velikost, pluginy
dokumentace
podpora prohlížečů
rychlost
Porovnávané frameworky
Proč JS framework?
• zjednodušuje a zefektivňuje psaní javascriptu
• zakrývá rozdíly mezi prohlížeči
• mnoho užitečných pluginů
Ukázky kódu
Zpráva po kliknutí na odkaz
var helloWorld = function() {
alert("Hello World!");
}
$("#container").click(helloWorld);
// JQuery
Y.on("click", helloWorld, "#container");
// YUI
$('container').observe('click', helloWorld); // prototype
$('container').addEvent('click', helloWorld); // MooTools
Ukázky kódu
Označování položek seznamu
<ul id="demo">
<li>lorem</li>
<li>ispum</li>
<li>dolor</li>
<li>sit</li>
</ul>
Ukázky kódu
Označování položek seznamu – JQuery
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var onClick= function() {
$(this).text("clicked!");
$(this).attr('style', 'background-color: green;');
};
$(function() {
$("#demo li").click(onClick);
});
</script>
Ukázky kódu
Označování položek seznamu – YUI
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use('*', function(Y) {
var nodes = Y.all('#demo li');
var onClick = function(e) {
nodes.set('innerHTML', 'clicked!');
e.currentTarget.setStyle('backgroundColor', 'green');
};
nodes.on('click', onClick);
});
</script>
Ukázky kódu
Označování položek seznamu – Prototype
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
var onClick= function() {
this.update("clicked!");
this.writeAttribute('style', 'background-color: green;');
};
$$("#demo li").invoke("observe", "click", onClick });
</script>
Ukázky kódu
Označování položek seznamu – MooTools
<script src="mootools.js" type="text/javascript"></script>
<script type="text/javascript">
var onClick= function() {
$(this).set('text', 'clicked!');
// změna textu v prvku
$(this).set('styles', {
'background-color' : 'green' // JSON formát !!!
});
// lze vykonat jedním voláním set:
// $(this).set({'text':'clicked',
//
'styles':{'background-color':'green'}});
};
$$("#demo li").addEvent('click', onClick);
</script>
CSS selektory
• selektory pro výběr prvků pomocí CSS 3
• mohou být mírně upravené oproti specifikaci
• podporovány všemy zkoumanými frameworky
• např.
• $(„ul li:first-child“)
• $(„input:not([type=button])“)
DOM
JQuery
$("h1 + div > p").append("<span>added text</span>");
// analogicky prepend()
$("table tr:odd").addClass("yellow");
// liché řádky budou žluté (indexováno od 0)
$("img").attr("alt", "this is a picture");
$("p:last").after("<p>The End</p>");
// analogicky before()
$("table tr:nth-child(4n+3)").remove();
$("span.greetings").wrap("<div></div>");
// obalí element daným HTML
DOM
YUI
var elements = YAHOO.util.Selector.query('ul li');
elements = YAHOO.util.Selector.filter(elements, '.selected');
YAHOO.util.Dom.addClass(elements, 'yellow');
// analogicky removeClass()
YAHOO.util.Dom.insertBefore('text', elements);
// setAttribute, getChildren, getFirstChild, getNextSibling,
// getXY, setStyle, ...
DOM
Prototype
$("h1 + div > p").append("<span>added text</span>");
$$("table tbody > tr:nth-child(odd)").each( function(el) {
el.writeAttribute('style', 'background-color: green;')
}); // liché řádky budou mít zelené pozadí
$('demo').insert({
before: "<big>before</big>",
after: "<small>after</small>",
top: "<li>TOP</li>",
bottom: "<li>bottom</li>"
// uvedené části lze libovolně kombinovat
});
$('demo').remove(); // smazání elementu s daným id
$$("table tbody > tr:nth-child(even)").each(function(el)
{el.remove()});
// smazání sudých řádků v tabulce
DOM
MooTools
$$("table tbody > tr:nth-child(odd)").each( function(el) {
el.set('styles', {
'background-color' : 'green'
});
}); // liché řádky budou mít zelené pozadí
var myFirstEl = new Element('div', {id: 'myFirstEl'});
var mySecondEl = new Element('div', {id: 'mySecondEl'});
$(myFirstEl).inject('demo','before');
$(mySecondEl).inject('demo','after');
myFirstEl.set('html', '<big>first</big>');
mySecondEl.set('html', '<small>second</small>');
$$("table tbody > tr:nth-child(even)").each(function(el)
{el.destroy()});
// smazání sudých řádků v tabulce
JSON
YUI
// mějme tento objekt
var records = [
{id:1, name: "Bob", age: 47, favorite_color: "blue"},
{id:2, name: "Sally", age: 30, favorite_color: "mauve"},
];
// vytvoříme objekt z JSON (bezpěčně, na rozdíl od eval())
var data = YAHOO.lang.JSON.parse(jsonData);
// vytvoříme JSON pouze s položkami age a id,
// tedy [{"id":1,"age":47},{"id":2,"age":30}]
var jsonStr = YAHOO.lang.JSON.stringify(records, ["id","age"]);
// zjistí, zda je to opravdu JSON
var isJsonValid = YAHOO.lang.JSON.isValid(jsonData);
JSON
Prototype
var jdata = {"apple":"red","lemon":"yellow"};
alert(Object.toJSON(jdata));
// vypíše '{"apple":"red","lemon":"yellow"}'
alert($H({"name":"Alois", "age": 25}).toJSON());
// druhá možnost ($H() vrací asociativní pole: $H(...).name
obsahuje "Alois")
var data = '{"apple":"red","lemon":"yellow"}'.evalJSON();
// data jsou typu json: {apple: 'red', lemon: 'yellow'}
"alert('toto neni json')".evalJSON(true);
// parametr true, kontroluje syntax a vrátí NULL pokud neprojde
kontrolou
// Pro převod formulářových dat na JSON objekt slouží
// metoda serialize([check]) na objektu formuláře.
JSON
MooTools
var fruitsJSON = JSON.encode({apple: 'red', lemon: 'yellow'});
// vrátí string: '{"apple":"red","lemon":"yellow"}'
Json.decode('{"apple":"red","lemon":"yellow"}');
// vrátí objekt typu json: {apple: 'red', lemon: 'yellow'}
Json.decode("alert('toto neni json')", true);
// vrátí NULL
AJAX
JQuery
$.ajax({
method: "get",
url: "ajax.php",
dataType: "text",
data: "num=5",
success: function(text) { $("p.ajax").append(text); },
error: function(text) { $("p.ajax").append('error'); }
});
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
AJAX
YUI
var callAJAX = function() {
var sUrl = "include.html";
var callback = {
success: function(o) {
document.getElementById(’mydiv’).innerHTML = o.responseText;
},
failure: function(o) {
alert("AJAX doesn’t work");
}
}
var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl,
callback, null);
}
AJAX
Prototype
var login = function() {
new Ajax.Request('/login.php', {
method:'get',
parameters: $('formular').serialize(true),
onSuccess: function(transport) {
var response = transport.responseText || "žádný text";
alert("Request byl úspěšný \n\n" + response);
},
onFailure: function() { alert('Request se nepovedl ...') }
});
};
new Ajax.PeriodicalUpdater('produkty', 'produkty.php',
{
method: 'get',
frequency: 1, // frekvence v sekundách
decay: 2 // zvětší interval pokud nenastane změna
// v příchozích datech
});
AJAX
MooTools
// AJAX volání se realizuje metodou send() na objektu typu Request nebo Element.
new Request({method: 'get'}).send('login.php?limit=25');
new Request.HTML({
method: 'get',
url: 'produkty.php',
update: 'produkty'
}).send();
// naplneni primo elementu produkty
$('formular').set('send', {
// $('formular').send()
method: 'get',
url: 'login.php',
onComplete: function(responseText) {
responseText = responseText || "zadny prichozi text";
alert("Request byl uspesny \n\n" + responseText);
},
onFailure: function(){ alert('Request se nepovedl ...') }
});
Velikost
• JQuery
– 120 kB (komprimovaná verze 19 kB)
– selektory, DOM, CSS, events, AJAX, basic widgets
• YUI
– jádro 31 kB (komprimovaná verze: 5 kB), ale plus moduly
– lze nahrát pouze potřebné části
• Prototype
– 137 kB, ke stažení jen nekomprimovaná verze
• MooTools
– 95 kB (JSMin: 75 kB, YUI compressor: 65 kB)
Pluginy
• JQuery
– spoléhá na pluginy třetích stran
• odkazy přímo z oficiálních stránek
• YUI
– mnoho modulů, na pluginy nespoléhá
• calendar, colorpicker, browser history manager, paginator, ...
• Prototype
– script.aculo.us
– další pluginy a widgety
• MooTools
– oficiální i neoficiální pluginy
Dokumentace
• JQuery
– psaná „vlastními slovy“ (negenerovaná)
– mnoho příkladů
– přímo na webu odkazy na tutoriály
• YUI
– považována za nejkvalitnější ze všech JS frameworků
– generovaná
– příklady uvedeny zvlášť, komplexnější (ne ke každé funkci)
Dokumentace
• Prototype
– přehledná, příklady
– sekce Tipy a tutoriály
• MooTools
– stručná, ale s příklady
– demo aplikace
Podpora prohlížečů
•
•
•
•
•
IE 6 a vyšší
Mozilla Firefox 2 a vyšší (Prototype od 1.5)
Safari 3 (Prototype a MooTools od 2.0)
Opera 9 a vyšší
Google Chrome
Provázanost s PHP frameworky
• JQuery
– přímo podporováno Zend Frameworkem
– pluginy pro CakePHP a Symfony
– integrováno také do Drupalu a WordPressu
• YUI
– přímo podporováno není
– integrovatelné vlastními silami (stejně jako ostatní)
• Prototype
– přímo integrován do CakePHP
– plugin pro Drupal a WordPress
• MooTools
– plugin pro WordPress
Rychlost
Google Chrome 2.0
Google Chrome 1.0
Konquer 4.3
FF 3 Kubuntu 8.10
Safari 3.2.1 WinXP
Opera 9.63 WinXP
FF 3.1 beta WinXP
FF 3.0.5 WinXP
IE 8 Windows 7
IE 8 WinXP
IE 7 WinXP
IE 6 WinXP
Rychlost
Dojo 1.1.1
YUI 2.5.2
Selector beta
Prototype 1.6.0.2
JQuery 1.2.6
MooTools 1.2
Zdroje
Weby frameworků
http://jquery.com/
http://developer.yahoo.com/yui/
http://www.prototypejs.org/
http://mootools.net/
Srovnání frameworků
http://wiki.freaks-unidos.net/javascript-libraries
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-do
http://mootools.net/slickspeed/