Vorbereitung:


  • wechsele auf der Console in dieses Verzeichnis
  • starte: python -m SimpleHTTPServer 8080
  • öffne auf dem Präsentationslaptop http://laptop_ip_address:8080
  • öffne auf dem Phone http://laptop_ip_address:8080/control.html
  • tippe auf dem Phone die ID ab die jetzt folgt:


ID =


nicht verbunden

dieser Vortrag auf:

www.ccczh.ch/~peponi/start_to_build_webapps

Apps bauen, geht klar

aber wo anfangen?

Open WebApps vs. Native Apps


WTF

WebApps sind

  • Webseiten (HTML5, CSS3, JS) die aussehen und sich anfühlen wie Apps, können aber local auf deinem Gerät gespeichert und (offline) ausgeführt werden
  • Vorteil, du kannst sie selbst hosten, und mit freien Mitteln entwickeln = offene Standarts
  • WebApps laufen auch auf Android und iOS

iPhone Apps sind

  • in Objective-C geschriebene kompilierte Programme, die ausschliesslich im Apple App Store zu verfügung gestellt werden können( veriffizierungsprozess) und eigentlich nur mit der Apple hauseigenen Entwicklungsumgebung X-Code und einem iPhone gebaut werden können
  • iOS Apps laufen ausschliesslich auf iOS Platformen

Android Apps sind

  • in Java geschriebene kompilierte Programme, die mit Android Studio programmiert werden können
  • Android Apps laufen ausschliesslich auf Android Plattformen

Hybride Apps sind

NativeApp vs. Webapp


if you have to look at the code to know the difference, why does it matter?

warum also open WebApps ?


  • das Web verändert sich gerade, es geht offline
  • HTML wird zur Seite gedrängt, von privaten Firmen
  • 'cause we can - it's easy - it's cheap
  • Killer Feature - können auch genutzt werden ohne installation
  • es sind webseiten

Beispiele

open WebApps also ... und wie gehts jetzt los ?

Der Editor

Der Editor



sonst nix !



Know your Operatingsystem Browser



Plug Plug Plug Plugins

  • Chrome Webdeveloper, ColorZilla, pageRuller
  • HTML Code Sniffer, Junkfill, Dewey
  • ... you name it

Tools im Web


Bookmarklets suchen



Chrome als ein Editor

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

Def Refs



Einführungen


UI Frameworks

UI App/Phone Frameworks (Status March 2015)



Pro Tip: lasst die finger von jQuery Mobile

prima

damit kann man ja schon mal ohne Sinn und Verstand eine App ohne Funktion zusammen-LEGO-basteln

und wie bekomme ich diese Webseite die aussieht wie eine App, als Icon auf mein iPhone?

index.html - iPhone

<html>
<head>
	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width">
  	<meta name="mobile-web-app-capable" content="yes">
  	<meta name="apple-mobile-web-app-capable" content="yes">
  	<meta name="apple-mobile-web-app-status-bar-style" content="black">

  	<link rel="apple-touch-startup-image" href="img/icon.png">
  	<link rel="apple-touch-icon-precomposed" href="img/icon.png">

	<title>your iphone webapp</title>
</head>
<body>
</body>
</html>					
				

index.html - Android

<html>
<head>
	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width">
  	<meta name="mobile-web-app-capable" content="yes">
  	
  	<link rel="manifest" href="manifest.json">

	<title>your iphone webapp</title>
</head>
<body>
</body>
</html>					
				

und wenn ich Offline bin?

damit die Webseite offline aus dem Cache geladen wird,
braucht es 2 Dinge:


  • den Cache
  • und ein Javascript was den Cache aktualisiert

index.html

<html manifest="manifest.appcache">
<head>

...						
						

speichern unter ./ als manifest.appcache

CACHE MANIFEST
# Version 0.2 / 2014-04-019 12:00

CACHE:
index.html

css/app.css

lib/jquery.min.js

js/models.js
js/viewModl.js

index.html

...
<script>
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      if (confirm('A new version of this App is available. Do you want to download it?')) {
        window.location.reload();
      }
    }
  }, false);

  window.applicationCache.addEventListener('obsolete', function(e)
  {
	window.applicationCache.update();
  });

}, false);

</script>
</html>

fertig


in dem Moment wenn das Manifest file aktualisiert wird, fragt euch beim nächsten App-Start euer iPhone nach einer Aktualisierung

das Confirm könnte weg gelassen werden und die index.html serverseitig mit neuem Inhalt generiert werden


dann hätte man eine ziemlich primitive App (Liste), die aber immer up to date ist



starter Kit


ja aber ... vielleicht will ich ja was eingeben


und sowieso, wie bekommen wir da jetzt Daten rein, raus, durch und überhaupt ?

aber javascript gehört doch ausgeschaltet !

ja aber ...

Wenn der Browser nicht mehr als Document-Viwer sonder als Runtime für deine App herhalten soll, brauchen wir eine Scriptsprache

was ?

Wenn das HTML (der Text) nicht mehr auf dem Server zusammen gesetzt werden soll und fertig übertragen wird, sondern im Browser zusammen gesetzt wird, muss das ja irgendwer tun

ausserdem geht das Web Mobile(Offline), weshalb der Seitenaufbau mit Javascript organisiert werden muss

uuuuund faktisch funktioniert heute keine moderne Seite ohne Javascript

ah

aber warum unbedingt Javascript?

'cause nobody kill it yet

Javascript wird zur universellen Sprache und lauft sogar schon auf Mikrocontrollern / Robotern

fragt sich also ...

Ist Javascript das neue HTML?

tu das in dein Werkzeugkasten



ein Packetmananger fürs Web

Node Package Manager (npm)

npm install, und die Welt steht dir offen

bower install, und die Welt steht dir offen

package.json
{
  "name": "reveal.js",
  "version": "2.6.1",
  "description": "The HTML Presentation Framework",
  "homepage": "http://lab.hakim.se/reveal-js",
  "subdomain": "revealjs",
  "scripts": {
    "test": "grunt test",
    "start": ""
  },
  "author": {
    "name": "Hakim El Hattab",
    "email": "hakim.elhattab@gmail.com",
    "web": "http://hakim.se"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/hakimel/reveal.js.git"
  },
  "engines": {
    "node": "~0.8.0"
  },
  "dependencies": {
    "underscore": "~1.5.1",
    "express": "~2.5.9",
    "mustache": "~0.7.2",
    "socket.io": "~0.9.13"
  },
  "devDependencies": {
    "grunt-contrib-qunit": "~0.2.2",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-cssmin": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt": "~0.4.0"
  },
  "licenses": [{
      "type": "MIT",
      "url": "https://github.com/hakimel/reveal.js/blob/master/LICENSE"
    }]
}
						

Node.js ist eine serverseitige Plattform zum Betrieb von Netzwerkanwendungen. Insbesondere lassen sich Webserver damit realisieren.

was ... Javascript auch auf Server Seite?

yes

aber das lagt doch ?

no

für dein Kram reichts alle mal !

back to the past

die Gute alte Zeit - 2011

                            +-------------------+
                            |  Apache           |
+-------------------+       +-----------+-------+     +---------------+
|  Website Request  +------->  Controler--Model-------> Database      |
|                   |       |                   |     |               |
|  Reload           <-------+  Funktion    <----------+ Table         |
|                   |       |  Seite wird       |     |               |
|                   |       |  aufgebaut/sent   |     |               |
|                   |       |                   |     |               |
|                   |       |                   |     |               |
|  facebook.com     |       |  crappy PHP       |     |  Mysql        |
|                   |       |  Framework        |     |               |
|                   |       |                   |     |               |
+-------------------+       +-------------------+     +---------------+

kein bock mehr auf LAMP - 2012

npm install meteor



                            +-------------------+
    AngularJS               |  Nodejs           |               
+-------------------+       +-----------+-------+---------------+
|  Website Request  +------->  Controler--Model-> Database      |
|                   |       |                   |               |
|  ViewModel        <-------+  Funktion    <----+ Table         |
|                   |       |                   |               |
|                   |       |                   |               |
|                   |       |                   |               |
|                   |       |                   |               |
|                   |       |  Meteor           |  CouchDB      |
|-------------------|       |                   |               |
|  localStorage     |       |                   |               |
+-------------------+       +-------------------+---------------+

kein bock mehr auf Backend - 2013

npm install hoodie-cli



                            +----------------+
    AngularJS               |  Hoodie/Nodejs |               
+-------------------+       +-----------+----+
|  Website Request  +------->  Database      |
|  Controler        |       |                |
|  ViewModel        <-------+  Table         |
|                   |       |                |
|                   |       |                |
|                   |       |                |
|                   |       |                |
|                   |       |  CouchDB       |
|-------------------| clone |                |
|  localStorage     <-------|                |
+-------------------+       +----------------+

Das richtige JS Framework



Das richtige JS Framework



browser as a runtime, not as a document viewer

Das richtige JS Framework


MVVM - Model View Viewmodel

eignen sich super zur Code Strukturierung für WebApps

Das richtige JS Framework


Full Stack Framework (MVC)

für grosse Applicationen wie GoogleMail oder das Owncloud Interface

Das richtige JS Framework


Non-Frameworky Framework

hot new shit - keine Ahnung was das ist

Das richtige JS Framework


backend Frameworks (CMV)

Das richtige JS Framework


Isomorphic / Realtime Framework

organisieren einem alles unter der Sonne mit Magie

Das richtige JS Framework


no backend framework

organisert Speicherung und Login UserVerwaltungs bla kram

in to the wild

Viewmodel



HTML generierung erst im Browser

Vanilla

var viewModel = function()
{
	self = this;
	self.list = [];

	self.init = function()
	{
	    hoodie.store.findAll('ponys').done(function (objects) 
	    {
	        self.list = objects;
	    });

  	    self.createView();
	};

	self.createView = function()
	{	
	    var d 	= document;
	    var ul 	= d.getElementById("ponys");

	    self.list.forEach(pony,i)
	    {
	    	var li = d.createElement("li");
	    	li.innerHTML = pony.name;
	    	ul.appendChild(li);
	    }
	};

	return self;
}

viewModel.init();

hot new Observables

Object.observe() is now in Chrome stable!

var vm = function()
{
	self = this;
	self.list = [];

	// verwandelt die Liste in eine intelligente Liste
	Object.observe(self.list, observer);

	...

KnockoutJS

var viewModel = function()
{
	self = this;
	self.list = ko.observableArray();

	self.init = function()
	{
	    hoodie.store.findAll('ponys').done(function (objects) 
	    {
	        self.list = ko.observableArray(objects);
	    });
	};

	return self;
}

ko.applyBindings(new viewModel());

AngularJS

angular.module('ponyApp',[])
.controller('viewModel', ['$scope', function($scope) 
{
  	$scope.list = []; // ng-list

  	$scope.init = function()
	{
	    hoodie.store.findAll('ponys').done(function (objects) 
	    {
	        self.list = objects;
	    });
	};
}]);
aber ...
<form action="/filterStuff" method="post>

<input type="button">
</form>
					
<?php

class fancy_Controller extends Controller {	

	public function filterStuff()
	{
		$params = $this->input();

		$result = $db
			->table("stuff")
			->where('name' => $params['name'])
			->where('state' => $params['state'])
			->sort('ASC','name')
			->get();

		return $result;
	}
}					
					

die Gute alte Zeit - 2011

                            +-------------------+
                            |  Apache           |
+-------------------+       +-----------+-------+     +---------------+
|  Website Request  +------->  Controler--Model-------> Database      |
|                   |       |                   |     |               |
|  Reload           <-------+  Funktion    <----------+ Table         |
|                   |       |  Seite wird       |     |               |
|                   |       |  aufgebaut/sent   |     |               |
|                   |       |                   |     |               |
|                   |       |                   |     |               |
|  facebook.com     |       |  crappy PHP       |     |  Mysql        |
|                   |       |  Framework        |     |               |
|                   |       |                   |     |               |
+-------------------+       +-------------------+     +---------------+
var viewModel = function()
{
	self = this;
	self.list = [];

	...

	self.filterStuff = function(param)
	{
	    var d = document;
	    var ponys = d.getElementById("ponys");
		
		//clean list
	    while(ponys.firstChild) ponys.removeChild(ponys.firstChild);

	    self.list = self.list.filter(function(el)
    	{
			return el.name == param.name;
		});

    	self.createView();
	}
}

viewModel.init();
					
<body>

<div class="button" onClick="viewModel.filterStuff()">;</div>

</body>
				

will never work

do this

<body>

<div class="button" data-click="filterStuff";</div>

<script>
[].forEach.call(document.querySelectorAll('[data-click]'), function(el) {
  el.addEventListener('click', function(e) {
    	var fuctionName = e.target.dataSet,
    		param = {};

    	param.name = document.querySelectorAll("input").value;
		
    	viewModel[fuctionName](param);
  });
});
<script>

</body>
				

was sonst noch?

Build new Bricks


Eric Bidelman - a Webapp is constructed on Webcomponents

stay in da loop

Blogs