This week I started to look at front end development for Magento 2, anyone who knows me will attest to the fact that I’m not the best front-end dev. I struggle to make things pretty, I’m not a designer. If you put a design in front of me I can replicate it but if you want me to come up with the concept you are likely to be disappointed and left wanting.
A solid understanding of the Magento 2 platform would not be complete without a foundation on the principles of best practice front-end design and development practises.
To this end I have just started the Magento U, Core Principles for Theming in Magento 2 online course. Whilst a number of these topics were covered during the Development Essentials training this course lays out a few more in-depth details that the essentials brushed over.
Several of the courses I have undertaken now follow the same theme, if you are directly modifying core code the you are more than likely doing it wrong. Inheritance, extending and overriding are your friends. This applies to both module creation and theming.
As with anything Magento 2 related nothing is as easy as it first seems, and it quickly becomes apparent that it really helps to take reference from the Magento Luma theme. Seeing how it extends the base theme and overrides various components to achieve its results.
The first challenge to overcome for me was how to quickly develop front-end changes and see the results. Modifying LESS files does not cause automatic compilation to CSS even with the system in developer mode.
The training suggests three alternatives
- Server-side compilation (default)
- Client side using JavaScript
- Local compilation with Node.js & Grunt
However, the slides provided are not the clearest on implementation or best practise, they do however list the pros and cons of each approach. Both of the client and server methods require you to delete certain directories to trigger recompilation.
Server -Side Compilation
Pros
- No additional setup required
- Works on server side
Cons
- Slow
- Global recompile
- Need to delete static files before each run
Delete the directory in the file system and reload pages to trigger compilation
- Pub/static/frontend/<Vendor>/<theme>/<locale>
*You may also need to clear the var/cache and var/view_preprocessing
Client-Side Compilation
“Used to quickly preview changes and to debug small issues”
Pros
- No need for additional setup
- Fast
Cons
- Annoying blinking before styles compile
- Global recompile
Delete the directory in the file system and reload pages to trigger compilation
- Pub/static/frontend/<Vendor>/<theme>/<locale>
Server-Side vs Client-side
During the training it asks you to perform tasks with the store in both modes for comparison.
When using server side running the setup:upgrade does everything you need to see the changes on the front end, whilst this is simple it is a global recompile and the first page load takes its time. However, it is possibly faster than manually deleting the specified directories.
Client-side tests for me were an utter failure, page load times increased to minutes with each asset taking forever to compile, one page took 11 minutes to complete. This may be my understanding that’s lacking but from a simple setting change in the admin to doom and gloom for my page speed. This was not looking like a good way to develop.
Local compilation with Node.js and Grunt
This in my opinion is the fastest and simplest way to develop front end changes for Magento.
The training lists the pros and cons as follows:
Pros
- Fast
- Recompile only local changes
- Easy to debug
- Can be automated with watching and LiveReload
Cons
- Requires initial setup of local environment
Once installed, setup and configured correctly simply running grunt less:<theme name> was enough to see the changes on the front-end. If adding source files, grunt exec:<them name> and then grunt less:<theme name>. So, in summary I would suggest that anyone looking to do serious front end changes or theming work then local compilation methods, in this case using Node.js and Grunt are the best and will save time and headaches whilst developing.