Primi passi con lo sviluppo front end su Magento

Il mio inizio con Magento coincide con l’ingresso in Bitbull avvenuto nel luglio 2015, quindi nove mesi fa circa. Non è perciò nato da una necessità progettuale, quanto aziendale, dal momento che l’attuale core business di Bitbull è lo sviluppo di e-commerce con Magento.

Imparare Magento presuppone una conoscenza base di sviluppo web.

Una cosa che è chiara fin da subito, è che non si può pensare di gestire un e-commerce basato su Magento con le sole competenze front end o back end. Per Magento sono necessarie entrambe in egual misura.

Le basi

Posso parlare del mio caso, ovvero lato front end, dove una buona dimestichezza con HTML, CSS e JS (di cui Magento abusa oltre ogni dire) è fondamentale. Poi sicuramente conoscere anche un pizzico di PHP aiuta a districarsi nel codice. Detto ciò, l’inizio può essere un po’ confuso e complicato per via della gestione dei temi e dell’organizzazione cartelle, ma in realtà si tratta solo di imparare a ragionare secondo Magento. Viene usato in larga misura anche XML che serve principalmente a decidere a monte come deve essere composto un layout di pagina. Forse è questa una della parti più cruciali di tutto il sistema di gestione dei temi, al di là del saper scrivere un documento ben formato, perché richiede di conoscere come funzionano i raggruppamenti delle regole di aggiornamento del layout (handle) e i comandi (action) per poter gestire i vari blocchi di cui si compone una pagina. Ma, per fortuna, ci viene in aiuto una funzionalità integrata di Magento, i template hints, attivabili dalle configurazioni, di cui, soprattutto all’inizio, si sfrutta spesso (per i più curiosi, si attivano da System > Advanced > Developer > Debug > Template Path Hints scegliendo come Scope, o ambito, la vista sito, website, o la vista negozio, store view. Basta poi aggiornare il sito lato front end per vederli in azione).

Da dove cominciare

Una delle cose più interessanti per noi front end developer è proprio il meccanismo di fallback dei temi. Magento viene installato, dalla versione 1.9.x, con tre temi: l’rwd, tema responsive attivato di default, il default, tema non responsive che veniva usato di default prima di rwd, e il base che è il tema contenente tutti i template e sul quale il fallback finisce quando non trova nulla nei temi che precedono il flusso. A questo punto avrete capito che il base va usato come traccia su cui strutturare tutti i template del proprio tema attivo e non va MAI toccato. Perché anche i “frontendisti” hanno un core. La logica è simile a quella adottata da altre piattaforme con la differenza che in Magento si possono aver fallback infiniti (prima della 1.9 erano limitati a tre) e si lavora perciò sempre sulla cartella del proprio tema personale per il progetto in essere.

Questo significa che è sufficiente personalizzare solo le pagine che differiscono come markup dal base, lasciando il compito a Magento di recuperare le altre a cascata nel flusso dei temi permettendo così di avere sempre la piattaforma funzionante e di ottimizzare i tempi di modifica.

Non è inusuale, a tal proposito, partire già da uno starter theme come per esempio magento-boilerplate oppure b-responsive entrambi basati su Boostrap. In Bitbull, per esempio, usiamo magento-boilerplate per via dell’utilizzo di Bootstrap, perché suddivide in modo sensato i file less e dispone di file gulp con configurati già parecchi task per la gestione di css, js e immagini, ma altri sviluppatori partono anche da rwd o direttamente da temi veri e propri, uno fra tutti Ultimo. Il problema dell’utilizzo di un tema di terze parti è che si porta dietro anche molte configurazioni che spesso non servono. Già lo stesso Bootstrap spesso rischia di essere ingombrante, come molti di voi avranno già sperimentato.

Un’altra componente interessante sono i blocchi di Magento, quelli gestibili da XML e che si dividono in blocchi strutturali (che potremmo definire dei blocchi contenitori, come per esempio header, footer, aside etc..) e blocchi di contenuto (tra questi possiamo citare la ricerca, il mini carrello, la lista prodotti etc..) ai quali è bene dare uno sguardo attento, sperimentando direttamente sull’XML e provando a manipolarli.

Anche il software con il quale si sviluppa è importante al fine di essere più produttivi. Ho iniziato ad usare PHPStorm perché è lo strumento usato in Bitbull e devo dire che mi trovo bene. Dispone anche di un plugin per Magento, chiamato Magicento. Di contro ha il difetto di essere un IDE anche piuttosto pesante, ma dipende dalla macchina su cui gira. Nel mio caso posso tenere anche 4 o 5 progetti aperti senza problemi.

Nell’impostazione del lavoro, è sicuramente utile affidarsi a dei task runner (come gulp o grunt) per la compilazione di css da less o sass o per la minificazione dei JS. Strumenti di cui personalmente non posso più fare a meno. Ma questo è solo un consiglio.

Studiare Magento

Dopo un mese intensivo di studio e pratica sul campo su un progetto reale, posso dire che ci si può già muovere con confidenza in Magento anche se è con un secondo progetto che si consolidano certe conoscenze e si capiscono altri concetti. Sono stata sicuramente facilitata dall’avere a disposizione colleghi esperti a cui porre domande, ma in mancanza di questo, esistono delle risorse, anche se non sono molte, alle quali attingere.

Per esempio non si può non citare la guida gratuita e ufficiale, Magento Designer’s Guide to Magento, scaricabile direttamente dal sito della piattaforma previa creazione account, che è ancora la risorsa ufficiale su cui prepararsi per dare l’esame di certificazione. Il testo dà un’infarinatura generale sulla struttura dei temi e come districarsi tra questi.

A proposito della certificazione Magento, ho provato a dare l’esame a dicembre, anche se ci lavoravo da soli quattro mesi, e l’ho passato. Devo dire che prepararsi alla certificazione ha probabilmente contribuito in larga misura ad imparare come usare la piattaforma e cosa poterci fare. Nel prepararmi a questa, c’è stato un altro libro, oltre alla già citata guida, che mi è stato molto utile, ovvero Magento Made Easy: Comprehensive Guide to Magento Setup and Development vol 1 distribuito gratuitamente da Magestore. Questo testo entra nel dettaglio chiarendo anche le regole di nomenclatura usate nella dichiarazione dei blocchi ed altre succulente informazioni.

Si scoprono poi molte cose anche rispondendo ai quesiti della simulazione dell’esame, ne abbiamo trovati un paio online molto validi: https://www.gitbook.com/book/robkent/magento-front-end-developer-test-questions/details (30 domande) e http://www.examboat.com/onlineexam/viewExam.html?t=VJ+oKEJ4AbE= (50 domande, come una simulazione reale). È possibile trovare a questo indirizzo: https://github.com/aleron75/mageres altre numerose risorse utili.

Per finire, un ottimo esercizio è stato anche quello di tradurre la piattaforma in italiano perché, dovendo contestualizzare le frasi da tradurre, ho dovuto navigarmi l’area amministrativa anche in sezioni che ancora non mi era capitato di toccare e ho scoperto così parecchie cose nuove. Se volete, la traduzione è disponibile su un nostro repo ma è ancora in fase beta.

Ci sono poi, come per ogni ambito, siti online specializzati nella trattazione di Magento. Non posso perciò non menzionare Inchoo con i suoi innumerevoli articoli e la community su google plus nonchè http://magento.stackexchange.com/ nei quali potete porre le vostre domande certi di avere una risposta. Infine, un libro edito da Packt Publishing sullo sviluppo dei temi scritto da Andrea Saccà: https://www.packtpub.com/web-development/mastering-magento-theme-design.

Uno strumento potente

Magento è una piattaforma e-commerce completa che può essere ancora estesa grazie alla sua struttura modulare, sviluppando o installando estensioni che aggiungono o modificano le funzionalità native. Originariamente però Magento permette già di catalogare numerose tipologie di prodotto, avere una grande flessibilità nella gestione dei temi, estendere moduli PHP e JS e varie altre funzionalità. Si può, ad esempio, impostare un tema per un periodo di tempo limitato, creare buoni sconto e gestire spese di spedizione per prezzi/Paesi, solo per citarne alcuni.

Come già detto sopra, sconsiglio di buttarsi su un progetto con Magento sperando di cavarsela con le sole conoscenze front end perché quasi sicuramente ci saranno richieste del cliente che necessiteranno personalizzazioni lato back end e occorre saperle sviluppare.

Per questo, in genere, Magento viene scelto per progetti che richiedono avanzate funzionalità di gestione del catalogo, delle vendite, di marketing e così via, progetti che necessitano di scalare rapidamente verso l’alto e da brand affermati nei più svariati settori dell’industria. La complessità della piattaforma richiede competenze solide nei diversi ambiti della progettazione e dello sviluppo. Daniele ci offre un’interessante lettura riguardo all’investire o no sull’e-commerce.

Ma di certo questo però non preclude uno studio approfondito del front end perché una buona conoscenza dello stesso aiuta sicuramente a relazionarsi meglio anche con il back end.