Hybrid Mobile Web Apps with AngularJS Ionic

about me

  • IT Consultant / Software Engineer
  • B.Sc. Wirtschaftsinformatik
  • PRODYNA Düsseldorf since 10/2011
  • Bucher Reisen ever since
  • SCMA & ESD - Web Technologies
  • Linux

Agenda

what?

why?

how?

mobile web apps

  • look like normal apps to install on a smartphone/tablet
  • implemented with HTML5/JS instead of Java/Objective-C
  •  
  • not websites that are viewed on a mobile device

why?

Which possibilities do you have?

  • Native
  • Hybrid Web
  • other hybrid approaches

native development

Android iOS Windows Phone
languages Java, C Objective-C, Swift C#, Visual Basic, C++
tools Eclipse/Android Studio MacOS, XCode Windows, Visual Studio

Hybrid Web

website + "mini browser" = native app

  • adobe phonegap/apache cordova
  • Appcelerator Titanium

other hybrids

  • RhoMobile
  • Xamarin
  • XML VM
  • applause

What are the advantages?

&

What are the use cases?

native

  • possibilities
  • performance
  • styling
  • multiple platforms
  • programming language

Native

  • you only need to support one platform
  • styling is super-important (end user market)
  • deep device integration (widgets, notifications, share)

Native

examples

Hybrid Web

  • multiple platforms
  • programming language
  • development
  • performance
  • limited possibilities
  • styling

Hybrid Web

  • business apps
  • small apps (functionality)
  • combined development of app and website

Hybrid Web

examples

Hypotheses

WebApps are fast

WebApps look fabolous

WebApps are ready for production

website vs web app

What about...

  • offline?
  • gps and camera?
  • styling?
  • JavaScript? really?

JavaScript

JavaScript

It is better now.

  • it is fast
  • good tools
  • good frameworks
  • HTML5 makes things easier

Tools

Most of them are based on - a platform to run JavaScript with Googles V8 engine outside of the browser

depend scaffold develop check test build debug
bower yeoman WebStorm jslint jasmine grunt Chrome dev tools

javascript debugging

remote

chrome://inspect/

website styling

  • responsive webdesign
  • MOBILE FIRST!

web app styling

  • user experience
  • gestures
  • portrait/landscape

there are a lot of frameworks to support you. CSS and JS

  • Bootstrap (Angular-UI)*
  • Ionic
  • jQuery Mobile
  • Sencha Touch
  • FeedHenry
  • OnsenUI
  • KendoUI
  • ...

device integration

  • camera
  • microphone
  • location (gps/network/wifi)
  • device orientation
  • filesystem

HTML5 has APIs for all of them.

device integration

phonegap has plugins to use even more. They wrap native APIs/libraries into JavaScript.

  • choose image from gallery
  • use google speech recognition
  • use native dialogs
  • notifications
  • make in-app purchases
  • recieve intents/accept URLs

device integration

Where is it getting complicated?

  • widgets
  • background services

You can implement this native and still include it

offline

  • SPAs = "fat clients"
  • Data storage beyond cookies
  • Online/Offline events

Again HTML5 to the rescue

offline

some examples

offline

mytextarea.com

textarea = {
  textarea: null,
  init: function() {
    this.textarea = document.getElementsByTagName('textarea')[0];
    this.textarea.focus();
    this.load();
  },
  load: function() {
    this.textarea.value = localStorage.getItem('text');
  },
  save: function() {
    localStorage.setItem('text', this.textarea.value);
  }
}

HOW?

my stack

  • Ionic Framework
    • AngularJS
    • Apache cordova
  • Adobe PhoneGap Build service

Angular is what HTML would have been had it been designed for applications
  • developed by former Java Developers at Google
  • client side JavaScript-SPA-MVC framework
  • templating
  • "web components"
  • 2-way data binding
  • dependency injection

Hello {{yourName}}!

<script src="angular.min.js"></script>

<body ng-app>

  <input type="text" ng-model="yourName" placeholder="Enter a name">
  <h1>Hello {{yourName}}!</h1>

</body>

Only a list

  • {{thing.name}}
var module = angular.module('ListApp', []);

module.controller('ListCtrl', function ($scope) {
  $scope.things = [
    { name: "AngularJS", color: "Red", hidden: false },
    { name: "Vaadin", color: "Blue", hidden: false },
    { name: "Wicket", color: "orange", hidden: false }
  ];

  $scope.hideOldStuff = function() {
    $scope.things[1].hidden = !$scope.things[1].hidden;
    $scope.things[2].hidden = !$scope.things[2].hidden;
  }
});
<div ng-controller="ListCtrl">
  <h1>Only a list</h1>
  <button ng-click="hideOldStuff()">Hide old stuff</button>
  <ul>
    <li ng-repeat="thing in things" style="color:{{thing.color}}" 
      ng-hide="thing.hidden">
      {{thing.name}}
    </li>
  </ul>
</div>

directives

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

built-in directives

ng-app, ng-controller, ng-repeat, ng-show, ng-model, ...

make your life easier

your own directives

write your own HTML-elements

  • components used in multiple places
  • components with "special" behaviour

cordova

cordova

cordova create hello com.prodyna.hello HelloWorld

cd hello

cordova platform add android

cordova build

cordova run --device

plugins

cordova plugin add org.apache.cordova.camera
navigator.camera.getPicture( cameraSuccess, cameraError, cameraOptions );

cordova

example app

  • CSS, HTML & AngularJS components
  • cordova-like CLI

ionic

ionic start myApp sidemenu

cd myApp

ionic platform add ios

ionic build ios

ionic emulate ios

ionic

Example App

Phonegap build

Free* build service by Adobe

example

more sophisticated Apps built with ionic

SPO-Portal Quick Offer

sworkit

the future

  • Web-Operating-Systems: FirefoxOS, ChromeOS
  • everything will be web
  • native will die

questions?

interested?

ESD Web Technologies Expert Group

SCMA - Solution Center Mobile Applications


more dialogues/trainings to come!

Read more / sources