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
Ukázky kódu Označování položek seznamu – JQuery <script src="jquery.js" type="text/javascript"> <script type="text/javascript"> var onClick= function() { $(this).text("clicked!"); $(this).attr('style', 'background-color: green;'); }; $(function() { $("#demo li").click(onClick); });
Ukázky kódu Označování položek seznamu – YUI <script type="text/javascript" src="yui-min.js"> <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); });
Ukázky kódu Označování položek seznamu – Prototype <script src="prototype.js" type="text/javascript"> <script type="text/javascript"> var onClick= function() { this.update("clicked!"); this.writeAttribute('style', 'background-color: green;'); }; $$("#demo li").invoke("observe", "click", onClick });
Ukázky kódu Označování položek seznamu – MooTools <script src="mootools.js" type="text/javascript"> <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);
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"); // 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("
The End
");
// analogicky before()
$("table tr:nth-child(4n+3)").remove(); $("span.greetings").wrap("
"); // 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"); $$("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: "
before", after: "<small>after", top: "
TOP", bottom: "
bottom" // 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', '
first'); mySecondEl.set('html', '<small>second'); $$("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/
