Magento 2 Developer Deep Dive

Ted Pietrzak
Head of Magento Technology
 Magento 2 Vision

Innovation
Create a new, unmatched platform
that delivers Agility

Scalability
 Magento 2 Timeline

Q4 2015
Q4 2014 Merchant
Developer General
Beta Q2 2015 Availability

Q1 2015 Q3 2015
Developer Merchant
Release Beta
Candidate
 AM Session 1
Presenters Topics
10:00 – 10:30 Jonathan Atkins Magento 2 Admin UX and
Head of Product Design & UX Framework Changes

10:30 – 11:00 Olexii Korshenko Introduction to Magento 2

Magento Software Engineer Configuration

11:00 – 11:30 Vitaliy Korotun Migrating Your Theme to

Magento Software Architect Magento 2

11:30 – 12 Andrey Konosov Migrating Merchant Data to

noon Magento Software Architect Magento 2

12 noon – 1:00 Lunch (on your own)

Break for Lunch
12 noon – 1 p.m.
 Housekeeping
• Wi-Fi access:
• Network: #ImagineCommerce
• Password: Wynn2015

• Sessions will be recorded

• Please hold questions to the end of each session

• We will have a ‘parking lot’ for additional questions

• We will use the office hours from 5 – 6 p.m. for additional discussions

• Lunch is on your own today

 PM Session 2
Presenters Topics
1:00 – 1:30 Anton Kril Applying Code
Magento Software Architect Customizations – Part (1)

1:30 – 2:00 Eugene Tulika Applying Code

Magento Software Engineer Customizations – Part (2)

2:00 – 2:30 Sergii Shymko Demystifying Code

Technical Support Engineer Generation

2:30 – 3:00 Andrey Konosov Caching Optimization for

Magento Software Architect Magento Code Development

3:00 – 4:00 Break (Marketplace Grand Opening Reception (Latour)

Craig Hayman
President, eBay Enterprise
Magento Sponsored Extension Challenge Winners!

Sergey Lysak, Eltrino

1st Place

Blanka Pham, Magestore

2nd Place

Maciej Ostrowski , Creatuity

3rd Place
Break 3 p.m. – 4 p.m.
 PM Session 3
Presenters Topics
4:00 - 4:30 Oleh Kobchenko Magento 2 Performance and
Manager, Software Scalability
Development
4:30 - 5:00 James Cowie Special Presentation
Software Engineer Refactoring into TDD / BDD
Session Digital for the future
Allan MacGregor
Magento Practice Lead, DEMAC
MEDIA
Joshua Warren
CEO, Creatuity

5:00 – 6:00 Open Office Hours

Special Presentation by Magento Community
Refactoring into TDD / BDD for the future

James Cowie
Software Engineer, Session Digital

Allan MacGregor
Magento Practice Lead, DEMAC MEDIA

Joshua Warren
CEO, Creatuity
Magento 2 Office Hours
5 p.m. – 6 p.m.
Magento 2 Admin UX
Jonathan Atkins
Head of Product Design & UX
 Legal Disclaimer
Copyright © 2015 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 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.
 Prioritizing the Merchant Experience
 Magento 2 represents a new approach to the Admin interface
 Focused on creating a quality experience for non-technical users
 Usability
 Desirability
 Accessibility
 New Look and Feel
 Modern flat design
 Touch friendly
 Better accessibility
 Improved usability
 Touch Friendly
 Larger click/tap targets
 Removal of hover states
 Easier to use on a wider
variety of screens
 Touchscreen laptops
 iPad
 Surface
 9”+ Android tablets
 Navigation
 Designed for modern
screen aspect ratios
 More vertical space
for content
 Touchable
 Greater extensibility
 Data Grids
 Keyword search
 Configurable columns
 Inline editing
 Expanding filters
 Saved views
 Drag and drop column
reordering
 Sticky column headers
 Simplified mass
actions
Filtering
 Forms
 New form element
types
 Live field-level
validation
 Dynamic capabilities
 More consistent usage
throughout
 Easier to read
 Product Creation
 Fewer templates!
 New “Standard”
product template
 Simple
 Configurable
 Virtual
 Downloadable
 Product Creation
 Configuration creation
by attributes
 Sub-process wizards
 Product Creation
 Bulk editing by attribute
 Images
 Pricing
 Inventory
 Content Staging
 Create content in the
future!
 Products
 Promotions
 CMS pages
 Preview pages before
they launch
 Pattern Library
 Admin UX guidelines available
on GitHub
 Pattern documents
 Usage guidelines
 .psd files

http://devdocs.magento.com/guides/v1.0/pattern-library/bk-pattern.html
 Merchant Experience is a Priority

We need your help!

Sign up at Magento.com/research
 Thank you!
Magento 2 Admin UX

Q&A
Jonathan Atkins
[email protected]
Olexii Korshenko
Senior PHP Developer, Magento 2
 Magento 2 XML
Configuration Files
 Legal Disclaimer
Copyright © 2015 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 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.
 Agenda

1. Goals for Configuration Decomposition

2. Validation Strategy
3. Magento Config Component
4. How to create New Configuration Type
5. Benefits of configuration decomposition
6. QA
Goals for Configuration Decomposition
 Goal #1
Overhead elimination in configuration loading

config.xml Global Adminhtml Frontend

Adminhtml
Store Event
Frontend cache.xml events.xml events.xml
…..
Event Routes
Global ….
eav.xml routes.xml routes.xml
EAV Cache

….
….. ….. …..
 Configuration Types
Dependency Injection System
di.xml system.xml

Layout Store Config

layout.xml config.xml

Modules Menu
module.xml menu.xml

Routes ACL
routes.xml acl.xml
 Goal #2
Separate configuration models

Eav\Config

Routes\Config
Mage_Core_Model_Config
Cache\Config

Event\Config

…
 Goal #3
Application is independent from configuration storage and initial
format

DB
? Array

Reader Application
XML

….
 Goal #4
Configuration data validation

Before After

No predefined format Configuration File

for +
configuration files Schema Definition
Validation Strategy
 XML Schema Definition

• Each configuration file has a link to the schema

definition in its declaration

• Schema definition for single file and for merged

format

No code duplication. Use redefine instruction

 Integrity Tests
 Validation of separate files XML
File

 Per-area validation Global

Area

 Cross-area validation Global

+ Frontend
Area Area
 Validation in Developer Mode
 Run Time validation

 Validation of each configuration file on the loading stage

 No performance impact in Production Mode

Magento Config Component
Magento Config. Component Structure
File Validation
Resolver State

Config Data Config Reader

Schema
Converter
Locator
Magento Config. Component Structure
File Validation
Resolver State

Config Data Config Reader

Schema
Converter
Locator
Magento Config. Component Structure
File Validation
Resolver State

Config Data Config Reader

Schema
Converter
Locator
Magento Config. Component Structure
File Validation
Resolver State

Config Data Config Reader

Schema
Converter
Locator
How to Implement New Configuration Type
 How to create new Configuration Type?
Step 1
Choose format of configuration type and create schema
definition file(s) for it

Step 2
Decide whether your configuration is scoped or non-scoped

Step 3
Provide implementations of required interfaces
Magento Config Component Structure
File Validation
Resolver State

Config Data Config Reader

Schema
Converter
Locator
List of interfaces that must be implemented
1 of 4 Schema Locator
Provide paths to corresponding schema file(s)
List of interfaces that must be implemented
2 of 4 Config Converter
Convert DOMDocument to array

XML Array
List of interfaces that must be implemented
3 of 4 Configuration Reader
List of interfaces that must be implemented
4 of 4 Config Data
Configuration is Scoped or Non-Scoped?

Global Frontend OR Global

Scoped Non-Scoped

Extend corresponding class

Inject implementation of configuration reader
Benefits of Magento 2 Configuration
 Benefits of Magento 2 Configuration
 Validation of configuration data
 Documented configuration format
 Same but separate mechanisms for all configuration types
 Extensibility of configuration component
 Optimization in configuration loading
 Configuration scopes
 Simple creation flow of new configuration type
 Thank you!
Magento 2 XML Configuration Files

Q&A
Olexii Korshenko
[email protected]
Migrating Your Theme
to Magento 2
Vitalii Korotun
Architect, Magento
 Legal Disclaimer
Copyright © 2015 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 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.
01. Magento 2 Overview: Theme
Technologies and Techniques
Granularity due to Modularity
 Directory Structure
M1 M2
Diversity
JavaScript
Technologies and Techniques
 RequireJS

define(["jquery", "jquery/ui", "domReady!"],

function ($) {
'use strict';
// your business logic here
}
);
 Inline JavaScript
template/sales/order/creditmemo/create/items.phtml
<div data-mage-init= '{"creditMemoForm":{“config”:”value”}}'>
<script type="text/javascript">
var submitButtons = $$('.submit-button'), updateButtons = $$('.update-button'), fields = $$('.qty-input');
updateButtons.each(function (elem) { elem.disabled=true; elem.addClassName('disabled');});
…
for (var i=0;i<fields.length;i++) {
fields[i].observe('change', checkButtonsRelation); fields[i].baseValue = fields[i].value; <div>
}
function checkButtonsRelation() {
var hasChanges = false;
fields.each(function (elem) {
if (elem.baseValue != elem.value) hasChanges = true;
}.bind(this)); Magento/Sales/view/adminhtml/web/js/creditMemoForm.js
if (hasChanges) {
submitButtons.each(function (elem) {elem.disabled=true; elem.addClassName('disabled');});
updateButtons.each(function (elem) {elem.disabled=false; elem.removeClassName('disabled');});
} else { require(['jquery', 'prototype'], function (jQuery) {
submitButtons.each(function (elem) {elem.disabled=false; elem.removeClassName('disabled');});
updateButtons.each(function (elem) {elem.disabled=true; elem.addClassName('disabled');}); var submitButtons = $$('.submit-button'),
}
} updateButtons = $$('.update-button'),
function submitCreditMemo() {
if ($('creditmemo_do_offline')) $('creditmemo_do_offline').value=0; fields = $$('.qty-input');
editForm.submit()
}
updateButtons.each(function (elem) {
function submitCreditMemoOffline() {
if ($('creditmemo_do_offline')) $('creditmemo_do_offline').value=1;
elem.disabled=true; elem.addClassName('disabled');
editForm.submit()
}
});
var sendEmailCheckbox = $('send_email'); for (var i=0;i<fields.length;i++) {
if (sendEmailCheckbox) {
var notifyCustomerCheckbox = $('notify_customer'); fields[i].observe('change', checkButtonsRelation);
var creditmemoCommentText = $('creditmemo_comment_text');
Event.observe(sendEmailCheckbox, 'change', bindSendEmail); fields[i].baseValue = fields[i].value;
bindSendEmail();
}
}
function bindSendEmail() {
if (sendEmailCheckbox.checked == true) {
});
notifyCustomerCheckbox.disabled = false;
} else {
notifyCustomerCheckbox.disabled = true;
M1
}
}
</script>
 JavaScript Extension
<div id="toolbar" data-mage-init='{"toolbarEntry": {}}'>
…
</div>

// somewhere in your custom template

<script type="text/x-magento-init">
{
“#toolbar": {
“toolbarEntry": {
“option”: “value”
},
“otherWidget”: {}
}
}
</script>
Layouts, Block and Templates
 Layout Files

frontend/rwd/default/layout/catalog.xml Magento/Catalog/view/frontend/layout

M1 M2
 Blocks and Templates
namespace Magento\Catalog\Block\Product;
class Mage_Catalog_Block_Product_View class View
{ {
public function getProduct(); public function getProduct();
public function hasOptions(); public function hasOptions();
public function hasRequiredOptions(); public function hasRequiredOptions();
public function getAddToCartUrl(); public function getAddToCartUrl();
public function getJsonConfig(); public function getJsonConfig();
public function isStartCustomization(); public function isStartCustomization();
public function getProductDefaultQty(); public function getProductDefaultQty();

public function canEmailToFriend(); public function getWishlistOptions();

} public function shouldRenderQuantity();
public function getQuantityValidators();
}
UI Library and CSS
Magento UI Library
• Upgradability
• Consistency
• Extensive list of reusable
components
• Styling and design best practices
• Simplifies customization
 Magento UI Library Documentation
lib/web/css/docs
CSS Pre-processors
02. Web Developer Workflows
CSS pre-processing
 WEB Developer Workflows
Basic: with built-in CSS pre-processor

Standard: with client-side CSS pre-processor

Advanced: with node.js CSS pre-processor

 Server side PHP pre-processor (with PHP)

Oyejorge PHP library

~40 seconds to compile CSS

Manual actions to re-compile

 Client side CSS pre-processor (with less.js)

less.js official script

~10 seconds to compile CSS

No actions to re-compile
 Server side CSS pre-processor (with node.js)

Command line script (lessc)

~7 seconds to compile CSS

Automatic browser refresh on change in LESS

Summary
 Development Efforts

 Existing M1 experience

 Pass M2 Training

1st Module M1 + 50 %
2nd Module M1 + 20%
3rd Module M2 =< M1
 Thank you!
Migrating Your Theme to Magento 2

Q&A
Vitalii Korotun
[email protected]
Andrey Konosov
Architect, Magento 2
Migrating Merchant
Data to Magento 2
• Data structure
• How migration tool work
• How to customize migration process
• Migration workflow
 Legal Disclaimer
Copyright © 2015 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 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.
01. Website Data
 Data Structure

CORE DATA

CUSTOM TEMPORARY MEDIA

 Data Structure

CORE DATA

CUSTOM TEMPORARY MEDIA

 Data Structure

CORE DATA

CUSTOM TEMPORARY MEDIA

02. Migration Tool
 Migration Tool
Extract Transform Load

Magento 1 Magento 2
Magic
 Tool Structure
1. Attributes 2. Custom 100. Map
 Tool Structure
1. Attributes 2. Custom 100. Map

Integrity check

Migration

Volume check
03. Customization
 Map Customizations

MAJORITY
of tables could be migrated
USING MAP
 Map

<ignore> <move> <transform>

*Default action is copy

 Transformation Handlers
Extract Transform Load

string
replace
values
map
Magento 1 json Magento 2
serialize
 Custom Steps

1. Step 2. Step 3. Custom 4. Step 5. Step

04. Workflow
Workflow
 Workflow

1
INSTALL
THE SOFTWARE
 Workflow

2
MIGRATE
SETTINGS, WEBSITES
 Workflow

3
CUSTOMIZE
YOUR MAGENTO 2
 Workflow

4
Storefront usage
Orders management

Products management
Content management FREEZE
STORE ON MAGENTO 1
 Workflow

5
LAUNCH
THE MAGIC TOOL
 Workflow

DELIVER
INCREMENTAL DATA
 Workflow

7
SHUTDOWN
MAGENTO 1 WEBSITE
 Workflow

8 >./magento indexer:all
cache warmup

REFRESH
TEMPORARY DATA
 Workflow

OPEN
MAGENTO 2 STORE
 Numbers

1000/min 1200/min 15500/min

Virtual Box VM, CentOS 6, 2.5Gb RAM, CPU 1 core 2.6GHz

 Thank you!
Migrating Merchant Data to Magento 2

Q&A
Andrey Konosov
[email protected]

Credits: Icons designed by Freepik