Come il browser carica le risorse

• Nei browser più recenti, le risorse richiamate attraverso un tag script sono scaricate in parallelo insieme a tutte le altre (CSS, immagini, etc).
• Tuttavia esse vengono interpretate ed eseguite singolarmente in ordine di caricamento mentre l’interpretazione ed il rendering di altre risorse viene bloccato.

Ottimizzazioni possibili

Le soluzioni più comuni intervengono in tre modi:

• minificazione del codice Javascript e CSS
• diminuzione del numero di file da scaricare attraverso la concatenazione in un unico bundle
• posizionando i tag script prima della chiusura del body invece che nell’head della pagina in modo che il browser possa scaricare altre risorse necessarie, come CSS e HTML

Ottimizzazioni possibili

<link rel="stylesheet" href="/dist/css/vendor.min.css" type="text/css">
<link rel="stylesheet" href="/dist/css/app.min.css" type="text/css" >
<script src="/dist/js/vendor.min.js"></script>
<script src="/dist/js/app.min.js"></script>

Implicazioni e accorgimenti

• Il rischio è che il file risultato della concatenazione degli script risulti eccessivamente grande, e quindi di fatto non abbiamo ottenuto ottimizzazione
• Se ci sono più pagine HTML che utilizzano librerie diverse o parti di codice distinte, ogni pagina richiederebbe lo scaricamento dell'intero bundle

Tipicamente questi approcci si adattano molto bene al caso delle Single Page Web Application,

Quali task automatizzare?

• Concatenazione JavaScript
• Minificazione JavaScript
• Linting del codice
• Test running
• Compilazione SASS/LESS in CSS
• ...

Modern Front End Workflow

Modern Front End Workflow

Javascript as a platform

• Chrome V8 runtime
• Non-blocking I/O model

https://nodejs.org

• Package manager for Javascript

https://www.npmjs.com

Javascript as a platform

Nel progetto ci sarà tipicamente un file package.json in cui descrivere ed elencare tutti i pacchetti npm di cui abbiamo bisogno come dipendenza

Grunt

The Javascript task runner

http://gruntjs.com

Grunt

• Tool a linea di comando
• Si installa via NPM npm install -g grunt-cli
• Configuration over code (Gruntfile.js)
• I task e le configurazioni sono scritte in Javascript
• Everything is a Plugin
• I plugin necessari si dichiarano nel package.json

Concatenazione file js

grunt-contrib-concat

// grunt initConfig...    
pkg: grunt.file.readJSON('package.json'),

concat: {
  options: { separator: ';' },

  js: {
    src: ['src/**/*.js'],
    dest: 'dist/<%= pkg.name %>.js'
  },

  vendor: {
    src: ['vendor/jquery.js', 'vendor/underscore.js', 'vendor/**/*.js'],
    dest: 'dist/vendors.js'
  }
}
// loadTask here...

Minificazione file JS

grunt-contrib-uglify

// Project configuration. 
grunt.initConfig({
  uglify: {
    options: {
      mangle: false
    },
    my_target: {
      files: {
        'dest/output.min.js': [
          'src/input.js',
          'src/input2.js'
        ]
      }
    }
  }
});
// loadTask here...

Minificazione file CSS

grunt-contrib-cssmin

grunt.initConfig({
  cssmin: {
    target: {
      files: { 'dist/style.min.css': ['styles/style.css'] }
    }
  }
}
// loadTask here...

Grunt task

"grunt-contrib-connect"

grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 8000,
        base: ".",
        livereload: true,
        open: true
      }
    }
  }
});

grunt.loadNpmTasks( 'grunt-contrib-connect' );
grunt.registerTask( 'default', [ 'connect' ] );

Grunt task

"grunt-contrib-watch"

grunt.initConfig({
  watch: {
    options: {
      livereload: true
    },
    html: {
      files: [ "./src/**/*.html" ]
    },
    markdown: {
      files: [ "./src/**/*.md" ]
    }
  }
});

grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.registerTask( 'default', [ 'watch' ] );

Grunt task

grunt-contrib-copy

copy: {
  main: {
    files: [
      // makes all src relative to cwd 
      {expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'},

      // flattens results to a single level 
      {expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'},
    ],
  },
}

Grunt task

grunt-preprocess

Grunt task

grunt-jsdoc

?

Esercitazione 02

Generare la documentazione con un task Grunt

Esercitazione 03...

Esercitazione 03

Le direttive di grunt-preprocess che utilizzerete sono le seguenti:

• @include-static file.html: per includere il contenuto di un frammento esterno
• @exclude / @endexclude: per escludere la parte che si trova tra apertura e chiusura del tag