Ionic Framework allows for building hybrid mobile apps using HTML5. It contains UI elements and tools to mimic native mobile experiences. Key features include AngularJS integration, performance optimization, beautiful designs, extensive icon library, complex list functionality, tabs, side menus, action sheets, pull to refresh, navigation tools, theming capabilities, and many pre-built UI components. Development with Ionic allows creating feature-rich mobile apps that can be deployed across platforms.

1. 12 Reasons for Building Mobile App
with Ionic Framework

2. Ionic Framework
 Ionic’s ultimate goal is to make it easier to develop native mobile
apps with HTML5, also known as Hybrid apps.
 Ionic is a UI framework built on HTML/JavaScript/CSS. It contains
built in widgets (UI Elements) and styling ( Android, IOS, Windows)
customization for your UI Elements. The Styling allows you to create
UI Elements which mimic the Native experience of the platform.

3. 1. Best Friend with AngularJS
Ionic provides a set of Angular directives (custom HTML elements) for it’s
own components, making it as easy to use the widgets as writing a line of
HTML code. In addition to directives, Ionic uses Angular’s touch
recognizers, view animation logic, HTML sanitation, and asynchronous
communication.
CSS Generated By Sass
 Quickly give your app its own look and feel
 CSS designed to be easily overridden
 Either override ionic.css or use Sass Preprocessor
 Stand-alone CSS (independent of Ionic's JavaScript)

4. 2. Performance Obsessed
 Hardware accelerated animations
 Minimal DOM Manipulation
 Zero jQuery (you could still include it if you want)
Beautifully Designed
 Cohesive visual system
 Clean and simple
 Easy to customize
Ionicons
 Over 600 MIT licensed font-icons included
 ionicons.com

5. 3. Complex Lists
 AngularJS Directive
 Buttons exposed by swiping
 Reorder
 Delete
 The ionList and ionItem directives make it easy to support various
interaction modes such as swipe to edit, drag to reorder and
removing items.

6. 4. List : Collection Repeat
 Similar to Angular's ng-repeat
 Scroll through thousands of items
 Only renders the viewable items
 Smooth jank-free scrolling
 Low memory footprint
 The List is a widely used interface element in almost any mobile
app, and can include content ranging from basic text all the way
to buttons, toggles, icons and thumbnails.

7. 5. Tabs
 Nested views
 Each tab has its own nav history
 Powers a multi-tabbed interface with a Tab Bar and a set of
"pages" that can be tabbed through.
 For iOS, tabs will appear at the bottom of the screen. For
Android, tabs will be at the top of the screen, below the nav-bar.

8. 6. Side Menu
The side menu is a great way to display content without losing a
lot of screen real estate.
A container element for side menu(s) and the main content.
 Allows the left and/or right side menu to be toggled by
dragging the main content area side to side.
To automatically close an opened menu.

9. 7. Action Sheet
 Action sheets are a very useful way of providing contextual actions
on a component.
 The Action Sheet is a slide-up pane that lets the user choose from a
set of options.
 Dangerous options are highlighted in red and made obvious.
 These action sheets are shown when certain elements on tapped or
in many cases, long tapped.
 In Ionic, action sheets support multiple buttons, including
destructive and cancel operations, in a simple interface.

10. 8. Pull to Refresh
 Allows you to add pull-to-refresh to a ScrollView.
 Adding pull-to-refresh functionality to a list is easy in Ionic.
 You can easily add pull to refresh capabilities to your scroll area
that includes a default icon and animation.

11. 9. Navigation
 Shows back button when possible.
 Each tab has its own history stack.
 Works with Android's back button.
 An additional benefit to Ionic's navigation system is its ability to
manage multiple histories.

12. 10. Navigation: Angular UI Router
 Ionic uses the AngularUI Router module so app interfaces can be
organized into various "states".
 Like Angular's core $route service, URLs can be used to control
the views
 However, the AngularUI Router provides a more powerful state
manager in that states are bound to named, nested and parallel
views allowing more than one template to be rendered on the same
page

13. 11. UI and Theming
 When it comes to UI, Ionic shows its potential.
 Ionic’s true beauty is its simplicity.
 It uses the existing HTML5 and CSS3 capabilities to deliver fast
experiences.
 The speed is exactly in its simplicity – no unnecessary shadows,
rounded corners, gradients but just flat, clean simple, powerful,
unadulterated HTML5.

14. 12. What Does it Include?
 A comprehensive set of UI Components – tabs, headers,
navigation, modal, toggle, checkbox, radio, action sheet, loading,
slide boxes, cards, range etc.
 Icon Pack – Ionic has a large set of icons to be used with your
mobile apps easily, including some animated ones.
 Automatic Transitions based on History – Ionic will transition
views to slide left and right automatically based on history.
 Gestures – Ionic incorporates the popular Hammer.js to provide
gesture support for things like tap, swipe, drag etc.

15.  UI Interaction Handling – via AngularJS extensions (i.e.: handling
when a tab is clicked, shown or hidden).
 Full Screen Apps – via the use of the Cordova status bar plugin to
remove the status bar.
 Customizable Theme – since the Ionic base theme was built with
Sass for the resulting CSS, you can easily go in and customize it to
create your own theme. The base look is more of an iOS7 flat look
but can be changed as desired.
What Does it Include?

16. Communicate with us…
OptiSol Business Solutions Pvt Ltd
#87/4, Arcot Road, Vadapalani,
Chennai - 600026, Tamil Nadu, India
Phone: +91 44 42136061 (India)
USA: +1(415) 233-4737 | +1(908) 838-0191
UK: +44-20-3769-0869
info@optisolbusiness.com | www.optisolbusiness.com
Contact Us

17. Thanking You…