JavaScript kann auch Apps

Mathis Hofer
Senior Software Engineer

hofer@puzzle.ch

@drhupf

kann Linux

Quelle: bellard.org/jslinux/

kann 3D Games

Quelle: Mozilla and Epic Preview Unreal Engine 4 Running in Firefox

kann Helikopter

Quelle: NodeCopter impressions from Berlin 2012

kann ...

kann Mobile Apps

Apple iPhone (2007)

«You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.»

— Steve Jobs (2007)

Mobile App Downloads (in Mrd.)

Quelle: Gartner (2013)

Apps in Unternehmen

+ 72%

Quelle: Citrix Mobile Analytics Report (2015)

+ 34%

Quelle: Salesforce.com Studie (2014)

Hybrid-Anteil 2016

Quelle: Gartner Mobile and Wireless Predictions (2013)

Hybrid Mobile Apps

mit Apache Cordova

Geschichte

Nitobi Software entwickelt PhoneGap, 2009
↓
Adobe übernimmt Nitobi, 2011
↓
Freies Apache Projekt «Apache Cordova»

App Technologien

Native
Android, iOS, Windows Phone

Bridged Hybrid
Xamarin, Appcelerator, NativeScript, React Native

Web
AngularJS, React, Ember.js

WebView Hybrid
Cordova, Trigger.io, Ionic, AppGyver

Architektur

Mobile
SDK

→

Cordova
CLI

Native Application Wrapper

WebView Component

Web Application

Cordova JavaScript API

Core
Plugins

3rd Party
Plugins

Custom
Plugins

Mobile OS

Storage

Accelerometer

Notification

etc.

CLI Workflow

cordova create

↓

cordova platform add

↓

cordova plugin add

↓

cordova run

↓

cordova build

Projekt erstellen

cordova create hello ch.puzzle.hello \
"Hello World"

↓

config.xml
hooks/
platforms/
plugins/
www/

Plattformen

Amazon Fire OS
Android
BlackBerry 10
Firefox OS
iOS
Ubuntu
Windows Phone 8/8.1
Windows 8/8.1
Tizen

Plattformen hinzufügen

cordova platform add android
cordova platform add ios

↓

config.xml
hooks/
platforms/

                android/

                ios/

plugins/
www/

Plugins

Accelerometer
BatteryStatus
Camera
Capture
Compass
Connection
Contacts

Device
Events
File
File Transfer
Geolocation
Globalization
InAppBrowser

Media
Notification
Splashscreen
Status Bar
Storage
Vibration
...

Registry: cordova.apache.org/plugins/
Platform Support: cordova.apache.org → Documentation

Plugins hinzufügen

cordova plugin add \
cordova-plugin-device-motion --save

↓

config.xml
hooks/
platforms/
plugins/

cordova-plugin-device-motion/

www/

Color Shake

Implementation

App bauen

cordova build android

↓

config.xml
hooks/
platforms/

                android/
                
                  build/outputs/apk/
                  
                    android-debug.apk

plugins/
www/

Testen der App

Emulator
Gerät
Browser

Testen im Emulator

cordova emulate android

Testen auf dem Gerät

cordova run android

USB
Echte Umgebung
Remote Debugging

Testen im Browser

Grunt

Gulp

Webpack

Reale Anwendung:

LOPAS (Lok Personal Assistenz) für BLS AG

Wechsel der Plattform

Windows Netbook
Java Swing Client

Android Tablet
Angular Cordova App

Fotos: Roland Schwarzentrub, BLS AG

Dienstplan

Zugfahrordnung

Nachtmodus

Wieso als Hybrid App?

Web Know-how

Distribution
Storage Verschlüsselung
Screen Lock
Helligkeit

Quintessenz

Nachteile von Hybrid Apps

gegenüber Native

Performance
Native UI & feel
Plattformsupport

gegenüber Web

Deployment

Vorteile von Hybrid Apps

gegenüber Native

Web Know-how
Plattformunabhängig
Entwicklungskosten

gegenüber Web

Native Features
App Store

Open Device Lab Bern @ Puzzle

→ opendevicelabbern.ch

Fragen?

github.com/hupf/
↪ colorshake/

cordova.apache.org
yeoman.io/generators/

Mathis Hofer
hofer@puzzle.ch