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
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
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
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
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.
__app/code/<Namespace>/<Module> |__/view |__/<area> |__/layout |--<layout_file1>.xml |--<layout_file2>.xml
__app/design/<area>/<theme_path> |__/<Namespace>_<Module> |__/layout |--<layout1>.xml |--<layout2>.xml |__/override/base/ |--<layout1>.xml
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <update handle="page_one_column" /> <referenceContainer name="content"> <!-- ... --> </referenceContainer> </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.
- 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
- Easy to maintain
Each Magento UI library mixins file is placed under:
Magento UI Library helps users to easily customize every user interface elements as below:
- tabs and accordions
- 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|
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
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.
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.