jQuery Ecosystem
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery Ecosystem

  • 3,444 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • thanks
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,444
On Slideshare
3,409
From Embeds
35
Number of Embeds
5

Actions

Shares
Downloads
33
Comments
1
Likes
2

Embeds 35

http://www.ienumerable.it 22
http://www.slideshare.net 6
https://www.linkedin.com 5
http://localhost:49754 1
http://www.linkedin.com 1

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