What is Ionic and how does it work?
Ionic was originally built by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. After releasing an alpha version of Ionic in November 2013, released v1.0 beta in March 2014 and v1.0 final in May 2015. Now, Ionic has a massive international community of developers and contributors propelling its growth and adoption. Companies whether small or large are using Ionic to build better apps and faster. In 2015 Ionic developers reportedly created over 1.3M apps with Ionic, numbers that continuously grow day by day.
Features of Ionic
The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity, you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with Sass and includes easily customized variables and mixins. The CSS in a state which can be easily extended to get your own look and feel.
Optimized for Angular
it is optimized for Angular. When you work with projects, your initial code will be an Angular project, so if you are using Ionic, you can pretty much assume Angular as well.
There is also strong UX support as well. By that, it means common UX metaphors like pull to refresh are easy to add (ion-refresher) via directives. Other examples include scrollable panes and even favorite, infinite scroll. Basically, all the "typical" UX things you may need in your app are baked into the framework and are pretty easy to use.
Support for native features
Ionic comes with the functionalities that can be found in native mobile development SDKs and also offers features such as typography, mobile components, an extensible base theme, and interactive paradigms.
Build hybrid mobile apps
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that has access to the native platform layer. Hybrid apps have many benefits over pure native apps.
Create the front-end UI
Ionic as the front-end UI framework that handles all of the looks and feels and UI interactions your app needs in order to be compelling. Kind of like “Bootstrap for Native,” but with support for a broad range of common native mobile components, slick animations, and beautiful design.
Easy to maintain
Reach customers, grow sales, balance your books and work in collaboration from any device.
Compared to hybrid applications, mixing Ionic code with native mobile app code in PhoneGap (now called Apache Cordova) allows for higher performance of the resulting product - utilizing AngularJS (rather than jQuery) allows Ionic to rely on native hardware acceleration (rather than extensive DOM manipulation). Ionic leverages CSS transitions and transforms for animation as a way to leverage the GPU and maximize available processor time.
Ionic is focused on building for modern Web standards and for modern mobile devices. For Android, Ionic supports Android 4.1 and up. For iOS, Ionic supports iOS 7 and up. Ionic 2 supports the Universal Windows Platform for building Windows 10 apps. Ionic Framework, powered by Angularjs, supports BlackBerry 10 apps.
How does it work?
Ionic serve command handles this much better.
First off - it allows you to edit code in www and see it reflected immediately.
Upon running ionic serve iOS, the CLI will actually open a new tab for you, load your app, and constantly monitor your file system for changes.
As soon as you edit something, it automatically reloads the tab. Again, this is all stuff you could do with Grunt, but Ionic has it out of the box.
Why you use Ionic for hybrid app development?
It uses multi-platform UI, is consistent and this makes compatible with most of the mobile devices.
Ionic integrates with most of the plugins, add-ons, and modules for AngularJS and Cordova, in addition to its own quite extensive shop.
With its ongoing evolution, Ionic is significantly enhanced and improved compared to the previous versions.
The speed of development is rapid. The applications are built like native apps and give an edge to use from the web-native structures. And so, the speed is easy, fast and are maintenance friendly.
Setup for Ionic
Nodejs and npm
To develop and run Ionic apps, you need Nodejs, most importantly, because Ionic uses Node CLI to build tasks and generate resources. Navigate to Node Js official website to download Nodejs and it’s package manager: npm that is a Package Manager used to download almost every dependency in an Ionic Project.
To add Ionic to your Cordova, PhoneGap, or Trigger.io project, just reference the Ionic CSS and JS files from the web root of your app. The CSS and JS files can be found in the ionic-SDK npm package. You can also download them directly at https://code.ionicframework.com/ or in the GitHub repo: https://github.com/ionic-team/ionic. The release directory will have the files you need: https://github.com/ionic-team/ionic/tree/master/release.
Install TypeScript compiler.
Cordova and CLI
Install Cordova and Ionic CLI.
Now, you are ready to start building your apps with it. Continue on to get everything installed and start building with Ionic. You can share your comments. Thank you!