Jul 09 2019
Jul 09

In our previous blog - Demystifying the Decoupled Architecture - we discussed how decoupled architecture has become an increasingly popular choice to build enterprise-grade websites.

With various choices available, Drupal gives a breakthrough experience offering powerful content modeling, workflow capabilities and UI creation, helping evolve the marketing, branding and lead generation efforts.

Gatsby js, a React-based site generator, is a great option with Drupal for a decoupled architecture. Drupal and Gatsby form a powerful combination and here’s why this is a great choice.

Why Gatsby?

Let’s learn about the features of Gatsby which makes it an ideal match for decoupling with Drupal.

1. Plugin usage makes life simpler

Plugins help make the site offline, add Google analytics and supports inline SVGs, and much more, making Gatsby extensible and flexible.

Of the different types of Gatsby plugins, the gatsby-source plugins fetch data from a local or remote source and allow it to be used via GraphQL. This implies that almost anything can be used as a source to work with Gatsby and generate static sites.

Some plugins may need only to be listed by name, while others may take options. Gatsby plugin library offers a large number of plugins and continuously being maintained by the community.

2. Progressive Web Apps out-of-the-box

Gatsby enforces best practices to boost performance and add to the smoothness of user experience to give its site users an app-like experience.

The build process creates static HTML files for individual pages which offers swift loading of pages.

Gatsby boots up React on page loading on browser and navigates around your site to give you a single page application experience with near-instant transitions without page reloads. It works by prefetching related page content in the background to nullify any chance of delay on user click.

Gatsby exceptionally improves the client-side experience with JavaScript and can offer offline support with the addition of a single plugin.

3. JAMstack setup

JAMstack setup has taken the web development over by a storm with client-side JavaScript, reusable APIs, and prebuilt Markup offering a great combination to improve the speed and quality of your site as well as the overall developer experience. Gatsby acts as a JavaScript framework for a JAMstack-powered web application.

4. Built with performance in mind

Gatsby framework is built in a way to optimize the website performance on its own and compiles the most performant Webpack configuration to build your site once you create the source code.

It functions by prefetching resources to give a worldclass surfing experience to website users. It follows Google's PRPL (stands for Push Render Pre-cache Lazy-load) architectural pattern which aims to boost your website's performance, especially on mobile devices. The pattern is helpful for structuring and serving progressive web apps (PWAs). You can create PWA with Gatsby by running your page via HTTPS and installing a plugin for the manifest and service worker.

5. Easy to Use and Learn

Gatsby is based on React.js which is a JavaScript library for building user interfaces using components. It's relatively easy to learn, and if you’ve command over JavaScript code, you're good to go.

Working with Gatsby doesn’t require you to learn everything from scratch. Also, you can master working with it even if you don’t have experience working with React or GraphQL. Gatsby has a vast and active community to help you with your concerns.

Benefits of Decoupling Drupal with Gatsby

Static site generators like Gatsby pre-generate all the pages of the website unlike dynamic sites which render pages on-demand alleviating the need for live database querying and running through a template engine. This enhances the performance and brings down the maintenance cost.

Static site generators have seen a growth spurt over the past few years and have been the first preference of developers who wish to build a simple website/blog solution with a minimal server setup and a low maintenance cost.

Drupal proves to be a powerful back-end and is preferred by content editors for its WYSIWYG editor and content types which help them manage content more easily and systematically. However, maintaining a CMS requires hosting a web server and database, which poses security vulnerabilities.

diagram_gatsby_drupal

                                                                     Gatsby in action (Source: Gatsby.org)

Gatsby stands in between the robustness of static site, and the versatile back-end of a content management system. It allows you to host the CMS in-house and publish the content as a static website.

Watch the video to understand how Gatsby helps create blazing fast websites with Drupal:

Headless Drupal- Building blazing-fast websites with React-GatsbyJS + Drupal

Development approach

Gatsby, being a static site generator, lets the public folder created during the build time to behave as a static website.

To make it serve the requests, you can take that folder and deploy it on any server with Apache or nginx like server. Once the build is done, you can down your Drupal server and just deploy the public folder generated during the build.

 

null

 

This means that your Gatsby site will communicate with your Drupal backend during the build time, fetch all the details necessary and create static files for all the paths that will be present on your site.

 

With enterprises choosing to opt for more scalable and flexible experience, the popularity of Gatsby is increasing manifolds.

Are you thinking to implement best decoupled strategy for your next project? Contact our experts to get the best solution tailored as per your needs.

Jul 02 2019
Jul 02

As of May 31, 2020, Apigee will no longer sponsor hosting of Drupal 7-based developer portals (D7P). Prior to this, starting on May 31, 2019, Apigee will no longer provision Drupal sites for customers. 

Developer portals are expected to give flexibility and control to the developers and keep users’ data secure on a daily basis.

In our previous blog - Should You Migrate Your Developer Portal To Drupal 8? - we detailed on the security challenges your Drupal 7 developer portal could face, after all, security is important.

In this blog, let us understand the best action plan you can take to secure your developer portal. 

Action Plan to Secure Your Developer Portal

As a service provider, you have developed a set of APIs to provide access to your backend services. The announcement can put you in a fix but whatever your choice of action steps, ensure the end result can: 

  1. Keep your data secure
  2. Should not hamper the current flow of work
  3. Should be able to integrate with Apigee

Currently, you have three options in place:

  • Remain on Drupal 7 and assume hosting responsibility
  • Move to Apigee's integrated portal
  • Migrate your developer portal to Drupal 8

Remain on Drupal 7 and assume hosting responsibility

If you need (more) time to decide whether to opt for migration or not, depending on the existing running projects - you can consider remaining on D7P until you finalize on your choice. 

The support of the modules which integrate Drupal 7 with Apigee Edge will not be affected, however, cloud customers would need to assume direct account responsibility with their hosting providers.

After May 31, 2020, all Apigee-hosted Drupal 7 developer portal will be decommissioned and will be unavailable. You would not be able to administer or develop any post-May 2020. 

Remaining on Drupal 7 could make you vulnerable to several security concerns as discussed in our previous blog.

Move to Apigee's integrated portal

Consider moving to an Apigee integrated portal, if you have been using Drupal 7 with a minimal amount of customization or prefer an all-in-one solution. 

It is integrated directly into Apigee Edge and includes a powerful API catalogue and a compelling markdown-based CMS with robust audience management tools.

However, if you are someone who has leveraged the functionality of Drupal 7 in conjunction with a high degree of customization and investment in crafting a specific developer experience, then you should consider switching to Drupal 8. 

Migrate your developer portal to Drupal 8

Drupal 8 remains to be a compelling option for those who wish to remain on Drupal for their developer portal. It is the option preferred by the customers to head towards a self-managed developer portal and as a path forward to leverage the latest functionalities of Drupal.

There is a host of functionalities in Drupal 8 which makes it a better option from the three. It is more secure than Drupal 7, more features than on Drupal 7 and proves to be an ideal option for the developer portal to be built on. Let’s learn about them.

Your Drupal 8 Developer Portal will be Secure

Here is a list of new features introduced in Drupal 8 which aims to enhance the security of your developer portal:

  • Twigs: A new theming layer which comes with a whole bunch of security features.
  • Configuration management: You have a list of all configurations of your site in your code so as to let you know what all settings have been changed and who is responsible for that, when and why and to know what all settings have been changed.
  • No PHP filter: Simplifies the process by allowing developers to code inside a node.
  • Session IDs hashed: Now session IDs in the code are hashed, so even when the session IDs are known, the sessions cannot be hijacked.
  • Trusted Host Patterns: Code knows when it is in a trusted environment and alerts  when it is not. 
  • Single Statement Limitations to DB queries: Doesn’t allow multiple statement query in a single database.
  • Mixed Mode SSL removed: Implying the SSL will be used anyway and is no way an option now.
  • Automated CSRF token protection: Able to detect if the forms have cross-site scripting going on.

Some Best Practices To Mitigate API Threats

To secure your digital property from any possible threats, you need to follow certain best practices to ensure safe usage of APIs and prevent any critical customer information leakage.

  • Encrypt the APIs: Decrypting the API keys by authorised users will protect the critical data from being misused.
  • Ensure Role-Based User Authorization: Authorizing registered users as per roles to access APIs can work to identify a user and classify them as per varying levels of permissions.
  • Allow only Registered users: The first and foremost step is to authenticate users using the API in order to protect information. It becomes easy to track the API usage and identify who is making what request.
  • Deploy Rate Limiting: It can detect and prevent an unusual number of requests from a given user at a given frame of time. In an exceptional case, wherein the attacker manages to bypass your encrypted authentication and authorization protocols, rate limiting can prevent your API from being compromised.
  • Build Security in Layers: If the above steps don't work, try adding an extra level of security through an outer firewall.
  • Security is required in back-end too: Another checkpoint on the way out of the network can thwart the attacks is to secure the system down up so you can track him down on the way out. 

Srijan Can Help

Srijan is committed to providing customized developer portal to help you attract and engage developers with a comprehensive, customizable developer portal that offers a seamless onboarding experience. We offer secure migration of your existing developer portals to Drupal 8. 

Want to upgrade your developer portal? Let’s start the conversation

Jun 23 2019
Jun 23

APIGEE recently announced - from May 31, 2020, Apigee-sponsored hosting for Drupal-based portals will end. The existing customers who wish to remain on Drupal 7 need to assume hosting responsibility, they can either migrate to Drupal 8 or move to Apigee's integrated portal.

 

Those who wish to stick to Drupal 7 developer portals might possibly face challenges. But if Drupal has many security features and remains as one of the most secure Content Management System (CMS), what could possibly be the urgency to migrate?

What are the concerns?

Drupal 7 End-of-Life is Near

The developer portal is essentially a CMS, in case of APIGEE, based on Drupal. As the backend CMS, Drupal provides a core set of features in the form of modules that make it easy for you to build the content, as well as manage, websites.

Developer portals orchestrate API ecosystem which helps developers and external partners to quickly and securely gain access to the tools and information they need to explore, test, & consume APIs.

Apigee supports several developer portal solutions, ranging from simple turn-key to fully customizable and extensible, most if not all were built on Drupal 7. With community focus shifting to Drupal 9 release and end of life approaching for Drupal 7 (November 2021), among other circumstances Apigee will no longer be supporting the D7 developer portals.

With APIGEE support ending in May 2020, Drupal 7 developer portals will face the following security challenge.

 

Drupal 7 Can Put your Developer Portal at Risk


While Drupal also has many security features, security is not about working in isolation.  If one is to secure their digital property from the possible threats, it needs to follow best practices to maintain the top-notch standards.

One of the most important is keeping the core updated.

If you fall a long way behind the latest update, you are opening yourself to vulnerabilities. Let’s know in detail how Drupal 7 can put your developer portal at risk.

1. Doesn’t prevent cross-site scripting

Cross-site scripting (XSS) is a class of code vulnerabilities that allows code to be executed inside your browser without your consent or knowledge. XSS exploits are commonly performed with JavaScript, but Flash, Java, and other similar web programming technologies have been used.

It is one of the most frequent security vulnerabilities, a site owner should be aware of. It can be introduced in custom themes and custom-and-contributed modules. A poorly configured site can allow a malicious visitor to use XSS to change a user's password. Out of the box, Drupal 7 isn’t very effective to identify and fix XSS vulnerabilities.

In Drupal 7, elements like Drupal variables or Ctools exportables are represented as PHP code. This use of PHP input format in the core exposes possible code execution to vulnerability.

Drupal 8, however, filters the PHP input format in the core, manages code in a revision control system like GIT, and protects the code from any possible attack. Configuration Management Initiative uses YAML as the export and import format. YAML files are easy to manage together with your code and is a best practice to check it into a revision control system (like GIT).

2. Exposing session cookies

Drupal 7 stores the session ID and checks directly against the incoming session cookie from the browser. This poses a huge risk as the value from the database could populate the cookie in the browser assuming the session as well as the identity of any user who has had a valid session in the database.

On the other hand, Drupal 8 secures the session IDs against exposures via database backups or SQL injection, encourages serving your entire site via secure channel SSL and no longer strips the www from the session cookie domain.

3. No Automated CSRF token protection in route definitions

Cross-site request forgery (CSRF or XSRF) is a process where a request is made to a site which takes an action when the user did not intend to take that action.

GET requests with configuration change are not protected from CSRF in Drupal 7. This brings all the secure and unsecured requests under the scanner.  However, Drupal 8 makes it easy to specify a route (or system path) require a CSRF token.

4. No Clickjacking Protection

Drupal 7 cannot protect a site from click-jacking attacks wherein forms or links on the site are presented in a disguised fashion on an attacker's site inside an iframe. It cannot block the unauthorized re-use of site content via iframes too. However, Drupal 8 does this easily by sending the X-Frame-Options: SAMEORIGIN header in all responses by default. This header is respected by most browsers and prevents the site from being served inside an iframe on another domain.

Should you Migrate your Developer Portal to Drupal 8?

When choosing a solution, you need to balance your customization requirements against the time and knowledge required to implement your portal. Migrating your developer portal to Drupal 8 will ensure that any investments you make will extend the security of your digital presence.

Have doubts around your API security or want to migrate to Drupal 8 developer portal? Get in touch with our experts. We provide a range of services around API designed with a strategy tailored to your success.

Jun 13 2019
Jun 13

In a world where there is no limit to devices to access information, you must ensure your data is always available on the go! The pace of innovation in content management is accelerating along with the number of channels to support the web content.

A content marketer’s work is not done by just creating the content for the website. Making it available across devices and managing content channel hubs and making it user-friendly, most importantly.

But first, let’s understand how the content presentation has changed over the years.

The Traditional Approach: Coupled Architecture

CMS like Drupal are traditionally monolithic, wherein they own the entire technological stack, both backend (data layer) and frontend (presentation layer). The benefit – it allowed easy site management with admin user being able to write and publish on the same system.

monolithic-architecture-srijan-technologies

Monolithic architecture is part of one cohesive unit of code where components work together with                          the same memory space and resources

Content editors have preferred the traditional approach because of its clear and logical modular architecture which allowed them to control in-place editing and layout management.

tightlycoupled-srijan

They Broke Up! What?

Even though the coupled architecture was easy to develop, deploy, and test, decoupled application architecture has become popular lately owing to the break-through user experiences it provides.

Decoupling segregates the concerns of frontend and backend of an application by simply adding a layer of technical abstraction (API).

One for content creation and storage, and the other as the presenting layer. In this scenario, a CMS like Drupal serves the backend as a data repository and a third party application like React JS owns the frontend providing interactive UIs.

In the video, watch how Drupal backend interacts with the decoupled apps in the decoupled approach and how it’s different from the traditional approach.

 

 

A decoupled architecture splits the content of a website from how it is displayed on multiple independent systems to how it is created.

Fully Decoupled or Headless Architecture

Headless architecture is similar to decoupled architecture in a way that both have content management and storage backends and deliver content from that database through a web service or API.

The only difference between the two is headless Drupal does not have a defined front-end system and has no functionality to present content to an end user on its own. The API, which exposes information for consumption, connects through an array of application.

headless-drupal-application-srijan

Srijan has implemented the headless approach for its various clients with much ease within the given stipulated time frame. Srijan helped Estee Lauder reduce its training session cost by up to 30% with a decoupled and multilingual LMS.

Understand your situation. Who is it for?

Here are some key pointers that will help you figure out if fully decoupled approach is an option for your project:

  • Not for basic editorial websites

Decoupling will do no good to a standalone website with basic editorial capabilities such as a blogging site. Such websites require less or no user interactivity and further, it can also hamper the performance of the crucial features required by content editors like the content preview, layout management, in-line editing making a simple website rather complicated.

  • Not if you want to lose more functionalities

One of the major advantages of CMS like Drupal is, you can access the plethora of modules in just one click. By simply selecting the Simple Google Maps module from your admin toolbar, you can have it on your website.

However, implementing decoupled architecture takes away such easy-to-use features since the CMS no longer manages the frontend.

  • Not if you want a complex procedure

If your design goals are closely aligned with traditional coupled architecture, then implementing decoupled approach will complicate the process and will add to the extra cost of creating those features from scratch.

Take a look here to know in which use cases decoupled Drupal works best and how to decide whether you need the architecture for your next project or not.

Enter Progressive Decoupling: A Hybrid Approach

Progressive decoupling gives you the best of both worlds. It allows Drupal to leverage JavaScript frameworks (like React and Angular) for dynamic user experience by injecting JS only where it’s needed in the front-end.

The approach is in the best interest of both - editors and developers as it strikes a balance between editorial and developer needs.

Which means the editor can control the layout of the page and the developer can use more JavaScript by interpolating a JavaScript framework into the Drupal frontend.

The video attached below will help you better understand the concept.

Comparison Chart: Coupled, Progressive or Fully Decoupled

This comparison chart will help you understand the features.

Features Coupled Decoupled (Progressive) Fully Decoupled/Headless Architecture Tightly Coupled Loosely coupled Separated Performance Fast Fast Fastest Fixed presentation environment Yes Yes No Use cases Complete text-based sites involving no user interactivity Websites that require rich/interactive elements of user experience Websites that require rich/interactive user experience Layout style Overrides built-in themes and templates Easy and secure third-party integrations Easy and secure third-party integrations Integration No Future-proof Future-proof SEO friendly Most SEO friendly SEO friendly Non-SEO friendly Delivery channels Limited Limited Unlimited API usability No APIs Based on architecture Complete API based Preview availability Available Available Unavailable

What’s in Store for the Future of Decoupling

With enterprises choosing to opt for a more flexible and scalable experience, the gap between the developers and content editors needs to be reduced.

The rapid evolution in decoupling allows constructing a content model once, preview it on every channel, and use familiar tools to either edit or place content on any channel in question, and decrease the delivery time.

At Srijan, we believe in a mature agile engineering process delivering better results. Contact us to get started.

May 22 2019
May 22

There's this millennial phrase "You snooze, you lose" and nowhere is it more applicable than for enterprises today. Opportunities to engage with your audience pop up fast and disappear faster, and you have to act quickly if you wish to leverage any of it. 

You want to build rich online experiences and that's great. But how fast is your team in getting from ideation to roll out? Usually your marketing and digital experience team is brimming with ideas, but the development team is too backed up to work on any of it.

Enter Layout Builder.

Layout Builder is a module in Drupal 8 that became stable with its newest release, Drupal 8.7. It essentially allows content editors and other non-technical stakeholders to design and build custom pages, without waiting for the development team.

Now, all you need to do is download Drupal 8.7 and follow a set of few simple steps and your design is ready.

But was it always as easy as it's now? Let’s take a look at what Drupal offered before.

How It All Started

The Drupal 6 users configured the design by selecting/deselecting the items from the dropdown menu to include/exclude in the website design.

 drupal6-cck-display-fields-srijan-1

 After upgrading to Drupal 7, users managed the fields appearing on the UI in a similar fashion.

drupal7-image-display

With Drupal 8, things remained more or less the same, where developers were the sole owners of the website design.

drupal8-image-display-srijan-technologies

Until Drupal 8.6, the developers could choose templates and include them on the website.

powerful-customization-in-tempaltes-srijan-technologies

Developers could manage how the blocks appeared on the page by selecting the position from the drop-down menus, or, by selecting the options.

block-description-srijan-technologies-1

Developers often used “Panels”, which offered much of the same functionality as Layout Builder. However, in spite of their intuitive GUI and WYSIWYG editor, panels failed when it came to translations.

panels-srijan-technologies

What Went Wrong?

Here’s why the Panels was not a viable solution for long:

  • Difficult to learn
  • No provision to “Preview” the page
  • Could not custom design as per the requirement

Layout Builder - What and Why

As the name implies, the Layout Builder tool enables editors to have an easy-to-use page building experience. So, it’s more convenient if the editor tweaks the design and analyse the suitability of an image with the content, just by dragging and dropping the content.

The tool empowers content authors by leveraging them with the capabilities to:

  • easily adjust the design and format of a page by using drag-and-drop and WYSIWYG tools
  • make changes to the layout without involving developers every time
  • visually create a layout template that will be used for each item of the same content type
  • customize templated layouts on a case per case basis
  • create dynamic one-off custom pages which don’t come under any template like About Us page

For smaller sites where there may not be many pages or content authors, the unrestricted creative freedom seems to be compelling. However, on larger sites, when you have hundreds of pages or dozens of content creators, a templated approach is preferred.

layout builder infographic

Why Else Choose Layout Builder?

Simple Page Management

Layout Builder gives the content editors the capability to create a layout by inserting new blocks from the pop-out sidebar and rearranging them wherever they are needed. They can preview the entire layout instantly, allowing them to insert, replace or delete blocks, images, text and buttons. They can use ‘Content Preview’ checkbox to show small textual representations of the block instead.

Accessibility

With increasing collaboration, there’s a need to ensure that no one is excluded from enjoying the online experience with ease. Layout Builder conforms with the Drupal’s commitment to web accessibility. helps you use keyboard or screen reader to navigate - to conform to the Web Content Accessibility Guidelines recommended by World Wide Web Consortium. Considering the specific accessibility requirements, the drag-and-drop editor was designed to make it accessible for everyone to enable moving blocks, creating new sections and adding/moving content to the blocks.

Workflows

The Layout Builder supports essential activities such as adding, saving, previewing and publishing data. You can send layouts through a staging or approval workflow and then publish it right from the same interface after the team reviews a saved piece.

Templates

The Layout Builder also includes a templating feature, useful for sites with large quantities of content. Using the Layout Template, editors can edit collections of pages all at once and rearrange the structure while retaining the unique content. The ability to restructure multiple pages at once saves a huge amount of time when one block needs to be changed across multiple locations.

How to Work with Layout Builder?

Install the Devel module and enable both the Devel and Devel Generate parts of the plugin.
Click Install.

devel-srijan-technologies

 Source: OSTraining

  • Click Configuration > Generate content in order to generate content for an article. Click Generate.

content-type-srijan-technologies

Source: OSTraining

  • Click Content and you’ll see the generated article.

Configure the Layout of the Article Content Type
Go to Manage > Article and then select the checkbox “Use Layout Builder”. Click “Save”.

configure-the-layout-article-type-srijan-technologies

 

Upgrade to Drupal 8.7 without a doubt!

The newly stable Layout Builder is unique in a way that it supports templated layouts for hundreds of pieces of structured content as well as in designing custom one-off pages with unstructured content. Catch up with the latest upgrade and let your clients make the most of Layout Builder’s features. 

While your editors and authors get empowered to create rich experiences, there are other aspects of your Drupal implementation that could be optimized or transformed with an expert team. Srijan is working with leading global enterprises, leveraging Drupal, data science and analytics, AI, machine learning, and chatbots to create tailor-made business solutions. Let's start the conversation and explore how Srijan can help. 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web