Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Modernizing Drupal 10 Theme Development

You're reading from   Modernizing Drupal 10 Theme Development Build fast, responsive Drupal websites with custom theme design to deliver a rich user experience

Arrow left icon
Product type Paperback
Published in Aug 2023
Publisher Packt
ISBN-13 9781803238098
Length 360 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Luca Lusso Luca Lusso
Author Profile Icon Luca Lusso
Luca Lusso
Arrow right icon
View More author details
Toc

Table of Contents (21) Chapters Close

Preface 1. Part 1 – Styling Drupal
2. Chapter 1: Setting up a Local Environment FREE CHAPTER 3. Chapter 2: Setting a New Theme and Build Process 4. Chapter 3: How Drupal Renders an HTML Page 5. Chapter 4: Mapping the Design to Drupal Components 6. Chapter 5: Styling the Header and the Footer 7. Chapter 6: Styling the Content 8. Chapter 7: Styling Forms 9. Chapter 8: Styling Views 10. Chapter 9: Styling Blocks 11. Chapter 10: Styling the Maintenance, Taxonomy, Search Results, and 403/404 Pages 12. Part 2 – Advanced Topics
13. Chapter 11: Single Directory Components 14. Chapter 12: Creating Custom Twig Functions and Filters 15. Chapter 13: Making a Theme Configurable 16. Chapter 14: Improving Performance and Accessibility 17. Part 3 – Decoupled Architectures
18. Chapter 15: Building a Decoupled Frontend 19. Index 20. Other Books You May Enjoy

Disabling production optimization

Starting from version 8, Drupal is optimized for production out of the box. This means that all cache layers are enabled, and a change in the code is probably not visible until the cache is cleared. Obviously, this can slow down development a lot. In the earlier phases of development, all those optimizations can be turned off, but it is mandatory to turn them all back on before production because running a Drupal site without the cache enabled can hide some very difficult-to-catch bugs. How many times have you heard of data breaches where a legit logged-in user had access to data about some other user? This is probably a cache issue, where a page has been built for a user and then cached and served as is to every other user. If that page contains some personal data, that is leaked to everyone.

Note

Drupal is a complex system; to build a single page, it needs to do a lot of things, and most of them involve some sort of interaction with an external (and usually slow) system (the database for the data, the filesystem for the code, and others). If the markup that Drupal is building can be used as is for multiple requests, it’s a waste of resources to build it over and over again. Cache systems exist precisely to store the intermediate steps of a complex calculation to avoid doing the same thing twice. This text is not part of the note. It must be moved outside, just before the next sentence (At the end...)

At the end of the web/sites/default/settings.php file, we’ve added these lines:

if (
  file_exists($app_root . '/' . $site_path . '/settings.local.php')
  && getenv('IS_DDEV_PROJECT') == 'true'
  )
{
  include $app_root . '/' . $site_path . '/settings.local.php';
}

This basically means that if some conditions are true, the system should include a configuration file with local settings. The conditions are set out here:

  • Check whether the $app_root . '/' . $site_path . '/settings.local.php' file exists. app_root resolves to the /var/www/html/web folder, and site_path resolves to the sites/default folder
  • Check whether the value of the IS_DDEV_PROJECT environment variable is true

Both conditions are true on our local stack; the file it’s located at /var/www/html/web/sites/default/settings.local.php and its content has been copied from /var/www/html/web/sites/example.settings.local.php, with a couple of lines uncommented. Let’s see the most important ones:

$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

Drupal organizes all the business logic into services, discrete PHP classes that perform a specific task (such as sending an email, rendering a template, writing to logs, and so on). All those services are managed by a service container (https://symfony.com/doc/current/service_container.html). When some code needs a service to perform a task, it asks the service container to provide one, along with all its dependencies. The service container also manages parameters, which are scalar values that can be used to configure the application.

One of the services defined in the service container manages the integration with a cache backend.

A cache backend is used to store data that is slow to be computed. Instead of executing the same slow code on every request, Drupal can store the results in a cache. This speeds up the building and delivery of pages.

By default, the cache backend is the same database that Drupal uses for content (managed by a service called cache.backend.database). Every time Drupal needs to save some intermediate computation, it passes the data to the cache system, which in turn uses the cache backend to persist it somewhere.

We can use the development.services.yml file to add or change services and parameters in the service container. Let’s break down the file to see what it does:

parameters:
  http.response.debug_cacheability_headers: true

This parameter forces Drupal to add a couple of HTTP headers to the response. This will be useful later when we talk about cache tags.

twig.config:
  debug: true
  cache: false

Those two lines configure Twig (Twig is the render engine that turns templates and data into HTML), by enabling debug and disabling the cache.

services:
  cache.backend.null:
  class: Drupal\Core\Cache\NullBackendFactory

Lastly, here we define a new cache backend service, cache.backend.null, which uses the NullBackendFactory class to manage the cache. NullBackendFactory doesn’t persist the cache anywhere, basically forcing Drupal to rebuild its data structures on every request.

Continuing with the settings.local.php file, we find the following:

$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

Those two lines disable the CSS and JavaScript preprocessing and minification system of Drupal. When preprocessing is TRUE, if you look at the source of any Drupal page, you will see something like this:

<link rel="stylesheet" media="all" href="/sites/default/files/css/css_4X4pNrCAbSu81rOnCPB9UMoipKt5NIfi5kpoa86bdG8.css" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css__4bA7B8aKHQdv-woFVLAGpXcUrTGif-jwiZJPj5yZ1s.css" />
<script src="/sites/default/files/js/js_Y151moVVESM9BeoCt8M3cSJ2_x_o14H43dXy6nGL6JM.js"></script>

This is difficult to understand because isn’t clear where a CSS rule or a JavaScript function comes from (also because the CSS in those files are minified). When preprocessing is FALSE, the output is way more readable:

<link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/ajax-progress.module.css?rmstqh" />
<link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/align.module.css?rmstqh" />
<link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/autocomplete-loading.module.css?rmstqh" />

In the preprocessed version, the filename changes every time the cache is cleared, and this forces the browser to download the file again. When preprocessing is turned off, Drupal emits the original name of the file. To force the browser to download the file again, a token is appended at the end.

Three more lines deserve attention in settings.local.php:

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['page'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Those lines are commented in the original example.settings.local.php file. By removing the comments, we force the cache bins that deal with HTML generation to use the cache.backend.null service that we added in the default.services.yml file.

Note

Starting from Drupal 10.1 there is an easier way to manage development settings. A new Configuration | Development settings page has been added that allows you to turn on Twig development mode and to turn off render cache, dynamic page cache, and page cache. You can find more information on the related change record here: https://www.drupal.org/node/3359728.

Enabling Twig debug and disabling caches slow down the website but will allow us to see a change in template as soon as we reload a page, without the need to clear the cache. As we mentioned before, the functionalities of the website must be tested with those caches enabled, as they will be in production, to avoid possible data leaks.

You have been reading a chapter from
Modernizing Drupal 10 Theme Development
Published in: Aug 2023
Publisher: Packt
ISBN-13: 9781803238098
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image