First of all, let's access the XAMPP website on https://www.apachefriends.org/.

XAMPP has three distinct versions for different operating systems (OS): Windows, Linux, and OS X. Choose your preferred version to download, and start the installation process.

XAMPP for Windows installation

XAMPP for Windows has three different kinds of installation files:

• Installer: This is a classic Windows installation method
• Zip: This method uses compressed files to install manually
• 7zip: This method uses compressed files to install manually

The (.exe) installer is the most popular process to install. Download it and execute to start the installation process, shown as follows:

1. You can skip FileZilla FTP Server, Mercury Mail Server, and Tomcat for our installation purposes but feel free to consult Apache Friends Support Forum for further information at https://community.apachefriends.org.
2. On XAMPP, we have the option to use Bitnami (https://bitnami.com/xampp), but for learning purposes, we will install Magento in a classic way.
3. Complete the installation by pressing the Finish button.
   
4. In order to start XAMPP for Windows, you can execute xampp-control.exe and start the Apache web server.
5. To test if everything is working, type http://localhosturl in your favorite web browser. You will see the XAMPP start page:
   

Magento is an open source content management system for e-commerce websites. It's one of the most important e-commerce systems, which has grown fast since its launch in 2008.

Basically, Magento works with two different types of Magento: Community Edition (CE) and Enterprise Edition (EE). In this book, we will cover CE.

On a study provided by aheadWorks (https://aheadworks.com/) in October 2014, Magento CE has taken the leading position among examined e-commerce platforms.

Now, we have solid concepts about "where we are going". It's very important to have solids concepts about every aspect that you are working on in this moment. Globally, e-commerce shows a remarkable potential market and Magento professionals are welcome.

Magento installation

First of all, we need to create a user account on the Magento website (http://www.magento.com) to download Magento CE. Click on the top-menu link My Account and after clicking the button labeled Register, fill out the form and confirm your registration.

Once registered, you gain access to download Magento CE. You can access the Products | Open Source/CE and VIEW AVAILABLE DOWNLOADS menus.

On this page, we have three important options:

• Full Release (ZIP with no sample data): This is a complete download of the last and stable Magento version
• Full Release with Sample Data (ZIP with sample data): This is important to create example products to our store for testing.
• Download with Composer: This is the dependency management installation tool

Choose the Full Release with Sample Data (ZIP with sample data) option for downloading Magento. Extract the compressed files in the XAMPP htdocsfolder and rename the folder to packt.

Note

Remember to start Apache and MySQL services on the XAMPP panel before the installation.

Before starting the Magento installation, we'll need to create a new MySQL database instance to store the Magento data. phpMyAdmin is a MySQL web app to manage your database and can be accessed at http://localhost/phpmyadmin/.

Click on the Databases menu and the Create database option to create the packt database.

Now, let's start our Magento installation. On your browser, access http://localhost/packt/setup.

By now, you will see this installation page on your browser:

Let's start the Magento installation by following these steps:

1. Readiness Check: Check the environment for the correct PHP version, PHP extensions, file permissions, and compatibility.
2. Add a Database: Fill the database form with your connection information. By default, you can follow the suggestions given here:
   
3. Web Configuration: Enter you store address and admin address here:
   
4. Customize Your Store: In this step you provide the time zone, currency, and language information:
   
5. Create an Admin Account: Enter with personal login information and set the admin address to packt-admin.

After all these steps, we are done! Congratulations! We have our first Magento installation!

You can access your new site by accessing the URL at http://localhost/packt:

And you can access the admin area by accessing the URL at http://localhost/packt/admin-packt:

For more information about Magento installation, access http://devdocs.magento.com/guides/v2.0/install-gde/bk-install-guide.html.

Magento MVC architecture

MVC is an architectural software pattern that works with three different but interconnected parts. Its principal mission is to abstract the development work into interdependent layers providing the best practices to documentation and organization of software projects.

The Magento e-commerce solution is written with the PHP Zend framework, which is one of the most powerful PHP frameworks. For more information, access http://framework.zend.com/.

Magento is a configuration-based MVC System. For example, when you develop a module (we will check this in the next chapters), besides creating new files and classes to your module, you need to also create a config.xml file. This file contains all the configuration data for Magento module. These practices abstract some important information that you can easily edit to set the module as you need.

In this book, we will cover only the very basic Magento software architecture concepts, but it's highly recommended that you to study more software design patterns, especially in our case MVC software architecture needs to be understood well to best experience the field of software development.

You've now seen what Magento can do; you have installed Magento too. You started to understand the basic concepts of Magento, and certainly, you'll get more experience in developing your own Magento solutions by working in the projects of this book.

In the next chapter, we'll work with some Magento Sell System features.

On the e-commerce systems, the sell process is one of the most important features of every online business, providing a good e-commerce life cycle.

Some processes will be triggered when a customer confirms his order. Magento collects all the customer data and processes the request turning it into an order. This book will only cover the basic concepts of this process, but it's very important to understand them to develop consistent Magento extension solutions (we will see about this in Chapter 6, Write Magento 2.0 Extensions – a Great Place to Go).

Let's take a look at the Magento sales operations basics.

Sales operations

Let's play with the Magento admin area. In your favorite browser, enter the URL http://localhost/packt/admin-packt. Now, enter with your login credentials to access the admin area:

In Magento 2.0, you can manage sales operations by accessing the Sales menu in the admin area. Magento gives you the possibility to configure the following Sales options:

These options give you the power to manage your sales system as you want. Though it's, it's important to explore some Magento tools, extensions, and techniques to take full advantage and make improvements on your sales system to gather techniques to develop your own solution:

We have many options to make improvements on sales operations. You can configure up-sells and cross-sells features, for example, to give your customer more ways to order on your store. To do so, take advantage of a search engine optimization, work with a multilingual store, a geo-targeting, responsive design, and a simplified checkout process.

Once you have installed Magento 2.0 CE, you will need to configure some options and manage the system life cycle according to your specific needs. You can start your Magento configuration and administration using the command-line utility.

Let's see how this feature works.

Magento 2.0 has a command-line utility to help developers manage installation and configuration tasks. The new command-line interface can do the following:

To work with this tool, you will need to open a terminal (Linux, OS X) or command prompt (Windows) and access the <your Magento install dir>/bin directory. Then, enter with the php magento command to see all the available commands of the command-line utility:

Let's play a little bit with the utility by disabling your Magento system cache:

Now let's try to manage Magento indexing. Magento indexing transforms the data to improve the performance of your system by executing the following commands. Indexing technique optimizes the price calculations process, for example, and it has an important role to play in the Magento performance:

Magento indexing was successfully rebuilt, thanks to the command-line utility actions!

You can build cron jobs in a remote server to automate some Magento actions. For example, create an automation routine to re-index Magento periodically.

I strongly advise you to play more with the command-line utility. You can consult the online documentation available at http://goo.gl/iVnQSn.

We started this chapter to get the real bases of Magento power. It's important to get solid concepts, before you eagerly jump and begin developing Magento solutions. Take a moment to understand the scope of your project. This will make Magento development a much more rewarding experience.

Magento has a solid structure to develop your own solutions. You can automate some tasks using the Magento command-line utility and optimize Magento resources to get better results.

In the next chapter, we will work with Magento search engine optimization.

By default, Magento's basic installation has the title Magento Commerce on the header settings. It is very important to choose a strong main title to get the right amount of traffic on your site. For example, if you are working on the SEO of a sports store, you can set the main title as My Sports Store to increase the traffic through the title. When people search for something, they always notice the earlier words first.

To adjust your store settings, you need to navigate to Stores | Configuration | Design | HTML Head in the Magento admin area (http://localhost/packt/admin-packt).

Choose a good descriptive title for your Magento commerce. It is possible and recommended to name all your page titles, including categories and products, by entering the site title in the Title Suffix field. To give density to the content for SEO engines by configuring the SEO on CMS pages and products, keep Default Description and Default Keywords empty.

For a local and nonproduction environment, prevent the indexing of the site by setting Default Robots to NOINDEX, NOFOLLOW. Otherwise, it is recommended to set it to INDEX, FOLLOW.

By working on this configuration, you will find that the main SEO parameters of the <head> tag are automatically fulfilled to be run on Magento commerce.

Magento has a specific SEO configuration panel for multiple sections. To access the main Magento SEO configuration, enter in the Magento admin area (http://localhost/packt/admin-packt), and you will find the panel by clicking on the menu at Marketing | SEO & Search:

Magento 2.0 changed some functionality in comparison with its previous version. For example, in the URL Rewrites menu, you can manage and define all the URL addresses of Magento in order to increase the SEO's friendly URLs.

Here, you can simply choose Request Path to edit and enter a description for each of them, as shown in the following screenshot:

In Search Terms, you can define and redirect the URL according to the search made by the user by adding a new search term:

Finally, in the New Site Map section, you can generate Sitemap of your Magento installation as shown in the following screenshot:

Magento has a special panel to take care of the catalog categories of SEO. To access this panel, navigate to Stores | Configuration | Catalog | Search Engine Optimization, as follows:

This panel has the following options:

With these options, you can choose the best strategy for SEO on catalog's default options. Magenta gives the administrator the opportunity to tune these options on catalog pages. We will work this out later in this chapter.

XML sitemap manager

Magento automatically generates an XML sitemap for your store and also keeps it up to date. In order to enable this, navigate to Stores | Configuration | Catalog | XML Sitemap. Magento has the following options for this section:

Basically, with these options, it is possible to choose the frequency and priority of updates. You may set additional options, such as Start Time and Error Notifications, only in the GENERAL settings tab. It's important to configure the cron job functionality in your web server to enable this feature.

Google Analytics helps track all the statistics for your site. To add Google Analytics on Magento, generate a tracking code on your Google Analytics account (http://analytics.google.com) first of all. After this, navigate to System | Configuration | Google API.

This option works only on hosted Magento sites (that is, the remote server). Take note of this for when you work on a remote production Magento site. For the purposes of this book, it isn't necessary, but you need to keep this option in mind when you start to work on remote projects.

Once you make Magento SEO system configurations, it's time to set specific options directly on Magento pages. This Magento SEO flow gives the user the flexibility to focus on content and page ranking.

CMS pages

The Magento Content Management System (CMS) manager is a very simple but powerful tool that provides us with control over each aspect of the Magento page. To access Magento CMS pages configuration in the admin area, go to Content | Pages, as shown in the following screenshot:

Magento's default installation provides some demo content to test CMS pages. Check the Home Page content by selecting the Edit option.

For the purpose of SEO, Magento's CMS page administration has two main SEO side menus: Page Information and Meta Data.

In Page Information, you can set the following options:

• Page Title: This should correspond to the main title of the page
• URL Key: This is very important to set a great Search Engine Friendly (SEF) URL identifier to increase SEO ranking
• Store View: Here, you can choose the views on the page
• Status: This has simple Enabled and Disabled options.

In Meta Data, you can set the following options:

• Keywords: Here, enter the keywords that correspond to your site's scope.
• Description: Make sure to use this field the right way. A good description means a good chance of increasing access and sales.

The content of your page must be aligned with the metadata for a good SEO implementation.

Product pages

This is the most important layer in a Magento store. Besides providing a lot of options to configure the product to be sold, this also makes it possible to tune the SEO configuration to increase sales through the search engine page ranking system. In order to access Product options, navigate to Products | Catalog, as shown in the following screenshot:

Click on the first product of the list to take a look at the SEO options. For the purpose of SEO, Product Details has the following options:

• Name: You need to make this descriptive; think about what people might search for
• Description: Here, you must detail the product as much as possible to make your content unique and helpful to users
• Categories: This is the category of the product.

Search Engine Optimization has the following options:

• URL Key: This is the URL that the product will be visible on. If the product has a version number or some specific detail, try to put this on the URL.
• Meta Information: Choose the best Meta Title, Meta Keywords, and Meta Description input for your product.
  

Every single product gives the administrator these options to tune SEO on a Magento website.

Category pages

Magento category pages have great SEO options. As you can note, all the content pages on Magento give us administration options to manage SEO. Every aspect on Magento configuration is integrated to provide the user with the best experience.

To access the Categories configuration, navigate to Products | Categories on the admin dashboard, as shown in the following screenshot:

This will provide an option to create a new category, and in the side menu, it is possible to check all the categories registered on Magento. For the purpose of SEO, Magento has the following options in this section:

• Name: This is the category name.
• Description: This is the description of the category. Focus on using keywords strategically for SEO.
• Page Title: This refers to the metatitle. Enter your keyword with a few words to describe the page.
• Meta Keywords: Here, enter the keywords separated by commas.
• Meta Description: This is a very important option, so make sure that your description covers the products that you're selling and reinforces your brand.

Make sure to follow a pattern in your content referring to SEO.

Magento SEO is a powerful tool to increase sales. As a developer, it is very important to keep these options and techniques in mind to create mechanisms that would get better results for Magento users through new extensions and customizations.

In this chapter, we discussed the following:

In the next chapter, we will cover Magento theme development and customization. We have a lot of work coming up!

Magento 2.0 has a new approach toward managing its themes. Generally, the Magento 2.0 themes are located in the app/design/frontend/<Vendor>/ directory. This location differs according to the built-in themes, such as the Luma theme, which is located in vendor/magento/theme-frontend-luma.

The different themes are stored in separate directories, as in the following screenshot:

Each vendor can have one or more themes attached to it. So, you can develop different themes inside the same vendor.

The theme structure of Magento 2.0 is illustrated as follows:

How the Magento theme structure works is quite simple to understand: each <Vendor>_<Module> directory corresponds to a specific module or functionality of your theme. For example, Magento_Customer has specific .css and .html files to handle the Customer module of the Magento vendor. Magento handles a significant number of modules. So, I strongly suggest that you navigate to the vendor/magento/theme-frontend-luma folder to take a look at the available modules for the default theme.

In the Magento 2.0 structure, we have three main files that manage the theme behavior, which are as follows:

All the theme files inside the structure explained previously can be divided into static view files and dynamic view files. The static view files have no processing by the server (images, fonts, and .js files), and the dynamic view files are processed by the server before delivering the content to the user (template and layout files).

Static files are generally published in the following folders:

The Magento CE 2.0 version comes with a new theme named Luma that implements Responsive Web Design (RWD) practices.

The Luma theme style is based on the Magento user interface (UI) library and uses CSS3 media queries to work with screen width, adapting the layout according to device access.

The Magento UI is a great toolbox for theme development in Magento 2.0 and provides the following components to customize and reuse user interface elements:

The Luma theme uses some of the blank theme features to be functional. The Magento 2.0 blank theme, available in the vendor/magento/theme-frontend-blank folder, is the basic Magento theme and is declared as the parent theme of Luma. How is this possible? Logically, Magento has distinct folders for every theme, but Magento is too smart to reuse code; it takes advantage of theme inheritance. Let's take a look at how this works.

The frontend of Magento allows designers to create new themes based on the basic blank theme, reusing the main code without changing its structure. The fallback system is a theme's inheritance mechanism and allows developers to create only the files that are necessary for customization.

The Luma theme, for example, uses the fallback system by inheriting the blank theme basic structure. The Luma theme parent is declared in its theme.xml file as follows:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magento Luma</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Inheritance works similar to an override system. You can create new themes using the existent ones (parents) and by replacing (that is, overriding) an existing file with the same name but in your specific theme folder (child).

For example, if you create a new theme in the app/design/frontend/<Vendor>/<theme>/ folder and declare Magento/blank as a parent theme, the theme.xml file and registration.php, you have the entire blank theme structure ready to work in your new theme, including RWD layouts and styles.

Let's say that you have a specific .css file available in the <theme_dir>/web/css folder. If you delete this file, the fallback system will search the file in the <parent_theme_dir>/web/css folder, as shown in the following figure:

Magento has a flexible theme system. Beyond Magento code customization, the admin can create blocks and content on the Magento admin panel, such as Home Page, About us, or any static page that you want to create. CMS pages and blocks on Magento give you the power to embed HTML code in your page.

You can create or edit pages and blocks by accessing the Admin area (http://localhost/packt/admin_packt) by navigating to Content | Pages.

Custom variables are pieces of HTML code that contain specific values as programming variables. By creating a custom variable, you can apply it to multiple areas on your site. An example of the custom variable structure is shown here:

{{config path="web/unsecure/base_url"}}

This variable shows the URL of the store.

Now, let's create a custom variable to see how it works. Perform the following steps:

Now, we have a custom variable that stores the developer's name. Let's use this variable inside the CMS About Us page via the following steps:

Let's take a look at the result in the following screenshot:

After understanding the basic Magento 2.0 theme structure, you have the right credentials to go to the next level: creating your own theme. In this chapter, we will develop a simple theme and activate it on the Magento Admin panel. The basic idea is to give you the right directions to Magento theme development and provide you with the tools to let your imagination fly around the creation of various Magento themes!

Before starting the creation, let's disable Magento cache management. It is important when you work with Magento development to get updates in real time. You learned about cache management in Chapter 2, Magento 2.0 Features:

Creating static files' directories

The static files (images, .js files, .css files, and fonts) will be stored in the web directory. Inside the web directory, we will organize our static files according to its scope. Create a new directory named web under your directory app/design/frontend/Packt/basic/web theme and create the following directory structure:

With this simple structure, you can manage all the static files of your custom theme.

Creating a theme logo

By default in Magento 2.0, the theme logo is always recognized by the system by the name logo.svg. Magento 2.0 also recognizes the logo's default directory as <theme_dir>/web/images/logo.svg. So, if you have a logo.svg file, you can simply put the file in the right directory.

However, if you want to work with a different logo's name with a different format, you have to declare it in the Magento system. We will make a declaration with this new logo in the Magento_Theme directory because the new logo is a customization of the Magento_Theme module. We will override this module by taking advantage of the fallback system. As you may note, Magento has a specific pattern of declaring elements. This is the way in which Magento organizes its life cycle.

Let's declare a new theme logo by performing the following steps:

1. Choose one logo for the example and save the file as logo.png in the app/design/frontend/Packt/basic/Magento_Theme/web/images directory.
2. Open your preferred code editor (Sublime Text2, TextMate, or Atom.io).
3. Create new file named default.xml under your layout directory (app/design/frontend/Packt/basic/Magento_Theme/layout).
4. Use the following code in default.xml and save the file:

   <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
       <body>
           <referenceBlock name="logo">
               <arguments>
                 <argument name="logo_file" xsi:type="string">
   Magento_Theme/images/logo.png
   </argument>
                 <argument name="logo_img_width" xsi:type="number">
   your_logo_width
   </argument> 
   <argument name="logo_img_height" xsi:type="number"> 
   your_logo_height
   </argument>
                </arguments>
           </referenceBlock>
       </body>
   </page>

This declaration has three different arguments to manage three attributes of your new logo: filename, width, and height. Don't forget to replace the your_logo_width and your_logo_height attributes with the correct size of the logo that you choose.

The logo_file argument seems to be wrong because we created our image in the Magento_Theme/web/images directory; however, thank God this is not true. I'll explain: when we activate the new theme, Magento processes the static files and copies them to the pub/static directory. This occurs because static files can be cached by Magento, and the correct directory for this is pub. So, we need to create the web directory for Magento to recognize the files as static files.

The final theme directory structure is illustrated as follows:

Applying the theme

Once we have the theme ready to launch, we need to activate it in the Magento admin dashboard:

1. First, access the Magento admin area URL (http://localhost/packt/admin_packt) in your favorite browser.
2. Navigate to Stores | Configuration | Design.
3. Then, select the Basic theme option as your Design Theme value and save the configuration.
   

Navigate to the home page of your site by accessing the http://localhost/packt URL to see the final result:

Now, you have all the basic concepts to create a custom theme for Magento and all the information to think in terms of the Magento structure when an idea for your new design comes to mind.

In this chapter, you learned the basic concepts of Magento 2.0 themes, how theme inheritance (that is, the fallback system) works, and which directories Magento uses to create its themes according to the admin area configurations. Finally, you created your own basic theme with these examples.

However, what about creating a quality theme? Is it possible with the knowledge acquired in this chapter? Of course! We will go to the next level in the next chapter and create a responsive theme by example.

Inspired by npm (https://www.npmjs.com/) and bundler (http://bundler.io/), Composer (https://getcomposer.org/) manages the dependencies of your project and installs packages in predetermined directories (for example, vendor) using the composer.json file in the Magento module or theme. This kind of management is very useful once each library has your specific dependency. Composer doesn't let you waste your time by connecting the dependencies to every deployment that you want to do.

In the next chapters, we will use Composer to install components on Magento. However, first, we will start the development of our theme; it is necessary to declare our composer.json file. For now, let's install Composer on the operating system.

Installing Composer on Unix-like operating systems

To install Composer on Unix-like systems (such as Unix, Linux, and OS X), you simply need to run these two commands in the terminal:

$ curl -s https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

The first command downloads the composer.phar installation file. The second command moves the file to the bin directory to install Composer globally on your computer.

Run the following command to check whether Composer was successfully installed:

$ composer

The $ composer command lists all the available Composer commands and their descriptions:

As you noted in the previous chapter, Magento can store different themes inside the same vendor scope. The proposal project called CompStore will be a template of the Packt vendor. This is the same vendor created in the previous chapter.

First of all, it is important to build the theme directory in the Packt vendor directory (<Magento root directory>/app/design/frontend/Packt/compstore). Create this folder as the following image suggests:

The etc directory usually handles the XML configuration of some components. The Magento_Theme directory will override the native Magento_Theme module by adding new functionalities. The media directory will store the preview image of the CompStore theme. Meanwhile, the web directory would have store CSS and image files by now.

The Compstore theme will have Luma as the parent theme. This example shows you the power of the abstraction used in Magento theme projects. Create the theme.xml file in the Packt/compstore directory with the following code:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>CompStore Electronics</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

The theme.xml file declares the title and parent of the CompStore theme. Create a simple preview.jpg image with a size of 800 x 800 and save it in the Packt/compstore/media directory. For example, the Magento logo is centered at the image size of 800 x 800.

This image shows the preview of the new theme, but as you don't have a preview yet, you can create a placeholder for now.

The next step is creating the registration.php file in the Packt/compstore directory with the following code:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Packt/compstore',
    __DIR__
);

In the registration.php file, the CompStore theme of the Packt vendor registers the new theme of the Magento system.

The theme.xml and registration.php files were created earlier. By now, I think you are very comfortable with the structure of these files because you worked with them in the basic theme and now in the CompStore theme. This point forward, you will be introduced to some new concepts of theme development in Magento 2.0, starting with the creation of the composer.json file. Create the composer.json file in the Packt/compstore directory with the following code:

{
    "name": "packt/compstore",
    "description": "CompStore electronics theme",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-luma": "~100.0",
        "magento/framework": "~100.0"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [ "registration.php" ]
    }
}

This file has the .json (http://www.json.org/) format and handles important information of the project and its dependencies. As we discussed earlier, this kind of control is crucial because it generates more organization for your project. Let's navigate to the principal parameters of the composer.json file:

Before applying CSS in the CompStore Magento theme, it is important to study CSS behavior in the Magento system. The stylesheets in Magento 2.0 are preprocessed and compiled to CSS using the LESS technology. LESS (http://lesscss.org/) is a CSS preprocessor that extends the CSS traditional features by including variables and functions to generate a powerful CSS code and saves the time in maintaining the code.

All the .less files that you will save in your theme are compiled by the LESS engine but you will always declare .css in the Magento theme frontend. Here are a couple of examples:

For further information, access the Magento 2.0 official documentation at http://goo.gl/XLkOcQ.

A CompStore theme inherits the Luma theme, which in turn inherits a blank theme, as shown here:

Once you have to make changes in CompStore in order to customize the new theme, you can think about the functionalities already available in the other themes to apply your changes.

The vendor directory under the Magento 2.0 root directory handles all the native Magento modules and themes. The Magento blank and Luma themes, which you have been working on until now, are available in vendor/magento/theme-frontend-blank and vendor/magento/theme-frontend-luma, respectively. So, the CompStore theme "receives" all the features of the themes under these folders. It's important to fix these basic concepts to understand the context that you inserted when you developed a Magento theme solution.

Once you have a solid concept about the behavior, let's create a custom .css file for the CompStore theme:

With the compstore.less and _theme.less files, the background and product page colors will change according to the new proposal of the CompStore theme.

You can create a new logo for learning purposes using the Logomakr free online service (http://logomakr.com/). It's a pretty easy tool.

I created this logo for the CompStore theme using Logomakr:

My CompStore proposal of the logo was made in Logomakr, which is a solution developed by Webalys (http://www.streamlineicons.com) and FlatIcon (http://www.flaticon.com) and licensed under Creative Commons by 3.0 (http://creativecommons.org/licenses/by/3.0). If you use this solution for other projects, don't forget to give the due credit to Logomakr.

After finishing the logo, save it under the app/design/frontend/Packt/compstore/Magento_Theme/web/images/logo.png path.

You can feel free to use your own solution for logo instead of using Logomakr.

As you learned in the previous chapter, it's time to activate the new theme. Activate the CompStore Electronics theme in the Admin area (http://localhost/packt/admin_packt) to see the following result:

Sometimes, when you update in the Magento structure or activate a new theme, you need to deploy the theme and module changes. If you want to deploy your changes, follow these steps:

Once the new theme is activated, it's time to handle the content by creating some options and configuring the products and categories.

To create new categories, you will need access the Admin area (http://localhost/packt/admin_packt) and follow this recipe:

In the Add Category option, you have option to fill the Description, Page Title, and Meta Information areas for SEO purposes, as shown in the following screenshot:

To create new products, you will need access to the Admin area (http://localhost/packt/admin_packt) and follow this recipe:

Magento has a widget management system that allows the flexibility of the content. The widget helps create a specific list of new products in the home page. To create a new widget, follow these steps:

The default block configuration contains the images and products of the Luma theme. Let's change it via the following steps:

Go to the Home page to see the final result:

Magento works with .phtml template files to generate the view layer for the users. The modules and themes in Magento have its specific group of .phtml files to show data to the users. Let's create a custom template example in the CompStore theme to see how it works:

Navigate to the product page to see the result, as in the following screenshot:

With the content learned in this chapter, you can now develop your own themes and customize solutions. The modern developer creates tools that can maximize the quality and minimize the effort to develop.

As a suggestion, try to read Chapter 4, Magento 2.0 Theme Development – the Developers' Holy Grail, again to create specific Magento pages and layout rules for the CompStore theme. You have uncountable possibilities to develop quality themes for Magento e-commerce and a great solid path to specialize more and more.

Now that you have all the tools to develop a theme for Magento, we will start discovering how to write Magento extensions by programming specific solutions in the next chapter.

According to Zend Framework Case Study available at https://www.zend.com/topics/Magento-CS.pdf, the Magento project chose to go with industry-standard PHP and the Zend framework because of the extremely simple, object-oriented, and flexible solution that encapsulates best practices and agile testing methodologies and that would result in a very rapid development of enterprise-grade web applications.

Using the Zend framework as the main pillar in the Magento project definitely includes the following advantages:

With the Zend framework, Magento has great flexibility in creating and customizing modules, developing new features for the system, and maintaining the core code.

A basic understanding of Zend components could be interesting for developers to take advantage of this great MVC framework.

You can learn more about Zend framework at http://framework.zend.com/.

Magento 2.0 is a modular system as you can see. That is why it is important to maintain all the code organized, and it couldn't be different with Magento extensions. In previous chapters you saw all the directory structure of Magento, but now let's give special attention to the basic Magento module file structure:

In order to create a new extension according to the preceding image, we must create the same directory structure. However, how will they interact with the Magento system?

Some of these directories have an important role to play in the Magento system. They are directories that are responsible for providing basic functionalities and coupling between modules and the Magento system:

The other directories support additional configurations and implementations of the module; these are as follows:

The files presented in the root directory are files on which you worked before. The LICENSES and README files are those available for extension distribution purposes.

Now, you have a general concept of creating a new extension for Magento. As a scenario to our development, we will create a simple extension called TweetsAbout to communicate with Twitter via the API and get the latest tweets with the #magento, #packtpub, and #php hashtags.

We will have two simple pages; the first will show a link to the results, and the second will show the tweets.

Let's get to work!

Representational State Transfer (REST) is an architecture created to provide a simple communication channel between different applications over the Internet using mainly the HTTP protocol. It is the hottest data technology nowadays. Facebook, Google, Twitter, and a lot of huge companies have adopted REST applications. With REST APIs, you can read, post, and delete data.

Twitter has a specific format to spread its data on the Web in order to create great integration with different kinds of applications that consume its service. According to Twitter Developers Documentation available at https://dev.twitter.com/rest/public, Twitter REST APIs provide programmatic access to read and write Twitter data. You can author a new Tweet, read an author profile or follower data, and more. The REST API identifies Twitter applications and users using Oauth, and the responses are available in JSON.

Before beginning to code the Magento extension, let's create an account on Twitter Developer to authenticate our new application on the Twitter platform.

Create a new account in Twitter (https://twitter.com/) if you don't have one and access the Twitter Developer page (https://dev.twitter.com/), as in the following screenshot:

We have a lot of options on the developer's website, such as gathering real-time data, crashlytics, and mopub. I strongly suggest that you take a good look at these tools later.

So, let's create a new application to consume Twitter services. Access the URL https://apps.twitter.com/ to create a new Twitter application. In order to use Twitter's public API services, you need to identify your application by generating a token and a secret key.

You can create a new application by clicking on the Create New App button and filling in the form with the following required fields:

Accept the Developer Agreement to finish your app registration and click on the Create your Twitter Application button.

You can access your application's configurations by clicking on the name of your application. Later on in this chapter, we will discuss how to get the right credentials to integrate our application with Twitter.

Now, we can finally start our Magento 2.0 extension solution.

Create the following basic directory structure for the project:

The TwitterOAuth (https://twitteroauth.com/) library provides communication with Twitter via an API. In the TweetsAbout project, this kind of communication is essential for the final proposal of our extension solution. TwitterOAuth is the most popular PHP library to use with the TwitterOAuth REST API.

This project is also available on GitHub (https://github.com/abraham/twitteroauth), as shown in the following screenshot:

To install TwitterOAuth on the TweetsAbout extension, follow this recipe:

We'll need these credentials to use on our extension later.

To start the module development, we will declare the basic module configurations. Open your favorite code editor, create a new file called module.xml, and save the file in app/code/Packt/TweetsAbout/etc. Enter this code in the file:

<?xml version="1.0"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
      <module name="Packt_TweetsAbout" setup_version="2.0.0"/>
  </config>

Magento 2.0 works with Uniform Resource Names (URN) schema validation to reference XML declarations, as you can observe in the <config> tag. The module.xsd file works by validating whether your module declaration follows the module declaration schema.

The <module> tag contains the vendor and module name. Always follow this example of module name declaration: Vendor_Module.

Under app/code/Packt/TweetsAbout/etc/frontend, create two new files, as follows:

The routes.xml file contains the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="tweetsabout" frontName="tweetsabout">
            <module name="Packt_TweetsAbout" />
        </route>
    </router>
</config>

The routes.xml file tells Magento where to look for the controllers (TweetsAbout/Controller) when the URL http://localhost/packt/tweetsabout is accessed (MVC).

The events.xml file contains the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="page_block_html_topmenu_gethtml_before">
        <observer name="Packt_TweetsAbout_observer" instance="Packt\TweetsAbout\Observer\Topmenu" />
    </event>
</config>

The events.xml file declares an Observer event handler in the module, and this file has the mission of configuring a new TweetsAbout top menu link to access the module in the frontend. Observer listens to events triggered by the user or system. The <event> tag gets basic information of the top menu Block to be handled later in the PHP code, and the <observer> tag declares the Topmenu observer class. In this chapter, we will take a look at how the Topmenu class works. For now, it's important to declare this option.

For further information about Observer, access the Magento official documentation at http://goo.gl/0CTzmn.

Now, it is time to create the registration.php file under the root directory of TweetsAbout. Run the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Packt_TweetsAbout',
    __DIR__
);

The registration.php file has the same role as that of theme registration in Magento System.

Create the composer.json file under the root directory of TweetsAbout via the following code:

{
  "name": "packt/tweets-about",
  "description": "Example of Magento Module - Packt Publishing",
  "type": "magento2-module",
  "version": "1.0.0",
  "license": [
    "OSL-3.0",
    "AFL-3.0"
  ],
  "require": {
    "php": "~5.5.0|~5.6.0|~7.0.0",
    "magento/framework": "~100.0",
    "abraham/twitteroauth": "^0.6.2"
  },
  "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
      "Packt\\TweetsAbout\\": ""
    }
  },
  "extra": {
        "installer-paths": {
            "app/code/Packt/TweetsAbout/Api": ["abraham/twitteroauth"]
        }
    }
}

You can observe in the composer.json file the declaration of the TwitterOAuth project as a required package to our extension. Also, the file defines the installation directory.

You can copy the LICENSE.txt and LICENSE_AFL.txt files from the Magento root directory to your Packt/TweetsAbout directory. The README.md file is responsible for storing information about the module's scope and some considerations for the purposes of publishing on GitHub (http://github.com/). You can feel free to create the README.md file as you wish.

For now, we have the module declaration and registration files. It's time to create the controllers to start giving some life to the TweetsAbout module.

<?php

  namespace Packt\TweetsAbout\Controller\Index;

  class Index extends \Magento\Framework\App\Action\Action{

      protected $resultPageFactory;

      public function __construct(
          \Magento\Framework\App\Action\Context $context,
          \Magento\Framework\View\Result\PageFactory $resultPageFactory
      ) {
          $this->resultPageFactory = $resultPageFactory;
          parent::__construct($context);
      }

      public function execute(){
          return $this->resultPageFactory->create();
      }
  }

<?php

  namespace Packt\TweetsAbout\Controller\Magento;

  class Index extends \Magento\Framework\App\Action\Action{

      protected $resultPageFactory;

      public function __construct(
          \Magento\Framework\App\Action\Context $context,
          \Magento\Framework\View\Result\PageFactory $resultPageFactory
      ) {
          $this->resultPageFactory = $resultPageFactory;
          parent::__construct($context);
      }

      public function execute(){
          return $this->resultPageFactory->create();
      }
  }

<?php

  namespace Packt\TweetsAbout\Controller\Packt;

  class Index extends \Magento\Framework\App\Action\Action{

      protected $resultPageFactory;

      public function __construct(
          \Magento\Framework\App\Action\Context $context,
          \Magento\Framework\View\Result\PageFactory $resultPageFactory
      ) {
          $this->resultPageFactory = $resultPageFactory;
          parent::__construct($context);
      }

      public function execute(){
          return $this->resultPageFactory->create();
      }
  }

<?php

  namespace Packt\TweetsAbout\Controller\Php;

  class Index extends \Magento\Framework\App\Action\Action{
      protected $resultPageFactory;

      public function __construct(
          \Magento\Framework\App\Action\Context $context,
          \Magento\Framework\View\Result\PageFactory $resultPageFactory
      ) {
          $this->resultPageFactory = $resultPageFactory;
          parent::__construct($context);
      }

      public function execute()
      {
          return $this->resultPageFactory->create();
      }
  }

<?php

  namespace Packt\TweetsAbout\Block;

  class Index extends \Magento\Framework\View\Element\Template{

      public function getMagentoUrl(){
          return $this->getData('urlMagento');
      }

      public function getPHPUrl(){
          return $this->getData('urlPHP');
      }

      public function getPacktUrl(){
          return $this->getData('urlPackt');
      }
  }

<?php
  namespace Packt\TweetsAbout\Block;

  require $_SERVER['DOCUMENT_ROOT'] . "/packt/app/code/Packt/TweetsAbout/Api/vendor/autoload.php";
  use Abraham\TwitterOAuth\TwitterOAuth;

  class Tweets extends \Magento\Framework\View\Element\Template{

      private $consumerKey;
      private $consumerSecret;
      private $accessToken;
      private $accessTokenSecret;

    public function searchTweets(){
      $connection = $this->twitterDevAuth();
      $result = $connection->get("search/tweets", array("q" =>$this->getData('hashtag'), "result_type"=>"recent", "count" => 10));

      return $result->statuses;
    }

    private function twitterDevAuth(){
      $this->consumerKey = YOUR_CONSUMER_KEY;
      $this->consumerSecret = YOUR_CONSUMER_SECRET;
      $this->accessToken = YOUR_ACCESS_TOKEN;
      $this->accessTokenSecret  = YOUR_ACCESS_TOKEN_SECRET;

      return new TwitterOAuth($this->consumerKey, $this->consumerSecret, $this->accessToken, $this->accessTokenSecret);
    }
  }

<?php
namespace Packt\TweetsAbout\Observer;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;

class Topmenu implements ObserverInterface{

    /**
     * @param EventObserver $observer
     * @return $this
     */
    public function execute(EventObserver $observer)
    {

      $urlInterface = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Framework\UrlInterface');

      $active = strpos($urlInterface->getCurrentUrl(), "tweetsabout");


        /** @var \Magento\Framework\Data\Tree\Node $menu */
        $menu = $observer->getMenu();
        $tree = $menu->getTree();
        $data = [
            'name'      => __("TweetsAbout"),
            'id'        => 'tweetsmenu',
            'url'       => $urlInterface->getBaseUrl() . 'tweetsabout',
            'is_active' => $active
        ];
        $node = new Node($data, 'id', $tree, $menu);
        $menu->addChild($node);
        return $this;
    }
}

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            TweetsAbout Module
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Packt\TweetsAbout\Block\Index" template="Packt_TweetsAbout::index.phtml">
                <arguments>
                    <argument name="urlMagento" xsi:type="url" path="tweetsabout/magento" />
                    <argument name="urlPHP" xsi:type="url" path="tweetsabout/php" />
                    <argument name="urlPackt" xsi:type="url" path="tweetsabout/packt" />
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            TweetsAbout #Magento
        </title>
        <css src="Packt_TweetsAbout::css/source/module.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Packt\TweetsAbout\Block\Tweets" template="Packt_TweetsAbout::tweets.phtml">
                <arguments>
                    <argument name="hashtag" xsi:type="string">#magento</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            TweetsAbout #Packtpub
        </title>
        <css src="Packt_TweetsAbout::css/source/module.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Packt\TweetsAbout\Block\Tweets" template="Packt_TweetsAbout::tweets.phtml">
                <arguments>
                    <argument name="hashtag" xsi:type="string">#packtpub</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            TweetsAbout #PHP
        </title>
        <css src="Packt_TweetsAbout::css/source/module.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Packt\TweetsAbout\Block\Tweets" template="Packt_TweetsAbout::tweets.phtml">
                <arguments>
                    <argument name="hashtag" xsi:type="string">#php</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

<h2>Recent TweetsAbout: </h2>
<ul>
  <li>
    <a href="<?php echo $block->escapeHtml($block->getMagentoUrl()) ?>">
      <span><?php echo __('Magento')?></span>
    </a>
  </li>
  <li>
    <a href="<?php echo $block->escapeHtml($block->getPacktUrl()) ?>">
      <span><?php echo __('Packtpub')?></span>
    </a>
  </li>
  <li>
    <a href="<?php echo $block->escapeHtml($block->getPHPUrl()) ?>">
      <span><?php echo __('PHP')?></span>
    </a>
  </li>
</ul>

<?php
  $tweets = $block->searchTweets();
?>

<?php foreach ($tweets as $tweet){ ?>
  <p class="tweet">
    <a href="<?php echo $tweet->user->url; ?>">
      <img src="<?php echo $tweet->user->profile_image_url; ?>" alt="profile">
    </a>
    <b>Created: </b><?php echo $tweet->created_at; ?>
    <br />
    <br />

    <a href="<?php echo isset($tweet->entities->urls[0]->url) ? $tweet->entities->urls[0]->url : "#"; ?>" target="_blank"><?php echo $tweet->text;?></a>

  </p>
  <hr />
<?php } ?>

 .tweet {background-color: #878787; padding:15px; border:1px dotted}
.tweet a {color: #ffffff}
.tweet a:hover {text-decoration: underline;}

Deploying the module

To deploy the module, follow this recipe:

1. Open the terminal or command prompt.
2. Access the packt/bin directory.
3. Then, run the php magento module:enable --clear-static-content Packt_TweetsAbout command.
4. Run the php magento setup:upgrade command.
5. Next, run the php magento setup:static-content:deploy command.
6. In some cases, it is necessary to give write permissions again to the directories.

If everything goes alright, when you access the URL http://localhost/packt, you will see one link for the TweetsAbout extension in the topmost menu. Just click on it to see how the extension works. Take a look at the following screenshot:

You can navigate to the links to see how the pages work, as in the following screenshot:

The extension gets the ten last tweets in real time with the date, picture, and post. It's really awesome to watch our work running!

For sure, this extension can get a lot better, but it is only a starting point for big achievements.

You worked on a lot in this chapter! Congratulations. Now, you have solid grasp of the concept in Magento 2.0 extension development. You can note that Magento development has strict rules, but once you learn the basics, you can master Magento with hard work and study. Keep the good work going!

As a suggestion, try to read the official documentation and do projects that demand more user interaction, such as the admin panel and development of dynamic formularies. You can even increase the power of TweetsAbout. The sky is the limit!

In the next chapter, we will start to work with Magento mobile by testing and configuring some great options. See you!

Both the Magento 2.0 native themes, Blank and Luma, use Responsive Web Design (RWD) to provide good visualization in different devices, such as desktops, tablets, and mobiles.

In spite of the fact that the CompStore theme inherited the Luma theme, you can customize the template and CSS codes, as we discussed in Chapter 6, Write Magento 2.0 Extensions – a Great Place to Go. So, what do you think about improving the CompStore theme to make it more user friendly?

The actual mobile version of CompStore has some differences in the desktop version, including colors, elements positioning, and image size. Before creating some mobile standards for the CompStore theme, it's important to fix some CSS responsive design concepts of Magento. Let's get to work!

To handle accessibility for different devices, the Magento 2.0 native themes (Blank and Luma) work with an RWD engine, as we discussed in the Chapter 4, Magento 2.0 Theme Development – the Developers' Holy Grail, and Chapter 5, Creating a Responsive Magento 2.0 Theme. The stylesheets engine provided by the LESS preprocessor is the main utility responsible for this design approach.

The Magento 2.0 native themes were built based on the Magento UI library. The Magento UI library works with CSS 3 media queries to render a page with predefined rules according to the device, which requests the page. An example of media queries would be one that applies a specific rule for screens with a maximum width of 640 px; take a look at the following code:

@media only screen and (max-width: 640px) { 
… 
}

With media queries, the themes apply breakpoints to handle different screen-width rules for different screen sizes of devices in a progression scale of pixels, as follows:

For further information about media queries, refer to the W3C official documentation available at https://www.w3.org/TR/css3-mediaqueries/.

The Magento 2.0 system works with the LESS CSS preprocessor to extend the features of CSS and enable the opportunity to create theme inheritance with minimal and organized effort. With this premise, to help theme developers, we have the Magento UI library in Magento 2.0.

The Magento UI library is based on LESS and provides a set of components to develop themes and frontend solutions:

Another important resource of the Magento UI and of LESS is the mixin capability. The mixin allows developers to group style rules to work with different devices.

For example, consider that you declared the following CSS code in one determined file:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ffc;
    }
    .example-responsive-block:before {
        content: 'Mobile styles ';
        font-weight: bold;
    }
}

Then, you executed this CSS code in a different file:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ccf;
    }
    .example-responsive-block:before {
        content: 'Desktop styles ';
        font-weight: bold;
    }
}

In spite of the two files declaring a mixin named .media-width to the .example-responsive-block class in different files, the mixin allows LESS to make a single query, grouping the rules instead of making multiple calls according to the device rule applied.

You can access the local Magento UI documentation by accessing the URL http://<magento_local_url>/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html.

First of all, let's take a look at the current mobile version of the CompStore theme. Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 5 (portrait) device to test the site. You will probably be redirected to home page:

In spite of the previous adjustment in the CompStore theme, when a mobile device accesses a theme, CSS rules don't apply some important features, such as colors and the positioning of elements. As a suggestion, let's create a standard declaration of color approach and configure CSS to show only one product when the mobile device accesses the site. How can we implement these new features? Using media queries, of course!

In your favorite code editor, open the compstore.less file available under the app/design/frontend/Packt/compstore/web/css/source directory and use the following CSS 3 code:

@color-compstore: #F6F6F6;

body{
  background: @color-compstore;
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  body{
    background: @color-compstore;
  }
  .widget .block-promo img{
    height: 600px;
  }

  .products-grid .product-item {
    width: 100%;
    display: inline-block;
  }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  body{
    background: @color-compstore;
  }
  .widget .block-promo img{
    height: 600px;
  }
  .products-grid .product-item {
    width: 100%;
    display: inline-block;
  }
}

The Magento UI break points predefined variables to identify the scope of media queries, which are as follows:

So, in the CSS 3 new proposal, the media queries use the @screen_s variable to define the application of new rules. We will propose via mixin to change the background color, promo image size, and product size inside mobile rules for portrait and landscape purposes.

To apply the changes, follow this recipe:

Test the site again to get the new home page, as in the following screenshot:

The extension that we created in Chapter 6, Write Magento 2.0 Extensions – a Great Place to Go, tweets about extension and has the following appearance:

Let's improve the CSS extension rules to turn it into a mobile-friendly one.

Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 5—portrait device to test our code optimization.

Open the module.less file available under the packt/app/code/Packt/TweetsAbout/view/frontend/web/css/source directory and add the following code:

/*Tweets About Style*/

@media (min-width: 960px){
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
  }

  #columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
  }
}

.tweet {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.tweetimg {
    width: 15%;
    display:block;
    float:left;
    margin: 0px 5px 0px 0px;
}

.tweet p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

#columns:hover .img:not(:hover) {
    opacity: 0.4;
}

After saving the module.less file, change the tweets.phtml code available under packt/app/code/Packt/TweetsAbout/view/frontend/templates, change the file with this new code, and save it, as follows:

<?php
  $tweets = $block->searchTweets();
?>

<div id="wrapper">
  <div id="columns">
    <?php foreach ($tweets as $tweet){ ?>
      <div class="tweet">
        <p>
          <a href="https://twitter.com/intent/user?user_id=<?php echo $tweet->user->id; ?>" target="_blank">
            <img src="<?php echo $tweets->user->profile_image_url; ?>" alt="profile">
            <?php echo $tweet->user->name; ?>
          </a>
          <br />
          Created: <?php echo $tweets->created_at; ?>
          <br /><br />
          <a href="<?php echo isset($tweet->entities->urls[0]->url) ? $tweet->entities->urls[0]->url : "#"; ?>" target="_blank"><?php echo $tweet->text;?></a>
            <?php echo $tweets->text;?>
          </a>
        </p>
      </div>
    <?php } ?>
  </div>
</div>

To deploy the module update, follow this recipe:

Now, test the tweets about extension by accessing http://localhost/packt/tweetsabout to see the new responsive look, as shown in the following screenshot:

If you activate DevTools and choose an iPhone 5 device, you will see a result similar to the following screenshot:

In this chapter, you learned about tools that provide you with a great environment to develop Magento frontend themes.

You also increased the power of CompStore CSS to handle access from specific mobile devices. Of course, you can modify the code constantly to have a better experience by fine-tuning in your code. However, this is only the beginning.

In the next chapter, we will start configuring our Magento software, on which we have been working until now, to improve its speed. We will installing solutions and configure the already native Magento options.

With the increase in content, images, and script demands for a better experience in e-commerce, we have to handle network consumption in order to provide fast access to our system. Search engines measure some technical points with their algorithms, and fast access is, of course, one of the requisites validated.

Magento has a complex architecture and works with MySQL database constant queries to show specific products information, render pages, and process checkouts. This high process volume demand can slow the download speed when your Magento 2.0 solution is in a production environment.

To improve the Magento 2.0 performance, we can use two important tools: indexing and caching.

In the Magento 2.0 life cycle, at a determined point, we will have considerable megabytes of data on the MySQL database, including information regarding products, orders, customers, and payments. To improve its performance, Magento uses indexed tables to provide faster lookups.

However, as your Magento 2.0 e-commerce grows, the indexation feature starts to lose performance too.

In order to correct this issue, you can precompile database relationships using the flat table option in Magento. This technique combines EAV relationships for categories and products in one table to increase the speed of queries. To enable this feature, you can follow these instructions:

If you make changes to your catalog, product, or some page that has a relationship with indexers, the Magento system needs to re-index the information to keep the flat table schema working. You can manage the indexers with the Magento command-line tool, as follows:

The reindex command rebuilds all the product, catalog, customer, and stock information. The index feature enables a fast return of data once the system has no need to process any basic data, such as product price, every single time that the user accesses the store.

Did you notice in the preceding system message one issue about Magento cron job? Cron job allows you to automate this task and others to improve your efficiency. Let's take a look at how cron job works.

Magento has important system processes that are very important to maintain the system's working at its full potential. These processes need automated executions to handle the updates made by the user and administrator. That is the why this feature is critical to Magento.

Cron job works with UNIX systems and can schedule specific tasks to be executed in a predetermined time on the server. The following activities can be scheduled to execute on the Magento 2.0 system:

To configure the cron job, follow this recipe.

Find the php.ini file path.

If you use XAMPP, as was suggested for a web server solution at the beginning of the book, you simply can use the XAMPP/xamppfiles/etc/php.ini path. If you use a Unix-based terminal, you can use the command to find the PHP configuration file. Perform the following steps:

In some cases, it is necessary to give write permissions again to the directories.

The */1 * * * * configuration specifies that the cron job will be executed every minute. The cron job will now run in the background every minute. To manually execute the cron job, you can run the php magento cron:run command on the Magento command-line tool, as shown in the following figure:

For further information about the cron job, follow the link at https://help.ubuntu.com/community/CronHowto.

For Magento cron, take a look at the official Magento documentation http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-cron.html.

While the indexing technique works on database layer, the caching feature does the same for the HTML page components to increase fast access to the frontend. Caching stores this kind of data in order to provide the visitors with access to faster download.

To enable caching, you need to perform the following steps:

For further information about cache configuration, follow the link at http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-cache.html.

You can work with third-party cache solutions to provide a better performance. Some of this solution has support and works very well with the Magento 2.0 solution. This book doesn't cover server configurations, but I strongly suggest you to take a look at the following:

Magento 2.0 has a complex structure, but it follows the good practices of software development, which gives the administrators and the developers of this fantastic e-commerce solution the real possibility to implement a scalable system to conquer a great site traffic and constantly increase the sales.

Despite this advantage, all the scalable systems need a great server infrastructure to provide fast content access through the Internet.

As a developer, you need to always think about all the stages that a successful software needs to go through in an order to aggregate the real value to its administrator and to its users. Try to always see the big picture of your project.

Let's take a look at some techniques and tips to increase your Magento server's capability.

First of all, we need to conduct a deep research on the existent solutions. We will try to gather information about clients of these solutions and test Magento's performance by accessing the Magento website as a visitor.

The Magento official project website provides you with an online tool to search for Magento. You can use this tool by accessing the URL at http://partners.magento.com/partner_locator/search.aspx.

Magento hosting services generally use Apache as a web server solution. Magento is written in PHP, and Apache has a mature environment to handle PHP processes.

In order to give fast response to visitors' requests, we will use Apache's mod_deflate to speed up server response.

According to Apache's official documentation (http://httpd.apache.org/docs/2.2/mod/mod_deflate.html), this module provides the deflate output filter that allows output from your server to be compressed before being sent to the client over the network.

To enable this feature on your server, you need to create the .htaccess file and enter the following code:

<IfModule mod_deflate.c>

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

    # Insert filter on all content
    SetOutputFilter DEFLATE
    # Insert filter on selected content types only
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4\.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Don't compress images
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    Header append Vary User-Agent env=!dont-vary

</IfModule>

This adjustment reduces about 70% of the amount of data delivered.

For further information about the .htaccess and mod_deflate configurations, take a look at the links at http://httpd.apache.org/docs/current/howto/htaccess.html and http://httpd.apache.org/docs/2.2/mod/mod_deflate.html.

Continuing to take advantage of the Apache web server, we will activate the mod_expires module. This module sends a message to the client machine about the document's validity, and the client can store a cache of the site until the client receives a new message from the server expiration of data. This technique increases the speed of download.

To activate this feature, you can open the .htaccess file available in the Magento root directory and enter this block of code:

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

    ExpiresActive On
    ExpiresDefault "access plus 1 year"

</IfModule>

For further information about the .htaccess configuration, follow the link at http://httpd.apache.org/docs/2.2/mod/mod_expires.html.

<IfModule mod_php5.c>

############################################
## adjust memory limit

php_value memory_limit 256M
php_value max_execution_time 18000

</IfModule>

Optimizing the MySQL server

MySQL has the query cache feature to provide fast queries on a database. Once again, you need to conduct deep research on your possible hosting services before contracting any to make sure you have all the services you need for a great production environment.

Before starting the optimization, refer to the PHP and MySQL documentations of your hosting service to check the availability of these changes.

Open the php.ini hosting service file and place these configurations:

;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;

max_execution_time = 30     ; Maximum execution time of each script, in seconds
max_input_time = 60	; Maximum amount of time each script may spend parsing request data
memory_limit = 512M      ; Maximum amount of memory a script may consume (8MB)
query_cache_size = 64M

[MySQLi]
; Please refer to http://php.net/manual/en/mysqli.configuration.php for further information

; Maximum number of persistent links.  -1 means no limit.
mysqli.max_persistent = -1

; Allow accessing, from PHP's perspective, local files with LOAD DATA statements
;mysqli.allow_local_infile = On

; Allow or prevent persistent links.
mysqli.allow_persistent = On

; Maximum number of links.  -1 means no limit.
mysqli.max_links = -1

; If mysqlnd is used: Number of cache slots for the internal result set cache
mysqli.cache_size = 2000

; Default port number for mysqli_connect().  If unset, mysqli_connect() will use
; the $MYSQL_TCP_PORT or the mysql-tcp entry in /etc/services or the
; compile-time value defined MYSQL_PORT (in that order).  Win32 will only look
; at MYSQL_PORT.
mysqli.default_port = 3306

; Default socket name for local MySQL connects.  If empty, uses the built-in
; MySQL defaults.
mysqli.default_socket =

; Default host for mysql_connect() (doesn't apply in safe mode).
mysqli.default_host =

; Default user for mysql_connect() (doesn't apply in safe mode).
mysqli.default_user =

; Default password for mysqli_connect() (doesn't apply in safe mode).
; Note that this is generally a *bad* idea to store passwords in this file.
; *Any* user with PHP access can run 'echo get_cfg_var("mysqli.default_pw")
; and reveal this password!  And of course, any users with read access to this
; file will be able to reveal the password as well.
mysqli.default_pw =

; Allow or prevent reconnect
mysqli.reconnect = Off

Now, let's configure the query_cache_size variable directly on the MySQL database.

Open the phpMyAdmin web SQL console, and execute the SHOW VARIABLES LIKE 'query_cache_size'; query without selecting a database. The query will probably return the 0 value for the query_cache_size variable.

Execute the SET GLOBAL query_cache_size = 1048576; query and execute SHOW VARIABLES LIKE 'query_cache_size'; again.

The query will probably return the following information:

The query_cache_size variable was activated with success!

For further information about the MySQL cache size configuration, follow the link at https://dev.mysql.com/doc/refman/5.0/en/query-cache-configuration.html.

Even by testing these configurations in your localhost environment, you can feel the huge positive difference between the first access in your Magento installation and the last access after the configuration. This is really awesome!

Code minification is a technique to remove unnecessary characters from the source code. Minify your JavaScript (.js) and stylesheets (.css) files and improve the load time of your site by compressing the files.

In order to activate this process in Magento, navigate to the admin area (http://localhost/packt/admin_packt) and follow these instructions:

In this chapter, you learned important lessons about how to improve Magento performance and pay attention to all the aspects that can make a positive difference in Magento development, including how to create a full-speed environment for Magento System.

I invite you to think in this very for now. We are progressing and walking through all the aspects of Magento: design, development, marketing, and performance. I feel comfortable to say to you, dear reader, that you have the tools to elevate your Magento professional career. Just keep continuing to study hard.

In this chapter, you learned how to:

In the final chapter, we will explore some tools and ways to improve your Magento skills. See you!

The Magento team provides great resources of documentation in order to increase the Magento developer's knowledge.

In the Magento documentation (http://magento.com/help/documentation), the user can access the USER GUIDES section for ENTERPRISE EDITION, COMMUNITY EDITION, DESIGNER'S GUIDE, and DEVELOPER DOCUMENTATION.

I strongly suggest that you, dear reader, study Magento's COMMUNITY EDITION, DESIGNER'S GUIDE, and DEVELOPER DOCUMENTATION in the first instance. These three documentations have solid concepts, and you can certainly take advantage by building your Magento concepts.

Welcome to the world of information technology! The professionals of this area need to study harder every single day. It's totally crazy how technology is always in mutation. New technologies and solutions come in a short period of time, and professionals must be prepared all the time to keep an open mind, absorbing this situation assertively.

Magento provides an official training program available at http://magento.com/training/overview. You can access information about courses, and I strongly suggest that you think about Magento certification. Certifications can boost your career.

To learn more about Magento certification, refer to http://magento.com/training/catalog/certification. You can download a free Magento study guide by visiting http://magento.com/training/free-study-guide.

You have a lot of options, such as books, articles, and blogs, to train and improve your Magento skills. Be persistent on your objectives!

Congratulations! You won one more challenge; first, you acquired this great book, and then you completed the reading with merits. It was not easy, but I'm certain it was worth it.

In this chapter, you learned how to:

Thank you so much. I know you can climb the highest mountains; never lose faith in yourself. Good luck!

Installing Magento 2 via the graphical user interface (GUI) is not new. Now, we will be installing a new clean version including the sample data.

The sample data can be installed during and at the end of the procedure. We will be using a composer.json file for our setup prerequisites. First, we will be installing a clean version with sample data, and later, I will show you how to install it at the end in case you already have a preinstalled version.

How to do it...

For the first step, you can either create a new Droplet or rebuild a clean Droplet based on a Ubuntu or RedHat DigitalOcean image.

The option to rebuild is located in the DigitalOcean control panel in the Destroy menu and then rebuild Droplet:

The steps to install Magento 2 sample data via GUI are as follows:

1. Preferably, pick the new snapshot or the already created one and press Rebuild from Image. The rebuild will take around 60 seconds.
2. Now log in to your new or current Droplet. We will be referring to a new build Droplet throughout this recipe.
3. Now let's download the latest Magento 2 version including sample data. Go to https://www.magentocommerce.com/download, pick Full Release with Sample Data (ZIP with sample data), and unpack this in your web directory. We refer to /var/www/html in this recipe.

   If you are using a ZIP package, make sure that you install the unzip package first, running the following command on the shell:

   apt-get install unzip
   

4. Now let's set the ownership and permissions:

   chown -R www-data:www-data /var/www/html
   
   find . -type d -exec chmod 770 {} \; && find . -type f -exec chmod 660 {} \; && chmod u+x bin/magento
   

5. Now we use Composer to resolve all of our dependencies. Run the following command from the shell:

   cd /var/www/html/ && composer install
   

   During the installation process, you will get a notice to create a GitHub OAuth token. The download rate limit is pretty small. Copy the URL from your shell window in your browser, log in at GitHub or create an account, and create the token.

6. Next, we will be using the setup wizard to continue the rest of the installation. In this chapter, we will be using the shell installation method. Go to your favorite browser and enter the following URL:

   http://yourdomain.com/setup

   Continue your flow until Step 4: Customize Your Store. As we have chosen a Magento 2 package including sample data, all software modules are preinstalled and listed in the advanced modules configurations list.

   Here is an overview of all the modules selected by Magento that can be managed during installation:

   
7. Now, continue the rest of the steps and install Magento 2. Installing sample data can take some time, so don't close or refresh your browser.

   The progress bar and console log will share all details regarding the current status:

   

Congratulations, you just finished the installation of Magento 2 including sample data. Now go to your browser using yourdomain.com; you will see the default Magento 2 layout theme called Luma, as follows:

less /var/www/html/var/.sample-data-state.flag

root@mage2cookbook:/var/www/html# php bin/magento setup:uninstall
Are you sure you want to uninstall Magento?[y/N]y
Starting Magento uninstallation:
Cache cleared successfully
Cleaning up database `magento2`
File system cleanup:
/var/www/html/pub/static/_requirejs
/var/www/html/pub/static/adminhtml
/var/www/html/pub/static/frontend
/var/www/html/var/cache
/var/www/html/var/composer_home
/var/www/html/var/di
/var/www/html/var/generation
/var/www/html/var/log
/var/www/html/var/page_cache
/var/www/html/var/tmp
/var/www/html/var/view_preprocessed
/var/www/html/app/etc/config.php
/var/www/html/app/etc/env.php

Installing Magento 2 via the shell is not new. In the current Magento version, it was already possible using the install.php file. The configuration looked like this:

/usr/local/bin/php -f install.php -- \
--license_agreement_accepted "yes" \
--locale "en_US" \
--timezone "America/Los_Angeles" \
--default_currency "USD" \
--db_host "mysql.example.com" \
--db_name "your_db_name" \
--db_user "your_db_username" \
--db_pass "your_db_password" \
--db_prefix "" \
--admin_frontname "admin" \
--url "http://www.examplesite.com/store" \
--use_rewrites "yes" \
--use_secure "no" \
--secure_base_url "" \
--use_secure_admin "no" \
--admin_firstname "your_first_name" \
--admin_lastname "your_last_name" \
--admin_email "your_email@example.com" \
--admin_username "your_admin_username" \
--admin_password "your_admin_password"

It was very easy to script and use multiple times on any given environment.

In Magento 2, the logic stayed the same but now, it's much easier to use. We will be using a composer.json file for our setup prerequisites.

export PATH=$PATH:/var/www/html/bin

In the current version of Magento, using indexes is one of the most important key features. Without the correct indexes, we will not be able to use Magento properly.

What do the indexes do, and why are they so important? One of the key elements is to make things run faster. Without indexing, Magento 2 would have to calculate data on the fly. In Magento 2, we will be using the following nine indexes:

The database table looks as follows:

The control panel of the backend looks like this:

mysql -u <username> --database <dbname> -p -e "select * from indexer_state"

Cache management is one of the new optimized key features in Magento 2. We will be using the following cache types:

By default, we will be using Full Page Cache now in the community version, which is a great improvement next to the web services (API) caches.

Depending on the current development, default, and production state, caches will be different.

In the next recipes of this chapter, we will dive deeper into the use of different states.

php bin/magento cache:flush -all

Every production environment needs a proper backup plan. By default, Magento 2 has a complete set of options to create and roll back backups.

When creating a backup, we can use one of the following options:

mysql -u <username> --database <dbname> -p -e "select * from cron_schedule"

Magento 2 comes with a new feature set called MAGE_MODE. This option gives you the configuration to run Magento in either developer, default, or production mode.

This feature is very important during development and product phases. It gives a developer the tool to debug or created optimized caches for high performance needs.

By default, the default mode is set.

The following table describes the modes in which we can run Magento:

curl -I http://mage2cookbook.com/

HTTP/1.1 200 OK
Server: nginx/1.9.6
X-Magento-Cache-Debug: HIT

Moving your Magento 1 to Magento 2 may be one of the most challenging things out there. Luckily, Magento supported us with a database migration option.

The Magento 2 Data Migration Tool is here to help you convert your products, customers, order/sales data, store configuration, promotions/sales rules, and more to move to a clean Magento 2 setup.

Custom code, Extensions, and Themes are out of the current scope of the Data Migration Tool.

The currently supported migrations are the Community Edition (CE) versions 1.6.x, 1.7.x, 1.8.x, and 1.9.x and Enterprise Edition (EE) versions 1.11.x, 1.12.x, 1.14.x, and 1.14.x.

Redis may be one of the best improvements since we used Memcache(d) or Alternative PHP Cache (APC). For the last couple of years, Redis is available in Magento 1 and has a big performance benefit.

What is Redis and why is it important for Magento? Well, Redis is not new; its initial release dates to the beginning of 2009—almost as young as Magento 1. Redis is a key-value storage database that stores the data in-memory of your web server. Besides this, the in-memory caches are fast and also have a persistence feature that is really important when a server reboots. All caches are not flushed during a reboot and are available in-memory when the web server is up again.

In the beginning of the Magento 1 area, we used Memcache(d) or APC, which worked very well but not as well as Redis. In Magento 1, Redis was used for a backend cache and session storage most of the time. Some websites also used it as a Full Page Cache (FPC) storage.

One other great advantage of Redis is that it has multiple database containers, one for the default cache and the other for the FPC. Although the Redis performance is better in a lot of cases, it is not the Holy Grail. There are drawbacks to its architecture.

There's more…

If you are interested in monitoring your Redis server, the next step is interesting. Clone PHPRedMin (https://github.com/sasanrose/phpredmin) in your Magento 2 root directory, /var/www/html. Make sure to change the ownership to www-data for the owner and group.

Go to your /var/www/html/pub directory and create a symbolic link using the following command:

ln –s ../phpredmin/public phpredmin

Chown the ownership of the symbolic link with the following command:

chown -h www-data:www-data phpredmin

Go to to your NGINX configuration directory, /etc/nginx/conf.d, open the default.conf file, and including the following content below error_log:

location ~ ^/phpredmin/.+\.php {
  fastcgi_split_path_info ^(.+\.php)(/.+)$;

  set $fsn /index.php;
  if (-f $document_root$fastcgi_script_name) {
    set $fsn $fastcgi_script_name;
  }

  # php5-fpm
  fastcgi_pass fastcgi_backend;
  fastcgi_index  index.php;

  fastcgi_param  SCRIPT_FILENAME  $document_root$fsn;
  fastcgi_param  PATH_INFO  $fastcgi_path_info;
  fastcgi_param  PATH_TRANSLATED  $document_root$fsn;

  include fastcgi_params;
}

Now save and restart your NGINX server with service nginx restart.

Before we can continue, we need to add a cronjob rule to gather our Redis data and show it in PHPRedMin. Add the following rule to your crontab.

Open crontab using crontab –e:

* * * * * cd /var/www/html/pub/phpredmin && php index.php cron/index

Open your browser and surf to http://yourdomain.com/phpredmin, and press Stats in the top menu. Now you should see the following information:

Tip

On a production site, you will want to add an IP block so that only you can gain access.

As Magento 2 does not support Redis session caching from the beginning, we need to use Memcached instead. Memcached has been around for a long time and was used in Magento 1, since the beginning, as backend and session caching.

Memcached is a distributed memory caching system. It is a flexible in-memory storage container to cache data. As the session handler in the PHP Redis does not support session locking, we use Memcached instead. Keep in mind that Memcached is not persisted, so after restarting the server or daemon, all the data is gone. This could have an impact on a production environment—lost sessions or baskets.

There's more…

If you are interested in monitoring your Memcached server, the next step is interesting. Clone the memcached.php file from the GitHub Gist (https://gist.github.com/raybogman/b8b7b4d21bf34ed9dd76) in your Magento 2 root directory, /var/www/html/pub. Make sure to change the ownership to www-data for the owner and group.

By default, creating a memcached.php page in the root directory in Magento 2 will not work. First, you need to store the memcached.php file in the /pub directory. Then, you need to change the NGINX configuration from location ~ (index|get|static|report|404|503)\.php$ { to location ~ (index|get|static|report|404|503|memcached)\.php$ {, which is located at the bottom of the file. In Apache, we don't have an issue like this; it works by default.

Once installed correctly, the page will look as follows:

Tip

Note that this Memcached viewer is an outdated version created in 2008 by Harun Yayli and is not maintained anymore. Use it wisely.

As an alternative, you can also use https://github.com/clickalicious/phpMemAdmin.

Varnish may be one of the most interesting elements described in this book, besides Magento 2, of course. What is Varnish and why is it that important? Well, Varnish is like a Ferrari, very fast on the track but hard to maintain or tune. In technical terms, Varnish is an HTTP accelerator designed for heavy websites. Magento users love fast websites.

By default, Varnish support is now included in Magento 2. In Magento 1, we commonly used Turpentine by Nexcess (https://github.com/nexcess/magento-turpentine). The configuration of Varnish is not for the faint-hearted. Varnish includes a Varnish Configuration Language (VCL) file, which holds all the elements to be cached or not.

Setting up a Varnish server may be simple; configuring the VCL is not. Magento 2 provides a default VCL file that works out of the box, but be aware of any custom extensions or layout updates. Any customization has to be added manually in the VCL file before Varnish can cache them.