Why going mobile hybrid ?

I like Android platform and i love to develop with Java especially for Android .After finishing development you'll have at the end a nice mobile app,with a native feel and look, for Android phones and/or tablets, no more ! Well you can say that's what i was looking for ! and 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

Yes that's right .You may have many reasons to target a bigger audience, 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 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 which will not be an easy task at all.Now if convinced ,is there a solution ? yes welcome to hybride mobile development.

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

Simply a hybrid mobile development is about creating mobile applications with web technologies ,JavaScript,CSS and HTML,instead of native platform languages such as Java for Android and Swift for iOS.So 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 and to access device functionalities which a normal web app can't access.So what benefits you get from hybride development ? well at least now you have just one code base (for all platforms you target) which will reduces the complexity of developing for more than on platform ,reduces your costs ,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 to learn different SDKs different APIs and different languages.Another thing,if you happen to be a web developer then you can use your already aqcuired skills to develop mobile apps.

I'm writing this article to help you see why going hybride for your next mobile app is a really good choice either if you are someone looking to have a mobile app for a business or a mobile apps developer who develops apps for himself or for his clients.Also this articles aims to show you how to begin hybride mobile development.

The state of hybrid mobile apps in 2016

Back to 2010 when hybride mobile apps start to show up and hybride mobile development begins as a new area in development world ,hybride apps were not what users expect or used to use,they were buggy and lacked performance with huge seeable difference from native apps.So people took a ,But be happy it's time to get rid of those old thoughts about hybride mobile ,this is not 2011 it's 2016 and things have significantly changed from what was before,web browsers become more powerful,web standards and languages evolved,new frameworks with modern features emerged,mobile devices are more than twice powerful, performance is no more an issue,you'll hardly notice any difference in performance between a native and hybride app .You'll rarely need a native app instead of hybrid app except for some cases which i even can't think of them right now.So why the hell you need a native app instead of a hybride if you can reduce your costs ,easily maintain your code base and in 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 pickup one so let me help you.I introduce you one framework that rules them all ,It's Ionic ,it is based on Cordova(native container) and uses Angular.js (the powerful and popular client side javascript framework developed by Google).This mix makes Ionic one of the most popular and most used hybride mobile framework among developers.

Why Ionic ?

As I said Ionic mixes the popular native container Apache Cordova for accessing 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 it 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 native apps do(Thanks to Cordova) while targeting either Android and iOS (recently Windows Phone too) with a unique and shared code base.

Recently the Ionic team started to develop Ionic 2 (Now on beta) 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 superset of JavaScript(version 2015 or Ecmascript 6) plus types.

Starting with Ionic 1

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

Now lets 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 start by configuration files:

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

bower.json : Ionic 1 uses Bower to install client side librairies ,this file lists 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 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 you 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's fine by the way ) .The initial markup looks like this :

<body ng-app="myApp">





Notice the custom tags used by Ionic ,thanks to Angular.js directives.


This is the first part of why going hybride ,see you in the next part in which we are going to continue learning how to build apps with Ionic 1.

comments powered by Disqus