Going Hybrid With ionic

In this session we'll look at building a production ready application using the Ionic framework. We'll talk about going hybrid, explore some of the more interesting aspects of hybrid applications, and look at the benefits of cross platform development as we write a simple application using Ionic. This talk will get you started with building applications using JavaScript and get you familiar with the tools needed to get started with Ionic.

Transcript

2. Going Hybrid With Ionic Daniel Blair - Bit Space Development
3. Daniel Blair • CEO Bit Space Development Ltd • Founder - PanoPla • Founder - Geofy Inc. • Winnipeg Android • Web & Mobile Dev Group • Ramp Up Weekend Board Member • @CMDannCA • @BitSpaceDevelop • @PanoPlaApp • bitspacedevelopment.com
4. Way Cooler Than Native Application Development
5. Overview In this session we'll look at building a production ready application using the Ionic framework. We'll talk about going hybrid, explore some of the more interesting aspects of hybrid applications, and look at the benefits of cross platform development as we write a simple application using Ionic. This talk will get you started with building applications using JavaScript and get you familiar with the tools needed to get started with Ionic.
6. What IS A Hybrid App? A hybrid application is a cross between a web app and a native application. You get the best of both worlds like native APIs while relying on web technologies to build.
7. Examples of Hybrid apps 1. Netflix 2. OkCupid 3. SongHop 4. Slack 5. Pacifica 6. Evernote 7. Wunderlist 8. Ricoh’s Theta Software 9. The Google App for iPad 10. GitHub’s Atom Editor
8. Hybrid Benefits • Target multiple platforms with a single codebase • Rapidly develop and iterate on a design •
9. What Makes Ionic Special?
10. Ionic Ecosystem At a high level, there is a huge platform of tools available to you: • Ionic View • Ionic Creator • IonIcons • LearnIonic • Apache Cordova • AngularJS • Cordova Plugins • A huge community of innovative people
11. More Features
12. What Does it Look Like!?
13. Ionic Styling • Consistent look and feel across platforms • A style framework to get you started • Style documentation for modular design, easy to add elements • Similar to using Bootstrap or a similar framework in your web project. At the end of the day it is just HTML and CSS so you can style it however you want.
15. Restrictions • You can only build your iOS on an Apple device… obviously • You need to install the Android SDK and command line tools for Android • Windows requires Visual Studio to build • You need to actually open iOS apps in XCode to build and deploy • Ionic Package Helps.. But I don’t trust it. • ionic package build ios --profile dev
16. Getting Started
17. Ionic Requirements • NodeJS v4 • NPM (Node Package Manager) • Ionic / Cordova CLI Tools • Android / iOS tools ◦ SDKs ◦ IDEs ◦ etc.
18. Actually starting an Ionic app is silly simple. There is a basic command that will actually build the application start. The application scaffolding is built for you and you can start coding.
19. The Starter App Right out of the box we are given a simple app with 3 tabs. • Angular App built for us • Controllers are generated • Starter project gives you the foundation to rapidly build your own app.
20. The File Structure • Various Git files • Config.xml • Gulpfile • Hooks • Ionic.project • Package.json • Platforms • Plugins • Scss • www
21. WWW • Standard web project root • Directory for templates • Index.html root file • Js folder in my project is actually empty (for a reason)
22. Optimization
23. Make An App That Doesn’t Suck 1. Hybrid apps, because they are an Angular app, on top of a cordova layer, on top of a web view, on top of a native application layer can be sluggish 2. It is easy to write bad JavaScript and eat up memory 3. Older phones that have a hard time with complex web pages can have a hard time with
24. How Can You Combat This? • Gulp • Optimizing your application’s images (smaller images) • Use $ImageCacheFactory to preload your images • Move your nonessential JavaScript to the bottom of the body element to speed up the actual application. (Libraries etc) • Be smart about load order • Take advantage of tools like Ionicons
25. My Entire App window.odinApp={application:angular.module("odinApp",["ionic","odinApp.lib","odinApp.controllers","odinApp.services"]),controllers:angular.module("odinApp. controllers",[]),services:angular.module("odinApp.services",[]),lib:angular.module("odinApp.lib",[])},odinApp.application.config(function ($stateProvider,$urlRouterProvider){$stateProvider.state("tab",{url:"/tab","abstract":!0,templateUrl:"templates/tabs.html"}).state("tab.dash",{url:"/dash",views: {"tab-dash":{templateUrl:"templates/tab-dash.html",controller:"DashCtrl"}}}).state("tab.chats",{url:"/chats",views:{"tab-chats":{templateUrl:"templates/tab-chats. html",controller:"ChatsCtrl"}}}).state("tab.chat-detail",{url:"/chats/:chatId",views:{"tab-chats":{templateUrl:"templates/chat-detail.html",controller:" ChatDetailCtrl"}}}).state("tab.account",{url:"/account",views:{"tab-account":{templateUrl:"templates/tab-account.html",controller:" AccountCtrl"}}}),$urlRouterProvider.otherwise("/tab/dash")}),odinApp.application.run(function($ionicPlatform){return $ionicPlatform.ready(function(){return window.cordova&&window.cordova.plugins&&window.cordova.plugins.Keyboard&&(cordova.plugins.Keyboard.hideKeyboardAccessoryBar(!0),cordova. plugins.Keyboard.disableScroll(!0)),window.StatusBar?StatusBar.styleLightContent():void 0})}),odinApp.controllers.controller("AccountCtrl",function($scope) {$scope.settings={enableFriends:!0}}),odinApp.controllers.controller("ChatDetailCtrl",function($scope,$stateParams,Chats){$scope.chat=Chats.get ($stateParams.chatId)}),odinApp.controllers.controller("ChatsCtrl",function($scope,Chats){$scope.chats=Chats.all(),$scope.remove=function(chat){Chats. remove(chat)}}),odinApp.controllers.controller("DashCtrl",function($scope){}),odinApp.services.factory("Chats",function(){var chats=[{id:0,name:"Ben Sparrow", lastText:"You on your way?",face:"img/ben.png"},{id:1,name:"Max Lynx",lastText:"Hey, it's me",face:"img/max.png"},{id:2,name:"Adam Bradleyson",lastText:"I should buy a boat",face:"img/adam.jpg"},{id:3,name:"Perry Governor",lastText:"Look at my mukluks!",face:"img/perry.png"},{id:4,name:"Mike Harrington", lastText:"This is wicked good ice cream.",face:"img/mike.png"}];return{all:function(){return chats},remove:function(chat){chats.splice(chats.indexOf(chat),1)}, get:function(chatId){for(var i=0;i<chats.length;i++)if(chats[i].id===parseInt(chatId))return chats[i];return null}}});
26. Fin
27. Questions? Contact Me: • @CMDannCA • http://dan-blair.ca • dann@panopla.com • http://bitspacedevelopment.com • @BitSpaceDevelop Learn More: • https://github.com/CMDann • https://github.com/CMDann/Odin • http://ionicframework.com/ • http://ionicframework.com/