SRIKALAHASTEESWARA INSTITUTE

OF TECHNOLOGY

IONIC FRAMEWORK
 INTRODUCTION
 All About ionic
 When should we use ionic framework
 Advantages
 Limitations
 Features of ionic framework
 Why we should choose ionic framework to build our app.
 History
 Installing ionic frameworks
 Starting your app
 Testing your app
 Building out your app
 WHAT IS IONIC FRAMEWORK ?

 Ionic Framework is an open source UI toolkit for building

performance, high-quality mobile and desktop apps using
web technologies (HTML, CSS, and JavaScript).

 Ionic Framework is focused on the frontend user

experience, or UI interaction of an app (controls,
interactions, gestures, animations).

 It’s easy to learn, and integrates nicely with other

libraries or frameworks, such as Angular, or can be used
standalone without a frontend framework using a simple
script include.
 WHEN SHOULD USE IONIC FRAMEWORK

 Ionic is a great choice for creating basic native functionalities

within an application to run on multiple devices and operating
systems. The main Ionic advantages surround the simplicity that
comes with developing an app once, rather than multiple times for
separate devices. The nature of the framework also makes
development fast and cost-efficient, while reducing the need for
maintenance.
 However, Ionic disadvantages also surround the fact that the
application is not developed specifically for each device.
Applications developed in Ionic may not perform as well as if they
were developed natively, so some developers may rely on native
development to ensure flawless performance and full use of native
functionalities. In addition, Ionic demands a specific skillset from
developers due to its current use of AngularJS and ui-router.
 Ionic Framework Advantages

 ADVANTAGES:-
 Easy to learn: If you have familiarity with html, css and JavaScript you can learn it
very fast
 Easy documentation: Ionic has very good and well documentation. Most of the
things are covered in their official site. So you don’t have to move around different sites
to learn.
 Rapid development: By running some command line commands, you can create
pages (e.g. ionic g page your_ page_ name), providers etc. When you run a command it
generates all files with template codes.  So you don’t have to write everything from
scratch.
 Ionic apps run on different platforms.g. Android, iOS, windows etc. As a result
you don’t have to write codes for each platform. It reduces development time a lot.
 Develop an app once, and deploy across iOS, Android, and Windows devices.
 Framework’s focus on HTML, CSS, and JS enables quick development, low costs, and
minimal maintenance.
 Platform Independent Framework
 Ionic Framework DisAdvantages
 Performance: Native mobile application’s performance is better than ionic app.
However, in most of the cases, performance gap is not noticeable.
 Security: If you are developing financial app e.g. app for bank, ionic framework is not
recommended. It may not provide as much security as native application.
 Limited native functionality: There may be some native functions that may be not
available in ionic framework.  In that case you have to develop the plugin yourself.
However, there are many plugins available to cover native functionalities. It is not
suited for high-end graphics dependent applications or games.
 Performances are not as good as native applications, namely animations, scrolling, and
network operations.
 As mentioned, JavaScript animations are not as performant as native animations.
However, there are JavaScript libraries, like tweenMAX, which provide decent
animation performance on the devices.
 Possible performance issues depending on application type. But alternatives to Phone
Gap do exist.
 Need for specialists. JS can be tricky to learn. And you'll need someone who can not
only "do" JS, but also have deep knowledge of a handful of advanced libraries and
technologies including Angular, Cordova, Ionic, etc.
 Early adopter risk. This technology is still in its infancy. Support keeps changing,
standards keep changing, and libraries can be completely rewritten at any time.
 Features of Ionic Framework
 KEY FEATURES:-
 Based on SASS and provides tons of UI components for creating
robust and rich apps.
 Ionic comes transported with a powerful CLI, providing mobile app
developers the ability to build and test Ionic apps on any platform.
 It provides custom elements and methods for interacting with them
by using Angular.
 One such element, collection repeat, lets users to scroll through a list
of thousands of items without any performance hits. Scroll-view is the
component that creates a scrollable container with which developers
can interact using a native-influenced delegate system.
 Provides all the functionality found in native mobile development
SDKs, so users can create their apps, and customize them for OS or
Android and deploy through Cordova.
 Why we should choose
ionic framework to build our app
 If you’re just starting out in the app development universe,
then you might already be looking for the perfect
framework to use to start the process with your own app.
There are a lot of them out there, each with their ups and
downs, but in today’s article we’re going to tell you a few
reasons you should consider Ionic Framework.
 This type of framework allows you to use a combination of
programming languages like CSS, HTML5 and JavaScript.
The combo of these three strong languages will help you
get the best user interface for your targeted audience. It is
best to use Ionic framework if you have a very visual
application, because you will be mostly focused on looks.
 It’s easier to move across platforms
If you’re building an app, it is natural that you are looking for success and think that maybe you’ll
spread across platforms, either if you start with Android, iOS, Windows Phone or other operating
systems. The Ionic framework gives you the opportunity of doing that more easily, because the
language makes your app easily converted from one operating system to another. If you were to
choose a native language, rather than hybrid, you would have to spend a little more time and money
into learning the specific programming language for each platform.
 It’s free!!!
Come on, this has to be the best benefit of using Ionic Framework. Developing an app, starting with
research and ending in a marketing campaign, it is quite expensive. Frameworks usually cost around
1000 dollars to be used, so the fact that Ionic is free is going to ease some of the burden. If you’re not
sure you want to use it, even after reading the article, you could also give it a try before going with
another choice because it doesn’t cost you anything.
 The user interface will turn out like a piece of art
Remember when we said that if you’re looking for a beautiful app, Ionic Framework is the way to go?
Well, let us tell you why. The CSS and JavaScript features included in Angular will let you customize
the app with different buttons, menus, color schemes, etc. The framework gives a lot of options in this
area, because they know the user is attracted to great-looking apps, and already has high standards
regarding the UI.
 The Ionic Framework is open source
‘Oh, no! That’s what I feared!’ – you might tell yourself if you know a little info about programming.
Open source means instability. It is true that usually open source frameworks are unstable, they have
been noticed in the past to be so – but we assure you that the Ionic Framework prides itself in being a
very stable platform.
 The base framework of Ionic is Angular
Angular is a very popular framework in creating both mobile applications and web
applications. So, even if you haven’t met with this programming language before,
after working with it, you will also be able to create web applications – if this is a
future plan of yours. It also has a lot of benefits like extending the syntax of HTML
to include components of your app, as well as data-binding.
 Ionic uses Cordova Plugins :
If you’re not familiar with the term of plugin, it is a piece of code attached to your
app that is coded in JavaScript, which allows you to do multiple things because it
is close to the native language of the platform you’re working on. In our case,
Cordova Plugins help you get access to different features of the operating system,
like Geo location, Camera, Battery and so many others. Depending on what your
app does, you will definitely use at least one of these so that you have an optimal
working app.
 You have a big community to talk
Programming is hard work, fellas. So, if you’re starting out new with Angular and
Ionic, you need people around to help you with the problems you face. The great
thing about the Ionic Framework is that it has a huge, active community, that is
eager to help on different forums or specialized YouTube channels. If you look on
social media, you will be able to find even the founders of Ionic Framework,
because they are very open in helping their users create the perfect app.
 History
 Ionic was created by Drifty Co. in 2013. Drifty's previous
products have included Codiqa and Jetstrap, which are drag-
and-drop interface building tools building on jQuery Mobile
and Bootstrap respectively.
 After releasing an alpha version of the framework in November
2013, a 1.0 beta was released in March 2014, a 1.0 final in May
2015, and several 2.0 releases in 2016.[
 In 2015, Ionic devolpers reportedly created over 1.3M apps with
the SDK.
 Ionic 4 has finally come up with the long-awaited change in
January 2019, now developers can embrace using other
frameworks apart from Angular like React, Vue.js, and web
components.
 Installation procedure for
Ionic Framework
 You can develop Ionic apps on any operating system you prefer. In fact, Ionic has been
developed at various times on Mac OS X, Linux, and Windows. However, right now you’ll
need to use the command line in order to follow this guide and you must have OS X in order
to develop and deploy iPhone apps, so OS X is recommended if possible.
 Make sure you have an up-to-date version of Node.js installed on your machine. If you don't
have Node.js installed, install it.
 Open the command prompt and verify the Node.js version by using the command 
node -v.
 To install Cordova and Ionic, use - npm install -g cordova ionic. 
 Make sure to install the latest version of JDK and Android Studio IDE for Android
development.
 To create a new project, use  - ionic start projectname template.
 Inside the project folder, you can add Android/iOS platform based on your
development using the command - ionic cordova platform add android. 
 After these code changes are done, you can generate the required .apk file with the
command  - ionic cordova build android.
 Once the .apk file is generated successfully, you deploy the file on a real device and do the
testing, or you can test it as a web application using a browser.
 To run it in a browser, use  - ionic serve.
 To run it on a device, use  - ionic cordova run android --device
 Starting of your App
 Open a terminal window (Mac) or a command window (Windows),
and navigate (cd) to the ionic-tutorial/server directory
 Install the server dependencies:
 npm install
 Start the server:
 node server
 If you get an error, make sure you don't have another server
listening on port 5000.
 Test the REST services. Open a browser and access the following
URLs:
› http://localhost:5000/sessions (for a list of conference sessions returned as
a JSON document)
› http://localhost:5000/sessions/1 (for information about a specific session )
 Testing out your app
 Now, since we actually have something to look at, we need to
talk about the testing and development process for our app.
There are four ways to test your app as you develop: in a
desktop WebKit browser, in the iOS or Android simulator, in a
mobile browser on your phone, or as a native app on the phone.
 Desktop browser testing
 Testing your app in a browser is as simple as running the serve
command in your project’s root folder.
 $ ionic serve
 This will start a live-reload server for your project. When
changes are made to any HTML, CSS, or JavaScript files, the
browser will automatically reload when the files are saved.
 Building out your app
 We can see that both the center content and side menus have
lists. Lists in Ionic are very powerful, and come with a lot of
different features commonly see in native apps. Luckily, adding
them is really simple.
 Since we are using AngularJS, we are going to use the ng-repeat
directive to create a new list item for every single task we have
in a given project:
 But this doesn’t do anything yet, because we don’t have any
tasks or any code to drive our application. To do this, we need
to create an Angular controller and add it to the page. We are
going to just use one controller for this app, called TodoCtrl.
We are going to add it directly to the body tag:
 <body ng-app="todo" ng-controller="TodoCtrl">