An Introduction To Ionic Framework

1. Umut IŞIK
Hybrid Mobile Application Development
With Ionic

2.  Mobile Application Development (M.A.D)
 Introduction
 Problem
 Hybrid App
 Ionic
 Demo
Agenda

3. Mobile First
 Responsive Web Design
 Mobile Application
M.A.D. / Introduction

4. A mobile app is a computer program designed to run on
mobile devices such as smartphones and tablets etc.
M.A.D. / Introduction

5. Market Share
* 4Q14 fiqures, IDC Worlwide Quarterly Mobile Phone Tracker, February 24, 2015
M.A.D. / Introduction
Platform Share
Android 76.6
iOS 19.7
Windows 2.8
Other 0.9

6. Native App Programming
M.A.D. / Introduction

7. Native App Programming
 Platform Specific Development
 Different programing languages, APIs and proccess
 Testing
 Different Version of OS
 Android
 Major Releases of Platforms
 Objective C -> Swift
M.A.D. / Problem

8. Hybrid App
 Cross platform application
 Developed with HTML, JavaScript, and CSS
 Having access to the device’s features
M.A.D. / Hybrid App

9. How?
By utilizing the mobile platform’s WebView.
A fullscreen browser window
M.A.D. / Hybrid App

10. Basics
 Develop in a similar manner as websites
 Use the HTML, CSS, and JavaScript
 WebView helps to access device
 Test mostly in browser
M.A.D. / Hybrid App

11. Hybrid vs Native
M.A.D. / Hybrid App
Hybrid Native
• The development is faster, simpler and
more rapid
• The application is easier to maintain
• Application performance
• fast and fluid animations
• full access to phone hardware

12. M.A.D. / Hybrid App
Frameworks
 Ionic http://ionicframework.com/
 INTEL-XDK https://software.intel.com/en-us/intel-xdk
 Mobile Angular UI http://mobileangularui.com/
 Appcelerator http://www.appcelerator.com/product/
 Sencha Touch https://www.sencha.com/products/touch/,
 Kendo UI http://www.telerik.com/kendo-ui
 Phonegap http://phonegap.com/

13. Why?
 Free and open source,
 A compact library of mobile-optimized HTML, CSS and JS
components, gestures, and tools
 Sass
 AngularJS
 Documentation & community
 Powerfull CLI
M.A.D. / Ionic

14. Ionic App Stack
 AngularJS: Javascript MVW Framework
 WebView: We already know
 Cordova: Device API for Javascript
*MVW : Model View Whatever (MVC/MVVM/MVP)
M.A.D. / Ionic

15. Install Ionic
Needs NodeJS npm
M.A.D. / Ionic
$ npm install -g ionic

16. Create Ionic Project
M.A.D. / Ionic
$ ionic start myproject
bower.json
config.xml
gulpfile.js
hooks
ionic.project
package.json
platforms
plugins
resources
scss
www

17. Run Ionic Project
M.A.D. / Ionic
$ ionic serve

18. Reddit Mobile App
 List the contents
 Side Menu
 Open the link on native browser
 Build and emulate on android
 Create icons and splash screen
 Create APK and install on a phone
M.A.D. / Demo