Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Andrey Yatsenco

November 22, 2019
Tweet

More Decks by Andrey Yatsenco

Other Decks in Technology

Transcript

  1. Make the Most of Twig

    View full-size slide

  2. www.oroinc.com
    Andrey Yatsenko
    Passionate about Symfony & DX
    - Developer advocate
    - Software Engineer
    - Trainer
    - Symfony 3 Certified Developer

    View full-size slide

  3. Why Twig in 2019?
    Pros
    ● Written in PHP
    ● Easy to learn
    ● Fast
    ● Secure
    ● Flexible

    View full-size slide

  4. Why Twig in 2019?
    Used by many Open-Source projects like

    View full-size slide

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

    View full-size slide

  6. 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

    View full-size slide

  7. Why am I talking about Twig?

    View full-size slide

  8. Page Templates
    At OroCommerce Twig is Used for
    Email Templates
    CMS Pages

    View full-size slide

  9. Product Listing Page in OroCommerce

    View full-size slide

  10. Product Listing Page Controller in OroCommerce

    View full-size slide

  11. Product Listing Page Controller in OroCommerce

    View full-size slide

  12. Typical OroCommerce Project
    Vendor packages An application (src/)
    ● 2500+ blocks in 1500+ templates
    ● 250+ macros
    ● 250+ functions
    ● 100+ filters
    ● 300+ blocks
    ● in 150+ templates

    View full-size slide

  13. How to Organize Twig Templates in a Big Project?
    Complexity
    Extensibility

    View full-size slide

  14. Inheritance vs Includes

    View full-size slide

  15. Macros vs Includes

    View full-size slide

  16. Twig Functions vs Sub-Requests

    View full-size slide

  17. Extensibility

    View full-size slide

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

    View full-size slide

  19. Calling Event Dispatcher from the Template

    View full-size slide

  20. Calling Event Dispatcher from the Template

    View full-size slide

  21. Calling Event Dispatcher from the Template

    View full-size slide

  22. Calling Event Dispatcher from the Template

    View full-size slide

  23. Placeholders

    View full-size slide

  24. Placeholders

    View full-size slide

  25. Placeholders

    View full-size slide

  26. Placeholders

    View full-size slide

  27. Placeholders

    View full-size slide

  28. Placeholders

    View full-size slide

  29. How Many Placeholders Do We Need for PLP?

    View full-size slide

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

    View full-size slide

  31. 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

    View full-size slide

  32. www.oroinc.com
    Blocks & Block Types
    children:
    - page_container [container]
    - top_stycky_panel [stycky_panel]
    - notification [block]
    - logo_print [logo]
    id: wrapper

    View full-size slide

  33. www.oroinc.com
    Manipulate the Layout Tree
    product_view_layout.yml

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. User Editable Dynamic Content

    View full-size slide

  37. Twig Allows Too Much

    View full-size slide

  38. Solution: Twig Sandbox Extension

    View full-size slide

  39. Twig Sandboxes in OroCommerce
    Email Templates
    CMS Pages

    View full-size slide

  40. Twig Sandbox for CMS Pages

    View full-size slide

  41. Twig Sandbox for CMS Pages

    View full-size slide

  42. Twig Sandbox for Email Templates

    View full-size slide

  43. Is it easy to mess up?

    View full-size slide

  44. Typical OroCommerce Project
    Vendor packages An application (src/)
    ● 2500+ blocks in 1500+ templates
    ● 250+ macros
    ● 250+ functions
    ● 100+ filters
    ● 300+ blocks
    ● in 150+ templates

    View full-size slide

  45. How to change the copyright in the footer?

    View full-size slide

  46. # 1 Symfony Profiler

    View full-size slide

  47. # 2 PhpStorm > Twig Integration

    View full-size slide

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

    View full-size slide

  49. # 3 Symfony > PhpStorm Integration

    View full-size slide

  50. #4 PhpStorm 2019.1 Twig Breakpoints

    View full-size slide

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

    View full-size slide

  52. # 6 Dump Local Twig Reference
    Dumps:
    ● Functions
    ● Filters
    ● Tests
    ● Globals
    ● Namespaces

    View full-size slide

  53. #7 Twig Inspector

    View full-size slide

  54. #7 Twig Inspector

    View full-size slide

  55. #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

    View full-size slide

  56. 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

    View full-size slide

  57. Summary
    Cons
    1. Easy to mess up in a complex project. Easy to navigate.
    2. Allows too much. Easy to limit the functionality.

    View full-size slide

  58. Twig 3 is Released
    ● A ton of small tweaks
    ● Better error messages
    ● Better performance
    ● Better consistency
    ● Cleaner code
    To upgrade just update the namespaces

    View full-size slide