Building a Mobile App Using Ionic and Drupal 8

4 min

If we ask you about everyday objects that you use the most, the immediate one on the top of the list will probably include your smartphone, tablet, or laptop. We use these for a variety of purposes beyond mere communication. With the development of modern technology, it is possible to entertain ourselves in many different ways, follow the lives of people who inspire us, learn something new, track our health conditions, and do necessary shopping. For all these reasons, we create and use dozens of new applications designed to make our life more pleasant and convenient. And we feel great when they fulfill their claim. However, common people do not often think about the complex structure of modern apps. But we do. In this article, we will explain how to create an excellent hybrid mobile app with Ionic and Drupal frameworks, the advantages and possible drawbacks. Our first task, however, will be to reveal the reasons for choosing these platforms.

Why Hybrid?

There are three types of apps nowadays: web, native, and hybrid. The first is a basic computer program, run on the browser. Native applications are much more limited in their use, as they are created for a specific device or platform; they need to be modified to run smoothly on any others.  Hybrid apps are a kind of combination of what is best in its counterparts. While all of them have their unique perks, what matters when you choose the type of application to build are your own wishes. For example, native apps perform faster on the device as they are usually designed especially for it. Web ones, in their turn, are easier and cheaper to build and maintain, as they have a single code written for different mobile platforms. However, hybrid apps are the most popular.

Some say that hybrid apps are not very fast and rather limited in terms of interaction and UX. In spite of this, such giants, as App Store, Amazon, Evernote, and Khan Academy already use hybrid elements. Developers are becoming increasingly focused on them because their major benefits include:

  • Availability while disconnected. Even in today’s world, where everything seems to be dependent on the Internet connection, not all of us have access to it 24/7. It doesn’t lower our desire to always have important information easily accessible. The answer is already here: hybrid apps. They can be run on devices without a stable Internet connection. What is more important, though, they also have full access to the device’s resources (such as contacts and camera).

  • Best decision for developers short on resources. To make a hybrid app, you don’t need to have a large team and spend valuable resources. It needs only to have a single codebase that you will simply adjust for building a cross-platform program. These take less time since we may speak seriously only of iOS and Android. (Be sure to have Apple Developer Account, though; it is impossible to launch the app on the real iOS device without it). In addition to that, all the UI design changes for hybrid apps are much easier to perform, too.

  • Modern tools. Of course, hybrid apps won’t go so far without a strong base of such brilliant development solutions as Apache Cordova with its popular descendants PhoneGap and Ionic. The latter is usually combined with Drupal for the back-end development of the best hybrid apps. We will tell you why.

Ionic and Drupal 8

These are both highly used frameworks for app development. However, Ionic and Drupal 8 fundamentally differ from each other, yet need to work together to achieve the best results for hybrid applications. So, let’s have a quick overview of these platforms and the possibilities for mobile app development with Drupal and Ionic.

Ionic is an open-source HTML5 software development kit. It was created in the base of AngularJS, a second most popular front-end web application framework. Ionic’s undeniable perk is its great functionality, which can be compared to native apps’ SDK, and the variety of useful services it can provide along with it. These include a range of analytical methods, as it supports SAS. Moreover, it has capacities for A/B testing, build automation, and push notifications.

Drupal 8 is the last version of an open-source content management system. It is written in PHP, a programming language estimated to be used by almost 30% of developers worldwide. Drupal provides a back-end for any kind of website. Drupal 8 for mobile app, had its latest version released in 2015 and has a bevy of customer benefits, such as inline editing, famous Views module out of the box, and multilingualism feature.  With Ionic as its front-end means of development, they create a strong couple, both highly productive and easy to operate.

So What About My App?

Now, when we have all the necessary knowledge about the frameworks that we will use, let us move to build a Drupal 8 and Ionic mobile app. The first and most obvious step you will need to take is to install both frameworks. You can easily do it from the corresponding official websites. Drupal configurations will be the first part of our work on the mobile application. For them, you will need to activate RESTful services and Serialization in the Modules section. REST settings will enable you with more delightful possibilities for content management. You should also create the views you will need to proceed with for the specific application type that you have chosen to create. Pay attention to the REST Export Settings as it will allow you to build RESTful API.

In the Ionic part, you will simply need to run the command Ionic Start and choose the name and type of your future application. The types include Blank, Tabs, and Side menu. Having arranged these, you will be able to add some new items to the menu. It is important to remember to add Javascript file controllers, or "js".  This will help you bridge Drupal and Ionic.

Your next step will be to connect the content from your Ionic part to Drupal to ensure all the changes happening on the website will be automatically reflected on the device. You can do this with the help of the above-mentioned Ionic controllers. You will have to edit the controllers to use $http service AngularJS to “get” the JSON data. Furthermore, you’ll need to operate a bunch of different HTML templates, including “app”, “dash”, “home”, “node”, and “details” files. For each of them, you will have to set code parts configuring them. Having done this, you should only build and emulate the app by typing corresponding commands in the terminal to start the app functioning.


We hope that this article has shown you the pros and cons of mobile app development with powerful frameworks as Ionic and Drupal 8. We believe that in the future, hybrid apps will become even more popular and gain new features, making them both customer and developer friendly. As of today, it is already a very promising and constantly improving field of mobile application development, which is not difficult to master. This is especially the case with our experienced team that is always ready to help you build a perfect hybrid app.

Want to work with us?