Getting started with the Ionic Framework

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

Getting started with the Ionic Framework

Getting started with the Ionic Framework

Recommandé

Contenu connexe

Tendances

Tendances(20)

Similaire à Getting started with the Ionic Framework

Similaire à Getting started with the Ionic Framework(20)

Dernier

Dernier(20)

Getting started with the Ionic Framework