View this presentation

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 2014
Developer
Beta
Q4 2015
Merchant
General
Availability
Q2 2015
Q1 2015
Developer
Release
Candidate
Q3 2015
Merchant
Beta
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
Magento Software Engineer
Introduction to Magento 2
Configuration
11:00 – 11:30
Vitaliy Korotun
Magento Software Architect
Migrating Your Theme to
Magento 2
11:30 – 12
noon
Andrey Konosov
Magento Software Architect
Migrating Merchant Data to
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
Magento Software Architect
Applying Code
Customizations – Part (1)
1:30 – 2:00
Eugene Tulika
Magento Software Engineer
Applying Code
Customizations – Part (2)
2:00 – 2:30
Sergii Shymko
Technical Support Engineer
Demystifying Code
Generation
2:30 – 3:00
Andrey Konosov
Magento Software Architect
Caching Optimization for
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
Manager, Software
Development
Magento 2 Performance and
Scalability
4:30 - 5:00
James Cowie
Special Presentation
Refactoring into TDD / BDD
for the future
Software Engineer
Session Digital
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
cache.xml
events.xml
events.xml
eav.xml
routes.xml
routes.xml
…..
…..
…..
Adminhtml
Store
Event
…..
Frontend
Event
Global
EAV
Routes
….
Cache
….
Configuration Types
Dependency Injection
di.xml
System
system.xml
Layout
layout.xml
Store Config
config.xml
Modules
module.xml
Menu
menu.xml
Routes
routes.xml
ACL
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
XML
….
?
Array
Reader
Application
Goal #4
Configuration data validation
Before
After
No predefined format
for
configuration files
Configuration File
+
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
Area
+
Frontend
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
Resolver
Config Data
Validation
State
Config Reader
Converter
Schema
Locator
Magento Config. Component Structure
File
Resolver
Config Data
Validation
State
Config Reader
Converter
Schema
Locator
Magento Config. Component Structure
File
Resolver
Config Data
Validation
State
Config Reader
Converter
Schema
Locator
Magento Config. Component Structure
File
Resolver
Config Data
Validation
State
Config Reader
Converter
Schema
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
Resolver
Config Data
Validation
State
Config Reader
Converter
Schema
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?
Frontend
Global
OR
Scoped
Global
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
<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;
}
function checkButtonsRelation() {
var hasChanges = false;
fields.each(function (elem) {
if (elem.baseValue != elem.value) hasChanges = true;
}.bind(this));
if (hasChanges) {
submitButtons.each(function (elem) {elem.disabled=true; elem.addClassName('disabled');});
updateButtons.each(function (elem) {elem.disabled=false; elem.removeClassName('disabled');});
} else {
submitButtons.each(function (elem) {elem.disabled=false; elem.removeClassName('disabled');});
updateButtons.each(function (elem) {elem.disabled=true; elem.addClassName('disabled');});
}
}
function submitCreditMemo() {
if ($('creditmemo_do_offline')) $('creditmemo_do_offline').value=0;
editForm.submit()
}
function submitCreditMemoOffline() {
if ($('creditmemo_do_offline')) $('creditmemo_do_offline').value=1;
editForm.submit()
}
var sendEmailCheckbox = $('send_email');
if (sendEmailCheckbox) {
var notifyCustomerCheckbox = $('notify_customer');
var creditmemoCommentText = $('creditmemo_comment_text');
Event.observe(sendEmailCheckbox, 'change', bindSendEmail);
bindSendEmail();
}
function bindSendEmail() {
if (sendEmailCheckbox.checked == true) {
notifyCustomerCheckbox.disabled = false;
} else {
notifyCustomerCheckbox.disabled = true;
}
}
</script>
M1
<div data-mage-init= '{"creditMemoForm":{“config”:”value”}}'>
…
<div>
Magento/Sales/view/adminhtml/web/js/creditMemoForm.js
require(['jquery', 'prototype'], function (jQuery) {
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;
}
});
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
M1
Magento/Catalog/view/frontend/layout
M2
Blocks and Templates
class Mage_Catalog_Block_Product_View
{
public function getProduct();
public function hasOptions();
public function hasRequiredOptions();
public function getAddToCartUrl();
public function getJsonConfig();
public function isStartCustomization();
public function getProductDefaultQty();
namespace Magento\Catalog\Block\Product;
class View
{
public function getProduct();
public function hasOptions();
public function hasRequiredOptions();
public function getAddToCartUrl();
public function getJsonConfig();
public function isStartCustomization();
public function getProductDefaultQty();
public function getWishlistOptions();
public function shouldRenderQuantity();
public function getQuantityValidators();
public function canEmailToFriend();
}
}
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
Magento 1
Load
Magento 2
Magic
Tool Structure
1. Attributes
2. Custom
100. Map
Tool Structure
1. Attributes
2. Custom
Integrity check
Migration
Volume check
100. Map
03. Customization
Map Customizations
MAJORITY
of tables could be migrated
USING MAP
Map
<ignore>
<move>
*Default action is copy
<transform>
Transformation Handlers
Extract
Transform
values
map
Load
string
replace
Magento 1
json
serialize
Magento 2
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
6
DELIVER
INCREMENTAL DATA
Workflow
7
SHUTDOWN
MAGENTO 1 WEBSITE
Workflow
8
>./magento indexer:all
cache warmup
REFRESH
TEMPORARY DATA
Workflow
9
OPEN
MAGENTO 2 STORE
Numbers
1000/min
1200/min
Virtual Box VM, CentOS 6, 2.5Gb RAM, CPU 1 core 2.6GHz
15500/min
Thank you!
Migrating Merchant Data to Magento 2
Q&A
Andrey Konosov
[email protected]
Credits: Icons designed by Freepik