1. Architektur der kleinen
Bausteine
Jens-Christian Fischer
simplificator.com
@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz
Freitag, 9. Dezember 11
2. Wie baue ich eine
komplette Anwendung
im Browser
Jens-Christian Fischer
simplificator.com
@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz
Freitag, 9. Dezember 11
31. REST
Representational
State Transfer
Fielding Roy (2000), Architectural Styles and
the Design of Network-based Software Architectures,
http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
Freitag, 9. Dezember 11
32. Ressourcen
• Eine Ressource hat eine Adresse
• Diese Adresse ist eine URL
• http://server.ch/konferenz/sessions/2
Freitag, 9. Dezember 11
33. Verben
• GET - Daten ansehen
• POST - Daten neu erstellen
• PUT - Daten ändern
• DELETE - Daten löschen
Freitag, 9. Dezember 11
36. 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
Freitag, 9. Dezember 11
44. Mobino Crew
Trichet Volcker Duisenberg Greenspan Keynes Smith
Freitag, 9. Dezember 11
45. Merchant Web
Customer Web Customer Voice
Widget
Volcker Trichet Freeswitch
Duisenberg Keynes Greenspan
Redis Smith VAAS
Postgres 9 Acapela
Freitag, 9. Dezember 11
46. Merchant Web
Customer Web Customer Voice
Widget
Volcker Trichet Freeswitch
Duisenberg Keynes Greenspan
Redis Smith VAAS
Postgres 9 Acapela
Freitag, 9. Dezember 11
47. Merchant Web
Customer Web Customer Voice
Widget
Volcker FRONT Trichet Freeswitch
Duisenberg Keynes Greenspan
Back VOICE
Redis Smith VAAS
Postgres Acapela
Database 9
Freitag, 9. Dezember 11
48. Technologien?
• Eigentlich alles - gewisse sind allerdings
geeigneter als andere
• Ruby
• Python
• JavaScript - CoffeeScript
Freitag, 9. Dezember 11
49. Server
• Kaum Einschränkungen
• REST API
• JSON
• HTTP
• Alle sprechen mit allen
• Austausch von Komponenten möglich
Freitag, 9. Dezember 11
50. Client Server
http://www.flickr.com/photos/obd-design/2374030181
Freitag, 9. Dezember 11
60. Und die Frameworks?
• Komplettes Angebot an Komponenten
• Neue Programmiersprache: Objective-J
(Cappuccino)
• Portierung von UI-Kit (Cappuccino)
• Everything and the Kitchensink
Freitag, 9. Dezember 11
61. 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('#/')
Freitag, 9. Dezember 11
62. 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('#/') }
});
});
});
Freitag, 9. Dezember 11
63. 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
64. Templates
Templates können sowohl auf Server
als auch im Browser ausgeführt werden:
Keine Codeduplizierung!
Freitag, 9. Dezember 11
68. node.js
http://nodejs.org
Freitag, 9. Dezember 11
69. 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/')
Freitag, 9. Dezember 11
70. Beispiel Server / Client
• Anwendung läuft halb / halb im Browser
und auf dem Server - transparent für den
Entwickler
• Beispiel mit derby.js
Freitag, 9. Dezember 11
71. 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)
Freitag, 9. Dezember 11
72. 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();
});
});
Freitag, 9. Dezember 11