1© 2014 Virtusa Corporation. All rights reserved

Getting started with the Ionic FrameworkAnuradha WeeramanSenior ArchitectVirtusa21 Sep 2015

Colombo Mobile

2

What is ionicGETTING STARTED WITH THE IONIC FRAMEWORK

• The Ionic Framework is a hybrid mobile development technology

• Relative new-comer. version 1.0 released in May 2015

• Allows developers to build mobile optimized apps

• Uses standard technologies like HTML5, CSS3 and Javascript

• Built on top of popular frameworks like Angular and Cordova

• Has a vibrant community and is being enhanced quite steadily

• Has the backing of Drifty, the startup behind ionic

• Ionic is to mobile what Bootstrap is to web applications

3

A few examples of apps built using ionicGETTING STARTED WITH THE IONIC FRAMEWORK

4

What you need to get started building ionic appsGETTING STARTED WITH THE IONIC FRAMEWORK

• Linux, Mac or Windows• NodeJS• Text Editor• Web Browser• Android / iOS SDK and related tools• Some knowledge on

• Javascript• CSS3• HTML5• AngularJS

5

Essential ToolsGETTING STARTED WITH THE IONIC FRAMEWORK

npm install –g ionic cordova

6

The components of ionicGETTING STARTED WITH THE IONIC FRAMEWORK

Android iOS

Cordova

Angular

Ionic CSS components and library

Apps Apps

7

Angular JSGETTING STARTED WITH THE IONIC FRAMEWORK

• Model View Controller (MVC)• Dependency injection• Data binding• HTML templates• Directives• Services• Routing and navigation• Deep linking

8

Apache CordovaGETTING STARTED WITH THE IONIC FRAMEWORK

• Contributed to ASF by Adobe• WebView on steroids• Consistent JS API across platforms• Capable of hosting web apps that access the hardware• 1000+ plugins available in the eco system• Open source and actively developed• Foundation for ionic• Angular-ized by ngCordova

9

Essential Tools – BowerGETTING STARTED WITH THE IONIC FRAMEWORK

npm install –g bower

10

Demo of ionicGETTING STARTED WITH THE IONIC FRAMEWORK

• Create a single view app• Load data to a list using $http• Render the list using the ionic list component• Add a Javascript library• Add a Cordova plugin

11

IoniconsGETTING STARTED WITH THE IONIC FRAMEWORK

• Bundled with ionic• 733 scalable icons• Searchable on the website

12

Essential Tools – Grunt vs GulpGETTING STARTED WITH THE IONIC FRAMEWORK

Only difference is the way you configure your tasks and how they execute the tasks.

Configuration: Grunt is configuration based. Gulp is stream based.

Execution: Grunt is sequential. Gulp runs concurrently.

13

Some best practicesGETTING STARTED WITH THE IONIC FRAMEWORK

• Convert all HTML templates to Angular JS templates (gulp-angular-templatecache)

• Concatenate files (gulp-useref)

• Minify and obfuscate the code (grunt-contrib-uglify)

• Prevent dependency injection from breaking when the app is minified (gulp-ng-annotate)

14

Essential Tools – unit testing and code coverageGETTING STARTED WITH THE IONIC FRAMEWORK

Karma, PhantomJS and IstanbulFor unit testing and code coverage

15

Essential Tools – yeomanGETTING STARTED WITH THE IONIC FRAMEWORK

Can be used to scaffold an ionic app which incorporates best practices and tools so you can immediately get to work building the app and not setting up frameworks. Let’s see a small demo.

16

Essential Tools – CrosswalkGETTING STARTED WITH THE IONIC FRAMEWORK

10x increase in HTML/CSS rendering.App size will increase by 10-15 MB.

17

AlternativesGETTING STARTED WITH THE IONIC FRAMEWORK

Ionic competitor.Less well known.Community is not as active as ionic.

iOS centric UX.Uses it’s own MVC framework.

18

Answer the question and win a book!GETTING STARTED WITH THE IONIC FRAMEWORK

19

Answer the question and win a book!GETTING STARTED WITH THE IONIC FRAMEWORK

What is the command used to install ionic?

1. bower install ionic2. apt-get install ionic3. npm install –g ionic4. yum install ionic

20© 2014 Virtusa Corporation. All rights reserved

© 2014 Virtusa Corporation. All rights reserved. Virtusa and all other related logos are either registered trademarks or trademarks of Virtusa Corporation in the United States, the European Union, and/or India. All other company and service names are the property of their respective holders and may be registered trademarks or trademarks in the United States and/or other countries.

Anuradha Weeraman aweeraman@virtusa.comThanks