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?

  1. Introduzione: la terra jQuery
  2. jQuery abusivi
  3. Tanta voglia di... ricominciare
  4. jQuery SI
  5. jQuery NO
  6. jQuery BUM
  7. Puoi dir di si, puoi dir di no...
  8. 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

https://plugins.jquery.com/

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

Ma si usa ancora jQuery?

  • 1,456