In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Decoupled Drupal: What Does This Mean for Your Own Site?
Drupal

Decoupled Drupal: What Does This Mean for Your Own Site?

by Adrian Ababei on May 18 2017

Should you decouple? When? How? What are the risks that a decoupled Drupal site involve? What are the undeniable, hard-to-resist-to advantages of “teaming up” your Drupal site/mobile/native app with a fast, cool JavaScript framework and of using Drupal as a back-end content repository “only”?

And, most importantly: is a “headless” build suitable for your own web project? 

Our web development team here, in Toronto, comes with its very first piece of advice for you now, when you're facing all these crucial questions: always use the context of your very own web project to filter all the “trends” seeming to dominate the digital landscape at some point or another!

Before deciding to go for a decoupled implementation, make sure that all the members of the team involved (Drupal developers, project managers, content editors) clearly understand what a decoupled Drupal architecture is. And whether the technical risk involved is worth the effort.

Whether this approach is exactly what your web project needs.

Now, let us help you find the answer to your legitimate decoupling-related questions:

1. “But What Is a Decoupled Drupal Architecture, After All?”

To put it simply: decoupling Drupal means separating the back-end of your website/app from its front-end (either partially or totally).

Now if we are to detail a bit, we would have to add that:

 

  • in a decoupled Drupal context we would have Drupal playing its role in the back-end, that of storing and sending forward pure data

     
  • the front-end (aka, the “responsible” of everything related to the user experience) role will be played by a JavaScript framework (e.g. Backbone.js, Angular.js)

     
  • the presentation layer can range from Alexa to Raspberry PI, to pretty much anything that can consume the data sent over by the Drupal-powered back-end

     

Drupal's “role” can easily resume to what the content producers...produce, while the coupled front-end framework will be “responsible” for what the users see on your site/app. Responsible for creating a faster and richer user experience.

In other words: Drupal will be handling the editorial, content creation and administrative tasks, while the coupled framework will be handling the front-end, communicating with the Drupal back-end via API.

The obvious “points of attraction” of such an API-only approach are the unlimited freedom and flexibility granted to front-end developers. 

Unchained from the “need” to know how to write or to decipher Drupal-specific code each time they need to improve the look and feel of a website, front-end developers get to choose from different approaches of building a website.

They're free from the monolithic Drupal architecture with the presentation layer backed in through the Drupal theme itself. Free from the tightly interconnected back-end and front end.

2. “Why Should I Decouple? What's In It for My Own Site/App?”

Now this is a more than legitimate question that you should be asking yourself once you've fully understood what a decoupled Drupal build is.

Here are some key advantages if you decide to go for a “headless” Drupal site/app:

 

  • it allows you to create some truly interactive user experiences (it's the browser who'll take over the user experience responsibility and so all the back-and-forth interaction will be a real-time one; a key aspect to consider when developing in-browser apps)

     
  • it grants your team of front-end developers almost unlimited creative power; no more restrictions coming from the back-end + total freedom for front-end developers to use their native tools and to craft the user experience while they still get to harness Drupal's power via APIs

     
  • it enables you, as a decoupled Drupal site owner, to future-proof your website; once you decide to redesign it, you can do that without having to re-implement your whole  back-end, too. And vice versa. Flexibility and convenience!

     
  • it enables you, the site owner, to hire non-Drupal specialists, too, since front-end developers won't need to be Drupal experts, as well. You will no longer be limited to collaborating exclusively with developers having a deep understanding on the Drupal back-end architecture, of the Drual-specific code. Even more flexibility for you!

3. “What Type Web Projects Would Benefit Most from Decoupling Drupal?”

And this might just be the best headless Drupal-related question you've asked yourself so far!

It's definitely a matter of: “Is this solution a perfect fit for my own site/app, too?”

See if you can identify your own type of Drupal web project in the examples here below and you'll have the answer to your question.

So, decoupled Drupal is best used for:

 

  1. Native mobile apps, especially now, that you're “spoiled” with RESTful services in Drupal 8 core, creating clean APIs is easier than ever. Your mobile apps users won't even need to interact directly with your Drupal site when accessing your native app. Your website's front-end will be using the same APIs as your native mobile app! Also, you get to build new and new mobile apps without the need to access the data that your back-end stores. 

     
  2. Web projects involving front-end developers with no Drupal expertise

     
  3. Web projects that include multiple development teams

     
  4. Web projects with front-end teams depending on unlimited freedom for structuring and displaying the content

     
  5. Web projects where the presentation layer combines data coming from several API sources: social media, CMSs, video management systems

     
  6. Web projects with multiple content consumers that are live simultaneously (e.g. a Drupal site plus several mobile apps, as well)

4. “Which Are The Main Drawbacks of a Decoupled Drupal Site?”

“So, do you suggest that I should just go... headless, that Drupal 8's new them layer is just something I can easily do without?” 

This might just be the question bumping into your head right now, isn't it? 

Well, it's true that going headless comes with its drawbacks. You risk to throw away some of Drupal 8s' “goodies”:

 

  • permissions
  • a well-enhanced, seamless admin experience in Drupal 8
  • user authentication

     

The best approach is the “moderate decoupling” or, if you prefer, the “progressively decoupled Drupal”.

This means that instead of going reckless and losing all of Drupal 8's out-of-the box flexibility and power as you go for a fully decoupled Drupal site, you should:

 

  1. Still leverage Drupal's theme layer's power, using it to render most of a given web page

     
  2. Decouple only SOME of the web page's components, mostly those that require a faster and richer user experience 

     

In a nutshell: moderation is key! No need to waste time, energy and a good “load” of incredibly powerful Drupal elements and... reinvent the wheel!

And now, to support our pledge for the progressive approach to decoupling, let us back it up with one single example: NBA.com!

This site's using Angular 2 for rendering only certain parts of its web pages, while their static components are rendered by Drupal!

And speaking of this site using the “hybrid” approach, here's a Drupalcon Baltimore 2017 session filled with all the details and “enlightening” infos that you might find useful:

 

https://goo.gl/4jEhhu

In Conclusion:

It's not for no reason that decoupled Drupal makes such a tempting type of CMS architecture, but you should first of all:

 

  1. not take API-fist Drupal 8 for an API- only CMS

     
  2. give it a very deep thought, lest you should decouple too much of your site and lose some of the already-built, powerful Drupal tools.         
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

DrupalDrupal 8
10 Best Tools for Conducting a Drupal 8 Site Audit (to evaluate its performance, security, and stability)

10 Best Tools for Conducting a Drupal 8 Site Audit (to evaluate its performance, security, and stability)

You want to audit your Drupal website's infrastructure, SEO, best practices, security, stress, overall performance... And you ask yourself: Are there tools that help you run a Drupal 8 site audit? ... and generate the reports you need? There are quite a few, actually. To narrow down your too many options, we've made a list of 10 tools and Drupal modules that you can use to test your website's performance, security, and stability. 1. 3 Best Tools to Run a Website Security Audit 1.1. Coder     What does it do? it checks your code to see whether it meets the industry standards it checks your text, so you'll know whether i's properly sanitized or not quite In short, a Drupal 8 audit module you'll want to have in your toolbox when conducting a website security audit. 1.2. Qualys SSL Server Test Another tool that you'll want to use during your Drupal 8 security audit process. Why? Because it performs a thorough analysis of a public SSL certificate and generates a grade for you. 1.3. Security Kit How does it work?  It provides you with a set of security-hardening options, that strengthen the shield around your site against CSRF, XSS, and clickjacking attacks. 2.3 Best Tools to Run a Drupal 8 Site Audit Focused on Its Performance 2.1. PageSpeed Insight, YSlow, GTMetrix  Take these 3 website performance audit tools as your the "swiss army knife" in your toolbox.  They run multiple tests on your website and generate a whole set of practical recommendations on how you can boost its front-end performance. Here are just some examples of recommendations: cut down on the number of elements the browser's forced to parse by simplifying the DOM cut down on the number of requests  by aggregating your JS files or using image sprites 2.2. New Relic An all-into-one Drupal site audit module that helps you monitor different sections on your website: from infrastructure to server, to browser and application. Now, here's precisely why you'll want to keep it close at hand while assessing your website's performance: it allows you to set up multiple customized dashboards that show graphs and charts of your website's performance data it enables you to keep an eye on your website's traffic and performance in real-time it allows you to isolate bottlenecks and set up alerts for key events 2.3. Performance Monitor   Let's say you've just moved your Drupal website to another hosting and you now feel that it has slowed down. And that the new server needs to be optimized for Drupal. This is precisely where this module comes in handy: It gives you a clear picture of how your website's performing now, while comparing different servers/hostings. Here are some of the features you'll love: it checks the Mysql status and variables (and provides recommendations) it tests the overall system performance (it runs database, CPU, and file operations performance tests) it evaluates the "Performance score"  3. 4 Best Tools to Evaluate Your Website's Stability 3. 1. Behat, PHPUnit, Nightwatch Or you can put together your own "combo" of unit and functional testing tools. Automated testing will improve your website's stability... in the long-term (and nothing can beat the peace of mind that you'll get). 3.2. Code Sniffer Whenever you need to assess your code's quality, just reach out for this Drupal 8 audit tool. It will... "sniff on" your code and signal you if it doesn't meet the coding standards.  Also, while testing your code's stability, you'll want to have a look at: the quality of your links the cycles of peer review for codes the factors that influence the SEO the access and breadth of documentation the modules you have on your website: are there any outdated ones? 3.3. Tugboat You save time and money using Tugboat (or an alternative continuous integration tool). Here's how: it runs the automated and linting tests that you will have set up and generates a report to your developer before even merging or reviewing the code it builds a completely working website that incorporates that new feature you've added or has that specific bug fixed before it gets merged A true time-saver that you'll definitely want to have in your toolkit when testing newly added code for stability.  3.4. Linting Tools How do they help you increase the stability of your Drupal website? they get all the developers in your team on the same page when it comes to the code format to be used they (i.e. Drupal Code Sniffer) enforce the Drupal coding standards once integrated to your developers' text editors Tip! Make sure you incorporate your linting tools into your automated testing routine, the one that gets performed on each pull request. The END! These are your best options when it comes to the Drupal 8 site audit tools to include in your toolkit. But what if you dread the idea of digging deep into your code, checking every single one of your Drupal modules, evaluating the CPU performance... What if you could still get a clear picture of how you're website's performing without the dread of going through all these tedious, time-consuming tasks? Just shift the burden to us! Drop us a line and let's get your Drupal website checked for all the issues and bottlenecks affecting its performance, security level, and stability! Image by Free-Photos from Pixabay   ... Read more
Adriana Cacoveanu / Aug 06'2020
DrupalDrupal 8
7 Ways that You Can Reduce Image Size on a Large-Scale Drupal Site, With a Lot of Images

7 Ways that You Can Reduce Image Size on a Large-Scale Drupal Site, With a Lot of Images

Images can make or... break the user experience. Especially if we're talking about large amounts of images. So, what are your best options to reduce image size on a large-scale Drupal 8 site? And, most importantly: How do you strike a balance between the smallest file size and the best possible image quality? Well, just keep on reading... Here are 7 ways that you can manage image compression on your image-heavy Drupal site without affecting their quality: 1. Use a PNG Optimizer to Reduce Image File Size Let's say that you have a lot of PNG images on your Drupal website. How do you reduce the image file size? Simple: you use TinyPNG to... squeeze them. Expect to reduce them somewhere around 60% (while keeping the lossless image quality). 2. Use a JPEG Compressor to... Compress Your Images Server-Side  "How to make images load faster on my website?" Just use a compressor to reduce image size for your JPG and JPEG files: TinyJPG CompressJPEG Compress Now JPEGOptim It will take... a while, especially since we're talking about an image-heavy Drupal site. Different JPG files mean different settings for you to... play with till you've balanced out size and quality. 3. How to Improve Image Load Times: Use Drupal 8 Image Styles It's a tool that you get... out of the box. And what you gain is more control over the size of the images on your website: Set several image styles, of different sizes, that will go on various areas of a page. Good to know! Configure your image styles just once: from then on, they'll resize all your new images by default. Here's how you do it: Go to "Manage display", in the content type setup section Click the gear wheel icon next to the image field to open the settings tab and choose an image style There, you can either choose one of the previously configured image styles or... create a new one, by selecting the "Configure Image Style" option from the dropdown menu Source: Drupal.org          Good to know! Once you've set your image style, the module updates all the created images... automatically. 4. Use Drupal 8 Image Toolkit to Adjust Their Quality (And Their Size) It's the best way to resize images in Drupal 8. And the easiest way, as well: Go to Admin > Configuration > Media > Image Toolkit Choose the setting that allows you to compress your images (the JPEG quality field) Play with it till your strike the perfect size-quality balance Save the new settings Note! The new setting will apply to all your images; there's no way for you to adjust the quality for each image, one by one. Tip! Stick to somewhere between 60% and 80% when setting the image quality. 5. Use the Responsive Images Module to Resize Your Images  "Which module is used for image optimization?" Which is the best Drupal 8 module to reduce image size on pages that contain lots of images... Responsive Images is (but) one of them. Here's how it works: Its image formatter maps the breakpoint of the original image and renders a responsive image instead. All that by using an HTML5 picture tag (that has sizes and srcset attributes). It basically enables browsers to select the image to display according to the image style selections. And here's how you set up responsive images on your Drupal 8 website: Enable the module (for, even if it's a core module, it's not enabled by default) in Admin > Configuration Select "Responsive Image" Hit "Install" What about breakpoints? How do you set them up? Go to your editor (if it's a custom theme that you're using) Create a file named "yourthemename.breakpoints.yml" in your theme directory ("/themes/custom/yourthemename") Now, its time to configure the image styles for your responsive images: Different breakpoints call for... different image sizes.  Go ahead and pair each breakpoint that you set up at your_theme_name.breakpoints.yml with an image style and create your responsive image styles. 6. Use the ImageMagick Module to Reduce Image Size   "How do I manage compression on my image-heavy Drupal site?" You use ImageMagick. It's another one of your best options for Drupal 8 image resize. Here's why: Drupal might provide the GD2 image manipulation toolkit out of the box and enable you to set multiple alternatives, of different sizes, for the same image. Yet, it lacks some key features, such as... TIFF format support or GIF support with an image style. And this is where the ImageMagick module comes in handy. To install it, just run this command: Composer require 'drupal/imagemagick' And here's how you use it to reduce image size: enable it via ‘yoursite/ path set the quality for your image to 100% in the ImageMagick image toolkit The results? you've just enabled the GIT format support with image style you've reduced your image size by 20-40% Mission accomplished... 7. If It's Still Not Enough, Lazy Load Your Images  "How to load images faster?" Use the Lazy Loader, the ultimate Drupal 8 image optimization solution. Have you tried them all — all the dedicated modules and Drupal core features available — and you're still not satisfied with how fast your image-heavy pages load? Then go even further and incorporate a lazy loading functionality into your website. The END! But maybe you have better things to do — a business strategy to improve, urgent projects to work on — than finding and implementing the best solution to reduce image size on your Drupal website. Yet, you still want to make your pages load faster... So, just pass on the "burden" to us! We'll identify the best solution for speeding things up on your image-heavy web pages and... implement it for you sitewide. Image by Alexandra_Koch from Pixabay   ... Read more
Silviu Serdaru / Jul 23'2020
DrupalDrupal 8Tips
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2

Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2

"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module  ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website  Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities   Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.  And its name says it all: it helps you cache entities. Tip #17: Cache Views  Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there.   The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay   ... Read more
Silviu Serdaru / Jun 23'2020

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York