Hybrid apps development with Ionic

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.

 

cordova-ng-ionic

 

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>

Stacked labels in Ionic

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.

Ionic tabs component

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:

Ionic CLI

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.

ngCordova

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.

Ionic Creator

Ionic live reload

4) LiveReload: update app with code changes instantly, even when running on device.

$ ionic run --livereload

Ionic View App

5) View App: share Ionic app with clients, customers or testers through this app.

App available on Android and iOS devices.

Ionic Cloud

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.

ionic2beta
Official docs

Related articles

Positioning your app in the App Store or Google Play

Hybrid apps development with Ionic

Testing a mobile app using Sauce Labs, Jenkins and Appium

3 thoughts on “Hybrid apps development with Ionic”

Leave a Comment

Responsable ¬Ľ Solidgear.
Finalidad ¬Ľ Gestionar los comentarios.
Legitimaci√≥n ¬Ľ Tu consentimiento.
Destinatarios ¬Ľ Los datos que me facilitas estar√°n ubicados en los servidores SolidgearGroup dentro de la UE.
Derechos ¬Ľ Podr√°s ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

¬ŅNecesitas una estimaci√≥n?

Calcula ahora