Architektur der kleinen Bausteine

Architektur der kleinen
Bausteine
Jens-Christian Fischer
simplificator.com
@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz

Freitag, 9. Dezember 11

Wie baue ich eine
komplette Anwendung
im Browser
simplificator.com
@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz


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

Olsen-Banden overgiver sig aldrig
1979


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

Komplexität


Komplexität

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

Komplexität

http://www.ﬂickr.com/photos/ecstaticist/2969032490/

Komplexität

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

Nicht zu vermeiden


New York 1811

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

Simplicity

http://www.ﬂickr.com/photos/stevewall/1095860966

Divide and Conquer


Objekt Orientierung


Viele, kleine Anwendungen



• Eine Aufgabe, eine Anwendung



• Deﬁnierte Verantwortlichkeit



• Deﬁniertes API



• Deﬁniertes API

• SOA


Service Oriented Architecture

Zusammensetzen von grossen Anwendungen
durch viele kleine Services

Super Idee!


<soap:Envelope xm
lns:soap="http:/
xmlns:xsi="http:
/s
//www.w3.org
SOAP
chemas.xmlsoap.o
rg/soap/envelope
/2001/XMLSchema-
/"
instance" xmlns:
xsd= "http://www.w3.o
rg/2001/XMLSchem
a">

<soap:Body> ewhere.ch">
sponse xmlns="som
<getLehrberufeRe
sult>
<getLehrberufeRe >
0</Total_records
<Total_records>1
/Start_record>
<Start_record>0<
/Max_records>
<Max_records>10<
<List>
<Lehrberuf>
<BBT_nr>21107</B
BT_nr> nung_maennlich>
onfi seur EBA</Bezeich
äcker-Konditor-C chnung_weiblich>
<Bezeich nung_maennlich>B nfis eurin EBA</Bezei
in-Konditorin-Co
<Bezeichnung _weiblich>Bäcker
ruf_nr> eichnung_lena>
<Ber uf_nr>343381</Be Conf iseur/in EBA</Bez
/in-Konditor/in-
<Bezeich nung_lena>Bäcker
fsgruppe_nr>
<Berufsg ruppe_nr>2</Beru
hrjahre>
<Lehrjahre>2</Le
/Ausbildungsart>
<A usbildungsart>2<
Anzahl_frei>
<Anzahl_frei>3</
</Lehrberuf>
<Lehrberuf>
_nr> nung_maennlich>
<B BT_nr>21105</BBT onfi seur EFZ</Bezeich
äcker-Konditor-C ezeichnung_weibl
ich>
<Bezeich nung_maennlich>B n-Co nfiseurin EFZ</B
ckerin-Konditori
<Bezeich nung_weiblich>Bä rei</Zusatz>
tung Bäckerei-Kondito
<Zusatz>Fachrich
Beruf_nr> eichnung_lena>
<B eruf_nr>343388</ n-Conf iseur/in EFZ</Bez
er/in-Konditor/i
<Bezei chnung_lena>Bäck
rufsgruppe_nr>
<Beruf sgruppe_nr>2</Be
hrjahre>
<Lehrjahre>3</Le
/Ausbildungsart>
<A usbildungsart>0<
/Anzahl_frei>
<Anzahl_frei>10<
</Lehrberuf>


SOAP


SOA


Simplify

SOAP XML


Simplify


Simplify

REST JSON


Web

http://www.ﬂickr.com/photos/hgesell/1257717725/

REST
Representational
State Transfer
Fielding Roy (2000), Architectural Styles and
the Design of Network-based Software Architectures,
http://www.ics.uci.edu/~ﬁelding/pubs/dissertation/top.htm


Ressourcen

• Eine Ressource hat eine Adresse
• Diese Adresse ist eine URL
• http://server.ch/konferenz/sessions/2


Verben

• GET - Daten ansehen
• POST - Daten neu erstellen
• PUT - Daten ändern
• DELETE - Daten löschen


Einfache Verben


Darstellungssache

• Gleicher Link, verschieden Darstellung
• http://example.com/customers/1.html
• http://example.com/customers/1.xml
• 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
end
end


Beliebig Skalierbar


Web Scale
• Horizontales Skalieren
• Vertikales Skalieren
• HTTP gibt uns vieles „umsonst“
• Cache
• Load Balancing
• Proxying

JSON

• JavaScript Object Notation
• Standardformat für Serialisierung von
JavaScript Objekten
• Kompakt
• Menschenlesbar


{ "completed_in" : 0.10000000000000001,
"max_id" : 144353241361154049,
"max_id_str" : "144353241361154049",

z.B. Twitter API
"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


Mobino Crew

Trichet Volcker Duisenberg Greenspan Keynes Smith


Merchant Web
Customer Web Customer Voice
Widget

Volcker Trichet Freeswitch

Duisenberg Keynes Greenspan

Redis Smith VAAS

Postgres 9 Acapela


Merchant Web
Customer Web Customer Voice
Widget

Volcker FRONT Trichet Freeswitch

Duisenberg Keynes Greenspan

Back VOICE
Redis Smith VAAS

Postgres Acapela
Database 9


Technologien?

• Eigentlich alles - gewisse sind allerdings
geeigneter als andere
• Ruby
• Python
• JavaScript - CoffeeScript


Server
• Kaum Einschränkungen
• REST API
• JSON
• HTTP

• Alle sprechen mit allen
• Austausch von Komponenten möglich

Client Server

http://www.ﬂickr.com/photos/obd-design/2374030181

Browser


JavaScript

Gute Sprache
Nettes Spielzeug


MVC

• Model
• View
• Controller


Ruby / Python


JavaScript Libraries
• Backbone
http://documentcloud.github.com/backbone
• Sammy
http://sammyjs.org
• Flatiron
http://ﬂatironjs.org
• Derby
http://derbyjs.com/

Was bieten diese Libraries?

• Modelle
• Verbindung zu Daten-Backends
• Routes
• Views
• Templates


JavaScript Frameworks

• SproutCore
http://sproutcore.com
• Cappucino
http://cappuccino.org


Und die Frameworks?

• Komplettes Angebot an Komponenten
• Neue Programmiersprache: Objective-J
(Cappuccino)
• Portierung von UI-Kit (Cappuccino)
• Everything and the Kitchensink


Sammy Anwendung
// initialize the application
var 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 application
app.run('#/')


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


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


JavaScript auf Server

Auf jeden Fall
Gaht‘s no?


node.js

http://nodejs.org


HTTP Server

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


Beispiel Server / Client

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

• Beispiel mit derby.js


server.js
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)


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

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

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


Wohin jetzt?


Fragen


Kontakt

jens-christian.fischer@simplificator.com
@jcfischer


Architektur der kleinen Bausteine

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Jens-Christian Fischer

Architektur der kleinen Bausteine