angularjs, ionic und phonegap - der stack für neue mobile-apps€¦ · better known as phonegap...
TRANSCRIPT
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 [email protected]
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
