Magento 2 Frontend Development – Introduction

Category: Magento
Magento 2 Frontend Development – Introduction

Release of Magento 2 has been the most anticipated event in the e-commerce platforms world for the past years. The completely new version of this great e-commerce platform brought wide range e-commerce and security features that will make any online store very successful.

In the Magento 2 Frontend Development series I’ll guide you through the entire process of frontend development for Magento 2 system. Yes, we have official docs for Magento 2 and way much better documented than docs for the previous version of Magento.

To understand the mechanics one needs much more then reading docs. In my opinion one needs lots of coffee and many hours to solve Magento’s XML based puzzle.

This introduction will serve the purpose to show you what we will building and which topics will be covered in the upcoming articles.

We will be developing our custom theme for Magento 2 that is based on Bootstrap and uses several 3rd party Javascript/jQuery extensions.

We’ll start by creating a basic theme for Magento 2 and will meet Magento’s XML configuration. In the upcoming articles we’ll cover XML layouts of Magneto 2. Understanding the structure of XML configurations is key to successfully manage and update Magento 2 frontend.

Next we’ll start building the template itself. More specifically we’ll build the header. This will be a long journey divided into several articles. We will deal with essential modules such as customizing mini shopping cart, placing store logo and creating custom menu for Magento 2. Then we’ll switch to footer - footer links, subscribe form and copyright. In the meantime we’ll learn to work with Magento 2 javascript libraries – Magento UI, RequireJs and KnockoutJs.

These series won’t be just to show you the code as many of the articles and books do. I’d like to go beyond the code and explain each concept and each topic in details, so eventually you have good understanding.

Before we start, it’s needless to say that you should have Magento 2 installed. If you haven’t done that yet, read my article How To Install Magento 2 Using The Command Line On A Shared Server

Let’s get started!
First of all we will put Magento 2 system in the developer mode and then disable cache.

Developer Mode

The developer mode is handy and needed when you’re extending or customizing Magento 2. In developer mode:

  • Static view files are not cached; they are written to the Magento pub/static directory every time they’re called
  • Uncaught exceptions display in the browser
  • System logging in var/report is verbose
  • An exception is thrown in the error handler, rather than being logged
  • An exception is thrown when an event subscriber cannot be invoked

To check the current mode use the following command from the root directory of Magento 2 installation:

php bin/magento deploy:mode:show

Before changing the mode make sure to clear the following directories:

var/cache
var/di
var/generation
var/view_preprocessed
pub/static

You can clear the folders manually through FTP connection or use command line. Here’s the example:

rm -rf var/ cache /*

When the folders are cleared you can change the mode:

php bin/magento deploy:mode:set developer

The following message will be displayed: Switched to developer mode.

NOTE: Developer mode affects performance, meaning that your page load time takes much more time than in the production mode. The reason is that on every page call Magento generates view files.

IMPORTANT: When you update JavaScript or CSS files you should clear static files manually to make sure you get all the changes. My preferred way to clear the pub/static directory of all files except .htaccess (which is a hidden file), is the following command: rm -rf pub/static/*. You can do this by using the Magento command line too. Several commands support an optional parameter --clear-static-content, which cleans generated static view files.

You will need to re-deploy Magento 2 static files by navigating to the root directory of your Magento installation and issuing the following command:

php bin/magento setup:static-content:deploy

Cache Status

Before proceeding let’s check the cache status. Again from the root directory run the following command:

php bin/magento cache:status

A sample output for the available cache types follows:

config: 1
layout: 1
block_html: 1
collections: 1
db_ddl: 1
eav: 1
full_page: 1
translate: 1
config_integration: 1
config_integration_api: 1
config_webservice: 1

Disabling cache types is useful during development because you see the results of your changes without having to flush the cache; however, disabling cache types has an adverse effect on performance.

To disable or enable Magetno 2 cache use the following commands:

php bin/magento cache: disable
php bin/magento cache:enable

Cleaning a cache type deletes all items from enabled Magento cache types only. In other words, this option does not affect other processes or applications because it cleans only the cache that Magento uses. Disabled cache types are not cleaned. Flushing a cache type purges the cache storage completely.

As far as we have disabled all cache you won’t need to clean or flush cache, but just in case here are the commands to do so:

php bin/magento cache:clean
php bin/magento cache:flush

Now you are completely ready to dive into the development.

Conclusion

So, I hope it all sounds very exciting to you as it is for me. I’ll try my best go beyond the code and explain each concept and each topic in details. I don’t want these series just to serve for showing you the code as many of the articles and books do. If you do have any questions or suggestions make sure to reach me by email or follow me on twitter - @mrgott. Cheers!