I like the Android platform and I love to use Java, especially for Android. After finishing the development, you’ll have a nice mobile app, with a native feel and look for Android phones and/or tablets. No more! Well, you could say, that’s what I was looking for! You are right. But, take a breath and think about it for a little while.

You are missing an important percentage of the mobile market

You may have many reasons to target a bigger audience, such as - maybe your client wants more customers to find out about his mobile app so they can achieve more sales or whatever else, or maybe you want a bigger income from your app so you need, at least, to target one more platform if not more than one .

The most obvious choice after Android is iOS. So, if you want your app to be available for this platform's users too, you need to deal with Swift and iOS SDK or you’ll have to hire a developer who has these skills. Anyway, you’ll have two apps - each one with its own budget; and two code bases to maintain. Well, that's not an easy task at all. Now, if convinced, is there a solution ?
Yes ! Welcome to Hybrid Mobile Development.

What is hybrid mobile development and what can it do for you ?

Simply put, hybrid mobile development is about creating mobile applications with web technologies, JavaScript, CSS, and HTML,instead of native platform languages like Java for Android and Swift for iOS.

You can develop your mobile app as a web app and even test it on the web browser and then, wrap it with a container (Like Cordova) to behave like any native app in order to access the device functionalities which a normal web app can’t access.
So, what benefits do you get from hybrid development ?
Well, at least now, you have just one code base (for all platforms you target) which will reduce the complexity of development for more than one platform alongside reducing the cost. You don’t need more than one developer for the same app. And, in case you are developing the app yourself, you don’t need to deal with different development environments or learn different SDKs, different APIs, and different languages. Another benefit of Hybrid apps is that if you happen to be a web developer, then you can use your already acquired skills to develop mobile apps.

I’m writing this article to help you see why going hybrid for your next mobile app is a really good choice whether you are someone looking to have a mobile app or a mobile apps developer. Also, this article aims to show you how to begin hybrid mobile development.

The status of hybrid mobile apps in 2016

Back in 2010 when hybrid mobile apps started to show up and hybrid mobile development began as a new area in the development world, hybrid apps were not what users expected or were used to using. They were buggy and lacked performance with huge noticeable differences from native apps. So, people chose a safe way of developing native mobile apps.

But, it’s time to get rid of those old thoughts about hybrid mobile. This is not 2011 but 2016 and things have significantly changed from what was there earlier. Web browsers have become more powerful, web standards and languages have evolved, new frameworks with modern features have emerged, mobile devices are more than twice as powerful and performance is no longer an issue. You’ll hardly notice any difference in performance between a native and a hybrid app.You’ll rarely need a native app rather than hybrid except for some cases which I even can’t think of, right now.
So, why the hell do you need a native app over hybrid if you can reduce your cost, easily maintain your code base, and at the same time - get nearly the same performance and the same look and feel ?

Frameworks of the hybrid mobile

Before starting hybrid development, you need to decide which framework you need to use.That’s not a very easy decision to make. There are a lot of frameworks with a lot of similarities and a lot of differences (costs, learning curves, community, programming language etc.) but you need to pick up one. So, let me help you.

I would like to introduce you to one framework that rules them all - Ionic. It is based on Cordova (native container) and uses AngularJS (the powerful and popular client side JS framework developed by Google).This mix makes Ionic one of the most popular and most used hybrid mobile frameworks among developers.

Why Ionic ?

As I said, Ionic mixes the popular native container Apache Cordova for accessing the native device functionality (needed by mobile apps) with Angular.js, HTML5, and CSS. It will cost you nothing, it’s free .

Ionic also has a great community of developers around it, a great team behind its development, and a lot of related projects which can help you achieve more when using the framework.

So with Ionic, you can use Angular.js (JavaScript), HTML and CSS to build your hybrid mobile apps that look and feel like native apps and do the same things that native apps do (Thanks to Cordova) while targeting either Android or iOS (recently Windows Phone too) with a unique and shared code base.

Recently, the Ionic team started to develop Ionic 2 (now in beta mode), a completely rewritten framework based on Angular 2 which brings even more performance and features to hybrid mobile development and uses a modern language, TypeScript instead of plain JavaScript. Don’t be afraid of TypeScript. It’s just a Super Set of JavaScript (version 2015 or ECMA Script 6) plus types.

Starting with Ionic 1

Before getting started with Ionic, make sure that you have Node.js installed. If not, you need first to install the Node.js. You can follow this tutorial on how to install node.js using nvm.

Next, you need to install Ionic, simply using NPM via your terminal on Linux and MAC or command prompt on Windows.

  1. npm install -g cordova ionic

Also, make sure that you have installed the SDKs of your target platforms i.e Android SDK or iOS XCode.

If you have never worked with Ionic, I recommend you to check the Ionic getting started guide.

Now, let's start by understanding the anatomy of an Ionic 1 project or app. When you scaffold your project, you get a bunch of files, each one has its own role inside your project files which are part of configuration and actual app code. Let's start by configuration files.

  • package.json
    An ionic 1 project is also a Node.js project, so a package.json file is necessary to list the information about the project and necessary modules it needs to install.

  • bower.json
    Ionic 1 uses Bower to install the client side libraries. This file lists the packages to be installed.

  • config.xml
    This one is for Cordova . It lists some configuration properties .

  • gulpfile.js
    This file is necessary for Gulp (The task runner, used by Ionic, to automate the development tasks such as compressing assets and building etc..) It lists build tasks needed by Ionic 1.

  • hooks/
    A folder which contains hooks. A hook is a script which gets executed at some point of time.

  • plugins/
    contains the installed Cordova plugins.

  • www/
    This is where your app files live. In www/ folder is where you will actually work and spend most of your development time ,it is simply a web app and you can serve it with any web browser .
Building app layouts

When developing your app with Ionic 1, you create your user interface layouts using HTML markup and you customize the look and feel with CSS ( in case you don’t want to use the default one, which is fine by the way ) .The initial markup looks like this.

  1. <body ng-app="myApp">
  3. <ion-content>
  4. <ion-nav-view></ion-nav-view>
  5. </ion-content>
  7. </body> 


Notice the custom tags used by Ionic (Thanks to Angular.js directives).


Conclusion


This is the first part of Why go hybrid. See you in the next part in which we are going to continue learning how to build apps with Ionic 1.


This write up was first published on my website Techiediaries.