So you want to build a mobile app. You want it to work cross platform on multiple devices such as iOS, Android and Windows. A hybrid mobile app may be the way to go, and this article gives you a 10,000 foot view of how they work.
Why the name hybrid? Hybrid apps are built using HTML 5 and related technologies, including CSS 3 and the latest JavaScript libraries. They also leverage code libraries such as PhoneGap to interact with the mobile device and package the app for distribution. Hybrid apps can be installed on the device just like any native app. That’s a lot of moving parts, so the diagram below should help make this clearer.
HTML provides the structure to your application and is used to build each app screen with a defined set of visual elements. Headings, forms and buttons are created using HTML markup. The look and feel of the screen, including font, border and button colors and styling will all be defined using CSS. By separating structure and styling you’ll have an app that is easier to maintain and follows web standards. You can also use HTML 5 and CSS 3 features such as animations to spice up that sliding panel you’re thinking about using.
User interactions with your app are coded in JavaScript. “When you click the Save button, X happens.” To increase development efficiency, you’ll want to leverage JavaScript libraries such as jQuery. You also don’t want to build your user interface completely from scratch, and you want it to look like a mobile app. Powerful UI libraries such as jQuery Mobile (not to be confused with jQuery) are indispensable here. They will save you time while providing a UI that looks polished and is optimized for mobile.
By using these web technologies to build your app, you’ll be able to staff from a wider talent pool versus native app developers.
So far all this sounds just like a mobile-optimized web site. How do you get your code into an app and installed on your phone or tablet? That is where the “hybrid” truly comes into play. While written with web technologies, a hybrid app using PhoneGap or similar libraries can access device APIs such as location awareness, contact lists, and local disk storage. It lets you “bridge the gap” by translating calls from JavaScript to the device APIs for you. PhoneGap also lets you package your code in an app for distribution to public app stores such as Google Play or iTunes, or a private company app store that is curated using enterprise Mobile App Management tools.
Unlike native apps, a hybrid mobile app can be built with a common code base and distributed to multiple device operating systems. Testing will still be important for each OS. There are pros and cons to going with hybrid vs. native, which is covered extensively elsewhere. I hope this article gives you a better understanding of how all these parts fit together, to help you build the apps that meet your organizational and personal goals.
Labels: HTML5, Hybrid, Mobile
