Introduction
In a world dominated by smartphones, we need to have tools to develop software for them. There are two ways to do this. We can develop applications using native code, for example using Java to make Android applications, or swift/obj-c for IOS or, on the other hand, we can make hybrid applications using some frameworks.
The best feature of hybrid apps is the time and money that you can save. You only need to develop one hybrid app and the framework builds it for the different platforms (IOS, Android, Windows Phone, and Blackberry).
Now you can search for different frameworks on the market. I choose one, Ionic, because it has the biggest community and the most resources. Ionic combines AngularJS with HTML5+CSS (SASS) and uses Cordova to access native API functions.
Ionic Framework
Ionic is a free, open source, framework SDK based on AngularJS and Cordova that offers a mobile component library and tools to build interactive apps. Ionic rejected the idea that mobile web apps had to be clunky, slow, and non-native. With Ionic, you’ll be able to build hybrid mobile apps that look and feel just like native mobile apps. Ionic utilizes AngularJS to provide the application with structure, while Ionic itself focuses on the user interface. Ionic’s components are powerfully simple and they offer somewhat simpler building blocks that can be combined to deliver rich user interfaces.
Today, Ionic powers over 1.5 million mobile apps and websites (and even some desktop apps!) built by small startups up to Fortune 500 companies. So, if you are in doubt about the community around it, look at the projects on GitHub, templates, forums, and you can decide for yourself.
The combination of these technologies makes Ionic a really feature-rich platform for building your mobile apps.
Features
- Ionic uses Apache Cordova, which gives us access to a native API, so we can use the camera, GPS, etc.
- Making apps with Ionic is very easy and fast, and you have tools like Ionic Creator to mockup and create apps online.
- Ionic respects the design and conventions of platforms. For example, if you put a tab menu in your app. In Android, it shows it on the top of the screen, but in IOS you can see it at the bottom.
- You can quickly create a project with starter templates
- It is easy to learn. You only need to know HTML, CSS, and JavaScript.
Quick Start
First, we need node.js installed in our system.
Installation of Ionic and Cordova
$ npm install -g ionic cordova
Creating an app using starter templates
$ ionic start myapp sidemenu
$ cd myapp
$ ionic serve –lab
And you are ready! You have a hybrid application.
Pay attention to the differences between Android and iPhone design.
Here’s another example:
.
Recommended links
Official page: http://ionicframework.com/
Docs : http://docs.ionic.io/docs/ & http://ionicframework.com/docs/
Components: http://ionicframework.com/docs/components/
Icons: http://www.ionicons.com
Forum: https://forum.ionicframework.com/
Showcase: http://showcase.ionicframework.com/
Market: https://market.ionic.io/
Demos Codepen: http://codepen.io/ionic/public-list