Which possibilities do you have?

• Native
• Hybrid Web
• other hybrid approaches

              we'll focus on the first too, but I'll tell you little bit about the others
            

native development

- different platforms

- each has its own programming language

- each has its own development environment

- even different operating systems needed!
            

Hybrid Web

website + "mini browser" = native app

• adobe phonegap/apache cordova
• Appcelerator Titanium

              phonegap/cordova is the "market leader"

              Appcelerator Titanium uses native UI and javascript for the application logic
              "Interpreted" hybrid apps. -> limited functionality

              phonegap "on steriods" / 
              without HTML good/bad / 
              new HEAVY APIs :-(

              Phonegap vs. cordova?
              - initially named phonegap
              - bought from adobe
              - code contributed to apache, named "cordova"
              - cordova is the open source
              - functionally nearly identical
            

other hybrids

• RhoMobile
• Xamarin
• XML VM
• applause

            INTERPRETED

              whole runtime delivered on the phone (App Store problems!)
              - rhomobile (ruby)
              - xamarin (mono, formerly monotouch)

              - BAD tool support (debugger)
              - Problems with the app store (runtime not allowed)

              GENERATED

              XML VM (cross compiler)
              introspect Android Java-Code -> XML -> stack machine (XSLT) -> Objective-C
              - doesn't work for platform specific components (UI)

              EMF, XTEXT, XPAND
              - domain (backend integrated apps, games)
              - write a DSL for this domain
              - generate APPS
              - BIG INITIAL INVESTMENT (only sensible if you want to develop many similar apps)

              enterprise app stores
            

native

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

              things are good

              multiple platforms/languages are a problem

              -> hard/much to learn

              So, when is it a good idea to use native development?
            

Native

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

              - styling is important to business users, but you can develop web apps that look pretty sharp

              - gps, camera, etc. not that much of a problem

              - device integration: you will later see, this is not that much of a problem.
              - depending on how deep you wanna get, you need to compare the effots (write cordova plugin vs. implement everything native)
            

Native

examples

              - spotify uses lock screen widgets, share functionalities, audio playing, bluetooth a2dp integration

              - facebook was a web app, moved to native because of performance (August 2012 - over 2 years ago)

              - youtube is native, video playing, sharing, widgets

            

lets compare web against this

Hybrid Web

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

            development = instant feedback, no emulator, only a webbrowser!

              the last two are no "hard" cons.
              You CAN do this, its just a little more complicated.
              Performance is okay, brwosers are getting faster every day
            

Hybrid Web

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

              - business: forms, data driven, UI not 100% important, performance not critical
            

Hybrid Web

examples

              news app, not much more functionality than read articles

              - wikipedia, also not many fancy features

              - itunes, is a great hybrid app!
            

            so, are some great mobile web apps.

            Why not make some more of them? I say
            

website vs web app

What about...

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

            offline: no traditional request/response with a server possible

            gps/camera: easy!

            styling: BUT I HATE CSS! There is help out there!

            JavaScript is ugly!

            It's not all that bad (anymore)

            let me start with the last one first
            

JavaScript

JavaScript

It is better now.

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

              with every modern website, these are the 3 to help you

              HTML5, JavaScript (ECMAScript) 5, CSS3 (like the fancy animations of this presentation)
            

Tools

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

also to note npm, sublime text, karma, phantomjs, protractor, gulp, firefox

javascript debugging

remote

chrome://inspect/

demo - debugging. t3n.de im chrome vorbereiten und zeigen

website styling

• responsive webdesign
• MOBILE FIRST!

this is valid for NORMAL websites

            Fpr Mobile Apps "only" smartphones/tablets

just a quick sidenote on responsive webdesign

there is much more to it. But you get the basic idea

Why MOBILE FIRST?

Number of device sales

rapid growth / already more

also mobile devices in companies get more important (PD Stream)

just to give you some perspective

web app styling

• user experience
• gestures
• portrait/landscape

            What's different to web site styling. additionally

            IDEAS ?

              UX = User expects an "App" to behave diffent than a website. (slide in menu)

              one hand (phone) - two hands (tablet/pc)

              swipe, pinch to zoom
            

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

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

"Who knows bootstrap?" -> webseite zeigen bootstrap

            Liferay 6.2 Bootstrap! 

            * Bootstrap not really for MOBILE

            ionic - CSS components for mobile

            basically they both use a grid to be "responsive"

            some have backend integration or bring own backends!

device integration

            SO FAR LEARNT: Styling can be done, looks cool

              which hardware makes a phone special? different from a pc?
            

device integration

            device integration also means:

              integrate into the phone operating system?

              EXAMPLE: Click on a youtube link in facebook app or website -> youtube app
            

device integration

You can implement this native and still include it

Where are the limits? 

            Its only a matter of time!

            Hybrid, there are some cordova plugins, maybe even write your own?

offline

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

Again HTML5 to the rescue

no server (request/response)

"state" - close app, open app, resume!
            

offline

some examples

• mytextarea.com
• Gmail
• Chrome/Firefox apps

All of these are SPAs that work offline

We need this for Mobile Apps too!

Sidenote: Is it complicated? NEXT SLIDE

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);
  }
}

              So, everything clear, right?

              It seems possible, so HOW best to do it?
            

• developed by former Java Developers at Google
• client side JavaScript-SPA-MVC framework
• templating
• "web components"
• 2-way data binding
• dependency injection

A really quick introduction to angular

            MVC built in! There is no way without a controller!

            controllers and services are the essential components

            Injection?! Data-Binding?! -> really powerful tools, some EXAMPLES ahead!

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>

            One-Way Databinding EXAMPLE

              Data binding is really easy and very powerful.

              Works not only directly in HTML, also in the services and controllers.
            

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>

Two-Way databinding EXAMPLE

            ng-repeat! cool

            What is this ng-repeat?

directives

Think of them as "extensions" of HTML

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

manipulate the DOM

	not only view components!

            add event listener

	-> web components -> polymer

            Angular-UI and Ionic heavily rely on this!
            Lot of special directives!

            EXAMPLES later!
            enough on Angular -> talk about cordova   
            

cordova

              this is the "mini browser"
              CLI to create & build hybrid web apps
              plugins
            

cordova

cordova create hello com.prodyna.hello HelloWorld

cd hello

cordova platform add android

cordova build

cordova run --device

              !build needs android/ios/wp SDKs installed on local machine!
              sessions.sh mit doitlive ausführen?
            

plugins

cordova plugin add org.apache.cordova.camera

navigator.camera.getPicture( cameraSuccess, cameraError, cameraOptions );

"Takes a photo using the camera, or retrieves a photo from the device's image gallery. The image is passed to the success callback as a base64-encoded String, or as the URI for the image file. The method itself returns a CameraPopoverHandle object that can be used to reposition the file selection popover."

            plugins are for certain platforms only, some support all

cordova

example app

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

              central part are the css components optimized for mobile devices

              provide a platform for mobile web app development.

              Angular + cordova + plugins + nice icing on top
            

ionic

ionic start myApp sidemenu

cd myApp

ionic platform add ios

ionic build ios

ionic emulate ios

pretty much like cordova
            "start" is different
            "sidemenu" is a template

ionic

Example App

Phonegap build

Free* build service by Adobe

              For personal use 1 private app and unlimited apps from github repos
            

No Windows, MacOS needed to build the app for the app stores

            Fraport Mac Mini

example

more sophisticated Apps built with ionic

SPO-Portal Quick Offer

sworkit