O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Andrii Yatsenko "Make the most of Twig"

139 visualizações

Publicada em

Twig is the most powerful templating engine in the PHP world that enables us to create highly complex projects with hundreds of multi-level extended templates, thousands of blocks, functions, filters, tests, and macros. It also offers sandbox, a unique but not a widely used feature, that allows you to create secure user editable templates. In addition, there are a number of handy built-in and external debugging tools available in the Twig ecosystem to simplify the day-to-day work process for a Twig designer.

In this presentation, I will talk about how extensively we use Twig in a complex open-source e-commerce project.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Andrii Yatsenko "Make the most of Twig"

  1. 1. Make the Most of Twig Andrey Yatsenko Oro Inc.
  2. 2. www.oroinc.com Andrey Yatsenko Passionate about Symfony & DX - Trainer - Developer - Community Evangelist
  3. 3. 7 offices in 5 Countries (USA , Germany, France, Ukraine, Poland) Global Partner Network Open-source applications About Oro Inc. www.oroinc.com
  4. 4. Twig is a templating engine
  5. 5. Why am I talking about Twig? … because low entry level is the enemy of developers
  6. 6. Why Twig in 2019? Pros ● Easy to learn ● Fast ● Secure ● Flexible ● Cleans errors ● Mature & popular ● Good support ● Suitable for big & complex projects Cons ● Easy to mess up in a complex project ● Allows too much
  7. 7. Twig Used by many Open-Source projects like
  8. 8. At OroCommerce Twig is used for ● Regular page templates ● User editable email templates (Sandbox #1) ● User editable CMS pages (Sandbox #2)
  9. 9. User Profile Page in OroCommerce
  10. 10. User Profile Controller in OroCommerce
  11. 11. User Profile Controller in OroCommerce
  12. 12. Typical OroCommerce Project Vendor packages: ● 2500+ blocks in 1500+ templates ● 250+ macros ● 250+ functions ● 100+ filters An application (src/): ● 300+ blocks ● in 150+ templates
  13. 13. Ways to organize TWIG templates used in OroCommerce Complexity ● Template inheritance ● Includes ● Macros ● Functions ● Symfony sub-requests Extensibility ● Calling Event Dispatcher from the template ● Placeholders ● Layout Tree
  14. 14. Complexity Recommendations ● Prefer inheritance over includes ● Add blocks only when they are needed ● Prefer macros over includes ● Functions for the business logic ● Sub-Requests are slower than twig functions
  15. 15. Calling Event Dispatcher from the Template
  16. 16. Calling Event Dispatcher from the Template
  17. 17. Calling Event Dispatcher from the Template
  18. 18. Placeholders
  19. 19. Placeholders
  20. 20. www.oroinc.com Tree Representation of a Page: • root • header • body • sidebar • main_content • footer Layout Tree
  21. 21. www.oroinc.com Layout Tree: • root • header block • body • sidebar another block • main_content • footer Each Tree Item is a Layout Block
  22. 22. www.oroinc.com Blocks & Block Types Block • id • parent id • options • block type Block Types • container - can have children • block - cannot have children • text • logo • … • order_total • … • product_datagrid • ...
  23. 23. www.oroinc.com Manipulate the Layout Tree Resources/views/layouts/orovibe/oro_product_frontend_product_view/product_view.yml
  24. 24. www.oroinc.com Layout Tree: • root • header • body • sidebar • main_content • footer Each Layout Block is Rendered with a Twig Block
  25. 25. www.oroinc.com Layout Tree: • root • header • body • sidebar • main_content • footer Each Layout Block is Rendered with a Twig Block
  26. 26. www.oroinc.com Twig blocks are organized into Block Theme Twig files Resources/views/layouts/blank/oro_product_frontend_product_view/sku.html.twig
  27. 27. www.oroinc.com Apply Block Themes With Layout update Yaml file
  28. 28. TWIG Allows too much
  29. 29. TWIG Allows too much Solution: Twig Sandbox Extension
  30. 30. Sandbox Use cases in OroCommerce: ● CMS pages ● Email Templates
  31. 31. Twig Sandbox for CMS Pages
  32. 32. Twig Sandbox for CMS Pages
  33. 33. Twig Sandbox for Email Templates
  34. 34. Sandbox & WYSIWYG Issues
  35. 35. Sandbox & WYSIWYG Issues
  36. 36. Twig Security 1. Automatic output escaping 2. Easy to change escaping strategy or disable auto escaping in different context
  37. 37. Twig Performance 1. Compiled to PHP 2. Symfony sub-requests & edge side includes 3. Output caching is not the TWIG responsibility
  38. 38. Is it easy to mess up in a complex project? … Let’s find out the solution
  39. 39. Typical OroCommerce Project Vendor packages: ● 2500+ blocks in 1500+ templates ● 250+ macros ● 250+ functions ● 100+ filters An application (src/): 300+ blocks in 150+ templates
  40. 40. How to change the copyright in the footer?
  41. 41. # 1 Symfony Profiler
  42. 42. # 2 PhpStorm > Twig Integration
  43. 43. # 2 PhpStorm > Twig Integration
  44. 44. # 3 Symfony > PhpStorm Integration
  45. 45. # 3 Symfony > PhpStorm Integration 1. Update Symfony configuration 2. On Windows or Linux install https://github.com/aik099/PhpStormProtocol
  46. 46. #4 PhpStorm 2019.1 Twig Breakpoints
  47. 47. # 5 Dump variables with TwigExtensionDebugExtension
  48. 48. # 6 Dump Local Twig Reference Dumps: ● Functions ● Filters ● Tests ● Globals ● Namespaces To have a quick reference: 1. Dump to file: php bin/console debug:twig --format=md > twig-reference.md 1. Save to git: git add twig-reference.md
  49. 49. #7 Oro Twig Inspector Find twig templates and blocks used for rendering HTML pages https://github.com/oroinc/twig-inspector ● Comments with template and block names ● Visual navigation ● Open the template in your favorite IDE
  50. 50. #7 Oro Twig Inspector
  51. 51. #7 Oro Twig Inspector
  52. 52. Summary Pros 1. Easy to learn 2. Fast 3. Secure 4. Flexible 5. Cleans errors 6. Mature & Popular 7. Good support 8. Suitable for big & complex projects
  53. 53. Summary Cons 1. Easy to mess up in a complex project. Easy to navigate if you know all the Twig features and how to use integrations with PhpStorm and Symfony 2. Allows too much. Easy to limit the functionality with Sandbox
  54. 54. Thank you!

×