Cross Platform Mobile Apps with the Ionic Framework
•
11 likes•1,475 views
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework. With Ionic you build mobile apps using the web technology you already know. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which uses responsive design to change its look based on the device's screen dimensions. In this session, we will build an app together to show many of Ionic's major features including CollectionRepeat, UI Widgets, Modals, and Slide Boxes. We will also discuss development workflow, debugging and which tools we use.
Report
Share
Cross Platform Mobile Apps with the Ionic Framework
- 1. Cross Platform Mobile Apps with the Ionic Framework Mobile+Web DevCon 3 February 2015 - San Francisco CA
- 2. Troy Miles Over 35 years of programming experience Blog: http://therockncoder.blogspot.com/ Twitter: @therockncoder Email: rockncoder@gmail.com GitHub: https://github.com/Rockncoder
- 3. Agenda AngularJS Cordova The Ionic Framework Build a simple app Resources Summary
- 4. –the rockncoder “If you want bring a WiFi systems to its knees, bring a bunch of techies and all of their toys together in one spot.”
- 5. Conference Limitations Internet access at most conferences is limited The app uses internal data stored in JSON files Google Maps is also turned off We will work in the browser only https://github.com/Rockncoder/ionic-coffee
- 6. AngularJS Created by Miško Hevery and Adam Abrons in 2009 JavaScript MVC 106 kb production version (minimized, not gzipped) Declarative programming for UI Imperative programming for business logic
- 7. AngularJS Key Features Model View Controller (MVC) Data Binding HTML Templates Dependency Injection Deep Linking Directives
- 8. Model View Controller Uses MVC The goal is clear separation of concerns The model is only concerned with data The view presents the data to the user The controller applies the business logic
- 9. Data Binding In Angular, data binding is built into the framework Replaces text content of HTML element with the value of the expression {{ expression }} <ANY ng-bind=“expression”>…</ANY> <ANY class=“ng-bind: expression;”>…</ANY>
- 10. HTML Templates No client side templating engine Angular uses HTML as its templating engine No extra markup, no extra libraries Designers & developers rejoice
- 11. Dependency Injection A software design pattern deals with how components resolve their dependencies Pervasive throughout Angular Allows for easier testing Allows for easier swapping of components
- 12. Deep Linking Deep Linking enables a website to restore state from a URL URL and bookmarks are key part of the web Early Single Page Apps lacked deep linking, they broke SEO and user expectation
- 13. Directives “The coolest feature of AngularJS” - Misko Hervey Attach behavior to DOM elements Cleaner way to do DOM manipulations Can nearly turn HTML into a DSL
- 14. Cordova 2009: 1st developed at an iPhoneDevCamp event 2009: Developers form a company, Nitobi 2011: Adobe acquires Nitobi 2011: Adobe open sources PhoneGap project to Apache 2012: Apache gives the project the name Cordova
- 15. Cordova platforms Adobe PhoneGap IBM Worklight Telerik Platform The Ionic Framework and still others
- 16. Cordova CLI Global commands help - display help text or help for a specific command create - creates a project Project commands
- 18. Why not just Cordova? No native look or feel - only HTML No programming framework - only JS Cordova is generalized not optimized
- 19. The Ionic Framework? Combines Apache Cordova with Google's AngularJS along with lots custom JavaScript, HTML, and CSS3 to create purpose built mobile apps which perform like native ones and look beautiful
- 20. The Ionic Framework Ionic is both a CSS framework and a Javascript UI library Many components need JavaScript But often components can be used without coding Use a View Controller pattern like Cocoa Touch
- 22. Why is Ionic fast? No jQuery Minimal DOM manipulation Hardware accelerated transitions
- 23. Mallzee Replaced their hand built PhoneGap app with Ionic in May Excellent UI
- 24. Songhop The fastest way to find new music 5 star rated iPhone only
- 25. Keychain Like Uber for trucks iOS and Android version Scrapped prior version built with PhoneGap
- 26. Sworkit Created by Ryan Hanna alone Featured in the Health and Fitness section of the App Store Downloaded over 3 million times in the App Store, Google Play and Amazon Store
- 29. The side menu Used by lots of apps since it uses minimal screen real estate The “hamburger”, menu toggle can be position on the left or right of the screen This is the base UI our app will use
- 30. Hello Ionic World 1. ionic start coffee sidemenu 2. cd coffee 3. ionic serve
- 32. Project directory hooks - a place to customize the cordova build platforms - project directories for native code plugins - your apps cordova plugins scss - customizable SASS files www - your application
- 34. Plugins As of version 3.0 Cordova is implemented mainly as a collection of plugins surrounding a small core Plugins are implemented in native code and/or JavaScript Without plugins your application can’t communicate with the device’s hardware Over 600 plugins currently available
- 35. Installing/Removing Plugins Find plugins at: http://plugins.cordova.io/ ionic plugin add org.apache.cordova.device ionic plugin remove org.apache.cordova.device Ionic includes 3 essential plugins: console, device, & keyboard Plugins not available until after $ionicPlatform.ready
- 36. Plugin Anatomy Documentation: doc/index.md Native code in src directory JavaScript in www directory
- 37. Using a Plugin Remember: You must wait for the ready event Read the plugin’s documentation Implement the functionality according to docs Best practice: Sniff for the property before use
- 38. ngCordova Cordova has a lot of available plugins Plugins give access to the machine functions ngCordova "Angularizes" plugins for ready use You are always free to write your own wrapper code
- 39. config.xml the configuration file for your app contains the app names, for computers and humans version number settings resources
- 40. A few commands start - creates a new project help - detailed help information resources - create native device splash/icons emulate - runs project on emulator after build platform - adds support for a native platform serve - runs project on default web browser
- 41. Debugging First Look We will use the debugger in Chrome For Android devices, Chrome is your best friend menu -> More tools -> Inspect Devices For iOS devices, Safari is your best friend Preferences -> Advanced -> Show develop
- 42. Controllers most of your code will be in controllers, services, or directives controllers act as the glue between the model and the view controllers can use a context call $scope is use to pass data to and from the view
- 43. Controller sample (function () { 'use strict'; angular.module('HelloApp') .controller('SearchController', ['$scope', '$cordovaGeolocation', function ($scope, $cordovaGeolocation) { console.log("SearchController launching"); $scope.showingListings = false; $scope.showingMap = true; $scope.showingSearch = false; var activeDisplay = "showingMap"; $scope.setDisplay = function (nextState) { $scope.showingListings = false; $scope.showingMap = false; $scope.showingSearch = false; $scope[nextState] = true; if (nextState !== "showingSearch") { activeDisplay = nextState; } }; }]); }());
- 44. View ion-view is the root of a page it contains headers, footers, and content tags headers and footers are optional
- 45. Headers Ionic supports two kinds of header bars: ion-header- bar & ion-nav-bar Outwardly they look identical, but their markup is different, as is the function ion-header-bar is only markup ion-nav-bar ties into ui-router and updates itself based on the router state
- 46. ui-router the native router for AngularJS is ngRoute Ionic instead uses the open source ui-router ui-router is more flexible and capable than ngRoute
- 47. Content ion-content is used to hold the pages content it can scroll its content to reveal more that a screen’s worth at a time pull to refresh and infinite scroll objects go here
- 48. Services Substitutable objects that are wired together using DI Used to organize and share code across app Only instantiated when an app component depends on it Singletons Built-in services always start with “$”
- 49. Time to write code…
- 50. Housekeeping At some point in the app lifecycle, you may wish to update Ionic or one of the plugins Update Ionic: sudo npm update -g ionic Update a plugin: remove it and add it back BE CAREFUL - Newer versions may break your app
- 51. Ionicons http://ionicons.com/ Can search from website Can easily change size free & open source
- 54. Summary Cordova is a platform which allows for the building of mobile apps using web technologies Ionic builds on top of that by providing a good looking performance driven UI and better developer tools Ionic uses AngularJS as its MVC framework
- 55. Please rate this talk! http://spkr8.com/t/43731