Click Fraud

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.

magento-structure

Magento 1.x vs Magento 2 structure

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

base-layout

Theme layouts

theme-layouts

Conventions

conventions

Files Layout

files-layout

3. CSS Pre-processing: 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 pre-processing of files being published by using some pre-processors. The CSS pre-processor, for example, consists two independent pre-processors as below:

  • LESS pre-processor: Together with LESS PHP adapter, LESS pre- processor 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.

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 pre-processor
  • Focused on web standards
  • Customizable
  • Easy to maintain
  • Responsive
  • Accessible
Each Magento UI library mixins file is placed under: {root} libwebcsssourcelib

Each Magento UI library mixins file is placed under: {root} libwebcsssourcelib

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:

interface-customization

5. Under the hood

under-the-hood

6. Improved Performance and Scalability

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

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

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

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

9. 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 cannot be transferred to Magento 2. They will need to be recreated and reconfigured.

10. Great UX – 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.

great-ux

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

menu-system

Product Menu

product-menu

Marketing Menu

marketing-menu

Content Menu

content-menu

Report Menu

report-menu

Store Menu

store-menu

System Menu

system-menu

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

Catalog Page

Catalog Page

product-manager-1

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

Need further help with Magento 2?

Get in contact with our team to chat about how we can help you today.