Introduction to Ionic framework
Download as PPTX, PDF7 likes8,709 views
This document provides an overview of the Ionic Framework for developing hybrid mobile applications. It discusses the advantages of hybrid apps over native apps, including using a single codebase across platforms. It introduces Ionic as an HTML5 framework built on Angular and Cordova, containing CSS and JavaScript components for building mobile-optimized apps. It covers getting started with Ionic, the CLI, components, platform access tools, and includes examples. The goal of Ionic is to provide native-like performance for building beautiful, easy-to-maintain hybrid mobile apps.
![Getting started / Create
$ ionic start myApp [ blank | tabs | sidemenu ]](https://image.slidesharecdn.com/ionicframework-150427113607-conversion-gate01/85/Introduction-to-Ionic-framework-10-320.jpg)
![Getting started / See
$ ionic serve [ --lab ]](https://image.slidesharecdn.com/ionicframework-150427113607-conversion-gate01/85/Introduction-to-Ionic-framework-11-320.jpg)
![Common cli commands from cordova
$ ionic platform add [ android | ios ]
$ ionic platform emulate [android | ios ]
$ ionic platform build [android | ios ]
CLI](https://image.slidesharecdn.com/ionicframework-150427113607-conversion-gate01/85/Introduction-to-Ionic-framework-12-320.jpg)
Introduction to Ionic framework
- 1. LEARNING & DEVELOPMENT Hybrid mobile development with Ionic Framework Presented by : Shyjal Raazi Remya Jacob
- 2. Table of contents ● Native vs Hybrid ● What is ionic ● Prerequisites ● Getting started with ionic. ● Ionic CLI ● Ionic CSS components. ● Ionic JS components. ● Platform Access ● Tools and Extras
- 3. Native vs Hybrid Native ● Proficiency in each platform required ● Entirely separate code bases ● Time consuming & expensive development ● More Platforms. More Problems. Hybrid Apps ● HTML5 that acts like native ● Direct access to native APIs ● Familiar web dev environment ● Develop a single code base ● reuse code between platforms
- 4. Native vs Hybrid Why still native sdk ● Common UI Views for better user experience ● Navigation and history stack ● Transitions ● It offers full access to the mobile platform and not web sdk ● Doesn’t offer full access to the mobile platform ● Doesn’t provide rich, native-style UI components and interactions ● You’ll probably spend way too much time bringing native look and feel
- 6. What HTML5 framework for hybrid mobile apps. Build on angular, sass. Uses cordova/phonegap for creating running building deploying mobile apps. Contains lots of mobile optimised css and javascript components. Native like performance and beautifully designed Inspiration Because they strongly believe HTML5 would rule on mobile over time, exactly as it has on the desktop.
- 7. Why ● Native Focused ● Performance Obsessed ○ Hardware accelerated animations ○ Minimal DOM Manipulation ○ Remove 300ms tap delay ● Plain old CSS ● Sass ○ 80+ reusable mixins ● Boilerplate app structure ready for customization ● Preconfigured tools: Gulp, Sass, Bower, etc.
- 8. Knowledge ● AngularJS ( UI router, custom directives, $scope and controllers ) ● Phonegap ● Sass ( optional ) Other ● NodeJS Prerequisites Before starting
- 9. Getting started / Install $ npm install -g cordova ionic
- 10. Getting started / Create $ ionic start myApp [ blank | tabs | sidemenu ]
- 11. Getting started / See $ ionic serve [ --lab ]
- 12. Common cli commands from cordova $ ionic platform add [ android | ios ] $ ionic platform emulate [android | ios ] $ ionic platform build [android | ios ] CLI
- 17. Platform access ngCordova ● Cordova with the power of angularJS ● A collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS.
- 18. Tools and extras ionicons ionicview Ionic crosswalk integration ionic creator
Editor's Notes
- #3: This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.