Some advanced features of Magento 2

In previous blog post, we introduced clearly about Magento 2.0 Installation. Today, in this post we would like to mention about huge improvements in Magento 2.0 which bring various benefits. I will divide this tutorial into 2 parts. The part one in today’s post is about 6 great features. Part 2 will reveal others features of Magento 2 Let’s focus on some advanced features in Magento 2.0!As you know,.

1. New structure

there are two main changes in the Magento 2 file structure. The first change is that everything is placed directly under the app structure. Besides, every module has its own view directory in which you can access all template, layout, js, and css/less files of any particular module. It is undoubted that a big help for module developers as they can have more opportunities for customization without changing core site functionality.

Magento 1.x vs Magento 2 structure

Four types of directories in Magento 2 file system are:

• Primary directories
• System directories
• Application directories
• Public directories

In specific, firstly, the primary directories can not be changed. They involve: base directory, code directory /app/code, lib directory /lib.
Secondly, the system directories involve: DI directory /var/di, generation directory /var/generation, etc directory /app/etc. You need to run EntryPoint class in order to change the location of the system directory:

1.	$result = $entryPoint->run('Magento\App\Http', array(
2.	    'app_dirs' => array(
3.	        DirectoryList::MEDIA => array(
4.	            'path' => 'pub/media.test',
5.	            'uri' => 'pub/media'
6.	        )
7.	    )
8.	));

Thirdly, the application directories involve: app directory /app/code, design directory /app/design, var directory /var, temporary directory /var/tmp, cache directory /var/cache), log directory /var/log, session directory /var/session, systmp directory sys_get_temp_dir().
Finally, the public directories involve: pub directory /pub, pub_lib directory /pub/lib, media directory/pub/media, upload directory /pub/upload, static directory /pub/static, pub_view_cache directory/pub/cache.
The same technique is applied in order to change the location of the application and public directories. These two directories can be configured via config.xml file.

2. New Layout elements

As you know, a core/text_list block type is used in Magento 1.x to serve as a structural block, whereas Magento 2 now introduces new layout elements as a whole new concept of container wrapper for this purpose. A container can contain blocks, other containers and render all children.

With the Visual Design editor, organizing blocks will now be more intuitive by just moving the blocks around and easily define the sections of the layout in a clearer way.

Base layout

__app/code/<Namespace>/<Module>
  |__/view
    |__/<area>
      |__/layout
        |--<layout_file1>.xml
        |--<layout_file2>.xml

Theme layouts

__app/design/<area>/<theme_path>

  |__/<Namespace>_<Module>

    |__/layout

      |--<layout1>.xml

      |--<layout2>.xml

      |__/override/base/

      |--<layout1>.xml

Conventions:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<update handle="page_one_column" />
    <referenceContainer name="content">
    <!-- ... -->
    </referenceContainer>
</layout>

Files Layout

The Melding of Layout Files (http://www.developers-paradise.com/)

3. CSS Preprocessing

Bootstrap is not used in Magento 2. Instead, Magento 2 uses its own LESS and CSS in the theme core. It has the publisher to find and publish CSS together with other view static files placed under the pub/ directory. Besides, the publisher supports preprocessing of files being published by using some preprocessors. The CSS preprocessor, for instance, consists of two independent preprocessors as the following:

• LESS preprocessor : Together with LESS PHP adapter, LESS preprocessor enables the use of LESS in Magento.
• CSS URL resolver : This serves to resolve links found in CSS source files using the publisher and replaces them with the correct ones.

 Major advantages:

• Using LESS helps users to custom theme faster and easier.
• LESS preprocessor & CSS URL resolver help enhance performance, speed up page load, and make the system friendlier with the search engine.

4. Magento UI Library

Magento UI Library is a flexible modular Magento frontend library that employs a set of mixins for base elements and helps to ease frontend theme development and customization. Some of its key characteristics are in the follow:

• Built on LESS preprocessor
• Focused on web standards
• Customizable
• Easy to maintain
• Responsive
• Accessible

Each Magento UI library mixins file is placed under: {root} \lib\web\css\source\lib

Magento UI Library

Magento UI Library helps users to easily customize every user interface elements as below:

• actions-toolbar
• breadcrumbs
• buttons
• dropdowns
• forms
• icons
• layout
• loaders
• messages
• navigation
• pagination
• popups
• ratings
• tabs and accordions
• tables
• tooltips
• typography
• list of theme variables

To have a clearer view of the interface elements customization, here is how it looks like in the front-end.

Interface elements customization

5. Under the hood

 6. Improved Performance and Scalability

Several improvements in regards to performance and scalability in Magento 2 are listed as below.

6.1. Performance Improvements

• Improve indexers: Indexing is the way which Magento system transforms merchant data, such as catalog data, prices, users, stores, etc. by creating index tables and keeping them updated to boost the query speed and improve the performance of your online store. The new default indexers in Magento 2 include all of the functionality as in the previous enterprise versions. The difference between 2 versions is that they come with more efficient updates and have been improved to speed up the query performance.
• Magento performance toolkit: To verify and optimize system performance, one can create test environments and test code changes by using Magento 2’s new set of performance test scripts.
• Varnish: To help reducing server load and speed up the page load, Magento 2 is integrated with Varnish Cache — the leading HTTP accelerator technology — responsible for caching common requests.

6.2. Scalability Improvements

• Full page caching : This means all content from a static page is cached, therefore, increasing performance and significantly reducing the server load.
• Multiple admin users: With Magento 2, multiple admin users can create and edit products without the fear of data conflicts.

We have finished this tutorial and we hope it’s useful for you. Other helpful guides to Magento 2.0 will be implemented in the subsequent posts. We are looking forward to receiving all feedbacks as well as queries about Magento 2.0.

The next part will be introduced soon. NOW ARE YOU READY FOR THE NEXT PART?

Now, let’s try and experience new things from Magento 2 extensions!