Retour sur mon passage de Magento 1 à Magento 2

En tant que développeur spécialisé Magento 1, j’avais quelques appréhensions avant de me lancer dans la version 2.

Après quelques semaines dans le grand bain je vous propose un retour sur mon expérience (pas si douloureuse que prévu), non pas pour comparer les version 1 et 2, mais plutôt pour rassurer les autres développeurs souhaitant passer à la nouvelle version en leur présentant certaines des différences majeures. 

Car malgré mes réticences, j’ai finalement trouvé que ces évolutions avaient une certaine utilité et un impact positif.

La prise en main de Magento n’est pas réputée pour être aisée.
À force de persévérer et d’apprendre pendant des mois j’ai fini par atteindre ce moment d’extase où je sentais que je commançais à maîtriser la bête… en version 1. Gonflé de ma joie et de ma fierté, je me disais dit “hey ! classe ! Je sais enfin ce que je fais !”. Et c’est à ce moment précis où je me suis vu remettre un projet basé sur Magento 2.

En soit l’idée de passer sur une autre version est excitante, il y a énormément de nouvelles choses à apprendre, le fait de se mettre à niveau technologiquement... Mais la réalité est bien plus douloureuse.

Lorsque j’ai commencé mon premier projet Magento 2 je savais que j’allais devoir apprendre beaucoup de choses, mon expérience étant jusqu’alors intégralement basée sur Magento 1. Une petite explication d’une heure de la part de Thomas Klein m’a tout de même permis de vite remarquer les similitudes et différences majeures entre les deux versions, en restant principalement concentré sur l’aspect frontend.

L’architecture

Parmi ces différences on remarque directement l’architecture. En effet l’architecture globale de Magento 2 n’est plus du tout la même que celle de Magento 1, cependant bonne surprise : presque tout (au niveau de l’architecture) est maintenant plus clair et facile à comprendre, par exemple le dossier ‘app/design’ qui semble plus logique qu’avant.

Continuons dans les différences d’architecture avec un élément un peu plus perturbant au premier abord : la disparition du dossier ‘skin’. Ce dossier quelque peu fourre-tout était bien utile sous Magento 1, mais peut-être un peu trop “libre” dans son utilisation.

Evidemment Magento 2 n’a pas détruit l’héritage de son prédécesseur, on trouve donc un dossier ‘pub/static’, correspondant plus ou moins à cet ancien dossier ‘skin’. Et donc là se trouve l’une des premières choses un peu perturbantes, en effet tous les fichiers css, js, les fonts ou encore les images seront ajoutés dans le dossier ‘web’ du thème courant avant d’être déployés pour apparaître dans le dossier ‘static’.

Le XML

Venons-en maintenant à la partie la plus intéressante concernant notre développement frontend : le XML. Dans la théorie rien ne diffère entre Magento 1 et Magento 2 quant au XML, dans la pratique ce n’est pas exactement la même histoire.

D’un point de vue global, les parties ‘frontend’ et ‘adminhtml’ sont maintenant séparées là où elles étaient “mélangées” dans le même fichier sous Magento 1.x. Pour continuer, les fichiers XML sont maintenant séparés par fonctions (routes, observers, …), ce qui rend la lecture/l’écriture de ces derniers beaucoup plus claire. En bref on retrouve moins souvent cette sensation désagréable de se noyer dans un enchevêtrement de lignes archaïques contrairement à Magento 1.x.

Au début, il était compliqué de s’habituer à cette nouvelle architecture. Cependant c’est en modifiant des layouts que j’ai commencé à comprendre quelque chose : Magento 2 est vraiment mieux pensé que Magento 1. Tout d’abord il y a la balise <container>, permettant de déclarer un conteneur html, avec son tag, sa classe, son id, etc. Ainsi <container name=”example” htmlTag=”div” htmlClass=”class”> donnera un div de classe “class” généré à l’endroit précisé dans le xml.

Les balises <move> sont aussi extrêmement utiles, permettant de déplacer un bloc beaucoup plus facilement que sous Magento 1. Cependant il me fallait quand-même du temps pour trouver les bons layouts, blocs et containers au début. C’est alors qu’entre en jeu Advanced Template Hints, une extension permettant de trouver très rapidement les conteneurs, blocs et templates utilisés sur la page. Elle donne les noms, templates et autres informations utiles de tous les blocs qui vous intéressent.

À noter que désormais dans Magento 2, les très prisés balises <action>, sont désormais dépréciées, il est donc déconseillé de les utiliser. Cependant vous avez comme alternative de passer un certain nombre de données via la balise <argument> d’un block.

Finalement, parlons d’un autre fichier xml très utile : view.xml. Le fichier view.xml permet de définir les tailles de toutes les images dans le thème courant, en fonction de leur id et de leur type. Ce fichier se trouve dans ‘<thème_actif>/etc/view.xml’.

Le CSS

Le XML c’est génial, mais le développement frontend ne consiste pas uniquement à déplacer des blocs et créer une structure ergonomique. Il faut aussi styliser tout ça, cependant il est parfois gênant de créer son style quand plusieurs autres fichiers less/css viennent interférer avec le nouveau design souhaité. Pour palier à ce problème, il est possible de réécrire les less/css d’une façon très simple : en créant un fichier du même nom que le fichier à override, suivant le même chemin, mais dans le thème souhaité.

Il est aussi à noter que Magento 2 gère désormais directement (de base) la compilation des fichiers .less, proposant de les compiler côté serveur ou côté client. Etant donné que nous nous intéressons principalement à l’aspect frontend des choses dans cet article, sachez que Magento 2 embarque Grunt dans ses dépendances. Cependant, si vous voulez vraiment accélérer votre développement frontend, vous devriez utiliser Gulp, que je ne présenterai pas ici car cela a déjà été fait sur le blog.

Les points dérangeants (au premier abord)

Parmi les choses qui feront inévitablement perdre du temps au développeur passant pour la première fois sur Magento 2 il y a évidemment la syntaxe. Les choses ne s’écrivent pas de la même façon et les fonctions n’ont pas nécessairement le même nom que dans Magento 1. Il s’agit juste d’habitude à casser, reprendre et qui viennent très vite. Pour en savoir plus sur tout ça, jetez un oeil à nos 10 commandements Magento 2.

Mais il ne s’agit pas de la chose la plus frustrante. En effet, la complexification de certaines choses sous M2 est bien plus gênante. Par exemple, imaginons que vous souhaitiez récupérer le numéro de téléphone renseigné dans le back de votre site. Sous Magento 1 il suffirait de : Mage::getStoreConfig(‘general/store_information/phone’);

Malheureusement sous Magento 2 c’est beaucoup plus compliqué. Vous pourriez récupérer le numéro directement via l’ObjectManager, cependant c’est une pratique très fortement déconseillée. Il vaudrait mieux créer un helper étendant \Magento\Framework\App\Helper\AbstractHelper dans lequel on mettrait une fonction comme celle-ci :
public function getPhone()
{
  return $this->scopeConfig->getValue(Information::XML_PATH_STORE_INFO_PHONE, ScopeInterface::SCOPE_STORE); 
}

Personnellement, le passage de Magento 1 à 2 m’a paru un peu plus compliqué que prévu sur certains points. Cependant, c’est durant l’écriture de cet article que j’ai remarqué qu’au final, après quelques temps passés à m’y habituer, je préférais Magento 2. Là où beaucoup de points se présentaient au début comme des épreuves, il s’est avéré qu’ils n’étaient au final que de nouvelles choses à apprendre pour un développement plus simple, plus clair, plus propre.