About meAndreas SahleFront-end developer@wunderkraut_de

@pixelmord

Ionic Frameworka framework for building hybrid mobile apps leveraging angular.js and cordova

AgendaWhy hybrid?Overview of frameworks for building hybrid appsComponents that mimic native patternsFramework provided tools and servicesGet your (mac) dev environment running for development and testingScaffolding and workflows for developmentLive code

Why not native?For developers:You have to know each platform / languageYou have to maintain separate codebasesFor business:Thats expensive

Why hybrid?You can use technology you already know

You can access native APIs via JSFaster time to market(s) (all of them)

FrameworksApache Cordova, Supersonic, Ionic

Apache Cordova

Open Source projectNative wrapper around a WebViewAccess device APIs via JS pluginsOne codebase compiles to many platforms

Cordova platforms

Cordova Plugins

Appgyver SupersonicIonic fork native UI elements:Page transitions, modals, navigation bars, tab bars, drawersIONIC + NATIVE + MAGIC = SUPERSONICMultipage Apps

Supersonic multipage

$scope binding & PUB SUB// View one controller JSsupersonic.bind($scope, flashMessage);$scope.flashMessage = "An error occurred!;

// View two controller JSsupersonic.bind($scope, flashMessage);

// View two HMTL{{flashMessage}}// View onesupersonic.data.channel('events') .publish('You would not believe what just happened!');

// View twosupersonic.data.channel('events') .subscribe( function(message, reply) { reply('Well, what happened?'); });

Ionic Framework

All what you get with Cordova+ Responsive+ UI Components+ Transitions+ Icons

+ AngularDirectives (for mobile patterns)Services (for native APIs)Navigation and History (uiRouter)Animations and Transitions (platform aware)Performance (minimal DOM manipulation, zero jQuery, and hardware accelerated transitions)

ngCordovangCordova is a library that exposes Cordova plugins through AngularJS services.ionic plugin add org.apache.cordova.splashscreenvar app = angular.module('ionicApp', ['ionic', 'ngCordova'])cordova plugin add org.apache.cordova.splashscreen

app.run(function(MyDataService) { MyDataService.getThings().then(function(data) { $cordovaSplashscreen.hide() })})ngCordova

JS Components

$scope.show = function() { // Show the action sheet var hideSheet = $ionicActionSheet.show({ buttons: [ { text: 'Share This' },{ text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() {// add cancel code.. }, buttonClicked: function(index) { return true; } }); };

CSS Patterns

DEV environmentIOS: Xcode + Command Line ToolsAndroid: Android SDK, Apache ant, Java, Xcode Command Line Toolsnode + npmnpm: cordova, ionicnpm: ios-run, ios-deploy, gulpgenymotion

Installation# xcode command line toolsxcode-select install# apache antbrew install ant# build toolnpm i -g install gulp # cordova + ionicnpm i -g ionic cordova# ios cli helpersnpm i -g ios-sim ios-deploy

Ionic workflow# start a projectionic start myapp [template]ionic start myapp blankionic start myapp tabs (default)# sassionic setup sass# testingionic serve [options]# run on a platformionic platform ios androidionic build iosionic emulate ios [options]ionic run iosnpm i -g ios-sim ios-deploy

generator-mcflyyeoman generator (https://github.com/mcfly-io/generator-mcfly)implements workflow withbrowserifywebpackes6subgeneratorsmodule, directive, service, controller, filter Follows styleguide by John Papa

Live code

Dev setup linkshttp://developer.android.com/sdk/installing/index.html?pkg=toolshttps://developer.apple.com/downloads/http://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html#The%20Command-Line%20Interfacehttps://www.genymotion.com/#!/https://support.apple.com/kb/dl1572?locale=de_DEhttp://brew.sh/

Links

https://cordova.apache.orghttp://www.appgyver.com/supersonic/uihttp://ionicframework.com/https://github.com/mcfly-io/generator-mcfly