Post on 30-Oct-2014
description
V UGI ALT.Net Conference Milano :: 23 Gennaio 2010
andreabalducci
{ecosystem}
Andrea Balducci
Job: Sviluppatore per passione (da un quarto di secolo…)
Mercato: Applicazioni client / server in c++ per la PMI
mtb.snowboard@gmail.com
http://www.dotnetmarche.org/blogs/andreabalducci
Chi è costui?
andreabalducci
Asp.Net: Catasto Termico, MES
Agenda
jQuery intro
jQuery UI
QUnit
jQuery Lint
TestSwarm
Profiling
jQuery
jQuery
è una libreria
JavaScript
http:
//w
ww
.gra
cesm
ith.c
o.uk
/86-
jque
ry-r
esou
rces
-to-
spic
e-up
-you
r-w
ebsi
te/
jQuery
jQuery
Top 10.000 websites
jQuery 20%
jQueryhtt
p://
tren
ds.b
uiltw
ith.c
om/j
avas
crip
t
jQuery è presente nel 37% dei siti web che utilizzano Javascript
jQuery
Cross browserSuite 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..
LeggeraSolo 23kb per la versione minified (gzipped).Disponibile sulle CDN Google e Microsoft
jQueryCentinaia di plug-in già prontiForms, validation, autocomplete, grid, jQuery.UI, gameshttp://plugins.jquery.com/
Documentatahttp://api.jquery.com/<method>http://forum.jquery.com/
Visual jQueryhttp://visualjquery.com/
Delicious bookmarks1.123k+ http://delicious.com/tag/jquery
jQuery
Google ha 12.900.000 risultati per il termine “jQuery”10 volte più famosa della D’Addario e del Lettone di Putin
Come funziona?
$(document).ready(function() {$(‘li’).css(‘color’, ‘red’);
)};
Come funziona?
jQuery
$(document).ready(function() {$(‘li’).css(‘color’, ‘red’);
)};
Come funziona?
jQuery find things
$(document).ready(function() {$(‘li’).css(‘color’, ‘red’);
)};
Come funziona?
jQuery find things do stuff
$(document).ready(function() {$(‘li’).css(‘color’, ‘red’);
)};
Categorie
Selettori
Eventi
Manipolazione del DOM
Ajax
Data
Navigazione del DOM
jQuery(document).ready(..);
L’entry point di jQuery
Viene eseguito appena il DOM è completo e prima che il contenuto della pagina sia caricato.
E’ possibile registrare l’evento $(document).ready() più volte
Versione breve: $(..);
Selettori
http://api.jquery.com/category/selectors/
Basic
* All Selector Seleziona tutti gli elementi
.classname Class Selector Seleziona tutti gli elementi sulla base della classe css
Element Element selector Seleziona gli elementi in base al tag
#id ID Selector Seleziona l’elemento con l’id indicato
selector1, selector2 Multiple Selector Seleziona l’insieme degli elementi che soddisfano i selettori (+)
Attribute :: Basic :: Basic Filter :: Child Filter :: Content FilterForm :: Hierarchy :: Visibility Filter
Live test: http://codylindley.com/jqueryselectors/
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/
Manipolazione DOM
Struttura $(‘<div>’) $(‘.clickMe’).remove(); $(‘.clickMe’).clone(); $(‘<div>’).appendTo($(‘#box’));
http://api.jquery.com/category/manipulation/
Attributi $(‘.clickMe’).addClass(‘clicked’); $(‘.clickMe’).attr(‘id’, ‘theone’);
Stile $(‘.clickMe’).css(‘color’, ‘red’);
Lettura / scrittura $(‘#title’).text(‘jQuery @Ugi.Alt’); var title = $(‘#title’).text();
$.ajax()Low level jQuery.ajax( settings ) // http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/category/ajax/
Shorthand MethodsjQuery.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
.data()
http://api.jquery.com/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) var name = $(‘#contact-1’).data(‘name’);
.data() var contact = $(‘#contact-1’).data(); // { name: ‘Andrea’, age: 35}
Navigazione del DOM
http://api.jquery.com/category/traversing/
.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()
“jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.All plugins are tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.”
In fase di rilascio la versione 1.8
Roadmap su http://wiki.jqueryui.com/
Interactions Draggable Droppable Resizable Selectable Sortable
Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
Effects Add class Remove class Switch class Toggle class Show Hide Toggle Animate Effect
{demo}
Case Study – Catasto termico
Sostiuzione di Asp.Net AJAX Control Toolkit
Aumentata l’interattività lato client
Dimezzato il peso delle pagine
Ovvero…
Prima Dopo
ThemeRoller
http://jqueryui.com/themeroller/
ThemeRoller permette di configurare a proprio piacimento i temi di jQuery.ui
jQuery.UI = js + css
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
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
jQuery.Lint
http://github.com/jamespadolsey/jQuery-Lint
{demo}
TestSwarm
http://testswarm.com/
“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.”
I Want U
Performance Analysis
http://developer.yahoo.com/yui/theater/video.php?v=resig-testing
{demo}
{spot :: coming soon}
Dexter, jQuery, Castle Windsor, Asp.Net MVC, NHibernate & co…
{grazie}
andreabalducci