11 exciting features of Magento 2

In our last blog post, we covered Magento 2.0 Installation guide in an easy to understand step by step process to successfully install and experience the latest developer version of Magento 2. Today, we would like to focus on 11 huge improvements in Magento 2.0 that will thrill you and you can yourself see the benefits these changes will bring. Let’s dive in.

1. New structure

There are two major changes in the Magento 2 file structure. Firstly, everything is placed directly under the app structure. Secondly, every module has its own VIEW directory in which you can access all template, layout, js, and css/less files of any specific module. This is no doubt a big help for module developers as they can have more opportunities for customization without changing core site functionality.

There are four types of directories in Magento 2 file system:

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

The primary directories cannot be changed. They include: base directory, code directory /app/code, lib directory /lib.
The system directories include: DI directory /var/di, generation directory /var/generation, etc directory /app/etc. To change the location of the system directory, you need to run EntryPoint class:

$result = $entryPoint->run('Magento\App\Http', array(
    'app_dirs' => array(
        DirectoryList::MEDIA => array(
            'path' => 'pub/media.test',
            'uri' => 'pub/media'
        )
    )
));

The application directories include: 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().
The public directories include: 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.
To change the location of the application and public directories, use the same technique applied to changing the location of the system directory. These two directories can be configured via config.xml file.

 2. New Layout elements

If a core/text_list block type is used in Magento 1.x to serve as a structural block, Magento 2 now introduces 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

3. CSS Preprocessing

Magento 2 doesn’t use Bootstrap but 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. The publisher also supports preprocessing of files being published by using some preprocessors. The CSS preprocessor, for example, consists two independent preprocessors as below:

• 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.

 Key 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 more friendly 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. Below are some of its key characteristics:

• 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 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.

 

5. Under the hood

 

Magento 1.9	Magento 2
Sass/Compass jQuery in rwd package only Prototype Javascript library in core Additional JavaScript libraries	HTML5 CSS3 RequireJS Apache 2.2 or later PHP 5.5.x, with PHP 5.4.11 as the minimum requirement MySQL 5.6 PSR Compliance. Install needed components via Composer Magento UI Library CSS Pre-processor. Full page caching Magento performance toolkit

 

6. Improved Performance and Scalability

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

6.1. Performance Improvements

• Improve indexers: Indexing is the way 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 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.

7. No more Prototypes

At first, prototype was used as the main javascript library of Magento because jQuery wasn’t stable enough. However, as the demand from the Magento Community increased, jQuery has now replaced prototype. However, prototype is still included with Magento 2.

Magento 2.0’s only support for one Javascript framework means that there will be less Javascript conflicts in 2.0 than in 1.x.

8. Reduced upgrade efforts and costs

Upgrading core Magento software as well as installing and upgrading extensions in Magento 2 will be much easier compared to Magento 1.x.

• Upgrading Magento to new versions. To help Magento developers to prepare for upgrading to Magento new versions, Magento 2 includes updated information on versioning policies and upgrade compatibility.
• Installing Magento. Installing a new Magento instance has now become faster with Magento 2’s new standalone installer. This installer will check for pre-requisites before starting the installation process. It serves as an independent script from the application/platform. Therefore, system integrators can easily script Magento installations and upgrades to create standard deployments.
• Installing/upgrading extensions. Installing or upgrading a new extension will no doubt affect your site. Therefore, to help developers know the potential effect an extension may cause before installing it, Magento 2 allows extension developers to provide detailed information on version compatibility in their code, which includes: dependencies on other components, their versions, and system requirements (PHP extensions, libraries).
• Upgrading to Magento 2. To upgrade to Magento 2, one can use the export/import functionality to export their customer records, product catalog, customer data, inventory data, and other standard records then import these into Magento 2.

Notes: Any customizations made to the theme or extensions in the current Magento platform can not be transferred to Magento 2. They will need to be recreated and reconfigured.

9. Great UX

9.1.Friendly backend UI

The backend UI is more user-friendly. As you can see from the screenshot below, in the Dashboard, users can see the statistics of each store view by using Scope Filter.

9.2. Menu system grouped by function

The menu system is grouped in two management functions: eCommerce and System. All menus involved in managing your online store, such as Product, Marketing, Content, Report, etc. are displayed in a clear Flat menu type and are organized more logically and user-friendly.

Product Menu

Marketing Menu

Content Menu

Report Menu

Store Menu

System Menu

10. Product Manager interface: boring vs. polished

Creating or editing a product details has never been faster with the new arrangement of the product fields in the product manager interface.

 

11. Frontend development : Blank Theme

Using Blank Theme as a starting point is an improvement in Magento 2. It helps ease the workload of front-end developers by providing them with a stripped down version of the theme. Then all they need to do is adding more specific features and customizations as their project needs.

Further reading :

1. Magento 2.0 Wiki
2. 5 Most Important Things That Happened at Magento Imagine 2014
3. Magento 2 frontend architecture
4. Magento 2 Overview