Andrii Yatsenko "Make the most of Twig"

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Make the Most
of Twig
Andrey Yatsenko
Oro Inc.

www.oroinc.com
Andrey Yatsenko
Passionate about Symfony & DX
- Trainer
- Developer
- Community Evangelist

7 offices in 5 Countries
(USA , Germany, France, Ukraine,
Poland)
Global Partner Network
Open-source applications
About Or...

Twig is a templating engine

Why am I talking about Twig?
… because low entry level is the enemy of developers

Why Twig in 2019?
Pros
● Easy to learn
● Fast
● Secure
● Flexible
● Cleans errors
● Mature & popular
● Good support
● Suit...

Twig
Used by many Open-Source projects like

At OroCommerce Twig is used for
● Regular page templates
● User editable email templates (Sandbox #1)
● User editable CMS ...

Typical OroCommerce Project
Vendor packages:
● 2500+ blocks in 1500+ templates
● 250+ macros
● 250+ functions
● 100+ filte...

Ways to organize TWIG templates used in OroCommerce
Complexity
● Template inheritance
● Includes
● Macros
● Functions
● Sy...

Complexity Recommendations
● Prefer inheritance over includes
● Add blocks only when they are needed
● Prefer macros over ...

Calling Event Dispatcher from the Template

Calling Event Dispatcher from the Template

Calling Event Dispatcher from the Template

Placeholders

Placeholders

www.oroinc.com
Tree Representation of a Page:
• root
• header
• body
• sidebar
• main_content
• footer
Layout Tree

www.oroinc.com
Layout Tree:
• root
• header block
• body
• sidebar another
block
• main_content
• footer
Each Tree Item is...

www.oroinc.com
Blocks & Block Types
Block
• id
• parent id
• options
• block type
Block Types
• container - can have child...

www.oroinc.com
Manipulate the Layout Tree
Resources/views/layouts/orovibe/oro_product_frontend_product_view/product_view.y...

www.oroinc.com
Layout Tree:
• root
• header
• body
• sidebar
• main_content
• footer
Each Layout Block is Rendered with a ...

www.oroinc.com
Layout Tree:
• root
• header
• body
• sidebar
• main_content
• footer
Each Layout Block is Rendered with a ...

www.oroinc.com
Twig blocks are organized into Block Theme Twig files
Resources/views/layouts/blank/oro_product_frontend_pr...

www.oroinc.com
Apply Block Themes
With Layout update Yaml file

TWIG Allows too much

TWIG Allows too much
Solution: Twig Sandbox Extension

Sandbox
Use cases in OroCommerce:
● CMS pages
● Email Templates

Twig Sandbox for CMS Pages

Twig Sandbox for CMS Pages

Twig Sandbox for Email Templates

Sandbox & WYSIWYG Issues

Sandbox & WYSIWYG Issues

Twig Security
1. Automatic output escaping
2. Easy to change escaping strategy or disable auto escaping in different conte...

Twig Performance
1. Compiled to PHP
2. Symfony sub-requests & edge side includes
3. Output caching is not the TWIG respons...

Is it easy to mess up in a complex
project?
… Let’s find out the solution

Typical OroCommerce Project
Vendor packages:
● 2500+ blocks in 1500+ templates
● 250+ macros
● 250+ functions
● 100+ filte...

How to change the copyright in the footer?

# 1 Symfony Profiler

# 2 PhpStorm > Twig Integration

# 2 PhpStorm > Twig Integration

# 3 Symfony > PhpStorm Integration

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

#4 PhpStorm 2019.1 Twig Breakpoints

# 5 Dump variables with TwigExtensionDebugExtension

# 6 Dump Local Twig Reference
Dumps:
● Functions
● Filters
● Tests
● Globals
● Namespaces
To have a quick reference:
1. Du...

#7 Oro Twig Inspector
Find twig templates and blocks used for rendering HTML pages
https://github.com/oroinc/twig-inspecto...

#7 Oro Twig Inspector

#7 Oro Twig Inspector

Summary
Pros
1. Easy to learn
2. Fast
3. Secure
4. Flexible
5. Cleans errors
6. Mature & Popular
7. Good support
8. Suitab...

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

Thank you!

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1011447 views
Storytelling For The Web: Integrate... by Chiara Aliotta 919244 views
Artificial Intelligence, Data and C... by OECD Directorate ... 820562 views
How to Leverage AI to Boost Employe... by SocialHRCamp 342424 views
2024 State of Marketing Report – by... by Marius Sescu 195380 views
Everything You Need To Know About C... by Expeed Software 218594 views

View on Slideshare

1 of 55 Ad

View on Slideshare

1 of 55 Ad