1. DRUPAL 8
TEMPLATING WITH
TWIG

2. DRUPAL 7: POSITIVE
flexible

3. DRUPAL 7: POSITIVE
unified~ish data structures everywhere

4. DRUPAL 7: POSITIVE
anything is possible

5. DRUPAL 7: NEGATIVE
Drupal only (weird) syntax

6. DRUPAL 7: NEGATIVE
Object or Array?

7. DRUPAL 7: NEGATIVE
print or print render()?

8. DRUPAL 7: NEGATIVE
PHP is insecure

9. DRUPAL 7: NEGATIVE
PHP is insecure

10. DRUPAL 7: NEGATIVE
Too many template files

11. DRUPAL 7: NEGATIVE
Too many theme functions

12. DRUPAL 7: NEGATIVE
complex mix of subsystems

13. HARD TO LEARN
because
1. Mixed data types (strings, objects & arrays)
2. Different methods of printing variables (print, render)
3. Two ways to override markup: templates & theme fns
4. Too many template files & Too many theme fns
5. Insecure
6. Drupal-specific
7. A complex mix of subsystems

14. DRUPAL 8 THEME LAYER
let’s fix it
Accidental Drupal 8 “initiative” leader

15. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing

16. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases

17. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases
3. Provide tools

18. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases
3. Provide tools
4. Consolidate

19. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases
3. Provide tools
4. Consolidate
5. Visibility

20. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases
3. Provide tools
4. Consolidate
5. Visibility
6. Consistency

21. DRUPAL 8 THEME LAYER
Principals to guide us
1. Start with nothing
2. Build from use cases
3. Provide tools
4. Consolidate
5. Visibility
6. Consistency
7. Don't dumb it down
8. Organization should be driven by meaning and
semantics over technical convenience

22. TWIG
well documented

23. TWIG
extensible

24. TWIG
secure

25. TWIG
fast

26. TWIG
IDE integration

27. TWIG
recognizable syntax

28. TWIG
by Symfony’s author, Fabien Potencier

29. TWIG
print with {{ }}

30. TWIG
commands with {% %}

31. TWIG
comments with {# #}

32. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays)
2. Different methods of printing variables (print, render)
3. Two ways to override markup: templates & theme fns
4. Too many template files & Too many theme fns
5. Insecure
6. Drupal-specific
7. A complex mix of subsystems

33. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays)

34. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays)
All template variables are accessed
consistently:
node.nid
content.links

35. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED

36. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables (print, render)

37. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables (print, render)
Removed calls to render() from
templates:
{{ node.nid }}
{{ content.links }}

38. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED

39. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup

40. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup
All theme functions become templates.
node.tpl.php becomes node.html.twig
theme_table() becomes table.html.twig

41. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED

42. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme

43. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme
We’re working on this right now

44. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure

45. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure
All variables are *automatically* sanitized
and most PHP functions
cannot be executed in template files.

46. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED

47. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific

48. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific
Twig is used elsewhere on the web
is syntactically similar to other languages
and looks a lot more like HTML.

49. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific FIXED

50. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific FIXED
7. A complex mix of subsystems

51. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific FIXED
7. A complex mix of subsystems

52. D7 THEME LAYER

53. D8 IMPROVEMENTS
remove theme functions (and overrides) entirely

54. D8 IMPROVEMENTS
remove process.

55. D8 IMPROVEMENTS
remove render.

56. D8 IMPROVEMENTS
remove page alter?

57. D9 IMPROVEMENTS
remove preprocess?

58. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific FIXED
7. A complex mix of subsystems
We can remove all theme functions, render,
process & (maybe) preprocess too.

59. D7 PAIN POINTS
does Twig help?
1. Mixed data types (strings, objects & arrays) FIXED
2. Different methods of printing variables FIXED
3. Two ways to override markup FIXED
4. Too many template files & Too many theme @todo
5. Insecure FIXED
6. Drupal-specific FIXED
7. A complex mix of subsystems @todo

60. D7 PAIN POINTS
does Twig help?
YES!!!

61. TWIG: OTHER WINS
less code than PHP functions
D7
D8
theme_image becomes image.html.twig

62. TWIG: OTHER WINS
less code than PHP functions
theme_username becomes username.html.twig
D7
D8

63. TWIG: OTHER WINS
less code than PHP functions
theme_link becomes link.html.twig
D7
D8

64. TWIG: OTHER WINS
lots less code than PHP functions
theme_item_list becomes
item_list.html.twig
D7
D8

65. TWIG: OTHER WINS
Awesome template inspection
(“devel themer” in core)

66. TWIG: OTHER WINS
Awesome variable inspection
(devel’s dpm() in core)

67. TWIG: OTHER WINS
Template inheritance
comment-wrapper.html.twig before

68. TWIG: OTHER WINS
Template inheritance
comment-wrapper.html.twig after

69. TWIG: OTHER WINS
Template inheritance
comment-wrapper--forum.html.twig
(child template)

70. TWIG: OTHER WINS
Possible performance gains (Much TBD)

71. TWIG: OTHER WINS
Possible performance gains (Much TBD)
• PHPtemplate reads files from disk on every use
(or stat()s them with APC)
• Twig templates are read once & compiled into
classes

72. TWIG: OTHER WINS
Possible performance gains (Much TBD)
• PHPtemplate reads files from disk on every use
(or stat()s them with APC)
• Twig templates are read once & compiled into
classes
Rendering should get much faster when the same
content element appears multiple times on the
page.

73. TWIG: OTHER WINS
Possible performance gains (Much TBD)
• PHPtemplate reads files from disk on every use
(or stat()s them with APC)
• Twig templates are read once & compiled into
classes
Rendering should get much faster when the same
content element appears multiple times on the
page.
Consolidating many similar templates will result in
an additional gain.

74. TWIG: OTHER WINS
In-browser template editing finally safe.

75. TWIG: OTHER WINS
In-browser template editing finally safe.
• Saving PHP code in the database is a HUGE no-no.
• Twig is not PHP, and is safe to store!

76. TWIG: OTHER WINS
In-browser template editing finally safe.
• Saving PHP code in the database is a HUGE no-no.
• Twig is not PHP, and is safe to store!
Modules like ‘Contemplate’ (Content templates) will
finally be safe to use.

77. TWIG: OTHER WINS
In-browser template editing finally safe.
• Saving PHP code in the database is a HUGE no-no.
• Twig is not PHP, and is safe to store!
Modules like ‘Contemplate’ (Content templates) will
finally be safe to use.
In-browser template editing is something WordPress
users have been asking of Drupal for a very long time.

78. TWIG: OTHER WINS
Twig template files can be used on the front end, too.

79. TWIG: OTHER WINS
Twig template files can be used on the front end, too.
One template can return markup for both your PHP-
generated pages, as well as pages generated vi JS in
AJAX callbacks.

80. TWIG: OTHER WINS
Twig template files can be used on the front end, too.
One template can return markup for both your PHP-
generated pages, as well as pages generated vi JS in
AJAX callbacks.
We can use other open source libraries like TwigJS.
(https://github.com/schmittjoh/twig.js)

81. TWIG: OTHER WINS
2-way communication between UI and code.

82. TWIG: OTHER WINS
2-way communication between UI and code.
No broken UIs.

83. TWIG: OTHER WINS
2-way communication between UI and code.
No broken UIs.
Template files can be created first, and the Drupal site
can build itself* based on the presence and location of
variables in the templates.
*within reason

84. D8 THEME ENGINE PROFILING

85. WARMING OF TWIG IN D8
14%
86%
Yes
No

86. HOT THEMES
FontFolioZURB Foundation

87. ZURB Foundation
http://g.ua/WrKG

88. Links
1. Theming Drupal 8
2. Twig documentation (RU)
3. Twig coding standards
4. DrupalCon Portland 2013: USING TWIG: THE
NEW TEMPLATE ENGINE IN DRUPAL 8

89. Ask me
Taras Omelianenko
CEO
+380 97 508 84 74
Skype: taras.omelyanenko
t.omelianenko@dicslab.com
www.dicslab.com