Nowadays, hybrid mobile apps are being more frequently used in app development but, what is exactly a hybrid mobile app?
Hybrid mobile apps are built with a combination of web technologies like HTML, CSS and JavaScript, which are neither truly native mobile app, because target a WebView hosted inside a native container, nor Web-based, because are packaged as app for distribution and have access to native device APIs.
What is Ionic?
It’s an open source mobile SDK which provides tools and services for developing hybrid mobile apps. It’s built on top on AngularJS and Apache Cordova and is focused mainly on the look and feel and the UI interaction of an app, in order to simplify the front-end.
Ionic is both:
1. A CSS framework with a lot of reusable and customizable front-end UI elements, which allow developing a UI relatively quickly, such as headers, footers, buttons with different sizes and styles, lists, item avatars, cards, forms, inputs, toggles, checkboxes, radio buttons, tabs and many more.
Example of two CSS components, text input-stacked labels and button:
<div class="list"><label class="item item-input item-stacked-label"><span class="input-label">First Name</span><input type="text" placeholder="John"></label><label class="item item-input item-stacked-label"><span class="input-label">Last Name</span><input type="text" placeholder="Suhr"></label><label class="item item-input item-stacked-label"><span class="input-label">Email</span><input type="text" placeholder="john@suhr.com"></label></div><button class="button button-block button-positive">Create account</button>
2. A JavaScript UI library with JS components which give life to front-end elements and are used as HTML elements in the application.
One of the most interesting and used Ionic JS component is tabs component, which allows content to be shown or hidden based on the user selecting a tab.
Here is an example of this JS component in an Instant messaging app with three tabs: chat, groups and account.
<ion-tabs class="tabs-positive tabs-icon-top"><!-- Chats Tab --><ion-tab title="Chats" icon="ion-chatbubble-working" href="#/tab/chats"><ion-nav-view name="tab-chats"></ion-nav-view></ion-tab><!-- Groups Tab --><ion-tab title="Groups" icon="ion-person-stalker" href="#/tab/dash"><ion-nav-view name="tab-dash"></ion-nav-view></ion-tab><!-- Account Tab --><ion-tab title="Account" icon="ion-ios-gear" href="#/tab/account"><ion-nav-view name="tab-account"></ion-nav-view></ion-tab></ion-tabs>
Using the above code, we have a UI with three different tabs, following each OS’s design with an unique code, tabs at the bottom for iOS or tabs at the top for Android.
Platform Customization with Ionic
Using Angular’s ng-attr, it’s possible to dynamically define attributes based on platform. For example, to show tab icons on all devices except Android, you could use the following code.
<!-- if the platform is android don't add an icon, all other devices get an icon --><ion-tab title="Home" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">
Ionic is more than code, is an ecosystem
There is a lot of mobile development tools and resources that complete Ionic, such as:
1) Ionic CLI: commands to create, build, test and deploy apps onto any platform.
$ ionic run android: generates .apk, installs it on connected device and run it.
2) Ionic Native: more than 70 native device features using ngCordova plugins.
Camera, Touch ID, OAuth, Bluetooth, HealthKit, fingerprint auth and others…
3) Ionic Creator: drag&drop tool for designing UI, previewing app on devices, sharing with other, exporting and deploying.
4) LiveReload: update app with code changes instantly, even when running on device.
$ ionic run --livereload
5) View App: share Ionic app with clients, customers or testers through this app.
App available on Android and iOS devices.
6) Ionic Cloud: Full-stack backend services and tools for Ionic apps.
Ionic 2
Ionic team is currently working on a new version of the framework, which is built on top of Angular 2, bringing new components and better performance, among other interesting features.
Related articles
Positioning your app in the App Store or Google Play
Thanks for providing detailed information about ionic, really nice and helpful.
Thank you very much Stella for your feedback. I’m glad to know the post is being helpful.
Thank you very much .Great tutorial and simple to understand.Keep it up.