Magento Presentation Layer

© 2016 Magento, Inc. Page | 1
Magento
Presentation Layer

PHP Architect, Magento Inc.
Volodymyr Kublytskyi

Agenda
• Magento Layered Architecture
• Content rendering and blocks
• Custom block class implementation recommendation
• Block and Full Pages Caches
• Public and Private Content

Magento Layered Architecture
• Presentation Layer
Controls user interaction and generates content
• Service Layer
Facade to Domain Layer, modules API
• Domain Layer
Business logic of application
• Persistence Layer
Interaction with DB or other storage

Presentation Layer and Block Concept
• Presentation Layer understands what content is requested by a user
and generates it
• Block is a unit of content and represents logically grouped piece of
data
• Blocks are composite (block may contain other blocks)

Block Anatomy
• Template provides markup snippet
• Block Class is a data provider for template. It encapsulates fetching
data logic
• <block/> and <referenceBlock/> layout declaration elements
define where block should be inserted on page and how it should
be rendered

Block Class: New Class Implementation
• Must be child of
MagentoFrameworkViewElementAbstractBlock
• Do NOT use setter methods
• Use as less properties and methods from AbstractBlock as
possible
• AbstractBlock will be eliminated in future

Block Class: Fetching Data
• Use Service and Domain Layer objects
• Inject all objects used by Block Class in constructor
(prefer Service Layer interfaces)
public function __construct(
CustomerRepositoryInterface $customerRepository
) {
$this->customerRepository = $customerRepository;
}
public function getCustomer() {
$customerId = $this->getCustomerIdFromRequest();
return $this->customerRepository->getById($customerId);
}

Block Class: Variations
• Implement reusable block classes
• Use $data array passed in constructor as Block Class configuration
• Use layout XML configuration to set $data array value
<block>
<arguments>
<argument name="include_hidden">true</argument>
</arguments>
</block>
if ($this->getData('include_hidden')) {
// modify search criteria
}

Block Class: Page Content Modification
Use declarative approach (configure block in layout XML files):
• Do NOT manipulate with layout object
• Do NOT generate HTML

Block Class: Additional Responsibilities
• Additional responsibilities are legacy code and the reason of
requirement to extend from AbstractBlock
• Provides methods for returned data formatting and encoding
• Triggers rendering of nested blocks
• Configure rendered content cache

Magento Cache
• Page rendering is an expensive operation
• Magento caches:
– layout configurations (layout cache type)
– block content (block_html cache type)
– full page (full_page cache type)
• internal (requires application bootstrap)
• external (Varnish, preferable for production, ESI support)
• Magento uses Cache-Contol HTTP header
• Block Classes are used for block_html and full_page cache
configuration

Block Class: Cache Configuration
• Defines is block content cacheable or not
• Provides:
– block cache key — a unique cache identifier (used to load and save
cache)
– cache tags — a list of strings that are used to group caches (used for
batch cache removal)
– cache life time
• Set correct cache type block_html
(do NOT override AbstractBlock::CACHE_GROUP)

Edge Side Includes
• Magento supports ESI
• To convert block content into ESI tag just specify ttl attribute in
the layout configuration
• Use ESI for frequently updated blocks available on many pages
• Warning: ESI usage creates additional load on server
(performance degradation)
<block ttl="86400" />

Full Page Cache Issues
• Pages cached with Full Page Cached are displayed to all users
– Different users (e.g. guests and authorized customers) should see
different content available by same URL
– Some pages contain sensitive customer data
• Magento allows to disable caching per block:
– Use cacheable boolean attribute of block in page configuration file
– Page which contains at least one not cacheable block is not cacheable
either
– Issue: not cacheable pages lead to performance degradation

Public Content Variations
• Inject MagentoFrameworkAppHttpContext to your class
from Presentation Layer and use setValue and unsValue
methods to add or remove public content dimension
• Result of Context::getVaryString is sent in X-Magento-Vary
cookie and is used as cache identifier in pair with requested URL
• Do not overuse: increasing of public content dimensions leads to
increasing of cache misses (performance degradation)
$this->context->setValue('loyalty', $loyaltyLevel);

Public and Private Content Segregation
• Replace private customer data with placeholders during page
generation
• Cache page with placeholder
• Load private data with not cacheable AJAX request
• Replace placeholders with actual data on client side
• Two strategies:
– Depersonalization
– Customer Data Segments

Private Content Delay

Depersonalization
• Custom markup is used
• JavaScript parses HTML and load blocks content
• Content updated on each POST/PUT/DELETE request
• Supported but not recommended
• Do not require custom JavaScript code for implementation
• Will be deprecated in scope of MAGETWO-56701

Customer Data: Overview
• Magento provides unified API to fetch private content
(customer/section/load)
• Magento splits private content into sections
• Magento automatically tracks change of private content and loads
updated sections
• Magento provides framework to bind private content data
(JavaScript variables) to HTML

Customer Data: Implement Own Section
• Create new class in <Vendor><Module>CustomerData namespace
• Implement
MagentoCustomerCustomerDataSectionSourceInterface (do not
forget declare dependency on Magento_Customer module)
• Your getSectionData method should return array which will be JSON
decoded (use simple types)
• Register your class in pool in di.xml
<type name="MagentoCustomerCustomerDataSectionPoolInterface">
<arguments>
<argument name="sectionSourceMap" xsi:type="array">
<item name="your-section-name"
xsi:type="string"
>VendorModuleCustomerDataYourSource</item>
</argument>
</arguments>
</type>

Customer Data: Trigger Update
• To trigger customer data section update on some action create
etc/sections.xml
• Trigger section updates only on POST/PUT/DELETE actions
• Magento uses section_data_ids cookie to track expired
customer data sections
<config>
<action name="*">
<section name="your-section-name" />
</action>
<action name="/some/*/action/pattern" />
</config>

Customer Data: Use On Client Side
• As simple as import in your AMD
• Or (useful for JavaScript console)
Important: yourSectionData is Knockout.js observable
define([
'Magento_Customer/js/customer-data'
], function (customerData) {
var yourSectionData = customerData.get(
'your-section-name'
);
}
var yourSectionData = require(
'Magento_Customer/js/customer-data'
).get('your-section-name');

Customer Data: Use On Page
Create JavaScript View Model AMD component that reads data from
Magento_Customer/js/customer-data

Add cacheable block in layout configuration with jsLayout argument
Do not be confused:
– <uiComponent /> — inserts UI Component in the page
– <item name="component">uiComponent</item> — registers new
JavaScript View Model as instance of
Magento_Ui/js/lib/core/collection
<block>
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="viewModelName" xsi:type="array">
<item name="component" xsi:type="string">
Vendor_Module/js/view-model

Use Knockout.js binding in phtml template
<div data-bind="scope: 'viewModelName'” data-role="placeholder">
<span data-bind="text: viewModelName().foo"></span>

</div>

Add x-magento-init script in phtml template
<script type="text/x-magento-init">
{
"[data-role=placeholder]": {
"Magento_Ui/js/core/app": <?php
/*@noEscape*/ echo $block->getJsLayout();
?>
}
}
</script>

Summary
• Keep code related to content rendering in Presentation Layer
• Split content into reusable blocks
• Use Block Classes to fetch data from Service Layer
• Do NOT create not cacheable pages
• Use Customer Section Data for private data cache

Thank You!
Q&A

Magento Presentation Layer

More Related Content

What's hot

Similar to Magento Presentation Layer

Recently uploaded

Magento Presentation Layer