Archivi categoria: Javascript

Web Components – everything is an element

Web Components: la promessa di questa tecnologia (di cui abbiamo iniziato a parlare su questo sito in gennaio) è quella di costruire applicazioni web assemblando componenti che assolvono non solo a funzionalità di tipo visuale ma anche funzionalità di elaborazione, per esempio per trasferire dati con Ajax.

Come abbiamo già visto il core di questa tecnologia è già presente da tempo nei browser più evoluti (niente di personale….), ma da qualche mese è apparsa una libreria che basa il suo funzionamento esclusivamente sui Web Components: stiamo parlando di Polymer.

Addy Osmani, del team di HTML5Rocks, ha pubblicato una splendida presentazione delle possibilità di questa libreria: Building Web Apps With Yeoman And Polymer

Anche su questo blog apparirà presto un articolo …. restate connessi !

Grunt : the Javascript Task Runner – terza parte

I Plugin di Grunt sono l’elemento più interessante di questo task runner, come avete letto nelle puntate precedenti sono tantissimi (in questo istante sono 2234), ma come fare ad orientarsi?  Intanto sono suddivisi in due insiemi: i plugin sviluppati dal team che mantiene Grunt e quelli sviluppati dalla community degli utilizzatori.

I plugin sviluppati dal team, i cosiddetti contributed plugins, sono quelli più testati per evidenti ragioni.

Li possiamo suddividere in 5 gruppi:

  1. gestione dei files
  2. compressione sorgenti
  3. verifica sintattica
  4. compilazione sorgenti
  5. test

Gestione files

in questo gruppo abbiamo:

  • contrib-clean    eliminazione dei files temporanei
  • contrib-copy    copia files
  • contrib-concat    concatenazione files
  • contrib-connect   avvia il web server

Compressione

Questi plugin assolvono al compito di minificare (comprimere) i vari tipi di file sorgente.

  • contrib-compress
  • contrib-uglify
  • contrib-htmlmin
  • contrib-cssmin
  • contrib-imagemin

Verifica sintattica

  • contrib-jshint
  • contrib-csshint

Compilazione

  • contrib-less
  • contrib-coffee
  • contrib-compass
  • contrib-sass
  • contrib-handlebars
  • contrib-stylus
  • contrib-jst
  • contrib-jade

Testing

  • contrib-jasmine
  • contrib-nodeunit
  • contrib-qunit

 

Nel prossimo articolo entreremo nel dettaglio del plugin contrib-watch…

JSLint

Una peculiarità rilevante di Javascript è quella di essere interpretato nel browser in una modalità silente, nel senso che in presenza di errori anche sintattici l’unica cosa che succede è che la pagina non fa quello che vorremmo.

Un aiuto ci viene da strumenti tipo Firebug che mettono a disposizione una console nella quale appaiono dei validi messaggi diagnostici, ma quello che manca è una procedura di validazione a priori del codice.

Invece questa procedura esiste e si chiama JSLint
JSLint è la creatura di Douglas Crockford, l’autore del fantastico libro JavaScript: The Good Parts , l’utilizzo è semplicissimo:

  • aprite la pagina www.jslint.com
  • fate un copia-e-incolla del vostro codice nella finestra Source
  • clicckate sul bottone JSLint
  • preparatevi ad un picco nella vostra autostima!

Buon lavoro!

Grunt : the Javascript Task Runner – seconda parte

Analizziamo il codice del file di esempio:

Questa è la wrapper function che racchiude tutto il codice di definizione dei tasks:

module.exports = function(grunt) {
    ......
};

all’interno della wrapper function abbiamo tre sezioni: la sezione di configurazione dei task, i comandi di caricamento dei plugin e il comando di definizione del task di default, cioè quello che viene eseguito quando grunt è lanciato senza specificare opzioni.

Nella sezione di configurazione del progetto di questo esempio, che viene dichiarata passando un oggetto alla funzione grunt.initConfig(), abbiamo quattro distinti comandi:

//  Project configuration.
    grunt.initConfig(
      {

        pkg: grunt.file.readJSON('package.json'),
        concat: {
          options: {
            separator: ';'
          },
          dist: {
            src: ['src/app.js', 'src/app1.js'],
            dest: 'build/output.js'
          }
        },
        uglify: {
            build: {
                  src: 'build/output.js',
                  dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        jshint: {
            all: ['Gruntfile.js', 'src/*.js']
        }
    });

il primo comando pkg: grunt.file.readJSON(‘package.json’) carica nella variabile pkg il contenuto del file di configurazione package.json. In questo file, che deve esistere nella directory del progetto, sono definiti svariati parametri, in questo caso il parametro di interesse è il nome dell’applicazione che verrà utilizzato di seguito.

Seguono altri tre comandi che definiscono i rispettivi task che formano questo gruntfile: in questo esempio definiamo il task concat, che serve appunto a concatenare i vari files javascript che compongono l’applicazione, poi c’è il task uglify, che rimuove commenti e spazi dal codice per produrne una versione compatta, infine il task jshint che effettua la validazione del codice javascript.

La dichiarazione di questi tre task avviene con tre coppie chiave valore, in cui la chiave è il nome assegnato al task e il valore sono i parametri che lo specificano. In questo esempio utilizziamo dei task che vengono specificati nei plugin grunt-contrib-uglify, grunt-contrib-concat, grunt-contrib-jshint, da cui i nomi utilizzati.

Il task concat viene dichiarato con due parametri: options e dist.

Con il parametro options in questo esempio si specifica il separatore utilizzato durante il processo di concatenazione dei files

options: { separator: ';' }

Con il parametro dist vengono specificati i files da concatenare e il file da produrre

dist: {   src: ['src/app.js', 'src/app1.js'],
          dest: 'build/output.js'
      }

Il task uglify viene dichiarato con un unico parametro: build
In questo parametro viene specificato il file da comprimere e il file compresso

uglify: {
            build: {
                  src: 'build/output.js',
                  dest: 'build/<%= pkg.name %>.min.js'
            }
        }

Infine per il task jshint con l’unico parametro all viene dichiarato l’elenco dei files
da verificare

jshint: {
            all: ['Gruntfile.js', 'src/*.js']
        }

La sezione con i comandi di caricamento dei plugin specifica l’elenco di quelli utilizzati in questo Gruntfile:

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');

Infine nell’ultima sezione dichiariamo i task da eseguire quando grun viene lanciato senza parametri:

 
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

Per provare questo esempio dobbiamo ovviamente avere installato grunt.

Il prerequisito è che Node.js ( versione 0.8.0 o successive ) sia installato sulla vostra macchina.

Poi con questo comando installiamo la grunt command line:

npm install -g grunt-cli

Il comando deve essere eseguito con i permessi di amministratore sotto Windows oppure attraverso sudo sotto Linux o OS X.

Installare la command line di grunt non significa avere installato il task runner, questo viene installato localmente (nella directory del vostro progetto) con il comando npm install dopo avere creato i files package.json (nel quale vengono dichiarate le dipendenze, cioè cosa verrà installato da npm install) e ovviamente il file Gruntfile.js, di cui abbiamo visto un esempio.

Come si crea il file package.json? si può utilizzare il comando npm init oppure può essere scritto direttamente.  Questo è il file package.json utilizzato per il nostro esempio.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

… segue nella prossima puntata …..