Magento 2 è la nuova piattaforma del gruppo Magento Inc., l’ultima versione che tutti vogliono e sulla quale tutti si stanno per “buttare”. Ovviamente le cose da vedere sono tante. Prima di cominciare a studiare Magento 2, ho solo “sentito dire” molte cose, tra cui, una delle più gettonate: è cambiata completamente l’architettura.

Da una parte penso che sia un problema, perchè la mia seniority su Magento è molto alta e cosi come me, sicuramente altri sviluppatori davvero in gamba lo pensano. Quindi, da una parte è un po’ un problema.
Ma dall’altra, è una possibilità sotto vari aspetti, tra cui il fatto che noi sviluppatori siamo sempre entusiasti di provare dei nuovi framework/linguaggi/cms, perchè ci piace sperimentare.

Allora mettiamoci al lavoro: questo è il primo articolo ( fortemente tecnico ), su Magento 2. Let’s start!

Require JS

Andando a leggere la documentazione di Magento, la prima cosa che scopri è: usiamo RequireJS.
Non avendolo mai usato in nessun progetto prima d’ora, vado a studiare RequireJS e voglio anche spiegarlo a chi come me non lo conosceva prima d’oggi.

Partiamo con la definizione che il sito di RequireJS da del suo strumento:

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Quindi è uno strumento che:

  • è pensato per “girare” all’interno di un browser ( di conseguenza sarà più testato e avrà MENO bug in quell’ambiente )
  • promette di migliorare la velocità ( di caricamento, si suppone ) e la qualità del nostro codice

Bene. Ma passiamo a vedere qualcosa di più concreto della promessa.

Compatibilità

  • IE 6+ ………. compatible ✔
  • Firefox 2+ ….. compatible ✔
  • Safari 3.2+ …. compatible ✔
  • Chrome 3+ …… compatible ✔
  • Opera 10+ …… compatible ✔

Come includere RequireJS in un progetto “standard”

Nell’esempio che viene citato nella documentazione ufficiale di RequireJS, si presuppone che tutti i file Javascript vengano inseriti all’interno della cartella chiamata “scripts”. L’esempio è il seguente:

project-directory/
  project.html
  scripts/
    main.js
  helper/
    util.js

Quindi, il nostro file RequireJs verrà inserito qui:

project-directory/
  project.html
  scripts/
    main.js
    require.js
  helper/
    util.js

Nota importante: tutti gli script inline non vengono gestiti da RequireJS. Infatti, la documentazione ufficiale consiglia di NON inserire nessuno script inline ( che nel nostro caso, in Magento, significa metterne il meno possibile ).

Nell’esempio infatti si vede includere solo il file require.js, che tramite l’attributo “data-main”, richiama il file main.js:

<!DOCTYPE html><html>
  <head>
    <title>My Sample Project</title>
    <!-- data-main attribute tells require.js to load
    scripts/main.js after require.js loads. -->
    <script data-main="scripts/main" src="scripts/require.js"></script>
  </head>
  <body>
    <h1>My Sample Project</h1>
  </body>
</html>

Il mio consiglio è quello di inserire il file require.js alla fine del documento, prima della chiusura del tag body, per non bloccare il rendering della pagina.

In alternativa, puoi inserire il tag “async” per caricare in modo asincrono la risorsa. Ovviamente non tutti i browser supportano questo attributo, per verificare se fa al caso tuo e decidere di usarlo, puoi consultare la tabella del supporto ai vari browser sul sito di Mozilla, cliccando qui: https://developer.mozilla.org/en/docs/Web/HTML/Element/script#Browser_compatibility

L’esempio continua dicendoci che, dentro il file main.js, possiamo richiamare altri file Javascript ed eseguire delle funzioni, come ad esempio:

requirejs(["helper/util"], function(util) {
  //This function is called when scripts/helper/util.js is loaded.
  //If util.js calls define(), then this function is not fired until
  //util's dependencies have loaded, and the util argument will hold
  //the module value for "helper/util".
});

Questo snippet di codice dice che verrà caricato il file helper/util.js e che la funzione requirejs() verrà eseguita non appena tutte finchè tutte le dipendenze non saranno state caricate.

Usi già jQuery nel tuo progetto?

Il sito ci da subito un’informazione. In base al tuo punto di partenza, cioè se stai creando un nuovo progetto da zero oppure se stai utilizzando un progetto già esistente dove è già presente jQuery, allora devi fare delle cose diverse.

Innanzitutto se vuoi leggere tutta la documentazione a riguardo, ti invito a leggere l’articolo a questo url: http://requirejs.org/docs/jquery.html

Se invece vuoi leggere un riassunto, ecco i punti importanti che devi sapere:

  • RequireJS gestisce jQuery come una dipendenza
  • devi inserire il file della libreria jQuery direttamente nella baseUrl del progetto
  • va specificata la baseUrl quando richiami RequireJS, come nell’esempio seguente:
requirejs.config({
  baseUrl: 'js/lib',
  paths: {
  // the left side is the module ID,
  // the right side is the path to
  // the jQuery file, relative to baseUrl.
  // Also, the path should NOT include
  // the '.js' file extension. This example
  // is using jQuery 1.9.0 located at
  // js/lib/jquery-1.9.0.js, relative to
  // the HTML page.
  jquery: 'jquery-1.9.0'
  }
});

Come vedi, viene specificata la baseUrl ( js/lib ) e poi viene indicato il nome del file ( jquery-1.9.0 ).
Questa procedura ti permette di includere jQuery attraverso RequireJS.

Spero che questo articolo introduttivo sia al frontend di Magento 2 sia a RequireJS ti sia utile. Continuerò ad esplorare il nuovo mondo di Magento 2 con particolare attenzione al frontend, quindi ti consiglio di iscriverti alla newsletter per essere aggiornato sui nuovi articoli, se vuoi imparare a creare un tema completo per Magento 2.

Se hai domande o dubbi, puoi lasciare un commento qui sotto.

Ti voglio ricordare che puoi discuterne anche nel gruppo Facebook, che trovi a questo indirizzo: https://goo.gl/gkj06s