09.Dependencies Management and AMD

Dependencies Management

Step 1. Predisponiamo il nostro ambiente

Portiamo il nostro ambiente di sviluppo ad una situazione stabile e funzionante.

# git checkout websocket

A questo punto possiamo cominciare ad utilizzare bower per fare da gestore di pacchetti, lanciando il seguente comando

# bower init

A questo punto abbiamo il nostro file bower.json con un risultato molto simile:

{
  "name": "codemotion2014",
  "version": "0.0.1",
  "homepage": "https://github.com/marcocasario/codemotion2014",
  "authors": [
    "Luciano Murruni <[email protected]>"
  ],
  "description": "training",
  "main": "index.html",
  "moduleType": [
    "amd",
    "globals"
  ],
  "keywords": [
    "codemotion2014"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Aggiungiamo quindi le dipendenze esterne del progetto utilizzando i seguenti comandi:

#bower install --save jquery
#bower install --save requirejs
#bower install --save js-signals
#bower install --save modernizr

Il comando --save specifica a bower che queste risorse devono essere inserite all'interno del file bower.json Aprite il file bower.json e verificate che queste risorse sono effettivamente state inserite.

Per avere la lista completa dei pacchetti possibili da installare clicca qui http://bower.io/search/

Un altro modo per installare una dipendenza attraverso bower è quella di inserirla manualmente nel file bower.json.

Aggiungiamo per esempio Bootstrap tra le dipendenze anche bootstrap tra le dipendenze:

"dependencies": {
   "jquery": "~2.1.1",
   "requirejs": "~2.1.14",
   "js-signals": "~1.0.0",
   "modernizr": "~2.8.3",
   "bootstrap": "~3.2.0"
}

Lanciamo il comando # bower install

AMD - Definizione di moduli a runtime

• Includere RequireJS all'interno della nostra index.hmtl

<script data-main="js/main" src="bower_components/requirejs/require.js"></script>

Il parametro data-mail indica a RequireJS quale file caricare per primo non appena la nostra applicazione viene eseguita.

RequireJS e modernizr saranno i nostri unici file javascript inclusi in index.html

• All'interno del file main.js (dentro la cartella /js), inseriamo prima la configurazione di base relativa al nostro progetto e poi tutte le inclusioni delle nostre librerie tramite requirejs:

le funzioni di utility come isNotNull() inseriamole in un file common.js.

var codemotion2014 = {
   model: {},
   view: {},
   controller: {},
   commonUtils: {},
   services: {},
   isProduction: true
};

var initialize = function() {};
requirejs.config({
  //By default load any module IDs from js/vendor
  baseUrl: 'js/',
  paths: {
    jquery: [
      'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
      //If the CDN location fails, load from this location
      'bower_components/jquery/dist/jquery.min'
    ],
    googlemap: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC3nvub6YdbJZLIKdNjcVDfh2vPbI60vus&sensor=false&callback=initialize',
    signals: 'bower_components/js-signals/dist/signals'
  }
});```

Aggiungiamo ora, a cascata, gli script che si occuperanno di includere le dipendenze necessarie per il corretto funzionamento dell'applicazione:

//dipendenze del progetto requirejs(['signals'], function($) { //loaded and can be used here now. requirejs(['jquery', 'googlemap'], function($) { //jQuery, common and plugins //loaded and can be used here now. requirejs(['company', 'contact', 'helpdesk', 'plugins'], function($) {

  //inserire qui le altre dipendenze
  console.log('tutti i moduli sono stati caricati!');

});

}); });

Eseguendo la pagina, tutti i file saranno caricati direttamente da RequireJS