Magento Presentation Layer

© 2016 Magento, Inc. Page | 1

MagentoPresentation 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 LayerControls user interaction and generates content

• Service LayerFacade to Domain Layer, modules API

• Domain LayerBusiness logic of application

• Persistence LayerInteraction 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 Magento\Framework\View\Element\AbstractBlock

• 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 Magento\Framework\App\Http\Context 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 Magento\Customer\CustomerData\SectionSourceInterface

(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="Magento\Customer\CustomerData\SectionPoolInterface"> <arguments> <argument name="sectionSourceMap" xsi:type="array"> <item name="your-section-name" xsi:type="string" >Vendor\Module\CustomerData\YourSource</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

Date post:	08-Jan-2017
Category:	Engineering
Upload:	volodymyr-kublytskyi
View:	287 times
Download:	0 times

Magento Presentation Layer

Engineering