Magento 2 Update Feature ? Is it relevant?

Magento 2 took some time to get an official release
But things changed. In 2011, eBay acquired Magento; first by buying 49% stake in the company and several months layer by acquiring the whole company. Co-founders Roy Rubin and Yoav Kutner remained the Magento leaders, but after less than one year, Yoav left the company. On Quora he explained his decision, but soon he deleted this. What he said however, may have had something to do with why Magento 2 took some serious time to get an official release

‘Magento 2 nothing more than a rewrite with jQuery’
But can Magento really be the next-generation platform with a more powerful toolset? One year ago, Danny Decker, partner of interactive agency Harlo Interactive, wrote: “I have tested Magento 2.0 dev60 and it is nothing more than a rewrite with jQuery. Magento 2 offers the same feature set as Magento 1. You’ll just need to pay a developer to migrate all your 1.x extensions to 2.x, since there is no upgrade path.” According to him Magento 2 does great things for developers, but “it does nothing to advance the merchants’ needs. Magento is missing the most important suite of marketing and sales automation tools.”

 

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.

12 new things : Magento 2 vs Magento 1.x

Magento 1.x vs Magento 2 structure

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:

  1. $result = $entryPoint->run(‘MagentoAppHttp’, array(
  2. ‘app_dirs’ => array(
  3. DirectoryList::MEDIA => array(
  4. ‘path’ => ‘pub/media.test’,
  5. ‘uri’ => ‘pub/media’
  6. )
  7. )
  8. ));

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

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

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} libwebcsssourcelib

Magento 2 UI Library

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.

Magento 2 UI Library

Interface elements customization

 

5. Under the hood

 

Magento 1.9Magento 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.

Magento 2 Backend

Friendly backend design

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.

Magento 2 Menu

Menu system grouped by function

Product Menu

Magento 2 Menu

Product menu

Marketing Menu

Magento 2 Menu

Marketing Menu

Content Menu

Magento 2 Menu

Content Menu

Report Menu

Magento 2 Menu

Report Menu

Store Menu

Magento Store menu

Store Menu

System Menu

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

Magento 2 Menu

Catelog Page

Magento 2 Menu

Product settings

 

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.

Blank Theme

Leave a comment