Ma si usa ancora
?
Claudio Bisconti
@claudiobisconti - claudio.bisconti@comm-it.it
Web applications
Backend SOA
Mobile apps
Embedded software
Business
services
Consulenza
Commit University
Il nostro laboratorio di cultura digitale
Perchè Elio?
- Introduzione: la terra jQuery
- jQuery abusivi
- Tanta voglia di... ricominciare
- jQuery SI
- jQuery NO
- jQuery BUM
- Puoi dir di si, puoi dir di no...
- Finale (con ritornello)
Introduzione:
la terra jQuery
... dinanzi a me non fuor cose create
se non etterne, e io etterno duro.
Lasciate ogne speranza, voi ch' intrate.
Dante Alighieri - La Divina Commedia
Inferno - Canto III
Origine: jSelect
I was, originally, going to use JSelect, but all the domain names were taken already.
John Resig
Releases
1.0 => 2006
1.1 => 2007
1.9 => 2013
2.0 => 2013
3.0 => 2016
Dollar
Dollar sign ($)
ECMAScript v3 - 24 marzo 2000
http://www-archive.mozilla.org/js/language/E262-3.pdf
7.6 Identifier Names and Identifiers
Identifier Names are tokens that are [...]
An Identifier is an IdentifierName that is not a ReservedWord
[...]
This standard specifies specific character additions: The dollar sign ($) and the underscore (_) are permitted anywhere in an IdentifierName.
Da ricordare
$ != jQuery
DOM Manipulation
Write less, do more
(Opinabile... nel 2017)
$(function() {
var elements = ...
$('#tbody').empty();
$.each(elements, function(index, element)
var output = '<tr class="element-';
if (element.id % 2 == 0)
output += 'even';
else
output += 'odd';
output += '">';
output += '<td>' + element.name + '</td>';
output += '<td>';
var skills = element.skill.split(',');
$.each(skills, function(index, skill) {
output += '<span class="skill">#' + skill.trim() + '</span> ';
})
output += '</td>';
output += '</tr>';
$('#tbody').append(output);
});
});<table>
<tbody>
<tr ng-repeat="e in elements"
ng-class-odd="'odd'"
ng-class-even="'even'">
<td>{{ e.name }}</td>
<td>
<span ng-repeat="skill in e.skills | split:,">
#{{ skill }}
</span>
</td>
</tr>
</tbody>
</table>var renderedEl = this.props.elements.map(function(e) {
return (
<tr>
<td>{{ e.name }}</td>
...
</tr>
);
});jQuery abusivi
jQueryus abundat in ore stultorum
$ everywhere
...
$("#foo").show();
...
$("#foo").addClass("thing");
...
$("#foo").hide();
...
$("#foo").on('click', function() {
// di solito sono almeno 100 righe di codice,
// un onclick è per sempre
});
...
$("#foo")
.find("ul > li.event > input[type=checkbox]")
.addClass("black");
...Javascript scritti dagli eletti
Al momento della sua nascita era una figata pazzesca (c'era solo quello o Kendo UI)
Ma...
Creare tutti gli oggetti e le classi CSS via javascript si è rivelato non essere proprio il top
... per jQuery
... in quegli anni
Qualcuno (più di uno) ha gridato:
"è colpa dei dispositivi che sono lenti"
(2015)
Smartphone con 4 core a 2.5GHZ
Tanta voglia di... ricominciare
Non serve strappare (il javascript dal)le pagine della vita, basta saper voltare pagina e ricominciare.
Jim Morrison
(o quasi)
QUnit
What?
QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!
Q: Ma chi vuoi che li faccia i test in javascript
R: Se poi mantieni tutto tu, non ho problemi a non farli
Puoi farlo anche con:
- unitjs
- jasmine
- Jest
Modularità
jQuery ieri
jQuery oggi
Modularità
npm install -g grunt-cli
git clone git://github.com/jquery/jquery.git
cd jquery
npm install
grunt custom --amd="custom-name"
grunt custom:-ajax,-deprecated,-effects,-wrap
grunt
grunt dist:./dist-custom-name/Provare per credere!
jQuery Migrate
dal 2013
Circa 1 milione di siti online con jQuery <= 1.8
Usato nel 70% dei top 100K siti più visti
(1.9+)
jQuery SI
Come, dove, quando e perché usarlo
Cose pronte
jQuery Plugin Registry
Dove è già integrato
Oltre 18M di siti online
Oltre 700K di portali online
Oltre il 50% delle applicazioni web fatte tra il 2008 e il 2012
(
A proposito di
Modulo
jquery_update
(serve per aggiornare la versione di jquery presente nel core di drupal 7)
Oltre 500k installazioni
Ah... non c'è un modulo jquery migrate :|
)
Perchè i trends parlano chiaro
Statistiche alla mano,
a inizio 2016,
c'era la stessa probabilità di andare a lavorare su jQuery o su React
Perchè i trends parlano chiaro
Magari i recruiter su LinkedIn un po' meno
è semplice
- Si dai è semplice
- Usare sempre il .ready()
- Cercare di evitare gli spaghetti code
jQuery NO
Come, dove, quando e perché evitarlo
Tanta manipolazione del DOM
Prestazioni
Progetti complessi
Tanta interazione immediata con gli utenti
Molteplici funzionalità e classi
Progetti con tanta logica javascript
jQuery BUM
Quando e come non dovete usarlo
... nemmeno sotto tortura
Non usarlo come scusa
Metti jQuery, togli jQuery
Maestro Mijagi
Conosco, quindi uso
Se non sei in grado di usare tutte le bellissime features di HTML5 e CSS3...
studiatele
Non forzare la mano
... poi te ne pentirai
... e non è una frase detta a caso :)
Tiriamo le somme!
Puoi dir di si,
puoi dir di no...
Ma questa è la vita
Finale 1/3
Il saggio per eccesso di jQuery diventa un folle.
Ralph Waldo Emerson
Viviamo in un’epoca di superlavoro e di sottocultura; un’epoca in cui la gente usa talmente jQuery da divenire stupida.
Oscar Wilde
Finale 2/3
L’eccesso nell'uso di jQuery non è meglio dell’insufficienza.
Confucio
Non uso jQuery mai eccessivamente – Uso jQuery con moderazione, un solo plugin alla volta
Mark Twain
Finale 3/3
L'abuso di jQuery non è una malattia, ma una decisione, come quella di andare incontro ad una macchina che si muove. Questo non si chiama malattia, ma mancanza di giudizio.
Philip K. Dick
Ma si usa ancora jQuery?
By Claudio Bisconti
