The Drupal landscape has changed dramatically in the past few months. Thanks to Drupal 8 being out in the wild for a while, I’ve now had a chance to build a few projects on it. I’m going to share with you some of the modules we’re using at Access - and how you can implement them in your own projects.
Let’s take a look at the new D8 modules and how they differ from their counterparts.
Admin Toolbar
Drupal’s admin theme Seven has gone through huge improvements in D8. However, things can always be improved for both the client and yourself.
One much sought-after improvement has been to enable dropdowns on the admin menu, using the ‘Administration Menu’ module. This menu was never a perfect as it was small in size and didn’t work on mobile devices. In the shiny new D8 this process has been refined and we now have Admin Toolbar.
Admin Toolbar enables the sub-level menu items in the form of dropdowns. As you can see in the screenshot below, the menu itself has had its look and feel greatly improved. What’s more, it’s all mobile friendly.
On top of this you will also get the submodule Admin Toolbar Extra Tools. This provides an extra menu with options like flush cache and run cron.
Responsive Images
The influence of modern practices reign supreme in D8 with the addition of Responsive Images. In response to the high demand of smaller assets on mobile devices, there has been an introduction of a new HTML element specification called Picture.
The <picture> element allows you to define different images at different media queries. This means that a different image would appear in the markup on mobile compared to the same page on a desktop. The upshot of this is that you can serve smaller images to mobile users.
In D7 this would require the use of either custom template functions or the use of the Picture module, along with other modules such as Image Styles.
This has now been streamlined and implemented into D8 in the form of Responsive Images, making it all work out of the box.
You can now manage both ‘Image Styles’ and their responsive breakpoints through the modules user interface. This is really exciting as it means you can deliver high performance experiences on mobile devices.
Media Entity
Perhaps one of the most exciting developments within D8 is Media Entity.
It offers a small entity for all types of media such as images and embedded media like YouTube, Twitter and Instagram - all of these types of media can now be an Entity within D8.
Turning media into a more “component” based system allows for much easier development and maintenance by allowing components to be changed and modified without changing the existing data. This is in contrast to the Drupal 7 approach where once a media type was assigned it was more difficult to change at a later date. We can also expect to see more collaboration on extending the capabilities due to this. The team currently developing this module have mentioned Media Entity based distributions of Drupal 8 that will help kickstart a fully featured media solution.
See the module in action
Core Multilingual Suite
Building a multilingual Drupal 7 site was always a bit of a challenge, no matter how many times you did it. This was down to the sheer amount of contributed modules you would have to install in order to get a simple multilingual architecture established. We now have a small suite of modules called Core Multilingual that provide a much more coherent approach to multilingual sites.
D8 out of the box is now language agnostic. The site will never assume English as the first language, which is great. This allows for greater flexibility in building multilingual Drupal sites, as all languages are treated equally.
The new suite of modules will not tackle every hurdle in a multilingual site, and there will always be need for a lot of the contributed ones. However, now you are able to establish multiple languages and translate content, site variables, views and configuration from those built in D8 modules.
Core Web Services
Another small suite of modules that have been rolled into D8 are the Web Services modules. Nearly all projects require some form of API integration. Whether Drupal is talking to another service or vice versa. Drupal 8 Web Services help build that RESTful web services approach.
Using these modules you are able to expose entities and other resources to Web Services, as well as serialising your entity data in forms like JSON or XML. This also helps with format and user authentication.
These new tools will push the boundaries of how people will use D8 in the future to build sites. The concept of a ‘headless’ Drupal, where content is managed within Drupal and using the web services we send the data to another service or systems. A prime example is posting content to a JavaScript front end application or to a mobile application, which is all accomplished by D8 out of the box.
Kint
Whilst Kint isn’t a module in it’s own right, it is a vital submodule of Devel. Kint is a crucial tool when debugging and working with Twig in your theme layer; you will find yourself needing to view what is available to you in your render array. Kint will help you dump that array in a much more user friendly way.
Once you have enabled Devel and Kint you will be able to add {{ kint(variable_name) }} within your Twig template and then view the results on your front end.
You will also notice from the screenshot that there are other sub tabs with the array. These will give you access to “Available Methods”, which you can use in preprocessors such as get() or getValue().
WebProfiler
Another new addition to the suite of modules for Devel is the WebProfiler module. This gives you an analytical profiler of your D8 site in the form of a toolbar.
This toolbar is extremely useful in diagnosing how performant your site is and where any of the problems are occurring. The profiler itself was a port from the very useful Symfony Web Profiler project which offers up the same sort of functionality but now also reports on useful Drupal information.
Some of the useful features it provides are asset delivery information, database query analysis, requests and user information. Using these features can give you a real insight into what is making your site tick and help you spot any potential problems.
BigPipe
Caching your Drupal site is key for performance. Caching a page to deliver it to the end user is great but can cause problems when you have elements of content on a page that can’t be cached such as dynamic data in blocks or webforms.
BigPipe can help with this as it will help you deliver all the cachable sections of your site first and then the dynamic or uncachable elements afterwards. This means that you can give the user most of the page very quickly and load in any custom data afterwards in an asynchronous manner. As custom data is normally slower to load and is almost always uncachable this doesn’t cause a slowdown to the rest of the page being loaded. As a result the site feels much more responsive and quicker to navigate from one page to the next.
You may have seen this approach on other sites like Facebook or Twitter where the skeleton of the page loads quickly and everything else loads onto the page afterwards. The fact this functionality is now available in D8 is a significant benefit to using D8 for large sites with lots of user interaction.
See the module in action
Talk to Drupal 8 experts
Would you like your site upgrading to Drupal 8? Let our team know and we’ll see how we can help!
