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.

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
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
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!