Make the most of twig

Make the most of twig

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 a sandbox, a unique but not a widely used feature that is creating 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.

6d1d6c68fd6df4614c2f07b7ffa0a7b0?s=128

Andrey Yatsenco

November 22, 2019
Tweet

Transcript

  1. Make the Most of Twig

  2. www.oroinc.com Andrey Yatsenko Passionate about Symfony & DX - Developer

    advocate - Software Engineer - Trainer - Symfony 3 Certified Developer
  3. None
  4. Twig

  5. Why Twig in 2019? Pros • Written in PHP •

    Easy to learn • Fast • Secure • Flexible
  6. Why Twig in 2019? Used by many Open-Source projects like

  7. Why Twig in 2019? Pros • Written in PHP •

    Easy to learn • Fast • Secure • Flexible • Mature & popular • Clean errors • Good support
  8. Why Twig in 2019? Pros Cons • Written in PHP

    • Easy to learn • Fast • Secure • Flexible • Mature & popular • Clean errors • Good support • Easy to mess up in a complex project • Allows too much
  9. Why am I talking about Twig?

  10. Page Templates At OroCommerce Twig is Used for Email Templates

    CMS Pages
  11. Product Listing Page in OroCommerce

  12. Product Listing Page Controller in OroCommerce

  13. Product Listing Page Controller in OroCommerce

  14. Typical OroCommerce Project Vendor packages An application (src/) • 2500+

    blocks in 1500+ templates • 250+ macros • 250+ functions • 100+ filters • 300+ blocks • in 150+ templates
  15. How to Organize Twig Templates in a Big Project? Complexity

    Extensibility
  16. Complexity

  17. Inheritance vs Includes

  18. Macros vs Includes

  19. Twig Functions vs Sub-Requests

  20. Extensibility

  21. Allow Adding Fields to the User Profile from an Extension

  22. Rendering

  23. Rendering

  24. Calling Event Dispatcher from the Template

  25. Calling Event Dispatcher from the Template

  26. Calling Event Dispatcher from the Template

  27. Calling Event Dispatcher from the Template

  28. Placeholders

  29. Placeholders

  30. Placeholders

  31. Placeholders

  32. Placeholders

  33. Placeholders

  34. None
  35. How Many Placeholders Do We Need for PLP?

  36. www.oroinc.com Layout Tree Tree Representation of a Page:

  37. www.oroinc.com Blocks & Block Types options: route_name: homepage image_url: website_logo.png

    id: logo options: route_name: ~ image_url: grayscale_logo.png id: logo_print
  38. www.oroinc.com Blocks & Block Types children: - page_container [container] -

    top_stycky_panel [stycky_panel] - notification [block] - logo_print [logo] id: wrapper
  39. www.oroinc.com Manipulate the Layout Tree product_view_layout.yml

  40. www.oroinc.com Each Layout Block is Rendered with a Twig Block

    base_layout.html.twig
  41. www.oroinc.com Each Layout Block is Rendered with a Twig Block

    base_layout.html.twig
  42. User Editable Dynamic Content

  43. Twig Allows Too Much

  44. Solution: Twig Sandbox Extension

  45. Twig Sandboxes in OroCommerce Email Templates CMS Pages

  46. Twig Sandbox for CMS Pages

  47. Twig Sandbox for CMS Pages

  48. Twig Sandbox for Email Templates

  49. Is it easy to mess up?

  50. Typical OroCommerce Project Vendor packages An application (src/) • 2500+

    blocks in 1500+ templates • 250+ macros • 250+ functions • 100+ filters • 300+ blocks • in 150+ templates
  51. How to change the copyright in the footer?

  52. # 1 Symfony Profiler

  53. # 2 PhpStorm > Twig Integration

  54. # 3 Symfony > PhpStorm Integration 1. Update Symfony configuration

    2. On Windows or Linux install https://github.com/aik099/PhpStormProtocol
  55. # 3 Symfony > PhpStorm Integration

  56. #4 PhpStorm 2019.1 Twig Breakpoints

  57. # 5 Dump all Twig Variables Available in a Template

  58. # 6 Dump Local Twig Reference Dumps: • Functions •

    Filters • Tests • Globals • Namespaces
  59. #7 Twig Inspector

  60. #7 Twig Inspector

  61. #7 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
  62. Summary Pros 1. Easy to learn 2. Fast 3. Secure

    4. Flexible 5. Clear errors 6. Mature & Popular 7. Good support 8. Suitable for big & complex projects
  63. Summary Cons 1. Easy to mess up in a complex

    project. Easy to navigate. 2. Allows too much. Easy to limit the functionality.
  64. Twig 3 is Released • A ton of small tweaks

    • Better error messages • Better performance • Better consistency • Cleaner code To upgrade just update the namespaces
  65. Thank you!