Hybrid Application Development

This post will be the first in a three part article on mobile application development using what is referred to as a hybrid approach. I’ll try my best to explain and illustrate some of the common pitfalls, known limitations and design considerations that should not be overlooked when using a hybrid approach.

Concepts are best learned by way of example – so, as part of the article we will design (and redesign) a mobile app. Lets call it The Unreasonable Download App (tudA for short). I will also provide tips on how to evaluate performance issues and how to fix them. At the end of the series, my blatant bias for hybrid development will hopefully be so imbued on you, that you will be trying to figure out how to cook me a serving of ‘Mackerel Run dung’… All with a hybrid mobile app 😀

What is hybrid application development?

Android SDK vs iOS SDK.001The average mobile application is developed with a platform specific toolchain or SDK. For Android, this is the Android SDK, which provides the developer with a primarily Java based language for writing the application code. On iOS devices there is the equivalent iOS SDK where application code is written using Objective C or Swift. These toolchains (using Java, Objective C and Swift) are often referred to as the native SDKs on their respective platforms. If we intend to simultaneously launch tudA on both Android and iOS,  it means we need at minimum two developers working on separate codebases: one for android and the other for iOS.

In comparison, all web applications are coded with a combination of HTML, CSS and JavaScript regardless of the platform it is viewed on. To simplify, we can consider HTML+JavaScript+CSS as a single (Web) SDK used to create applications that are used in a device’s web browser. In other words, our tudA app could be in one codebase and still be used on two platforms (Android & iOS).

A hybrid application combines both of these worlds

Android SDK vs iOS SDK.002The application views and logic are built using the Web SDK but are packaged and deployed to the app store just like one fully developed with a native SDK. So using our two developer analogy from before, we have two developers now coding from one codebase, that will be deployed to two platforms simultaneously.

With a high level understanding of native and hybrid development in place, we will embark on developing an application from start to finish and discuss the pros and cons of each method.

tudA -The Unreasonable Download App

Download Project: v1.0.0.zip

To keep things super simple, and easy to reproduce, the source code will be available in a public bitbucket account. It will be a simple application with no purpose other than to illustrate the concepts of hybrid application development. It will be loaded with images and HTML to make it unreasonably large in order to exaggerate and illustrate common issues. There will be no application frameworks (Angular/Meteor/jQuery Mobile etc.) – just plain HTML, JavaScript and CSS. As we progress along the articles, links will be provided where the source can be downloaded and run. Apache Cordova will be used as the framework for packaging and deploying the hybrid application to a device. Cordova is out of the scope of these articles, but it is fairly easy to setup. More on Cordova in part 2…

Part 2 will deal with common misconceptions about hybrid apps, and we will implement the first iteration of tudA using two different strategies and evaluate how some of those misconceptions come about. We will also look at the pros and cons, and some suggestions on how to tackle the drawbacks of each…

– Martello Jones

Published by Martello Jones

I enjoy working on interesting projects that make life better.

One Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.