@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

MAGENTO 2 AND AVOIDING THE RABBIT HOLE

Tony Brown

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Imagine…• You’re on the “learn Magento 2” journey

• You hit a tricky problem which isn’t easy to diagnose

• What do you do?

• How can you avoid losing time when learning / fixing problems?

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

• Worked on Magento since 1.2

• Technical Director @ Space 48

• Love learning and collaborating

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Overview

• Magento 1 to Magento 2

• A learning / debugging technique

• Magento 2 development environment

• Problem solving example in M2

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Magento 1 to Magento 2• Architecture changes

• Makes it easier to write tests

• More isolation of code

• More component friendly

• Mechanisms for more targeted changes

• Test coverage

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

What does this mean?

• Your WTF per minute rate is going to increase for a while!

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Learning / Debugging Technique

• Debugging and Magento : https://youtu.be/xCjPQfuxxxQ

• Time can run away

• Regularly stepping back

• Pomodoro technique

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Dev Environment / Infrastructure

• VM via Vagrant

• Nginx, PHP-PFM (v7) with Xdebug

• Percona MySql

• Varnish

• SSL

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Varnish

Nginx

8080

HTTP

80

Varnish

Nginx

8080

HTTPS

80

Nginx

443

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Problem Solving Example

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

The problem

Varnish for Full Page Cache

+

SSL for the front-end

=

No navigation menu in Luma

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Research for M2 FPC

• Magento Stackexchange

• Same problem, but no answers! http://goo.gl/xK7VQi

• Alan Kent article

• http://devdocs.magento.com

• Other blog posts inc. Alan Storm: http://goo.gl/o4Z107

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

FPC with Varnish

• Varnish holds content responses for URL requests

• Magento decides if a page should be cached or not

• Ajax is used for private data

• ESI is used for finer control of public cache

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

• Are there any errors in the Magento Logs?

• Are there any console errors?

• Examine the HTML output?

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Output over HTTPS

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Output over HTTP

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

• Examine Varnish cache headers

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps• Find the block definition

/vendor/magento/module-theme/view/frontend/layout/default.xml

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

• Step through the code:

• /vendor/magento/module-page-cache/Model/App/FrontController/VarnishPlugin.php

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

HTTPS = Not working

HTTP = working

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

• Visit the ESI Controller directly

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

HTTPS HTTP

magento2.local/page_cache/block/esi/blocks/[%22catalog.topnav%22]/handles/…

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

• Verify the ESI Controller is being called by Varnish

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps• Looking for Varnish logs?… use varnishlog

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps• Search for the error

• An old Varnish ticket was found:

By default ignore an <esi:include> with src=" https://..."

Feature +esi_ignore_https treats it as http://... instead.

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Debugging Steps

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

Conclusion

• Magento 2 has a tricky learning curve

• Take regular breaks to avoid wasting time

• The Varnish FPC implementation is pretty cool!

@TONEGOLF71 @SPACE48ERS

#MAGETITANSIT

THANKS!!

Any questions?