angularjs, ionic und phonegap - der stack für neue mobile-apps€¦ · better known as phonegap...

Philipp BurgmertheCodeCampus / Weigle Wilczek GmbH

AngularJS, Ionic und PhoneGap

Der Stack für neue Mobile-Apps

Philipp BurgmerSoftware Engineer / Consultant / TrainerFocus: Frontend, Web Technologies

WeigleWilczek GmbHburgmer@w11k.com

ABOUT ME

The Code Campus / WeigleWilczek / W11kSoftware Design, Development & MaintenanceConsulting, Trainings & Project Kickoff

Web Applications with AngularJSNative Rich Clients with Eclipse RCP

ABOUT US

Native AppsOften Mobile Versions of Web-AppSpecial Skills for Each Platform Required

LanguageSDKToolchain

Hard to Create Same UX

MOBILE-APPs TODAY

Support All Major PlatformsSame Code Base for All Those PlatformsReuse Web-Technology KnowledgeSame UX on All Platforms

WHAT ABOUT ...

TOO GOOD TO BE TRUE

Web-Technologies (HTML, JavaScript, CSS)Native Look & Feel

ArchitectureSetupDevelopmentAPIsOptimisation

BUT WE ARE ON TRACKDEVELOP MOBILE APPS WITH PHONEGAP, ANGULARJS AND IONIC

ARCHITECTURE

Mobile OS

WebView

Ionic

AngularJSCordova

Application

THE BIG PICTURE

Better Known as PhoneGapNitobi Adobe ApacheMobile Apps with Web Technologies

cordova.apache.orgSupported Platforms: iOS, Android, Windows 8,Windows Phone 7 / 8, BlackBerry 5+, ...Current Version: 3.5.0License: Apache 2.0

Native AppWrapper to Run Web AppNative Code for Each Platform

PluginsJavaScript-Native-Adapter to Access Mobile OS FeaturesNative Code for Each Platform

Application

Mobile OS SensorsHardware Services

Cordova Native App

Web App in Embedded Browser (WebView)

HTML

CSS

JavaScript

Resources

Cordova Plugins

Native Code

JavaScript

CORDOVA ARCHITECTURE

362 Plugins in Registry

org.apache.cordovaCameraBattery StatusConsoleContactsDevice Information + Motion + OrientationDialogsFile + File Transfer

CORDOVA PLUGINS

Distribution of CordovaEco-SystemServices like PhoneGap Build

phonegap.comDeveloped by AdobeLicense: Apache 2.0

HTML enhanced for web apps!angularjs.org

JavaScript-Framework for Rich Browser ApplicationsBrings Core UI Concepts like MVC and DataBinding to BrowserExtends HTML instead of abstract it

angularjs.orgSupported Browsers: Chrome, Firefox, Safari, IE8+, Opera,Android, Chrome Mobile, iOS SafariCurrent Versions: 1.2.23 and 1.3.0-rc.0License: MIT

by

Frontend-FrameworkCSS Optimized for Mobile AppAngularJS Directives, Services and Controller

Touch SupportNavigationMenus & Dialogs

Cordova Plugin(s)

ionicframework.comSupported Platforms / Browsers: iOS, AndroidCurrent Version: 1.0.0-beta.11License: MIT

Very Similar to IonicJavaScript & CSS Frontend-FrameworkCordova and AngularJS basedDirectives and Services

onsenui.ioSupported Platforms / Browsers: Android 2.3+, iOS 6+,Firefox OS, Chrome, SafariCurrent Version 1.1.2License: Apache 2.0

SETUP

Installed and in Path:Node.JS | nodeGit | gitRuby | ruby

PREREQUISITES

Install at Least One of the Supported Platforms:Android SDK

Available for All Major OS (Windows, Mac OS, Linux)Slow Simulator

iOSAvailable on Mac OS onlyFast Simulator

NATIVE PLATFORM SDKs

Recommended

PrerequisitesJava | javaAnt | ant

Packages

ANDROID SDK

Recommended

Optional

XcodeiOS 7 SDKiOS Simulator

iOS SDK

Optional

RequiredApache Cordova | cordovaIonic | ionic

Optional:Ripple Emulator | rippleiOS Sim | ios-sim

WEB SDKs

Bower | bowerGrunt | gruntCompass | compass

WEB TOOLS

Vagrant Box with All the Tools InstalledNo Need to Install Everything LocallyVirtualBox and Vagrant Required

IONIC BOX

DEMO

PROJECT STRUCTURE

Cordovahooksmergesplatformspluginswwwconfig.xml

Ionicionic.project

Customscssbower.jsonGulpfile.jspackage.json

TOOLS

Required to Configure and Build Cordova Project

Run cordova to See All Available CommandsCommands to Configure ProjectCommands to Build Project

CORDOVA CLI

Ionic Consists of Two Things:Framework (also Available via Bower)Command Line Interface (via NPM)

CLI Not Required to Develop Ionic AppDifferent Versioning

Run ionic to See All Available CommandsShortcuts to Cordova CLIcreate and servelogin and upload

IONIC CLI

Emulates Android Device in BrowserRequires Android as PlatformStart Server and Open Browser via ripple emulate

RIPPLE EMULATOR

AndroidAndroid SDK Requiredcordova platform add android or ionic platform androidcordova emulate android or ionic emulate androidTake a Nap or Drink Some Coffee ...

iOSXcode, iOS Simulator and ios-sim Requiredcordova platform add ios or ionic platform ioscordova emulate ios or ionic emulate ios

PLATFORM SIMULATORS

APIs

Out of Scope

API Documentation: docs.angularjs.org/apiPay Attention: Documentation for latest Build (Select Box at The Top Left Corner)Basic Tutorial: docs.angularjs.org/tutorialGreat Tutorial Videos: egghead.io

ANGULARJS

Out of Scope

Out of Scope

API Doc and Guides at ionicframework.com/docsLot of Live Demos and Code Examples

All Directive Starts with Prefix ion (Nice!)All Services Uses $ionic Prefix (Bad Practice?)Uses Angular-UI Router

IONIC

Out of Scope

Out of Scope

AngularJS Wrapper for Common Cordova PluginsTight Integration: Uses Promises and $timeoutIndependent of Ionic

github.com/driftyco/ng-cordovaCurrent Version: 0.1.3-alphaLicense: MIT

NG-CORDOVA

Out of Scope

OPTIMISATION

Avoid Overlapping Elements (Popups, Overlays)Try to Keep the DOM Small, Create Multiple Small StatesHTML Tables Are SluggishTransport Really Needed Data OnlyUse CachingMinimize CodeTest Performance on Real and Old Devices

PERFORMANCE HINTS

Use Bower to Manage Frontend DependenciesUse a Build System to Optimize Your App (Minimize Code, ...)

PROJECT STRUCTURE

Expert

Hook into CLI commandsSomething Executable (Scripts with Hash-Bang)Subfolders in hooksSee README for a List Of Available HooksCan Be Used to Build Frontend (Modify www Content)Pay Attention: No www Folder No Valid Cordova Project!

HOOKS

Expert

Expert

Helps to Structure Code (Feature-Oriented-Structure)Dev-Mode with Server, Proxy and LiveReloadSASS and LESS SupportSpec and End-2-End TestMock Data for Tests and DevelopingBower to Manage Frontend DependenciesProject- and Per-Developer ConfigurationBuilding Distribution

Annotating AngularJS Dependencies (Transform to Array-Notation)Code MinimizationRunning End-2-End Tests Against Build Application

github.com/w11k/fabsYeoman Generator: generator-fabs

FABSFABULOUS ANGULARJS BUILD SYSTEM

Expert

Philipp Burgmerburgmer@w11k.com

www.w11k.comwww.thecodecampus.de