Architektur der kleinen Bausteine

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



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




Olsen-Banden overgiver sig aldrig1979


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

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


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



Komplexität


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

Komplexität




Komplexität

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

http://www.flickr.com/photos/ecstaticist/2969032490/

http://www.flickr.com/photos/ecstaticist/2969032490/

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

Komplexität




Nicht zu vermeiden


New York 1811

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






Simplicity

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

http://www.flickr.com/photos/stevewall/1095860966

http://www.flickr.com/photos/stevewall/1095860966

Divide and Conquer


Objekt Orientierung


Viele, kleine Anwendungen


• Eine Aufgabe, eine Anwendung




• Definierte Verantwortlichkeit





• Definiertes API





• Definiertes API





• Definiertes API

• SOA



Zusammensetzen von grossen Anwendungen durch viele kleine Services

Super Idee!

Service Oriented Architecture


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>


SOAP


SOA


Simplify

SOAP XML


Simplify


Simplify

REST JSON


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

Web




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


http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

• Eine Ressource hat eine Adresse

• Diese Adresse ist eine URL

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

Ressourcen


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

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

• GET - Daten ansehen

• POST - Daten neu erstellen

• PUT - Daten ändern

• DELETE - Daten löschen

Verben


Einfache Verben


• Gleicher Link, verschieden Darstellung

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

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

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

Darstellungssache


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

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

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

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

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

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

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



Beliebig Skalierbar


• Horizontales Skalieren

• Vertikales Skalieren

• HTTP gibt uns vieles „umsonst“

• Cache

• Load Balancing

• Proxying

Web Scale


• JavaScript Object Notation

• Standardformat für Serialisierung von JavaScript Objekten

• Kompakt

• Menschenlesbar

JSON


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"}


{ "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"}


Praxis: Mobino


Trichet Volcker Duisenberg Greenspan Keynes Smith

Mobino Crew


Volcker Trichet

Duisenberg Keynes Greenspan

SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS

Customer Web Merchant WebWidget Customer Voice


Volcker Trichet


SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS



Volcker Trichet


SmithRedis

Postgres 9

Freeswitch

Acapela

VAAS


VOICE

FRONT

Back

Database


• Eigentlich alles - gewisse sind allerdings geeigneter als andere

• Ruby

• Python

• JavaScript - CoffeeScript

Technologien?


• Kaum Einschränkungen

• REST API

• JSON

• HTTP

• Alle sprechen mit allen

• Austausch von Komponenten möglich

Server


Client Server

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

http://www.flickr.com/photos/obd-design/2374030181

http://www.flickr.com/photos/obd-design/2374030181

Browser



JavaScript

Gute SpracheNettes Spielzeug


• Model

• View

• Controller

MVC


• Model

• View

• Controller

MVC


Ruby / Python


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

• Sammy http://sammyjs.org

• Flatironhttp://flatironjs.org

• Derbyhttp://derbyjs.com/

JavaScript Libraries


http://documentcloud.github.com/backbone

http://documentcloud.github.com/backbone

http://sammyjs.org/

http://sammyjs.org/

http://flatironjs.org

http://flatironjs.org

http://derbyjs.com/

http://derbyjs.com/

• Modelle

• Verbindung zu Daten-Backends

• Routes

• Views

• Templates

Was bieten diese Libraries?


• SproutCorehttp://sproutcore.com

• Cappucinohttp://cappuccino.org

JavaScript Frameworks


http://sproutcore.com

http://sproutcore.com

http://cappuccino.org

http://cappuccino.org

• Komplettes Angebot an Komponenten

• Neue Programmiersprache: Objective-J (Cappuccino)

• Portierung von UI-Kit (Cappuccino)

• Everything and the Kitchensink

Und die Frameworks?


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('#/')


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 / ...


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/




Templates

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

Keine Codeduplizierung!


JavaScript auf Server





Auf jeden FallGaht‘s no?


node.js

http://nodejs.org


http://nodejs.org

http://nodejs.org

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


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

• Beispiel mit derby.js

Beispiel Server / Client


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


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


Wohin jetzt?



Fragen


Jens-Christian [email protected]

@jcfischer

Kontakt


Documents

Architektur der kleinen Bausteine