Your SlideShare is downloading. ×
0
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
JavaScript Libraries Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Libraries Overview

3,247

Published on

Day 1 of 7-days "JavaScript and Rich User Interfaces" training for my colleagues. It covers Prototype, jQuery, Dojo and qooxdoo.

Day 1 of 7-days "JavaScript and Rich User Interfaces" training for my colleagues. It covers Prototype, jQuery, Dojo and qooxdoo.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,247
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
230
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Libraries Overview Siarhei Barysiuk s.barysiuk@sam-solutions.net
  • 2. Our roadmap
  • 3. Libraries: What we will cover today... 5 great open source libraries for your project. • prototype • jQuery • dojo • qooxdoo
  • 4. Libraries: General picture Global picture Lightweight Widgets One-page Applications
  • 5. Prototype
  • 6. Prototype: Overview http://prototypejs.org
  • 7. Prototype: Focus • DOM manipulation • Ajax transport • Utility methods for built-in objects • Class-based OOP
  • 8. Prototype: DOM manipulation Say goodbye to getElementById() document.getElementById(quot;idquot;).innerHTML = quot;<li>node</li>quot;; Say hello to $() $(quot;idquot;).innerHTML = quot;<li>node</li>quot;; $(element) extended DOM element
  • 9. Prototype: DOM Element extension * extend * makePositioned * absolutize * select * fire * match * addClassName * setOpacity * firstDescendant * next * addMethods * setStyle * getDimensions * nextSiblings * adjacent * show * getElementsByClassName * observe * ancestors * siblings * getElementsBySelector * positionedOffset * childElements * stopObserving * getHeight * previous * classNames * toggle * getOffsetParent * previousSiblings * cleanWhitespace * toggleClassName * getStyle * readAttribute * clonePosition * undoClipping * getWidth * recursivelyCollect * cumulativeOffset * undoPositioned * hasClassName * relativize * cumulativeScrollOffset * up * hide * remove * descendantOf * update * identify * removeClassName * descendants * viewportOffset * immediateDescendants * replace * down * visible * insert * scrollTo * empty * wrap * inspect * writeAttribute * makeClipping $('message').addClassName('read').update('I read this message!').setStyle({opacity: 0.5});
  • 10. Prototype: Creating a DOM element The old way: var a = document.createElement('a'); a.setAttribute('class', 'foo'); a.setAttribute('href', '/foo.html'); a.appendChild(document.createTextNode(quot;Next pagequot;)); The new way: var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update(quot;Next pagequot;);
  • 11. Prototype: Even more bucks $((id | element)...) -> [HTMLElement...] $$(cssRule...) -> [HTMLElement...] $A(iterable) -> actualArray $F(element) -> value $H([obj]) -> Hash $R(start, end[, exclusive = false]) -> ObjectRange $w(String) -> Array
  • 12. Prototype: Event handling $('foo').observe('click', respondToClick); function respondToClick(event) { var element = event.element(); element.addClassName('active'); }
  • 13. Prototype: Ajax transport new Ajax.Request('/some_url',{ method:'get', onSuccess: function(transport){ var response = transport.responseText || quot;no response textquot;; alert(quot;Success! nnquot; + response); }, onFailure: function(){ alert('Something went wrong...') } }); Also available are onXXX callbacks, where XXX is the HTTP response status like 200 or 404.
  • 14. Prototype: Ajax transport new Ajax.Request('/some_url', { method: 'get', parameters: {company: 'example', limit: 12} }); new Ajax.Request('/some_url', { parameters: $('id_of_form_element').serialize(true) }); form serialization
  • 15. Prototype: Ajax magic new Ajax.Updater( { success: 'products', 3.1 failure: 'errors' 3.2 }, '/some_url', 1 { method: 'get', 2 insertion: Insertion.Top 4 } );
  • 16. Prototype: Built-in object extensions * all * any * collect var myObject = {}; * detect * each * eachSlice ['foo', 'bar', 'baz'].each(function(name, index) { * entries this[name] = index; * find }, myObject); // we have specified the context * findAll * grep * inGroupsOf myObject * include * inject //-> { foo: 0, bar: 1, baz: 2} * invoke * map * max * member * min * partition * pluck * reject * select * size * sortBy * toArray * zip
  • 17. Prototype: Built-in object extensions * blank * camelize * capitalize * dasherize quot;<h1>hello, i'm HTML</h1>quot;.escapeHTML() * empty * endsWith //-> quot;<h1>hello, i'm HTML</h1>quot; * escapeHTML * evalJSON * evalScripts 'background-color'.camelize(); // -> 'backgroundColor' * extractScripts * gsub * include 'Prototype framework'.include('frame'); //-> true * inspect 'Prototype framework'.include('frameset');//-> false * interpolate * isJSON * parseQuery * scan quot;echo quot;.times(3); //-> quot;echo echo echo quot; * startsWith * strip * stripScripts quot;#{animals} on a #{transport}quot;.interpolate({ * stripTags animals: quot;Pigsquot;, * sub * succ transport: quot;Surfboardquot; }); * times //-> quot;Pigs on a Surfboardquot; * toArray * toJSON * toQueryParams * truncate * underscore * unescapeHTML * unfilterJSON
  • 18. Prototype: Class-based OOP var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }); var Pirate = Class.create(Person, { // redefine the speak method say: function($super, message) { return $super(message) + ', yarr!'; } }); var john = new Pirate('Long John'); john.say('ahoy matey'); // -> quot;Long John: ahoy matey, yarr!quot;
  • 19. Prototype: Real life example http://gmx.com http://web.de http://gmx.de
  • 20. Prototype: Conclusion • lightweight • good for small projects • a lot of useful methods • transport support • effects with script.aculo.us • good documented • a lot of real project which use prototype
  • 21. Questions?
  • 22. jQuery
  • 23. jQuery: Overview http://jquery.com
  • 24. jQuery: Focus Motto: Write less, do more. • DOM manipulation • Ajax transport • Effects • Other functionality with plugins
  • 25. jQuery: DOM manipulation Very powerful selectors. $(quot;#myDivquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;divquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;.myClassquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;*quot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;div,span,p.myClassquot;).css(quot;borderquot;,quot;3px solid redquot;);
  • 26. jQuery: DOM manipulation Even more powerful than you expect. $('li:eq(0)') $('li:even') $('li:lt(3)') $('li:not(.goofy)') $('p a[href*=#]') $('code, li.goofy') $('ol .goofy > strong') $('li + li > a[href$=pdf]') $('span:hidden')
  • 27. jQuery: DOM manipulation Attributes: Text: attr( name ) text( ) attr( properties ) text( val ) attr( key, value ) HTML: attr( key, value ) removeAttr( name ) html( ) Classes: html( val ) addClass( class ) Value: hasClass( class ) removeClass( class ) val( ) toggleClass( class ) val( val )
  • 28. jQuery: DOM manipulation append( content ) appendTo( content ) prepend( content ) prependTo( content ) after( content ) before( content ) insertAfter( content ) insertBefore( content ) wrap( html ) replaceWith( content ) clone( )
  • 29. jQuery: Events Very convenient event handling system. 3 main methods: bind( type, data, fn ) trigger( type, data ) unbind( type, data )
  • 30. jQuery: Binding event handlers $(quot;pquot;).bind(quot;clickquot;, function(e){ var str = quot;( quot; + e.pageX + quot;, quot; + e.pageY + quot; )quot;; $(quot;spanquot;).text(quot;Click happened! quot; + str); }); $(quot;pquot;).bind(quot;dblclickquot;, function(){ $(quot;spanquot;).text(quot;Double-click happened in quot; + this.tagName); }); $(quot;pquot;).bind(quot;mouseenter mouseleavequot;, function(e){ $(this).toggleClass(quot;overquot;); }); $(quot;pquot;).trigger(quot;clickquot;);
  • 31. jQuery: Binding event handlers $(quot;pquot;).click(function(e){ var str = quot;( quot; + e.pageX + quot;, quot; + e.pageY + quot; )quot;; $(quot;spanquot;).text(quot;Click happened! quot; + str); }); $(quot;pquot;).dblclick(function(){ $(quot;spanquot;).text(quot;Double-click happened in quot; + this.tagName); }); $(quot;pquot;).click();
  • 32. jQuery: Custom events $(quot;pquot;).bind(quot;myCustomEventquot;, function(e, myName, myValue){ $(this).text(myName + quot;, hi there!quot;); $(quot;spanquot;).stop().css(quot;opacityquot;, 1) .text(quot;myName = quot; + myName) .fadeIn(30).fadeOut(1000); }); $(quot;buttonquot;).click(function () { $(quot;pquot;).trigger(quot;myCustomEventquot;, [ quot;Johnquot; ]); });
  • 33. jQuery: onload event $(document).ready(function () { $(quot;pquot;).text(quot;The DOM is now loaded and can be manipulated.quot;); });
  • 34. jQuery: Ajax transport $.ajax({ type: quot;POSTquot;, url: quot;some.phpquot;, data: quot;name=John&location=Bostonquot;, success: function(msg){ alert( quot;Data Saved: quot; + msg ); } }); $.ajax({ url: quot;test.htmlquot;, cache: false, success: function(html){ $(quot;#resultsquot;).append(html); } });
  • 35. jQuery: Ajax transport $.ajax({ url:quot;http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=jsonquot;, dataType:quot;jsonpquot;, jsonp:quot;jsoncallbackquot;, success: function(data){ //... }) } })
  • 36. jQuery: Effects show/hide toggle slideDown/slideUp slideToggle fadeIn/fadeOut fadeTo animate
  • 37. jQuery: Conclusion • lightweight • powerful CSS selectors • ‘less code’ way • built-in effects and animation • transport support (including cross-domain) • a lot of real-life examples
  • 38. Questions?
  • 39. Dojo
  • 40. Dojo: Overview http://dojotoolkit.org
  • 41. Dojo: Focus • DOM manipulation • Animations • Ajax • Event and keyboard normalization • Internationalization (i18n) • Widgets
  • 42. Dojo: Package system Dojo has a package system built-in to load all the code you need, and is controlled by dojo.require(). This function allows us to pull in parts of the Dojo Toolkit not provided for in the Base dojo.js, such as Drag and Drop, additional animations, Dijit widgets, DojoX projects, or even your own code. dojo.require(quot;dijit.form.Buttonquot;); dojo.require(quot;dijit.TitlePanequot;);
  • 43. Dojo: Selectors dojo.addOnLoad(function(){ // our dom is ready, get the node: dojo.query(quot;#testHeadingquot;) // add quot;testClassquot; to its class=quot;quot; attribute .addClass(quot;testClassquot;) // and fade it out after 500 ms .fadeOut({ delay:500 }).play(); });
  • 44. Dojo: Event handling dojo.addOnLoad(function(){ var node = dojo.byId(quot;testHeadingquot;); dojo.connect(node,quot;onclickquot;,function(){ node.innerHTML = quot;I've been clickedquot;; }); }); dojo.addOnLoad(function(){ dojo.query(quot;#testHeadingquot;) .style(quot;cursorquot;,quot;pointerquot;) .connect(quot;onclickquot;,function(){ this.innerHTML = quot;I've been clickedquot;; }); });
  • 45. Dojo: Ajax transport var init = function(){ var contentNode = dojo.byId(quot;contentquot;); dojo.xhrGet({ url: quot;js/sample.txtquot;, handleAs: quot;textquot;, load: function(data,args){ // fade out the node we're modifying dojo.fadeOut({ node: contentNode, onEnd: function(){ // set the data, fade it back in contentNode.innerHTML = data; dojo.fadeIn({node: contentNode}).play(); } }).play(); }, // if any error occurs, it goes here: error: function(error,args){ console.warn(quot;error!quot;,error); } }); }; dojo.addOnLoad(init);
  • 46. Dojo: Ajax transport // sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ url: quot;alternate-submit.phpquot;, form: quot;mainFormquot;, handleAs: quot;textquot;, handle: function(data,args){ if(typeof data == quot;errorquot;){ console.warn(quot;error!quot;,args); }else{ // show our response console.log(data); } } }); }; dojo.addOnLoad(function(){ var theForm = dojo.byId(quot;mainFormquot;); // another dojo.connect syntax: call a function directly dojo.connect(theForm,quot;onsubmitquot;,formSubmit); });
  • 47. Dojo: Widgets First Name: <input type=quot;textquot; size=quot;20quot; name=quot;firstquot; dojoType=quot;dijit.form.TextBoxquot; trim=quot;truequot; propercase=quot;truequot; /> Price: <input type=quot;textquot; maxlength=quot;12quot; class=quot;fillwidth currencyquot; id=quot;grossincomequot; name=quot;grossincomequot; value=quot;0.00quot; dojoType=quot;dijit.form.CurrencyTextBoxquot; required=quot;truequot; onChange=quot;updateTotals()quot; currency=quot;USDquot;/> dojo.require(quot;dijit.form.TextBoxquot;); dojo.require(quot;dijit.form.CurrencyTextquot;);
  • 48. Dojo: Dijit at a Glance Border Container AccordionContainer ContentPane Toolbar Slider ComboBox CurrencyTextBox NumberTextBox CheckBox DateTextBox Textarea ValidationTextBox FilteringSelect InlineEditBox TimeTextBox TabContainer NumberSpinner StackContainer Menu Dialog Tree ProgressBar Editor Grid
  • 49. Dojo: DojoX - Dojo eXtensions Cometd Cryptography Widgets Charting FX Data Layout Collections Wire Grid I/O Image Timing XML Utilities Offline GFX String Utilities Validate UUID
  • 50. Dojo: Dojo custom build 1. groups together modules into layers 2. interns external non-JavaScript files 3. smooshes the layer down with ShrinkSafe 4. copies all non-layered scripts to the appropriate places
  • 51. Dojo: Conclusion • not so lightweight as previous • tons of features • separate packages • custom build
  • 52. Questions?
  • 53. qooxdoo
  • 54. qooxdoo: Overview http://qooxdo.org
  • 55. qooxdoo: Focus • One page Rich Internet Applications • A lot of ideas from Qt • OOP approach • No HTML and CSS programming
  • 56. qooxdoo: The power is in OOP The main actors of qooxdoo OO are: • Classes • Interfaces • Mixins
  • 57. qooxdoo: Classes qx.Class.define(quot;qx.test.Catquot;, { construct : function() { ... } }); qx.Class.define(quot;qx.test.Catquot;, { ... statics : { LEGS: 4, makeSound : function() { ... } } }); qx.Class.define(quot;qx.test.Catquot;, { ... members: { name : quot;Kittyquot;, getName: function() { return this.name } } });
  • 58. qooxdoo: Special Types of Classes qx.Class.define(quot;qx.test.Catquot;, { type : quot;staticquot; ... }); qx.Class.define(quot;qx.test.Catquot;, { type : quot;abstractquot; ... }); qx.Class.define(quot;qx.test.Catquot;, { type : quot;singletonquot; ... });
  • 59. qooxdoo: Inheritance qx.Class.define(quot;qx.test.Animalquot;, { members: { makeSound : function(howManyTimes) { .... } } }); qx.Class.define(quot;qx.test.Catquot;, { extend: qx.test.Animal, members: { makeSound : function() { this.debug(quot;I'm a catquot;); /* howManyTimes or any other parameter are passed. We don't need to know how many parameters are used. */ arguments.callee.base.apply(this, arguments); } } });
  • 60. qooxdoo: Interfaces Defining interface: qx.Interface.define(quot;qx.test.ISamplequot;, { extend: [SuperInterfaces], properties: {quot;colorquot;: {}, quot;namequot;: {} }, members: { meth1: function() { return true; }, meth2: function(a, b) { return arguments.length == 2; }, meth3: function(c) { return qx.Class.hasInterface(c.constructor, qx.some.IInterface); } }, statics: { PI : 3.14, staticMethod: function(z) { return typeof z == quot;stringquot;; } }, });
  • 61. qooxdoo: Interfaces Implementing interface: qx.Class.define(quot;qx.test.Samplequot;, { implement: [qx.test.ISample], properties: { quot;colorquot;: { check: quot;colorquot;}, quot;namequot;: { check: quot;Stringquot;} }, members: { meth1: function() { return 42; }, meth2: function(a, b) { return a+b }, meth3: function(c) { c.foo() } } });
  • 62. qooxdoo: Mixins Defining mixin: qx.Mixin.define(quot;namequot;, { include: [SuperMixins], properties: { quot;tabIndexquot;: {check: quot;Numberquot;, init: -1} }, members: { prop1: quot;fooquot;, meth1: function() {}, meth2: function() {} } });
  • 63. qooxdoo: Mixins Attaching mixin: qx.Class.define(quot;my.cool.Classquot;, { include : [my.cool.MMixin, my.other.cool.MMixin] ... }); qx.Class.include(qx.ui.core.Widget, qx.MWidgetExtensions);
  • 64. qooxdoo: Properties ... properties : { width : { check : quot;Numberquot;, apply : quot;applyWidthquot; } } members : { applyWidth : function(value) { this.setStyleProperty(quot;widthquot;, value + quot;pxquot;); } } ... widget.addEventListener(quot;changeWidthquot;, function(e) { e.getValue().innerHTML = quot;Hello Worldquot;; });
  • 65. qooxdoo: GUI
  • 66. qooxdoo: GUI and even more features • Layouting • Widgets • Interaction • Selection Handling • Drag & Drop • Theming • Low-level Ajax Transport • RPC • Logging and Debugging • Unit testing
  • 67. qooxdoo: Tooling Generator: • Optimization • Compressing • Internalization • API Documentation • More XML description for UI - qxtransformer http://qxtransformer.org
  • 68. qooxdoo: Real life example http://gmx.com
  • 69. Questions?

×