M2 - Magento Imagine

Copyright © 2016 Magento, Inc.; All Rights Reserved.
Magento® and its respective logos are trademarks, service marks, registered
trademarks, or registered service marks of Magento, Inc. and its affiliates. 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 of any of its affiliates. While we
attempt to ensure the accuracy, completeness and adequacy of this presentation,
neither Magento, Inc. nor any of its 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.
Magento 2.0
Frontend Development Advances
Elena Leonova
Snr Product Manager
Magento 2 Frontend Features
Modern Technologies
Magento UI library
Mobile First Responsive Design
Built-in PHP LESS Compiler
WCAG 2.0 AA Compliant
Magento UI Library
• Extensive list of reusable
components
• Simplifies customization
• Upgradability
• Consistency
• Styling and design best
practices
• Good documentation
Multi-level Theme Inheritance
• Simplifies frontend
customization
• Less code duplication
• Improved maintainability
• Flexible store design
Magento 2 Merchant Beta Feedback
“With a production schedule of only 8 weeks, we were able to use
much of Magento’s capabilities ‘out of the box’ to deliver a unique,
mobile optimized, brand experience.”
- Sean Venturi, Founder, Venroy
“Magento 2.0 allows us to spend time on creative rather than code . We
can leverage the back-end platform across our portfolio while still
delivering unique customer experiences for each brand.”
- Rob Bostock, Director of Technology, Manzanita Capital
Magento 2.0
Frontend Development Advances
Vitalii Korotun
Snr Architect
Magento 2 Theme is a composer package
{
"name": "magento/theme-frontend-luma",
"require": {
"magento/theme-frontend-blank": "100.0.*",
},
"type": "magento2-theme",
"autoload": {"files": ["registration.php”]}
}
repo.magento.com
Module
Magento 2 Themes are light
Theme
Module keeps
static files inside
“base” theme
assets
Magento 2 Themes are more granular
Multiple
actions in one
controller file
All module
handles in
one file
Each
module
handle is in
separate file
Each action is
in separate file
Unfriendly Block declaration
<block class="My\Block"
name="i.do.not.care"
as=”i.am.fiddly.dev"
template="template.phtml"/>
Magento 2 Layout XML has containers
Blocks
One block and one template
Containers
Friendly Block declaration
<block class="My\Block" name="i.do.care” as=”i.am.good.dev" template=“template.phtml”>
<container name="header.container" htmlTag="div"/>
<container name=”middle.container" htmlTag="div"/>
<container name=”footer.container" htmlTag="div"/>
</block>
Friendly Block declaration
<block class="My\Block" name="i.do.care” as=”i.just.awsome" template=“template.phtml”>
<container name="header.container" htmlTag="div”>
<block name=”my.widget.part1" … />
</container>
<container name=”middle.container" htmlTag="div”>
<block name=”my.widget.part2" … />
</container>
<container name=”footer.container" htmlTag="div”>
<block name=”my.widget.part3" … />
</container>
</block>
Magento 2 Theme is more configurable
Magento 2 is ready to free your Templates and JavaScript
from “hardcoded” configuration settings
Magento 2 supports multiple rendering engines
<type name="Magento\Framework\View\TemplateEngineFactory">
<arguments>
<argument name="engines" xsi:type="array">
<item name="phtml” xsi:type="string">
Magento\Framework\View\TemplateEngine\Php
</item>
</argument>
</arguments>
</type>
Magento 2 has built-in CSS pre-processing
<virtualType name="AlternativeSourceProcessors">
<arguments>
<argument name="alternatives" xsi:type="array">
<item name=”styl" xsi:type="array">
<item name="class" xsi:type="string">
My\Stylus\Adapter\Class
</item>
</item>
<item name="less" xsi:type="array">
<item name="after" xsi:type="string">styl</item>
</item>
</argument>
</arguments>
</virtualType>
JavaScript in Magento 2 became modular
define(["jquery"],
function ($) {
// your code here
}
);
<div id="id" data-mage-init= '{"js/module/path":{…}}'>…<div>
<script type="text/x-magento-init">
{"#id": {"js/module/path": {…}}}
</script>
original
extension
Magento 2 Theme allows localized static files
mytheme/web/images/logo.svg
mytheme/web/i18n/en_US/images/logo.svg
mytheme/web/i18n/es_ES/images/logo.svg
mytheme/web/i18n/ua_UA/images/logo.svg
Boiling hot
NodeJS Developers Tools
Polyfills/Shims/Transpilers
Service workers
system.js vs require.js
lodash.js vs underscore.js
aurelia.js vs knockout.js
Q&A
Magento 2 Frontend Development Advances
Legal
Copyright © 2016 Magento, Inc.; All Rights Reserved.
Magento® and its respective logos are trademarks, service marks, registered
trademarks, or registered service marks of Magento, Inc. and its affiliates. 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 of any of its affiliates. While we
attempt to ensure the accuracy, completeness and adequacy of this presentation,
neither Magento, Inc. nor any of its 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.
Magento 2 Integration
Technologies
Chuck Choukalos
Magento Lead Product Manager
Alan Kent
Magento Chief Architect
Integration Facts
•
Trends
–
–
–
–
–
–
–
•
•
Explosion of Mobile Devices (Smartphone sales > PC sales in 2010)
Apple sold more iPads in first 24 months then Macs in 24 years
Over 70% of US Orgs are using APIs according to IDC
85% of enterprises use cloud services according to IBM
2.5 Quintillion bytes of data created daily according to IBM
The Internet of Things (IOT)
Omni-Channel ; Market places; Social Selling
Marketers need to be where their customers are
Data rich–analaticaly driven companies (Gen D) are 2.6x’s more
likely to use APIs to integrate tightly according to IBM
Meet Adam
Adam has set up his own online store
It is doing well and sales are growing
But how does he grow his
business to the next level?
Potential Integration Points
PIM
Native Mobile Apps
Buy Buttons
Order Management
BUY
Internet of Things
SaaS Connectors
Marketplaces
BUY
BUY
Adam needs to reduce the cost of integrations
Integration
Configuration
Business Logic
(Extension Developers)
(Solution Partners)
Want separation of
Business Logic from
Integration Configuration
Magento 2.X is Solving the Integration Challenge
Authentication
made simple
More out-ofthe-box APIs
Service
Contracts
REST
SOAP
Easy Custom
APIs
AMQP
Multiple Authentication Needs
LOGIN
USERNAME
PASSWORD
Login
JavaScript in web browser
already has authenticated
users
Session
Cookie
Mobile apps collect
credentials from users
Username
Password
Token
Enterprise systems must
authenticate with humans
present
Long Life
Auth Token
Mobile App – Authentication
1
Authenticate using username and password
$ curl -X POST "https://127.0.0.1/rest/V1/integration/admin/token" \
-H "Content-Type:application/json" \
-d '{"username":"admin", "password":"XXXXX"}'
"w2rq3acoc6bbtxdbbhmybmxq1nm60j24"
2
Retrieve list of loaded modules
$ curl https://127.0.0.1/rest/V1/modules \
-H "Authorization: Bearer w2rq3acoc6bbtxdbbhmybmxq1nm60j24"
["Magento_Store","Magento_AdvancedPricingImportExport",...,"Magento_
Wishlist"]
Magento 2: More Standard APIs out of the Box
Order
Inventory
Catalog
Cart
Search
Customer
Tax
CMS
Discovering API Coverage
•
•
•
•
Adding modules can change
the available REST and SOAP
services
Look for webapi.xml files –
{Vendor}/{ModuleName}
/etc/webapi.xml
Swagger based docs available
online
Swagger on your site –
localized based on which
modules are loaded.
http://devdocs.magento.com/swagger
http://127.0.0.1/index.php/rest/default/schema
PIM Calling Magento 2
onSave()
PIM
webapi.xml
HTTP POST /V1/products
Create new product
JSON
{
"id": 0,
"sku": “SPD-3393",
"name": “Super fast shoes",
"storeId": 0,
"attributeSetId": 0,
"price": 20.22,
"extensionAttributes": {
...
webapi.xml
<routes ...>
<!-- Product Service -->
<route url="/V1/products" method="POST">
<service class="Magento\Catalog\Api\ProductRepositoryInterface“
method="save"/>
<resources>
<resource ref="Magento_Catalog::products" />
</resources>
</route>
...
curl –H "Content-Type: application/json" –H "Authentication: XXX" --data-raw @file.json
Simpler REST, SOAP, and AMQP Services
•
Service contracts are
– PHP interfaces
– Designed to be
called from
presentation layer
and other modules
– Also bound to web
services
•
Arguments are
– Restricted to types
easy to serialize as
JSON or XML
namespace Magento\Catalog\Api;
interface ProductRepositoryInterface
{
/**
* Create product
*
* @param \Magento\Catalog\Api\Data\ProductInterface $product
* @param bool $saveOptions
* @return \Magento\Catalog\Api\Data\ProductInterface
* @throws \Magento\Framework\Exception\InputException
* @throws \Magento\Framework\Exception\StateException
* @throws \Magento\Framework\Exception\CouldNotSaveException
*/
public function save(\Magento\Catalog\Api\Data\ProductInterface $product,
$saveOptions = false);
WSDL: http://127.0.0.1/soap?wsdl&services=customerCustomerAccountServiceV1,catalogProductV2
Retrieving Product Information
Fetch: curl http://127.0.0.1/rest/V1/products/SPD-3393
OR
AND
Search:
curl -X PUT -i
-H 'Content-type: application/json‘
-d '{"search_criteria":{…}}'
http://127.0.0.1/rest/V1/search
CONSTRAINTS
PAGINATION
SORTING
Cart
Cart manipulation (quoteCartManagementV1)
• POST /V1/carts – creates new empty cart
• PUT /V1/carts/{cartid} – associate cart with a customer
Get quote for cart
(checkoutGuestTotalsInformationManagementV1)
• POST /V1/carts/{cartId}/totals-information – returns how
much the cart will cost (to show user before checkout)
Specify payment information and place order
(checkoutPaymentInformationManagementV1)
• POST /V1/carts/{cartId}/payment-information
4 Message Interaction Patterns
1 2
1
Inbound
Receive
Process
2
1 3
Asynchronous Request
Publisher/Subscriber
A message is sent with no
response back. Sender does
receive any acknowledgement
from recipient. Could be pointto-point or broadcast to all
listeners.
2 4
Magento Framework
Synchronous request
Request/Response
Module
3
3 4
Outbound
Send
Request
4
A message is sent with a
matching message sent
back by the recipient. Only
suitable when there is one
recipient (not useful for
broadcast).
Service Contract Call Patterns
Asynchronous
interface MyServiceInterface {
/** @returns void */
createThing($args);
}
Synchronous
class MyService implements MyServiceInterface {
public createThing($args) {
...
}
}
1
class XXX {
__construct(MyServiceInterface $mySvc) {
...
}
foo() {
$this->mySvc->createThing($args);
}
}
interface MyServiceInterface {
/** @returns CustomerInterface */
createThing($args);
}
1 3
3
Inbound
2 4
class MyService implements MyServiceInterface
{
public createThing($args) {
...
return $customer;
}
}
2
Outbound
class XXX {
__construct(MyServiceInterface $mySvc) {
...
}
foo() {
$c = $this->mySvc->createThing($args);
}
}
4
Choosing Transport Mechanism
•
AMQP
1
2 3 4
2.0
Soon
(EE only)
– Natural fit for asynchronous requests
– Natural fit for broadcast (publish/subscriber model)
– Can do synchronous request/response (using “reply-to” header)
•
HTTP
2
– Perfect match for synchronous request/response
– Can do asynchronous requests by ignoring the response that comes
back
– Can do broadcast by having an array of URLs and processing in a loop
(discarding responses)
Custom APIs – Why?
Want an API
optimized for mobile
Magento has defined
core service contracts
only
IOT devices mapping
IDs to customers and
order preferences
Custom APIs – How?
1.
2.
3.
4.
5.
Write service contract (PHP interfaces)
Implement the interfaces with business logic
Bind REST and/or SOAP the API via webapi.xml
Review security settings, including acl.xml
Write automated-tests
No
JSON/XML
serialization
code
No
authentication
code
Automatic
separation of
config from
logic
Automatic
Generation
of Swagger
Docs
Adam’s
Adam Orders are Booming
Mobile App
Dropship Integration
Life is Good!
Multiple Warehouses
THANK YOU!
Twitter: @akent99
Blog: http://alankent.me
Forum: https://community.magento.com/ (Just Ask Alan)
Imagine 2016
Legal
Copyright © 2016 Magento, Inc.; All Rights Reserved.
Magento® and its respective logos are trademarks, service marks, registered
trademarks, or registered service marks of Magento, Inc. and its affiliates. 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 of any of its affiliates. While we
attempt to ensure the accuracy, completeness and adequacy of this presentation,
neither Magento, Inc. nor any of its 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.
Magento 2
Performance Update
Chuck Choukalos
Lead Product Manager
Oleh Kobchenko
Engineering Manager
In this presentation you will see
Performance features overview
Integrations available out of the box
Solutions for scalability
Measurement results
Best practices on tuning Magento 2
New in Magento 2 performance
Fresh features you will find on performance
Server side features
5000+ rules
200+ active rules
Fast response
Promotions optimization
50ms cached page
350ms non-cached
Catalog caching and rendering
Higher throughput
Matches independent
Improved search performance
Single responsibility
observers
Objects decomposition
Framework level enhancements
Client side enhancements
Addition of products to cart
Client-side checkout rendering
Asynchronous customer data loading
Client-side grids rendering
Integrations and versions updates
supported version update
for search
for queue operations
is officially supported
is fully supported
Integrations out of the box
Platform updates
Zray plugin for profiling
NewRelic module
Tools and instruments
Scaling opportunities
Search
server
…
Web server
Search
server
Media server
Balancer
Caching
server
Web server
Web server
…
Web server
Automatic connection
Databaseresolving
Session server
Job queue server
Job server
…
Main (Catalog)
Master
Checkout
Master
Order MS
Master
Job server
Main
Slave
Catalog
Slave
Checkout
Slave
…
EAV
Slave
Caching server
…
Caching server
Performance measurement
Results for Magento 2.1 testing
Performance tests
Benchmark test
Client side scores
Stress testing
Other tests
5.6 / 7.0
No Varnish / No Redis
Isolated hosting
12 cores
5.6 / 7.0
Varnish [M2] / FPC [M1]
Large
Shared hosting
4 cores
Medium
Small
Benchmark testing: Profiles definition
Scalable solutions
24 cores
5.6 / 7.0
Varnish [M2] / FPC [M1]
Magento CE
Magento EE
Magento EE
15 concurrent threads
50 concurrent threads
100 concurrent threads
9
4
2
1
30
16
4-5
2-3
60
32
8-10
5-8
Response time (ms)
Benchmark testing: Small Merchant
400
320
1000
PHP 5.6 / 7.0
800
Build-in cache
-38%
600
240
160
-80%
80
0
15 threads
200
0
Catalog page
Throughput per hour
Magento CE
-62%
400
-65%
4 cores
Add product to cart
20000
400000
4x
300000
200000
+83%
15000
10000
100000
5000
0
0
Catalog page view
2x
+2%
M1 PHP5.6
M2 PHP5.6
M2 PHP7
Cart operations
Benchmark testing: Small Merchant
4 cores
Throughput per hour
Scenario time (ms)
PHP 5.6 / 7.0
6000
5000
4000
3000
2000
1000
0
-38%
-17%
1000
Customer checkout
M1 PHP5.6
+74%
800
+31%
-4%
400
-28%
200
0
Guest checkouts
Magento CE
15 threads
-50%
Guest checkout
600
Build-in cache
-4%
Customer checkouts
M2 PHP5.6
M2 PHP7
12 cores
PHP 5.6 / 7.0
80
60
1500
Varnish vs FPC
1000
Magento EE
-51%
40
20
12x
12x
0
-70%
500
50 threads
0
Catalog page
8
Millions
Throughput per hour
Response time (ms)
Benchmark testing: Medium merchant
10x
Add product to cart
10x
60000
+139%
45000
6
4
30000
2
15000
0
+39%
M2 PHP5.6
M2 PHP7
0
Catalog page view
M1 PHP5.6
Cart operations
Scenario time (ms)
Benchmark testing: Medium merchant
PHP 5.6 / 7.0
8000
-10%
-44%
-38%
2000
Magento EE
50 threads
-63%
0
Guest checkout
Throughput per hour
Varnish vs FPC
6000
4000
12 cores
1200
1000
800
600
400
200
0
Customer checkout
+123%
M1 PHP5.6
+74%
+26%
+2%
M2 PHP5.6
M2 PHP7
Guest checkouts
Customer checkouts
24 cores
PHP 5.6 / 7.0
1500
40
30
Varnish vs FPC
1000
-55%
20
10
6x
6x
0
500
Magento EE
-70%
100 threads
0
Catalog page
8
Millions
Throughput per hour
Response time (ms)
Benchmark testing: Large merchant
5x
5x
Add product to cart
6
90000
4
60000
2
30000
0
0
Catalog page view
+136%
120000
+54%
M1 PHP5.6
M2 PHP5.6
M2 PHP7
Cart operations
Throughput per hour
Response time (ms)
Benchmark testing: Large merchant
PHP 5.6 / 7.0
8000
Varnish vs FPC
-18%
6000
4000
24 cores
-44%
-45%
2000
Magento EE
100 threads
-64%
0
Guest checkout
Customer checkout
+140%
2500
M1 PHP5.6
2000
1500
+49%
+79%
+15%
1000
M2 PHP5.6
M2 PHP7
500
0
Guest checkouts
Customer checkouts
Client side performance evaluation scores
WebPageTest
PageSpeed
YSlow
M2
5 of 5 “A”
25 of 25
A.91
M1
4 of 5 “A”
16 of 25
B.88
Stress testing results
4
3.5
12 web-nodes
48 cores / 8GB
300
+150%
250
1 DB node
+117%
Magento EE
Throughput
3
2
Varnish vs FPC
200
2.5
+42%
1.5
150
1 balancer node
+22%
300 threads
M1 PHP5.6
100
1
M2 PHP5.6
0.5
50
0
0
M2 PHP7
Catalog operations
Orders per hour
Millions per hour
Thousands per hour
More performance tests
Product management
Order management
25+
50+
Concurrent threads
Concurrent threads
Import
Export
100K in 20 minutes
100K in 6 minutes
How to get maximum result
Best practices on configuration
Environment Settings
Web server
PHP
Database
Apache 2.2+
Nginx 1.7+
PHP 5.6.x or PHP7
Oracle and Percona
MySQL 5.6
Sample configuration
files
Sufficient memory limit
768M
Default settings
MaxClients
max_children_count
OpCache
Memory limit 512M
Accelerated files count 60K
No XDebug
Deployment flow
1. Deploy of static content
bin/magento setup:static-content:deploy
2. DI instructions preprocessing
bin/magento setup:di:compile
3. Magento Mode selection
Production nginx.conf .htaccess
Magento Configuration
Server side features
Indexers activation
Update on Schedule mode
Caches activation [Varnish]
Asynchronous emailing
Asynchronous OMS grid indexing
Client side features
Minification (CSS, JS, HTML)
JS resources bundling
Caching of static content
Catalog images compression
Q&A
Ready for your questions