Using Drupal, HTML5, and Javascript to Create Hybrid Internet Apps

Author: Jared Whitehead

In the ever evolving internet world, an issue that has been arising is “how do I take an existing website and make it cross-browser compatible?” Of course the simplest answer to this would be to create a style sheet for each browser, it’s easy but it can take up a lot of time and hassle. The same issue comes up when you want the website to be viewable on a mobile device as well.

How do we work around this?

We build a native app for each device, starting with mobile. There are over 1 million smart phone users. The current method of implementing websites may be inadequate for the modern day mobile trend. Why mobile first? Phones are coming equipped with high-end, multicore processors and are able to handle tasks that are comparable to desktops. The problem that arises is that mobile networks are generally slower and more unstable. You have to deal with dead spots, bad reception, and horrible coffee shop Wi-Fi not to mention data is limited and can be expensive.

Where to Start: Drupal, HTML5 and JavaScript

By combining the powers of a highly customizable CMS (Drupal) and the fifth generation of the HTML standard (HTML5) we can find a solution to most of the problems associated with cross platform implementation and take advantage of open source technologies. One of the benefits of Drupal is that there are thousands of modules, all contributed by its ever growing community, and if you can’t find the module you’re looking for, you can build one yourself. Drupal will be the center of the app, and content management as well.

To give relief to the Drupal CMS, use HTML5, CSS3, and JavaScript to put together a unique and intuitive UI that acts more like an application, and less like a website. All three of these technologies are native to all phones and tablets. HTML5 is extremely useful. For starters its video, audio, and canvas tags boost the power of HTML to the next level. We also use it for a JavaScript API for local storage, application cache, history management, cross document messaging, and web workers, there are many other reasons to use HTML5 as well. CSS3 replaces flash, allowing for shape transformations, transitions, and animations and because it’s supported by all browsers, use JavaScript as the backbone of the UI itself.

Benefits

One of the main benefits of this set up is that both the front-end and the back-end are versatile and flexible. The use of HTML5, CSS3, and JS creates a clean looking UI that is both functional and easy to implement. The UI itself can look, feel, and behave like a desktop and native mobile app, giving it that cross-browser compatibility. This method also saves resources and bandwidth, especially for people using mobile networks. This also lowers development costs, and saves time and money on maintenance in the long run.

Drawbacks

Developing the API is going to take some extra development time and there will be a definite learning curve to HTML5 JavaScript API and JavaScript frameworks. More resources will also be spent on developing the UX (user experience).

In the End

This is a hybrid design that favors the mobile trend. If your website mainly displays static content that requires minimal user interaction, then this concept might not be for you. This concept favors a more complex website that needs high interactivity but also requires mobile support. In the end, it all depends on your needs, and your users’ needs.