Architektur der kleinen BausteineJens-Christian Fischer

simplificator.com@jcfischer

8.12.2011 - Internet Briefing Developer Konferenz

Freitag, 9. Dezember 11

Wie baue ich eine komplette Anwendung

im BrowserJens-Christian Fischer

simplificator.com@jcfischer

8.12.2011 - Internet Briefing Developer Konferenz

Freitag, 9. Dezember 11

Freitag, 9. Dezember 11

http://www.youtube.com/watch?v=squxkHIaIdY

Freitag, 9. Dezember 11

Olsen-Banden overgiver sig aldrig1979

Freitag, 9. Dezember 11

http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11

http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11

Komplexität

Freitag, 9. Dezember 11

http://www.flickr.com/photos/d-/5300044735/in/photostream/

Komplexität

Freitag, 9. Dezember 11

Komplexität

http://www.flickr.com/photos/ecstaticist/2969032490/Freitag, 9. Dezember 11

http://www.mygreyworld.com/blog/2007/04/01/madness/

Komplexität

Freitag, 9. Dezember 11

Nicht zu vermeiden

Freitag, 9. Dezember 11

New York 1811

http://www.smartplanet.com/blog/smart-takes/five-ways-to-make-new-york-citys-street-grid-greener/15628

Freitag, 9. Dezember 11

Simplicity

http://www.flickr.com/photos/stevewall/1095860966Freitag, 9. Dezember 11

Divide and Conquer

Freitag, 9. Dezember 11

Objekt Orientierung

Freitag, 9. Dezember 11

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

• Eine Aufgabe, eine Anwendung

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

• Eine Aufgabe, eine Anwendung

• Definierte Verantwortlichkeit

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

• Eine Aufgabe, eine Anwendung

• Definierte Verantwortlichkeit

• Definiertes API

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

• Eine Aufgabe, eine Anwendung

• Definierte Verantwortlichkeit

• Definiertes API

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

• Eine Aufgabe, eine Anwendung

• Definierte Verantwortlichkeit

• Definiertes API

• SOA

Viele, kleine Anwendungen

Freitag, 9. Dezember 11

Zusammensetzen von grossen Anwendungen durch viele kleine Services

Super Idee!

Service Oriented Architecture

Freitag, 9. Dezember 11

SOAP<soap:Envelope xmlns:soap="http://schemas.xmlsoap.

org/soap/envelope/"

xmlns:xsi="http://www.w3.org/2001/X

MLSchema-instance" xmlns:xsd="http://www.w3.org/20

01/XMLSchema">

<soap:Body> <getLehrberufeRespons

e xmlns="somewhere.ch">

<getLehrberufeResult>

<Total_records>10</Total_records>

<Start_record>0</Start_record>

<Max_records>10</Max_records>

<List> <Lehrberuf> <BBT_nr>21107

</BBT_nr>

<Bezeichnung_maennlich>Bäcker-Konditor

-Confiseur EBA</Bezeichnung_maennlich>

<Bezeichnung_weiblich>Bäckerin-Kondito

rin-Confiseurin EBA</Bezeichnung_weiblich>

<Beruf_nr>343381</Beruf_nr>

<Bezeichnung_lena>Bäcker/in-Konditor/i

n-Confiseur/in EBA</Bezeichnung_lena>

<Berufsgruppe_nr>2</Berufsgruppe_nr>

<Lehrjahre>2</Lehrjahre>

<Ausbildungsart>2</Ausbildungsart>

<Anzahl_frei>3</Anzahl_frei>

</Lehrberuf> <Lehrberuf>

<BBT_nr>21105</BBT_nr>

<Bezeichnung_maennlich>Bäcker-Konditor

-Confiseur EFZ</Bezeichnung_maennlich>

<Bezeichnung_weiblich>Bäckerin-Kondito

rin-Confiseurin EFZ</Bezeichnung_weiblich>

<Zusatz>Fachrichtung Bäckerei-Konditor

ei</Zusatz>

<Beruf_nr>343388</Beruf_nr>

<Bezeichnung_lena>Bäcker/in-Konditor/i

n-Confiseur/in EFZ</Bezeichnung_lena>

<Berufsgruppe_nr>2</Berufsgruppe_nr>

<Lehrjahre>3</Lehrjahre>

<Ausbildungsart>0</Ausbildungsart>

<Anzahl_frei>10</Anzahl_frei>

</Lehrberuf>

Freitag, 9. Dezember 11

SOAP

Freitag, 9. Dezember 11

SOA

Freitag, 9. Dezember 11

Simplify

SOAP XML

Freitag, 9. Dezember 11

Simplify

Freitag, 9. Dezember 11

Simplify

REST JSON

Freitag, 9. Dezember 11

http://www.flickr.com/photos/hgesell/1257717725/

Web

Freitag, 9. Dezember 11

Representational State Transfer

Fielding Roy (2000), Architectural Styles andthe Design of Network-based Software Architectures, http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

REST

Freitag, 9. Dezember 11

• Eine Ressource hat eine Adresse

• Diese Adresse ist eine URL

• http://server.ch/konferenz/sessions/2

Ressourcen

Freitag, 9. Dezember 11

• GET - Daten ansehen

• POST - Daten neu erstellen

• PUT - Daten ändern

• DELETE - Daten löschen

Verben

Freitag, 9. Dezember 11

Einfache Verben

Freitag, 9. Dezember 11

• Gleicher Link, verschieden Darstellung

• http://example.com/customers/1.html

• http://example.com/customers/1.xml

• http://example.com/customers/1.json

Darstellungssache

Freitag, 9. Dezember 11

class CustomersController < ApplicationController respond_to :html, :xml, :json

def index @customers = Customer.all respond_with @customers end

def show @customer = Customer.find params[:id] respond_with @customer endend

Freitag, 9. Dezember 11

Freitag, 9. Dezember 11

Beliebig Skalierbar

Freitag, 9. Dezember 11

• Horizontales Skalieren

• Vertikales Skalieren

• HTTP gibt uns vieles „umsonst“

• Cache

• Load Balancing

• Proxying

Web Scale

Freitag, 9. Dezember 11

• JavaScript Object Notation

• Standardformat für Serialisierung von JavaScript Objekten

• Kompakt

• Menschenlesbar

JSON

Freitag, 9. Dezember 11

z.B. Twitter API{ "completed_in" : 0.10000000000000001, "max_id" : 144353241361154049, "max_id_str" : "144353241361154049", "next_page" : "?page=2&max_id=144353241361154049&q=internet%20briefing", "page" : 1, "query" : "internet+briefing", "refresh_url" : "?since_id=144353241361154049&q=internet%20briefing", "results" : [ { "created_at" : "Tue, 06 Dec 2011 17:37:10 +0000", "from_user" : "thlang", "from_user_id" : 16402761, "from_user_id_str" : "16402761", "from_user_name" : "Thomas Lang", "geo" : null, "id" : 144108129351766016, "id_str" : "144108129351766016", "iso_language_code" : "de", "metadata" : { "result_type" : "recent" }, "profile_image_url" : "http://a3.twimg.com/profile_images/1570004977/thlang2011b_normal.jpg", "source" : "<a href="http://www.tweetdeck.com" rel="nofollow">TweetDeck</a>", "text" : "Fast ein kleines TweetUp am Internet-Briefing mit @sufranke @RetoHartinger @ooniboni @mhegi @rolfgeisser @JoergEugster und mehr.", "to_user" : null, "to_user_id" : null, "to_user_id_str" : null, "to_user_name" : null }, // ... ], "results_per_page" : 15, "since_id" : 0, "since_id_str" : "0"}

Freitag, 9. Dezember 11

{ "completed_in" : 0.10000000000000001, "max_id" : 144353241361154049, "max_id_str" : "144353241361154049", "next_page" : "?page=2&max_id=144353241361154049&q=internet%20briefing", "page" : 1, "query" : "internet+briefing", "refresh_url" : "?since_id=144353241361154049&q=internet%20briefing", "results" : [ { "created_at" : "Tue, 06 Dec 2011 17:37:10 +0000", "from_user" : "thlang", "from_user_id" : 16402761, "from_user_id_str" : "16402761", "from_user_name" : "Thomas Lang", "geo" : null, "id" : 144108129351766016, "id_str" : "144108129351766016", "iso_language_code" : "de", "metadata" : { "result_type" : "recent" }, "profile_image_url" : "http://a3.twimg.com/profile_images/1570004977/thlang2011b_normal.jpg", "source" : "<a href="http://www.tweetdeck.com" rel="nofollow">TweetDeck</a>", "text" : "Fast ein kleines TweetUp am Internet-Briefing mit @sufranke @RetoHartinger @ooniboni @mhegi @rolfgeisser @JoergEugster und mehr.", "to_user" : null, "to_user_id" : null, "to_user_id_str" : null, "to_user_name" : null }, // ... ], "results_per_page" : 15, "since_id" : 0, "since_id_str" : "0"}

Freitag, 9. Dezember 11

Praxis: Mobino

Freitag, 9. Dezember 11

Trichet Volcker Duisenberg Greenspan Keynes Smith

Mobino Crew

Freitag, 9. Dezember 11

Volcker Trichet

Duisenberg Keynes Greenspan

SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS

Customer Web Merchant WebWidget Customer Voice

Freitag, 9. Dezember 11

Volcker Trichet

Duisenberg Keynes Greenspan

SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS

Customer Web Merchant WebWidget Customer Voice

Freitag, 9. Dezember 11

Volcker Trichet

Duisenberg Keynes Greenspan

SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS

Customer Web Merchant WebWidget Customer Voice

VOICE

FRONT

Back

Database

Freitag, 9. Dezember 11

• Eigentlich alles - gewisse sind allerdings geeigneter als andere

• Ruby

• Python

• JavaScript - CoffeeScript

Technologien?

Freitag, 9. Dezember 11

• Kaum Einschränkungen

• REST API

• JSON

• HTTP

• Alle sprechen mit allen

• Austausch von Komponenten möglich

Server

Freitag, 9. Dezember 11

Client Server

http://www.flickr.com/photos/obd-design/2374030181Freitag, 9. Dezember 11

Browser

Freitag, 9. Dezember 11

Freitag, 9. Dezember 11

JavaScript

Gute SpracheNettes Spielzeug

Freitag, 9. Dezember 11

• Model

• View

• Controller

MVC

Freitag, 9. Dezember 11

• Model

• View

• Controller

MVC

Freitag, 9. Dezember 11

Ruby / Python

Freitag, 9. Dezember 11

• Backbone http://documentcloud.github.com/backbone

• Sammy http://sammyjs.org

• Flatironhttp://flatironjs.org

• Derbyhttp://derbyjs.com/

JavaScript Libraries

Freitag, 9. Dezember 11

• Modelle

• Verbindung zu Daten-Backends

• Routes

• Views

• Templates

Was bieten diese Libraries?

Freitag, 9. Dezember 11

• SproutCorehttp://sproutcore.com

• Cappucinohttp://cappuccino.org

JavaScript Frameworks

Freitag, 9. Dezember 11

• Komplettes Angebot an Komponenten

• Neue Programmiersprache: Objective-J (Cappuccino)

• Portierung von UI-Kit (Cappuccino)

• Everything and the Kitchensink

Und die Frameworks?

Freitag, 9. Dezember 11

Sammy Anwendung// initialize the applicationvar app = Sammy('#main', function() { // include a plugin this.use('Mustache'); // define a 'route' this.get('#/', function() { // load some data this.load('posts.json') // render a template .renderEach('post.mustache') // swap the DOM with the new content .swap(); });});// start the applicationapp.run('#/')

Freitag, 9. Dezember 11

var app = Sammy(function(request) { this.post('#/widgets', function() { jQuery.ajax({ url: '/widgets', method: 'post', data: request.params['widget'], success: function(){ request.redirect('#/') } }); });});

GET / POST / PUT / ...

Freitag, 9. Dezember 11

Templates

var view = { title: "Joe", calc: function() { return 2 + 4; }}

var template = "{{title}} spends {{calc}}";

var html = Mustache.to_html(template, view)

http://mustache.github.com/

Freitag, 9. Dezember 11

Templates

Templates können sowohl auf Server als auch im Browser ausgeführt werden:

Keine Codeduplizierung!

Freitag, 9. Dezember 11

JavaScript auf Server

Freitag, 9. Dezember 11

JavaScript auf Server

Freitag, 9. Dezember 11

JavaScript auf Server

Auf jeden FallGaht‘s no?

Freitag, 9. Dezember 11

node.js

http://nodejs.org

Freitag, 9. Dezember 11

var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(1337, "127.0.0.1");console.log('Server running at http://127.0.0.1:1337/')

HTTP Server

Freitag, 9. Dezember 11

• Anwendung läuft halb / halb im Browser und auf dem Server - transparent für den Entwickler

• Beispiel mit derby.js

Beispiel Server / Client

Freitag, 9. Dezember 11

var express = require('express'), hello = require('./hello'), server = express.createServer() .use(express.static(__dirname + '/public')) // Apps create an Express middleware .use(hello.router()),

// Apps also provide a server-side store for syncing data store = hello.createStore({ listen: server });

server.listen(3000)

server.js

Freitag, 9. Dezember 11

hello.jsvar hello = require('derby').createApp(module), view = hello.view, get = hello.get;

// Templates define both HTML and model <- -> view bindingsview.make('Body', 'Holler: <input value="((message))"><h1>((message))</h1>');

// Routes render on client as well as serverget('/', function(page, model) { // Subscribe specifies the data to sync model.subscribe('message', function() { page.render(); });});

Freitag, 9. Dezember 11

Wohin jetzt?

Freitag, 9. Dezember 11

Freitag, 9. Dezember 11

Fragen

Freitag, 9. Dezember 11

Jens-Christian Fischerjens-christian.fischer@simplificator.com

@jcfischer

Kontakt

Freitag, 9. Dezember 11