Slide del corso a cura di Andrea Panisson sullo sviluppo frontend in Drupal 8

2. Drupal 8 frontend
development
for dummies

3. Exausted?
Almost done…*
*only 2 more hours

4. Andrea Panisson… Who?
I work in
as frontend developer.
I care UI, IA, Drupal Theming and I care about
clients.

5. What’s new in Drupal 8 for
themers
D7
 PHPTemplate
 Theme functions +
template files
 Structured markup in core
and ‘hardcoded’ classes
 HTML
D8
 Twig
 Template files
 Minimal markup and
classes in core
 HTML5 in core

6. Twig?
Twig is a modern PHP-based compiled
templating language.

7. What's new in Drupal 8 for themers
&
the Twig template engine.

8.  PHPtemplate
 theme functions
 markup in core
Farewell to

9. Welcome to
 No more markup in core
 All through template files
 HTML5
 Twig

10. All through template files

11. Twig: what & why
What?
 A template engine for PHP
Why?
 Twig was created by people behind Synfony2
 Synfony2 was integrated in Drupal 8 core

12. Twig was chosen because it was the best choice after
comparing various templating languages.
"… We don't have Twig because we have Symfony. It's
more that, we have Twig because it's AWESOME"
- Scott Reeves, @Cottser
“Twig…because it's AWESOME”

13. But why abandoning
PHPtemplate?
1. Syntax
2. Inconsistency
3. Complexity
4. Redundancy
5. Security

14. “Twig…because it's
AWESOME”
Mixed data types in template files

15. #1. D8 syntax: TWIG
All variables are
printed the same way

16. #2. Inconsistency
D7different ways to do the same thing:
 Template files or Theme functions.
 Theme functions or render arrays
D8
 Only template files
 Only render arrays

17. #3. D7: complexity
Drupal 7 was funny!

18. #3. D8: less complexity
D8 is boring!

19. #4. D7: redundancy
There's a lot of duplicated code in themes, we often have multiple
files with the same lines of code.

20. #4. D8: less redundancy
No need to repeat code between templates, we can extend
templates with Twig.

21. #5. Security
D7
In a PHPTemplate file you can print all sort of unsanitized data,
even delete a table from your DB.
D8
In Twig this is not possible, Twig's autoescape feature is enabled by
default.

22. TWIG: no more conflict
backend - frontend
They are now separated!

23. TWIG: easy to learn!

24. Twig: syntax

25. Twig: no more var drilling
Drupal 7 and PHPtemplate
Drupal 8 and Twig

26. Twig: functions (filters)

27. Twig: |Functions (filters)

28. Twig: translate

29. Twig: controls

30. Twig: loops

31. Twig: setting vars

32. Twig: blocks
page.html.twig

33. Twig: blocks
page--front.html.twig

34. Twig: includes
Template files are reusable, thanks to Twig includes
http://twig.sensiolabs.org/doc/tags/include.html
{% include “footer.html.twig" %}
Or using namespaces:
{% include “@my_theme/partials/footer.html.twig" %}

35. Twig coding standard (T.c.s.)
 Generic Twig coding standards:
http://twig.sensiolabs.org/doc/coding_standards.html
 Twig in Drupal coding standards:
http://drupal.org/node/1823416

36. T.c.s. - HTML attributes
In Drupal core, we will print only the class attribute specially, all
the others will be printed as part of {{ attributes }}.
The reason for this is that it needs to be very easy for front end
developers to be able to add a class, anywhere

37. T.c.s. - Whitespaces

38. T.c.s. - Comments
 Singleline:
 Multiline

39. Twig docs
twig.sensiolabs.org

40. And so, Twig advantages:
 a clear separation between the logic and the
view
 no more PHP code inside your template files
 it's not only used in Drupal core, so it's not a
Drupaly-thing

41. and Twig disadvantages:
thing to learn

42. YAML
Yet Another Markup Language*
* YAML Ain't Markup Language
"YAML is a human friendly data serialization standard for all
programming languages."
-yaml.org
Pronounced “yamel” (rhymes with camel).

43. YAML
sites/default/services.yml

44. Why YAML?
 YAML is both human editable and machine readable.
 .yml files are not Drupal specific like .info files.
And why not XML?
 XML would require a Drupal specific schema.
Or JSON?
 JSON doesn't allow comments.
 Non-ASCII characters require escaping in JSON.

45. Theme folder structure
The directory structure
of Drupal 8 has
changed!
https://www.drupal.org/node/2349803

46. Location of themes

47. /themes
For themes that should be available to all sites.
/sites/{site}/themes
For themes that should be available on a specific site (on a
multisite installation).
Location of themes

48. Theme folder structure

49. Most common theme files
*.info.yml
*.libraries.yml
*.breakpoints.yml
*.theme
Theme folder structure: https://www.drupal.org/node/2349803

50. *.info.yml (ex *.info)
 A theme must contain an .info.yml file to define the theme.
 Among other things the .info.yml files defines meta data, style
sheets, and block regions.
 This is the only required file in the theme.

51. *.libraries.yml
 The .libraries.yml file is used to define JavaScript and CSS
libraries that can be loaded by the theme.
 A library as a collection of CSS and JS.

52. *.libraries.yml
Libraries are called in the info file:
and defined in the *.libraries.yml file:

53. *.breakpoints.yml
 Breakpoints define where a responsive design needs to
change in order to respond to different devices.
 Breakpoints are defined in a .breakpoints.yml file

54. *.theme (ex template.php)
 The .theme file is a PHP file that contains all the conditional
logic and data (pre)processing of the output.

55. The theme layer

56. The new theme layer

57. Bye bye theming functions!
ALL GONE: All of the theme() functions have been
converted to Twig templates.

58. New theme hooks
 Theme suggestions
hook_theme_suggestions()
hook_theme_suggestions_HOOK()
 Theme suggestions alter:
hook_theme_suggestions_alter(),
hook_theme_suggestions_HOOK_alter()
 Theme preprocess:
THEME_preprocess(&$variables, $hook),
THEME_preprocess_HOOK(&$variables)
https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8

59. Removed process hooks
 The process layer (hook_process and
hook_process_HOOK) is gone!

60. The preprocess layer
 The preprocess layer still exists, but it's used for a different
purpose.
 In Drupal 8, the preprocess layer should not be used to add css
classes.
 This should be done in the template files.
https://www.drupal.org/node/2325067

61. Drupal 8 core themes

62. Drupal 8 core themes
 bartik
 seven
 stark
 classy
 stable
Backwards compatibility
throughout the Drupal 8 cycle
Default admin theme
Default theme
Drupal core markup test theme

63. Drupal 8 core themes: bartik
A flexible,
recolorable
theme with
many regions
and a
responsive,
mobile-first
layout.
The default
theme in
Drupal 8.

64. Drupal 8 core themes: seven
The default
administration
theme for Drupal
8.
Now fully
responsive.

65. Drupal 8 core themes: stark
An intentionally plain
theme with almost
no styling to
demonstrate default
Drupal’s HTML and
CSS.
Stark only outputs
html and css from
modules.
 Add no CSS
 Add no templates

66. Drupal 8 core themes: stable
The Stable theme will function as a backwards
compatibility layer for Drupal 8's core markup, CSS and JS.
A theme will always use Stable as the base theme unless
you set
in your theme .info.yml file.

67. Drupal 8 core themes: classy
The classes from core have been moved into the classy
base theme.
Now all template files in core are “classless”.
Is the base theme that Seven and Bartik will extend from.

68. https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core
@mortendk

69. Drupal 8 core templates
core/modules/system/templates

70. New CSS architecture
SMACSS
Scalable and Modular Architecture for CSS
• Base
• Layout
• Component
• State
• Theme
BEM
Block Element Modifier naming convention
.block__element--modifier

71. Development tools!

72. Development tools
Before start with theme development (Drupal
development) let’s get some tools:
Drush: http://www.drush.org
Drupal Console: http://drupalconsole.com
Devel module (& Kint): http://drupal.org/project/devel

73. Installing composer…
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
https://getcomposer.org/doc/00-intro.md#globally

74. Install Drupal console / drush
Edit (global) composer.json and then run composer update

75. Install Drupal console / drush
composer global require drush/drush:dev-master
composer global require drupal/console:@stable
Remember to add the binaries composer directory to your
path, i.e.
$ echo "PATH=$PATH:~/.composer/vendor/bin" >> ~/.bash_profile

76. Most useful drush commands:
 Clear cache
drush cr
 Download / enable a module
drush en module_name
 HELP ME!
drush help

77. Most useful console
commands:
 Generate a theme:
console generate:theme
 More to come... *
* Please, RTFM!

78. Enable debugging:
the manual way
 Locate services.yml file (sites/default/services.yml)
 If services.yml does not yet exist copy
default.services.yml and rename it to services.yml
 Edit the services.yml file and enable one or more of the
debugging options
 Rebuild cache

79. Enable debugging:
the manual way (continue)
parameters:
twig.config:
# Twig debugging:
debug: true
# Twig auto-reload:
auto_reload: true
# Twig cache:
cache: true

80. Enable debugging:
Drupal Console
https://www.drupal.org/node/1903374
console site:mode dev

81. Disable render cache
Drupal caches any rendering it performs for
blocks and entities, to speed up subsequent
page loads.
This means that changes to Twig templates for
these will not take effect immediately.

82. Disable render cache
 add the following lines at the bottom of settings.php
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}
 copy sites/example.settings.local.php to
sites/default/settings.local.php
 clear the Drupal caches.

83. Disable render cache
In settings.local.php:
 disable the render cache (this includes the page cache).
$settings['cache']['bins']['render'] = 'cache.backend.null';
 disable Dynamic Page Cache.
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

84. Devel and Kint
drush dl devel
Kint, the new Krumo
http://raveren.github.io/kint/

85. Twig: compiled in PHP template
Twig template engine takes the template file and
converts it into a 'compiled' PHP template in
sites/default/files/php/twig/*
(drush cr clean this folder too)

86. Resources
 Twig official: http://twig.sensiolabs.org/
 Theming Drupal 8: https://drupal.org/theme-guide/8
 The Drupal 8 Theming guide: http://d8.sqndr.com/
More articles
 Drupal 8 Theming Fundamentals, Part 1
 Drupal 8 Theming Fundamentals, Part 2
 A Tale of Two Base Themes in Drupal 8 core