Series introduction to the Ionic Framework (Build hybrid application on mobile) (P1)

Before investigating Ionic, you need to understand Hybrid Apps. What's it mean ? What's diffirent about Hybrid apps and Native apps ?

What're Native apps ?

Native apps are what typically springs to mind when you think of an app. You dowload them from App Store or Google Play,they sit within your device's application and you launch them by tapping their icon.Specially, these apps can using all of features on your device (like as : camera, take a picture, get pictures, google maps, contact, take a phone call,v.v....).What distinguishes native apps from the alternatives mentioned is that they are designed and coded for a specific kind of device.For example , iPhone apps are written in Objective-C, Android apps in Java, etc. Each mobile platform offers developers their own development tools,interface element and standardised SDK.This should enable any professonial developers to develop a native apps relatively easily.

• Its not just access to core device capabilities though,native apps,when well designed , respect the design patterns and standars of each platform.For example, a left-aligned header on Android vs a center-aligned header on iOS,there's hundreds of small diffirences in the design of user interactions on each platform.
• The main downside of native apps is that it will not work with other kinds of devices.If you write an app in Objective-C, just only running on iOS system and not running on Android without being completely re-written in Java. So when building for multiple platform, you need to build,maintain multiple,seperate versions of your apps.Its also common for developers to specialise in one platform. So you'll have to find other coders to develop for each platform you want your apps to be available for.If your budget allow its, please choose this way to build your apps.

What're Hybrid apps ?

Somewhere between native and web apps you’ll find hybrid apps. They are usually quicker to build (and thus cheaper) than native apps, but a step-up from what you can expect out of browser-based web apps. Is the hybrid app the best of both worlds?

• The bulk of the app is built using cross-compatible web technologies, such as HTML5, CSS and Javascript — the same languages used to write web apps. Some native code is used however to allow the app to access the wider functionality of the device and produce a more refined user experience. For native apps, instead only native code is used. The advantage of this approach is obvious: only a portion of native code has to be re-written to make the app work on the different kinds of devices available.
• An advantage that hybrid apps have over native is that it’s faster and easier to develop. It’s also easier to maintain and you can change platforms. The app itself will not be as fast as a native app as it still depends on the browser speed.
• There are two main players in the world of hybrid apps: Phonegap/Cordova and Appcelerator Titanium. With these tools you create HTML/CSS/Javascript local files, design and build the app as if it was a website, then use Cordova to wrap them into a mobile app.

What's the Ionic ?

You can find on google and have many articles were mentioned it.For example,it's on Wiki :

Ionic is a complete open-source SDK for hybrid mobile app development. Build on top of AngularJs and Apache Cordova,Ionic provides tools and services for developing hybrid mobile using Web technologies like CSS,HTML5,and Sass (I've written in previous my articles on viblo, you can read on Sass). Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

In this article, I'll show you guy the steps to setup environment,creating, write and run apps using Ionic Framework with the way is best of the fast and simple. The advantages of Ionic are :

• Quick install and sleazy.Instead of setup and install IDE as Android Studio,Xcode,..etc.We just only install NodeIS and using command prompt to install Ionic and Cordova,so quickly and useful, we also use to Notepad++ or Subliume Text to coding.
• You just only know that are HTML,CSS,JS and AngularJS.If you need to some functionals as rang,camera, just take 5 minutes to see API Cordova, its done.
• Already mixed IonicViewer,allow to test apps on mobile,dont need to complexible connect (but debug is not easy