Getting started with the Ionic Framework
•Download as PPTX, PDF•
1 like•841 views
The document discusses getting started with the Ionic Framework, a hybrid mobile app development platform. It describes Ionic as a new technology that allows building of mobile-optimized apps using HTML5, CSS, and JavaScript. It also discusses Ionic's components, the tools needed to build Ionic apps like Node.js, and demonstrates how to create a basic Ionic app.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Getting started with the Ionic Framework
Similar to Getting started with the Ionic Framework (20)
Recently uploaded
Recently uploaded (20)
Getting started with the Ionic Framework
- 1. 1© 2014 Virtusa Corporation. All rights reserved Getting started with the Ionic Framework Anuradha Weeraman Senior Architect Virtusa 21 Sep 2015 Colombo Mobile
- 2. 2 What is ionic GETTING 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. 3 A few examples of apps built using ionic GETTING STARTED WITH THE IONIC FRAMEWORK
- 4. 4 What you need to get started building ionic apps GETTING 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. 5 Essential Tools GETTING STARTED WITH THE IONIC FRAMEWORK npm install –g ionic cordova
- 6. 6 The components of ionic GETTING STARTED WITH THE IONIC FRAMEWORK Android iOS Cordova Angular Ionic CSS components and library Apps Apps
- 7. 7 Angular JS GETTING STARTED WITH THE IONIC FRAMEWORK • Model View Controller (MVC) • Dependency injection • Data binding • HTML templates • Directives • Services • Routing and navigation • Deep linking
- 8. 8 Apache Cordova GETTING 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. 9 Essential Tools – Bower GETTING STARTED WITH THE IONIC FRAMEWORK npm install –g bower
- 10. 10 Demo of ionic GETTING 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. 11 Ionicons GETTING STARTED WITH THE IONIC FRAMEWORK • Bundled with ionic • 733 scalable icons • Searchable on the website
- 12. 12 Essential Tools – Grunt vs Gulp GETTING 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. 13 Some best practices GETTING 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. 14 Essential Tools – unit testing and code coverage GETTING STARTED WITH THE IONIC FRAMEWORK Karma, PhantomJS and Istanbul For unit testing and code coverage
- 15. 15 Essential Tools – yeoman GETTING 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. 16 Essential Tools – Crosswalk GETTING STARTED WITH THE IONIC FRAMEWORK 10x increase in HTML/CSS rendering. App size will increase by 10-15 MB.
- 17. 17 Alternatives GETTING 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. 18 Answer the question and win a book! GETTING STARTED WITH THE IONIC FRAMEWORK
- 19. 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 ionic 2. apt-get install ionic 3. npm install –g ionic 4. yum install ionic
- 20. 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