Magento 2 and avoiding the rabbit hole

Magento 2 has brought the Magento community up to date with modern best practices and technology, which consequently means a learning curve, even for people who are very experienced with Magento 1. In this talk I will walk through some of my experiences so far in working with Magento 2, specifically focussed on the debugging side and how I use the pomodoro technique to avoid getting stuck down the rabbit hole.

1. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
MAGENTO 2 AND AVOIDING THE
RABBIT HOLE
Tony Brown

2. @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?

3. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
•Worked on Magento since 1.2
•Technical Director @ Space 48
•Love learning and collaborating

4. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Overview
•Magento 1 to Magento 2
•A learning / debugging technique
•Magento 2 development environment
•Problem solving example in M2

5. @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

6. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
What does this mean?
•Your WTF per minute rate is going to increase for a
while!

7. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Learning / Debugging Technique
•Debugging and Magento : https://youtu.be/xCjPQfuxxxQ
•Time can run away
•Regularly stepping back
•Pomodoro technique

8. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Dev Environment / Infrastructure
•VM via Vagrant
•Nginx, PHP-PFM (v7) with Xdebug
•Percona MySql
•Varnish
•SSL

9. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Varnish
Nginx
8080
HTTP
80
Varnish
Nginx
8080
HTTPS
80
Nginx
443

10. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Problem Solving Example

11. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

12. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

13. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
The problem
Varnish for Full Page Cache
+
SSL for the front-end
=
No navigation menu in Luma

14. @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

15. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

16. @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

17. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Are there any errors in the Magento Logs?
•Are there any console errors?
•Examine the HTML output?

18. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Output over HTTPS

19. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Output over HTTP

20. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Examine Varnish cache headers

21. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

22. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

23. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

24. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Find the block definition
/vendor/magento/module-theme/view/frontend/layout/default.xml

25. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Step through the code:
•/vendor/magento/module-page-cache/Model/
App/FrontController/VarnishPlugin.php

28. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
HTTPS = Not working
HTTP = working

29. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

30. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Visit the ESI Controller directly

31. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
HTTPS HTTP
magento2.local/page_cache/block/esi/blocks/[%22catalog.topnav%22]/
handles/…

32. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Verify the ESI Controller is being called by Varnish

34. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps
•Looking for Varnish logs?… use varnishlog

35. @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.

36. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
Debugging Steps

37. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT

38. @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!

39. @TONEGOLF71
@SPACE48ERS
#MAGETITANSIT
THANKS!!
Any questions?