Successfully reported this slideshow.

jQuery Ecosystem

2,530 views

Published on

Presentation for http://www.ugialt.net/V UgiALT.net Conference.ashx

Published in: Technology

jQuery Ecosystem

  1. 1. andreabalducci<br />{ecosystem}<br />V UGI ALT.NetConference Milano :: 23 Gennaio 2010<br />
  2. 2. andreabalducci<br />Chi è costui?<br />Andrea Balducci<br />Job: Sviluppatore per passione (da un quarto di secolo…)<br />Mercato: Applicazioni client / server in c++ per la PMI<br />Asp.Net: Catasto Termico, MES<br />http://www.dotnetmarche.org/blogs/andreabalducci<br />mtb.snowboard@gmail.com<br />
  3. 3. Agenda<br />jQuery intro<br />jQuery UI<br />QUnit<br />jQuery Lint<br />TestSwarm<br />Profiling<br />
  4. 4. jQuery<br />jQuery <br /> è unalibreria<br /> JavaScript<br />http://www.gracesmith.co.uk/86-jquery-resources-to-spice-up-your-website/<br />
  5. 5. jQuery<br />Creatada John Resignel 2006<br />http://ejohn.org<br />
  6. 6. jQuery<br />
  7. 7. jQuery<br />
  8. 8. jQuery<br />jQuery è presente nel 37% dei siti web che utilizzano Javascript<br />http://trends.builtwith.com/javascript<br />
  9. 9. jQuery 1.4<br />http://jquery14.com<br />
  10. 10. jQuery<br />Cross browser<br />Suite di 3060 test (Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10 and Chrome).50 browser su 11 piattaforme.<br />Modello ad eventi<br />.click() .mouseenter() .keydown() etc..<br />Leggera<br />Solo 23kb per la versione minified (gzipped).Disponibile sulle CDN Google e Microsoft<br />
  11. 11. jQuery<br />Centinaia di plug-in già pronti<br />Forms, validation, autocomplete, grid, jQuery.UI, gameshttp://plugins.jquery.com/<br />Documentata<br />http://api.jquery.com/&lt;method&gt;http://forum.jquery.com/<br />Visual jQuery<br />http://visualjquery.com/<br />Deliciousbookmarks<br />1.123k+ http://delicious.com/tag/jquery<br />
  12. 12. jQuery<br />Google ha 12.900.000 risultati per il termine “jQuery”<br />10 volte più famosa della D’Addario e del Lettone di Putin<br />
  13. 13. Come funziona?<br />$(document).ready(function() {<br /> $(‘li’).css(‘color’, ‘red’);<br />)};<br />
  14. 14. Come funziona?<br />$(document).ready(function() {<br />$(‘li’).css(‘color’, ‘red’);<br />)};<br />jQuery<br />
  15. 15. Come funziona?<br />$(document).ready(function() {<br />$(‘li’).css(‘color’, ‘red’);<br />)};<br />jQuery<br />findthings<br />
  16. 16. Come funziona?<br />$(document).ready(function() {<br />$(‘li’).css(‘color’, ‘red’);<br />)};<br />jQuery<br />findthings<br />do stuff<br />
  17. 17. Categorie<br />Selettori<br />Eventi<br />Manipolazione del DOM<br />Ajax<br />Data<br />Navigazione del DOM<br />
  18. 18. jQuery(document).ready(..);<br />L’entry point di jQuery<br />Vieneeseguitoappenail DOM è completo e prima cheilcontenutodellapaginasiacaricato.<br />E’ possibileregistrarel’evento $(document).ready() più volte<br />Versionebreve: $(..);<br />
  19. 19. Selettori<br />Attribute :: Basic :: Basic Filter :: Child Filter :: Content FilterForm :: Hierarchy:: Visibility Filter<br />Live test: http://codylindley.com/jqueryselectors/<br />http://api.jquery.com/category/selectors/<br />
  20. 20. Eventi<br />jQuery introduce il modello ad eventi in modo non intrusivo; il binding degli eventi avviene fuori dal markup dell’elemento.<br />&lt;html&gt;<br />&lt;head&gt;&lt;title&gt;Modello ad eventi - click&lt;/title&gt;<br /> &lt;script src=&quot;jquery-1.4.min.js&quot; type=&quot;text/javascript&quot;&gt;<br /> &lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br /> $(document).ready(function() {<br /> $(&apos;#clickme&apos;).click(function(){<br /> $(this).remove();<br /> });<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;a id=&quot;clickme&quot; href=&quot;#&quot;&gt;click me&lt;/a&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://api.jquery.com/category/events/<br />
  21. 21. Manipolazione DOM<br />Attributi<br /> $(‘.clickMe’).addClass(‘clicked’);<br /> $(‘.clickMe’).attr(‘id’, ‘theone’);<br />Struttura<br /> $(‘&lt;div&gt;’)<br /> $(‘.clickMe’).remove();<br /> $(‘.clickMe’).clone();<br /> $(‘&lt;div&gt;’).appendTo($(‘#box’));<br />Stile<br /> $(‘.clickMe’).css(‘color’, ‘red’);<br />Lettura / scrittura<br /> $(‘#title’).text(‘jQuery @Ugi.Alt’);<br />var title = $(‘#title’).text();<br />http://api.jquery.com/category/manipulation/<br />
  22. 22. $.ajax()<br />Low level<br />jQuery.ajax( settings ) // http://api.jquery.com/jQuery.ajax/<br />ShorthandMethods<br />jQuery.get()<br /> esegue una richiesta tramite HTTP GET<br />jQuery.getJSON()<br /> esegue una richiesta di dati in formato JSON tramite HTTP GET <br />jQuery.getScript()<br /> carica uno script tramite una GET e lo esegue<br />.load()<br /> esegue la richiesta al server e inserire la risposta nell’elemento<br />jQuery.post()<br /> esegue la richiesta tramite una POST<br />http://api.jquery.com/category/ajax/<br />
  23. 23. .data()<br />.data() permette di associare dei valori agli elementi del DOM senza sporcare il markup.<br />.data(key, value)<br /> $(‘#contact-1’).data(‘name’, ‘Andrea’);<br /> $(‘#contact-1’).data(‘age’, 35);<br />.data(key)<br />varname = $(‘#contact-1’).data(‘name’);<br />.data()<br />varcontact = $(‘#contact-1’).data(); // { name: ‘Andrea’, age: 35}<br />http://api.jquery.com/data/<br />
  24. 24. Effects<br />{demo}<br />http://api.jquery.com/category/effects/<br />
  25. 25. Navigazione del DOM<br />.add()<br />.andSelf()<br />.children()<br />.closest()<br />.contents()<br />.end()<br />.eq()<br />.filter()<br />.find()<br />.first()<br />.has()<br />.is()<br />.last()<br />.map()<br />.next()<br />.nextAll()<br />.nextUntil()<br />.not()<br />.offsetParent()<br />.parent()<br />.parents()<br />.parentsUntil()<br />.prev()<br />.prevAll()<br />.prevUntil()<br />.siblings()<br />.slice()<br />http://api.jquery.com/category/traversing/<br />
  26. 26.
  27. 27. “jQuery UI provides a comprehensive set ofcoreinteraction plugins, UI widgets and visualeffectsthatuse a jQuery-style, event-drivenarchitecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.All plugins are testedforcompatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.”<br />
  28. 28. In fase di rilascio la versione 1.8 <br />
  29. 29. Interactions<br />Draggable<br />Droppable<br />Resizable<br />Selectable<br />Sortable<br />Widgets<br />Accordion<br />Autocomplete<br /> Button<br />Datepicker<br />Dialog<br />Progressbar<br />Slider<br />Tabs<br />Effects<br />Addclass<br />Removeclass<br />Switchclass<br />Toggleclass<br /> Show<br />Hide<br />Toggle<br /> Animate<br />Effect<br />Roadmap su http://wiki.jqueryui.com/<br />
  30. 30. {demo}<br />
  31. 31. Case Study – Catasto termico<br />SostiuzionediAsp.Net AJAX Control Toolkit<br />Aumentatal’interattivitàlato client<br />Dimezzatoil peso dellepagine<br />
  32. 32. Ovvero…<br />Prima<br />Dopo<br />
  33. 33. ThemeRoller<br />ThemeRoller permette di configurare a proprio piacimento i temi di jQuery.ui<br />jQuery.UI = js + css<br />http://jqueryui.com/themeroller/<br />
  34. 34. QUnit<br />“QUnit is a powerful, easy-to-use, JavaScript test suite. It&apos;s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code”<br />http://docs.jquery.com/QUnit<br />
  35. 35. QUnit<br />{demo}<br />http://docs.jquery.com/QUnit<br />
  36. 36. jQuery.Lint<br />“jQuery Lint is a simple script you can download and use with jQuery. It works over the top of jQuery and diligently reports errors and any incorrect usage of jQuery. It will also, to some extent, offer guidance on best practices and performance concerns”.<br />http://github.com/jamespadolsey/jQuery-Lint<br />
  37. 37. jQuery.Lint<br />{demo}<br />http://github.com/jamespadolsey/jQuery-Lint<br />
  38. 38. TestSwarm<br />“The primary goal of TestSwarm is to take the complicated, and time-consuming, process of running JavaScript test suites in multiple browsers and to grossly simplify it. It achieves this goal by providing all the tools necessary for creating a continuous integration workflow for your JavaScript project.”<br />http://testswarm.com/<br />
  39. 39. I Want U<br />
  40. 40. Performance Analysis<br />{demo}<br />http://developer.yahoo.com/yui/theater/video.php?v=resig-testing<br />
  41. 41. {spot :: comingsoon}<br />Dexter, jQuery, Castle Windsor, Asp.Net MVC, NHibernate & co…<br />
  42. 42. andreabalducci<br />{grazie}<br />

×