Feeds

Author

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Oct 20 2020
Oct 20

The internet was first built with a purpose of better communication for the military and scientists during the 1960s. Soon, the Web transformed into a revolutionary phenomenon around the 1990s and has been unstoppable ever since. Although the purpose for the web kept changing, one thing that remained constant was convenience. 

The need for convenience and effectiveness brought about many innovative ways to access the internet. Native mobile apps and Web apps are two such technologies that have made internet browsing easy and convenient. In this article, we will be talking about Progressive Web Apps and how you can implement it with Drupal using the Drupal Progressive Web App module. But before we dive into all of that, let’s look at the features of native and web apps and how progressive web apps actually fill the gap between the two. 

PWA-drupal-9

Features of Native Mobile Apps

  • They are platform-specific apps. Which also means that they need to be rebuilt for every new platform (iOS, Android). 
  • Need to be downloaded.
  • Usually super-fast.
  • Rich in features and functionalities. 
  • Can blend seamlessly into any device and feel like a part of it.
  • Can work offline.
  • They can access device data, device hardware and local file system easily.
  • More expensive to develop, maintain and upgrade.
  • Are pre-approved for security and can be downloaded at App stores. 
  • Hard for search-engines to crawl.

Features of Web Apps

  • Works independent of platform. All you need is a browser to access them. Supports most modern browsers. Does not need to be downloaded.
  • No particular SDK for developing them. Frontend is developed using either HTML, CSS, JavaScript and a LAMP or a MEAN stack for backend.
  • No need to upgrade. Lesser development and maintenance costs.
  • Although it needs authentication, security is an issue because it can be vulnerable for unauthorized access.
  • They don’t work offline and can be slower than native mobile apps.
  • They aren’t listed on App stores so discovering them may be harder.

What are Progressive Web Apps and how do they fill the gap?

So, in short, native web apps are highly capable but lack in terms of its reach. Whereas web apps have a wider reach but lack in capabilities. And that is where Progressive Web Apps come in to bridge the gaps.

Progressive Web Apps is an ideal combination of the benefits of native apps and web apps. Using modern web capabilities, Progressive web apps (PWA) can deliver app-like experiences to users. It combines features offered by most modern browsers with the benefits of mobile experiences. You can build native-app-like, extremely complex and installable apps. With Web Assembly being supported by most browsers now, PWAs can be built in languages of the developer’s choice, thus widely increasing the scope and flexibility of the functionalities it can offer.

Features of Progressive Web Apps

  • They are platform and device independent. Works beautifully on any browser.
  • They load fast and are extremely reliable (even with a low internet speed). Scrolling is very smooth and fluid.
  • Can work offline too.
  • Native app-like push notifications can be enabled.
  • Can access device hardware and data like native apps.
  • Shortcuts can be added on the user’s home screen (instead of downloading them)
  • No need for complex installations. Can share the URLs easily.
  • Responsive across all devices.
  • They are easier and faster to develop. Maintenance is easy as well.

Before talking about the PWA module in Drupal, let’s look at the minimum requirements to build a PWA -

  • Should be run over HTTPS. 
  • Should include a Service Worker – Service worker is a script (javascript) that runs over https on the browser and provides browser access. It provides the native app-like features like offline content delivery, push notifications, etc.
  • Should have a Web App Manifest – which is a JSON file containing metadata with information about the web app like the name, description, author and more. This is also useful for search engine optimization.

The PWA Drupal Module – How to make Progressive Web Apps with Drupal 9 (and 8)

The Drupal PWA module is easy to install comes with the Service Worker (for caching and other offline app-like capabilities) and Manifest.js that you can configure. You will however need to make sure you have SSL installed before you begin with the PWA installing process. If your requirement is extremely specific with tons of customizations, you can develop the PWA by using front end frameworks like Angular or React and customize your own Service worker. 

Installing the PWA Drupal 9 Module

With Drupal 7, installing the Progressive Web App Drupal module was as easy as downloading and enabling the module. You could generate the manifest.js file via a config form and validate it. However, in Drupal 9, we cannot integrate this functionality directly just by enabling the PWA module. The reason being it does not provide you an option to configure the manfest.js file. 

  1. Install the module by downloading and enabling the PWA Drupal module.Installing PWA Module
  2. For Drupal 9, apply this patch

  3. Once done, navigate to configuration -> PROGRESSIVE WEB APP -> PWA settings and add the required information.

PWA-configuration

PWA-configuration

Service Worker

URLs to cache - This is where you can specify the pages that you need to be made available even when offline. The URLs mentioned here will be cached -make sure you flush the cache whenever you make any updates here.
URLs to exclude – If you have pages that absolutely need to work only with the internet, mention them here.
Offline page – Display a personalized page to your users when they get offline and the page isn’t cached. 

Manifest.json

The Drupal manifest.json file is what allows users to add the PWA to their home screen. It contains configurations that you can modify to change how your PWA will behave – like the name, display name, background color, orientation and more. 

manifest-json

The file will be added to the head tag of your index page.
<link rel="manifest" href = "/manifest.json">
 

Manifest.json       Manifest.json

The below image shows the “Add to the home screen” option and an icon will be created on the home screen.

Progressive Web Apps
Oct 13 2020
Oct 13

Today, business process automation is not just considered by bigger organizations but by SMBs too. And why not? When you can have a process that can do your work while reducing your overheads in the long run, why wouldn’t you choose one? Business process automation (BPA) is a process that uses a software program or platform instead of human intervention to improve your cost and workflow efficiency. It can be implemented in various stages/processes of your organization like Marketing, Sales, Project Management, or any other process that needs automation. Drupal 8 and Drupal 9 offers many modules and distributions that can help you automate your business process easily. Let’s look at some of them in this article.

module for automation

What can a Business Process Automation do for your Organization?

•    Can streamline your processes. Put an end to that disorder. Manage and monitor your processes from a centralized business automation solution.
•    Know exactly who has done what. When the entire process is streamlined and transparent you are enforcing accountability.
•    Minimize errors. To err is human indeed. When you eliminate more work from humans, you can also expect a lot less to go wrong in a process.
•    Reduce costs. Yes – the most important benefit of implementing a business process automation tool. When errors and human hours are reduced, your costs can drastically decrease.

How Drupal makes Business Automation easier?

Drupal powers millions of websites for organizations ranging from SMBs to very large enterprises. Every one of which already use or will eventually need a business process automation solution. Being an open-source content management system, Drupal allows for easy customized integrations to meet every organization’s requirements. Drupal has modules and distributions that can help organizations to integrate their websites with many popular and not-so-popular BPA solutions. The integration is so seamless that it feels like you’re working with a single solution. For companies that have very unique specifications, a custom integration can be built on Drupal because of its open-source framework. Let us look at some of the top Drupal 8 and Drupal 9 modules and distributions that can integrate with different business automation solutions available in the market.

Marketo MA

Marketo is one of the most popular digital marketing tools that can take care of your lead management, email marketing, consumer marketing and mobile marketing needs. Marketo users swear by its simplicity, ease of use and setting up and claim that it is a great tool for SMBs. The Drupal 8 Marketo MA module enables you to add marketing tracking capabilities to your Drupal website. Lead data can also be captured during user registration via webform integrations. You will require to have an active Marketo account and of course, an installation of Drupal 8 (or 9). 

Salesforce Suite

Claiming to be the world’s number one Customer Relationship Management (CRM) solution, Salesforce allows you to efficiently organize and manipulate your customer data using cloud computing. Right from sales and marketing to customer service, Salesforce enables organizations to put customers at the center of everything you do and satisfying them. With the Drupal Salesforce Suite module, you can synchronize Drupal entities like users, nodes, etc. with Salesforce CRM’s objects like contacts, organizations, etc. You can export Drupal data into your Salesforce CRM and import Salesforce data into your Drupal website effectively. Any updates can be performed in real time or asynchronously.

Maestro

Have a workflow and need a perfect solution to automate it? Drupal’s Maestro module lets you automate your workflow processes with a visual flowchart that you can drag, drop, and connect. Sure, it can be used in content workflow processes too to track and moderate content revisions. But it mainly shines in more complicated business processes and use cases. Maestro can be extended to add custom functions and logic to suit every business structure. It integrates well with other significant Drupal features like Webforms, content types, triggers, rules, and more.

Maestro module   Drupal Maestro Module

RedHen CRM

A very humble and flexible CRM with functionality for handling your contacts, organizations and relationships between them, Redhen CRM was initially built for common non-profit needs. Redhen CRM is a Drupal based CRM and a completely open-source one which makes it easy to mold into your organization’s requirements. It also allows for some modern functionalities like engagement tracking, customizable donation forms, etc. It not just behaves like you have integrated your website with a business automation tool; you can actually integrate Redhen CRM with other CRMs for extended functionalities like Salesforce, Blackbaud, etc. This Drupal module is compatible with Drupal 8 but does not support Drupal 9 yet.

MailChimp

Did you know that about 1 billion emails are sent through MailChimp every day? MailChimp is an email marketing service through which you can send marketing and informational emails to your opted-in customers. You can create multiple email campaigns, use their email campaign designer, email templates, data analysis, generate reports, segment audiences and much more with MailChimp. With the Drupal MailChimp module, your users can choose to opt-into (or out of) any email list they want to and you can generate and send email campaigns right from your Drupal website. The Mailchimp Drupal module supports Drupal 7 and 8 but is not compatible with Drupal 9.

mailchimp

Drupal PM (Project Management) Module

This can be termed as a distribution rather than just a module as it consists of a suite of modules that help in generating the various components it serves. The Drupal Project Management module offers components like organizations, tasks, teams, projects, tickets, expenses, notes and time tracking. These components allow easy integration with other Drupal modules as well. It serves as a great work planning and organizing tool for organizations. 

Drupal Pm Module   Drupal PM Module

Hubspot 

An inbound marketing tool, Hubspot is an easy to use automation software that lets you attract visitors to your website, track and convert leads to customers. It also allows for easy integration with other automation tools like CRMs, email marketing tools, analytics tools, etc. You can also use it as your email marketing, social media publishing and ad-tracking tool too. The Drupal 8 Hubspot integration module integrates with Webform and Hubspot API and submits Webforms to Hubspot’s lead management system or email marketing campaigns. This module supports Drupal 8 but not Drupal 9 as of now.

Hubspot Drupal Module   Hubspot Drupal Module
Sep 22 2020
Sep 22

A seasoned web developer would call this a match made in heaven. Drupal and AngularJS together can create rich and dynamic web experiences that might want you to reconsider your web development strategy altogether.

We have already spoken about how Drupal has proven to be one of the best CMS frameworks out there.But what is AngularJS really and how does the combination of Drupal Angular Js work wonders for your website? Read on to also understand headless architecture better with a case study.

Why go the Headless way?

“Each man is capable of doing one thing well. If he attempts several, he will fail to achieve distinction in any” – Plato.

This quote is so relevant today when we talk about CMSs and Headless architectures. Content management systems like Drupal are fantastic at managing content and data. However, with the increasing number of channels, API access points, front-end interactions and many more modern user experience demands that it is required to support, traditional CMS structures often seem inadequate. For more ambitious digital experiences, traditional architectures are now often being replaced with headless architectures. Headless or decoupled websites leverage a JavaScript framework for front-end interactions while maintaining a CMS like Drupal to manage the content. 

CASE STUDY: In one of our recent projects for our client, a leading casual dining restaurant chain, we had implemented Angular to enable API-based communication built on top of Drupal 8. The application required to interact with the web, mobile app, POS front end and other restaurant and customer management modules. Combining Drupal 8 with Angular worked out great because not only did it enable us to support their multiple channels and access points, we also saw a huge improvement in the performance of the application. 

Headless Drupal or Decoupled Drupal

With headless Drupal, the browser does not directly connect to Drupal. Instead of seeing Drupal’s presentation layer/ theme, the user will see pages that have been created by front-end frameworks such as AngularJS. Data is provided in JSON format to the front-end framework. With JSON:API module now in core and moving Drupal 8’s API-First initiative forward, things are even easier now. The idea of implementing a headless Drupal with AngularJS is to use Drupal’s flexible and powerful back-end capabilities to the fullest while letting a more interactive front-end framework do the talking to the browser. It is believed that client-side front-end frameworks like AngularJS are the future of the web, and if you are looking to build a rich and dynamic website with little to no latency, Drupal Angular JS is the answer.

drupal-angularjs

The Super-heroic AngularJS

To put it simply, AngularJS is a JavaScript framework backed up by our very own glorious Google that can let you do really cool things on your user’s browser without having to fetch data from your server. HTML lets you create static pages and is not designed for dynamic views. JavaScript was created to make those static pages more interactive. Here’s some more good-to-know info about AngularJS -

Why The AngularJS And Drupal Combination Will Make You Rethink Your Web Strategy
•    AngularJS is an extremely lightweight and concise framework that is profoundly extensible and lets you do some seriously fascinating things with your website.
•    Web developers and designers love HTML for its simplicity, clarity and intuitivism in its code structure. AngularJS extends HTML to define user interfaces, hence letting you build interactive web applications that are highly functional and hard to break.
•    You can create reusable components with AngularJS code.
•    Its client-side nature keeps those cyber-attacks at bay as any injected data cannot go close to your server.
•    AngularJS implements the MVC (Model-View-Controller) framework which allows for faster development process, multiple views, asynchronous technique, SEO friendly development and many more valuable features.
•    Unit testing is a breeze with AngularJS as it comes setup with it making it fast and easy for developers to test their code.
•    With a mind-blowing functionality like two-way data binding, user actions can immediately trigger application objects and vice-versa, thereby proving to be an extremely interactive framework.

Drupal Meets AngularJS

When an impressive front-end framework meets a super-powerful backend content management framework, there ought to be fireworks! Drupal is a flexible and scalable enterprise-class CMS which can be used to develop powerful web applications that can be designed for small to large scale businesses. Being an open-source CMS, it is highly customizable and can be tailored to fit any business requirements. You can only imagine the extensibility and customizability the combination of the two open- source frameworks, Drupal and AngularJS, can provide. Two is better than one, they say. When put together, let’s look at the goodness Drupal AngularJS can provide.

Power Packed Performance

Drupal on its own can perform effectively even when dumped with heaps of functionality. However, when you offload some of the business logic to the client-side AngularJS, you are remarkably unburdening your Drupal backend. Using AngularJS for theming or presentation and Drupal as the backend data source can substantially boost the performance of your Drupal website. The powerful combination of headless Drupal with Angular Js will allow you to move display logic to the client-side and streamline your backend, thus resulting in a super speedy site.

Reduced Coding for developers

Creating a basic working Drupal website does not take a lot of coding or development work. AngularJS can make these basic Drupal websites more interactive, rich and dynamic without a lot of complex coding. AngularJS uses directives, HTML to define user interfaces, plain objects for data models, etc. which sums up to writing much lesser code. Since it uses HTML to define user interface codes, it makes it takes lesser efforts by the developers to build interactive pages when compared to writing complete Javascript codes.

Isolation of logic

AngularJS implements the MVC framework which lets you separate business, controller and model logic in your web application. Isolating application logic from user interface will result in a cleaner, clearer and non-redundant code structure. Should your most crucial developer leave you mid-way, with this architecture, it won’t be hard for a new one to catch up. This also helps remove a lot of backend logic from Drupal, thereby making it more light-weight and efficient.

Security – Raise the bar

With Drupal you can be assured of your website’s security if you have followed the security protocols diligently. In the huge Drupal community, it is hard to have a security flaw go un-noticed and un-patched thereafter. Headless Drupal with AngularJS adds that extra layer of security to Drupal websites. Since the browser communicates with AngularJS, there’s no direct server-side interaction. This makes it difficult for hackers to inject malicious code into databases.

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