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 ?
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
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.
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"> <ion-content> <ion-nav-view></ion-nav-view> </ion-content> </body>
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.
RELATED TUTORIALSIonic 4 Tutorial: Building and Theming a Login & Register UI with Angular Forms
Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server
Ionic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 3 Grid System Tutorial
Learn Ionic 3: Easy Steps Tutorial
Ionic 3 Routing and Navigation Tutorial & Examples
Ionic 2/3 - Create, Generate and Add Pages