Magento UI Library

Legal Notice Copyright © 2014 Magento, Inc. All Rights Reserved. Magento®, eBay Enterprise™ and their respective logos are trademarks, service marks, registered trademarks, or registered service marks of eBay, Inc. or its subsidiaries. Other trademarks or service marks contained in this presentation are the property of the respective companies with which they are associated. This presentation is for informational and discussion purposes only and should not be construed as a commitment of Magento, Inc. or GSI Commerce, Inc. d/b/a eBay Enterprise (“eBay Enterprise”) or of any of their subsidiaries or affiliates. While we attempt to ensure the accuracy, completeness and adequacy of this presentation, neither Magento, Inc., eBay Enterprise nor any of their subsidiaries or affiliates are responsible for any errors or will be liable for the use of, or reliance upon, this presentation or any of the information contained in it. Unauthorized use, disclosure or dissemination of this information is expressly prohibited.

Insights on Magento 2 Frontend Architecture

Elena Leonova Manager, Product Management

Magento 2 Platform Goals

Easier Upgrades

Improve Performance

High Quality Code

Magento 2 Platform Goals

Engage with Community

Update Technology

Streamline Customization

01

M2 Frontend Key Changes

Consumers take a multi-device path to purchase

65% Start on a Smartphone

25% Start on a PC/Laptop

11% Start on a Tablet

61%

4%

Continue on a PC/Laptop

Continue on a Tablet

19%

5%

Continue on a Smartphone

Continue on a Tablet

10% Continue on a PC/Laptop Source — Google Inc.

Responsive Theme •  Saves Money •  Saves Time •  Improved SEO •  Wider Browser Support •  Usage of new technologies •  No need to customize core templates •  Better Performance

Magento UI Library •  Upgradability •  Consistency •  Extensive list of reusable components •  Styling and design best practices •  Good documentation •  Simplifies customisation

Multilevel Theme Inheritance •  Simplifies customization •  Flexible store design •  Allows store to be special •  Maintainability •  Less code duplication

Why Improve Performance?

A one second delay in page load time equals

−7% conversions

−11% page views

−16% satisfaction

What we’ve done to Improve Performance

LESS CSS minification & require.js

Mobile first approach

Vasiliy Seleznev Web Development Manager

Get Started github.com/magento/magento2

02

How to Create a Theme

Single Place Frontend Development

This is where all the magic happens

What Defines a Theme?

Vendor name (brand name) Theme name Theme preview for admin panel Theme configuration file

Theme Configuration File theme.xml Theme name Path to preview

Path to parent theme

Themes Relationships

Multilevel Theme Inheritance Module/view/frontend

Magento/blank

VendorName/Imagine

VendorName/NewYear

VendorName/SeasonSales

Apply Theme

03

How to Work with CSS

Blank Theme Features

Modern Technologies

Built with Magento UI library

Mobile First Responsive Design

Compiled with Built-in PHP LESS Compiler

WCAG 2.0 AA Compliant

Magento UI Library Documentation pub/lib/css/docs

Blank Theme Structure Modularized CSS: •  Upgradability •  Performance •  Maintenance Magento 2 compiles CSS itself •  No tools required •  Anyone can edit styles quickly •  LESS Source and CSS is always synchronized

CSS Extension css/source/extend.less

Imagine Theme

NewYear Theme NewYear

NewYear Theme: Image fallback

04

How to Work with XML Layout

What is Layout? •  Behavior of containers is predictable •  A wireframe of a page can be represented by bare containers •  With containers, there is no point to having nested elements in blocks

Layout Extend Theme/view/frontend/layout

Layout Extend

Layout Override

Layout Override

05

How to Work with Templates

Template Override

Template Override

06

Adding JavaScript to a Page

RequireJS Integration •  RequireJS integration allows for faster loading time of pages on the frontend •  Magento 2 allows using both RequireJScompatible and arbitrary libraries

Add RequireJS to the Pages Register the RequireJS in layout (once):

Use a component in the client code (HTML pages):

RequireJS Configuration app/code/Namespace/Module/view/frontend/requirejs-config.js

lib/web/requirejs-config.js

Summary •  Updated Frontend technology (HTML5, CSS3, Require.js, jQuery, LESS) •  Provided responsive capabilities for every Magento store •  Introduced Blank Theme as Magento-recommended way to start new theme development •  Introduced Magento UI Library as additional tool to simplify development and streamline customization process •  Provided mechanisms for flexible design changes by using theme inheritance

07

Q&A

Contacts Elena Leonova

Vasiliy Seleznev

[email protected]

[email protected]

@elena_a_leonova

@VasiliySeleznev