Mobile apps development is a hot topic for both companies and individual developers. You can use various kinds of frameworks and tools to build mobile apps for different platforms. In this book, we use Ionic 2 to build so-called hybrid mobile apps. As the first chapter, this chapter provides the basic introduction of hybrid mobile apps and helps you to set up the local environment for development, debugging, and testing.
Mobile Apps Refresher
With the prevalence of mobile devices, more and more mobile apps have been created to meet all kinds of requirements. Each mobile platform has its own ecosystem. Developers use SDKs provided by the mobile platform to create mobile apps and sell them on the app store. Revenue is shared between the developers and the platform. Table shows the statistics of major app stores at the time of writing.
Table 1-1.
Statistics of major app stores
App Store | Number of available apps | Downloads to date |
|---|
App Store (iOS) | 2.2 million | 140 billion |
Google Play | 2.6 million | 65 billion |
Windows Store | 669,000+ | -- |
BlackBerry World | 240,000+ | 4 billion |
Amazon Appstore | 334,000+ | -- |
The prevalence of mobile apps also creates a great opportunity for application developers and software companies. A lot of individuals and companies make big money on the mobile apps markets. A classic example is the phenomenal mobile game Flappy Bird . Flappy Bird was developed by Vietnam-based developer Dong Nguyen. The developer claimed that Flappy Bird was earning $50,000 a day from in-app advertisements as well as sales. Those successful stories encourage developers to create more high-quality mobile apps.
Lets now take a look at some key components of mobile app development.
Hybrid Mobile Apps
Developing mobile apps is not an easy task. If you only want to target a single mobile platform, then the effort may be relatively smaller. However, most of the times we want to distribute apps on many app stores to maximize the revenue. To build that kind of apps which can be distributed to various app stores, developers need to use different programming languages, SDKs, and tools, for example, Objective-C/Swift for iOS and Java for Android. We also need to manage different code bases with similar functionalities but implemented using different programming languages. Its hard to maximize the code reusability and reduce code duplications across different code bases, even for the biggest players in the market. Thats why cross-platform mobile apps solutions, like Xamarin ( https://www.xamarin.com/ ), React Native ( https://facebook.github.io/react-native/ ), and RubyMotion ( http://www.rubymotion.com/ ) also gain a lot of attention. All these solutions have a high learning curve for their programming languages and SDKs, which creates a burden for ordinary developers.
Comparing to Objective-C/Swift, Java, C# or Ruby, web development skills, for example, HTML, JavaScript, and CSS are much easier to learn. Building mobile apps with web development skills is made possible by HTML5. This new type of mobile apps is called hybrid mobile apps. In hybrid mobile apps, HTML, JavaScript, and CSS code run in an internal browser (WebView) that is wrapped in a native app. JavaScript code can access native APIs through the wrapper. Apache Cordova ( https://cordova.apache.org/ ) is the most popular open source library to develop hybrid mobile apps.
Compared to native apps, hybrid apps have their benefits and drawbacks. The major benefit is that developers can use existing web development skills to create hybrid apps and use only one code base for different platforms. By leveraging responsive web design techniques, hybrid apps can easily adapt to different screen resolutions. The major drawback is the performance issues with hybrid apps. As the hybrid app is running inside of an internal browser, the performance of hybrid apps cannot compete with native apps. Certain types of apps, such as games or apps that rely on complicated native functionalities, cannot be built as hybrid apps. But many other apps can be built as hybrid apps.
Before making the decision of whether to go with native apps or hybrid apps, the development team needs to understand the nature of the apps to build. Hybrid apps are suitable for content-centric apps, such as news readers, online forums, or showcasing products. Another important factor to consider is the development teams skill sets. Most apps companies may need to hire both iOS and Android developers to support these two major platforms for native apps. But for hybrid apps, only front-end developers are enough. Its generally easier to hire front-end developers than Java or Swift/Objective-C developers.
Apache Cordova
Apache Cordova is a popular open source framework to develop hybrid mobile apps. It originates from PhoneGap ( http://phonegap.com/ ) created by Nitobi. Adobe acquired Nitobi in 2011 and started to provide commercial services for it. The PhoneGap source code was contributed to the Apache Software Foundation and the new project Apache Cordova was started from its code base.
An Apache Cordova application is implemented as a web page. This web page can reference JavaScript, CSS, images, and other resources. The key component of understanding how Cordova works is the WebView . WebView is the component provided by native platforms to load and run web pages. Cordova applications run inside the WebView s. A powerful feature of Cordova is its plugin interface which allows JavaScript code running in a web page to communicate with native components. With the help of plugins, Cordova apps can access a devices accelerometer, camera, compass, contacts, and more. There are already many plugins available in Cordovas plugin registry ( http://cordova.apache.org/plugins/ ).
Apache Cordova is just a runtime environment for web apps on native platforms. It can support any kind of web pages. To create mobile apps that look like native apps, we need other UI frameworks to develop hybrid mobile apps. Popular choices of hybrid mobile apps UI frameworks include Ionic framework ( http://ionicframework.com/ ), Sencha Touch ( https://www.sencha.com/products/touch/ ), Kendo UI ( http://www.telerik.com/kendo-ui ), and Framework7 ( http://framework7.io/ ). Ionic framework is the one we are going to cover in this book.
Ionic Framework
Ionic framework is a powerful tool to build hybrid mobile apps. Its open source ( https://github.com/driftyco/ionic ) and has over 28,500 stars on GitHub, the popular social coding platform. Ionic framework is not the only player in hybrid mobile apps development, but its the one that draws a lot of attention and is recommended as the first choice by many developers. Ionic is popular for the following reasons:
Use Angular ( https://angular.io/ ) as the JavaScript framework. Since Angular is a popular JavaScript framework, the large number of Angular developers find it quite easy when moving to use Ionic for mobile apps development.
Provide beautifully designed out-of-box UI components that work across different platforms. Common components include lists, cards, modals, menus, and pop-ups. These components are designed to have a similar look and feel as native apps. With these built-in components, developers can quickly create prototypes with good enough user interfaces and continue to improve them.
