Chapter 1. Introduction
The mobile application industry is flourishing in the 21st century. Hardware is getting better, and software capabilities have increased exponentially on the small devices we carry around with us every day. The demand for mobile applications has never been higher, and developers are struggling to create enticing experiences on all major platforms to reach the broadest market of people.
The most prevalent approach towards tackling this coveted task is to build native applications. This method requires a deep understanding of various computer languages, most notably Objective-C and Swift for iOS/OS X, as well as Java for Android development. Moreover, developers need to be comfortable with using various frameworks and platform-specific SDKs to generate their applications. Needless to say, this strategy comes with hurdles of challenges and can become very costly when trying to target multiple devices at once.
Hybrid development, on the other hand, is a cost-effective approach towards building multi-platform applications. In essence, hybrid applications are mobile-friendy web applications wrapped in a native container application. This structure allows you to develop using HTML5, CSS3, and JavaScript without having to interact with native platform-specific code. Many developers have been taking advantage of this new approach in order to cope with the growing demand of mobile applications built to run on multiple platforms. Since the advent of the smartphone, numerous frameworks have been created with the sole purpose of facilitating the development of this new type of application. Sencha Touch, Kendo UI, and jQuery mobile are just some of the growing number of mobile-friendly frameworks. There are also three major frameworks for manipulating the DOM, namely Facebook’s React library, Google’s AngularJS, and Backbone.js. In addition, Bootstrap, Foundation, and Topcoat serve to help you with designing your hybrid applications. Lastly, there are three principal hybrid development platforms, specifically Apache Foundation’s Cordova, Adobe’s PhoneGap, and a newcomer called Crosswalk.
In this vast sea of frameworks, it becomes hard to choose the best combination for developing your applications. Most of these frameworks are not well optimized for the hardware limitations of mobile devices and can cause compatability issues when used alongside each other. This is where Ionic comes in.
Ionic
Drifty, the company behind Ionic, is a team of talented developers and designers. The company has created successful projects in the past such as Jetstrap, an interface builder for Bootstrap, and Codiqa, an online drag-and-drop tool for building hybrid applications and mobile websites. Drifty’s current mission is to significantly change the future of mobile software development, specifically by improving hybrid mobile application development through Ionic’s product offerings.
Ionic combines the strength of Apache’s Cordova platform, AngularJS, and Angular-UI-Router with its own developed application structure, components, and style sheets. In essence, Ionic takes care of integrating the best mobile frameworks, letting you focus on developing your application’s functionality and design without complication.
Built on top of Cordova, it opens up access to scores of Cordova plugins, which act as handlers for various native functionality such as accessing the device’s camera, photos, and geolocation, just to name a few. Moreover, the platform lets you create native local and push notifications, and capture device motion/orientation, essentially blurring the lines between native and hybrid application functionality.
What’s more, Ionic’s decision to integrate AngularJS gives you access to the plethora of functionality attributed to the latter framework. It is a great structural decision, as it compels you to organize code into controllers, services, and directives. Finally, having AngularJS under your belt opens you up to the countless modules created by the open source community, allowing you to extend the core Ionic functionality. For instance, for our TrendiCity application we integrated the popular angular-local-storage module to store favorite Instagram posts on mobile devices.
Furthermore, Ionic has been greatly focused on the open source community. Not only is the framework itself open source, but the team behind it also created detailed documentation as well as hosting a collection of helpful code samples on CodePen. A public forum serves as a great resource pool to communicate with other community developers and allows for interaction with the Ionic team directly.
In the following chapters, we will be stepping through the creation process of our TrendiCity application built using Ionic. In addition, we will dive into the range of development possibilities that Ionic allows for when building hybrid mobile applications.