Magento 2: working on the front-end with CSS and JS

Magento 2: working on the front-end with CSS and JS
Working on the front-end in Magento 2 has changed significantly in comparison to the previous version of the shop. A fully modular approach has been introduced, which results in the code being stored in a slightly different, more structured form. This form allows, in my opinion, to more easily navigate the project, and to more easily find places which require changing.

In addition to the change in file structure, many new tools have been introduced, which should be the standard in every project. Taking into account how rapidly things change in the world of front-end, the solutions used here may no longer be considered state-of-the-art. However, it is important to note that a lot of time passes from the start of work on the new version of the shop before it is released, which forces the developers to choose technologies which, while not exactly state-of-the-art, are well-established and will not disappear overnight.

Magento 2 – CSS

The developers of Magento 2 decided to utilise the LESS dynamic stylesheets. You could of course argue that SASS is superior to LESS, but the functionalities which are most frequently used by programmers are available in both of these preprocessors. Even though Magento 2 forces the use LESS, it does not prohibit the use of SASS – using it should not pose any problems. However, as all default modules (it is worth noting that in Magento 2, everything is a module) utilise LESS, using SASS for the existing files will be difficult. When creating a new module, however, you can do it using SASS, and it should not pose any problems.

Seeing as Magento 2 uses a preprocessor, CSS files must be a result of source file processing. There are 3 options available when it comes to LESS/SASS file compilation:

1. Compiling using one of the available automation tools

Default Grunt’s configuration can simply be copied to the appropriate catalogue, then you need to instal grunt-cli, and voila, you can now compile files to CSS. This method is especially useful for efficient development. More information on the subject is available in the official documentation.

2. Server-side compilation

This option can be toggled in the administrator’s panel in the Stores/Configuration/ADVANCED/Developer/Frontend Development Workflow section. In this case, the compilation is PHP-side and is very efficient, so it can be used during development.

3. Client-side compilation

This option can be toggled in the same section as server-side compilation. This option involves browser-side compilation using JavaScript scripts. In my opinion, however, this option is available just for completeness’ sake, as this type of compiling would be far from optimal when it comes to time requirements in the case of Magento 2 and its large amount of files.

Magento 2 also made sure it has a default tool for combining and minifying all CSS files. These setting are available in Stores/Configuration/ADVANCED/Developer/CSS Settings. In order for file minification to work, you cannot be in developer mode – which is understandable.

Magento 2 – JavaScript

Like with CSS, working with JavaScript is also comfortable because of the automatic asynchronous RequireJS module loader. The standard configuration offers access to jQuery, UnderscoreJS, jQuery UI, Knockout.js, and many other libraries. The naming standard for JS modules is legible and makes finding source files easy. For large-scale products, for which Magento 2 was created, using AMD gives great results, as it grants access to data from all modules, in every module – which helps avoid duplicating code and optimises scripts.

In the production version of the app, combining and minifying files is required for both CSS and JS. Here, you also have the option to toggle the default mechanism in Stores/Configuration/ADVANCED/Developer/JavaScript Settings.

Summary

Even though Magento 2 forces the use of a number of solutions, this does not really limit expanding and creating new functionalities. By default, you receive a set of ready-made, configured tools which enable you to start working effectively relatively quickly. Thanks to the modular approach, the sheer size of the system is no longer a problem. I can recommend Magento 2 to everyone who is thinking about giving this solution a spin – while it may take you a few weeks to get going, you will eventually realise that everything is well thought-out and that nothing is without a purpose.

Front-end developer at Unity Group. Tomasz is in charge of visual aspects of our projects. Although he follows all the latest trends in web app development, he prefers proven industry standards over unrestricted experiments. With several years of experience, Tomasz has worked for clients, such as Royal Canin, Rovese, Toyota Nowakowski, Tubes International and Homla.

Fields marked with an * are required

UNITY GROUP NEWSLETTER

Subscribe and stay on top of the latest tech news and guides:

TELL US ABOUT YOUR PROJECT

Questions? Don't hesitate to drop us a line - we're here to help.

Fields marked with an * are required