Architektur der kleinen Bausteine
-
Upload
jens-christian-fischer -
Category
Documents
-
view
1.294 -
download
0
description
Transcript of Architektur der kleinen Bausteine
![Page 1: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/1.jpg)
Architektur der kleinen BausteineJens-Christian Fischer
simplificator.com@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz
Freitag, 9. Dezember 11
![Page 2: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/2.jpg)
Wie baue ich eine komplette Anwendung
im BrowserJens-Christian Fischer
simplificator.com@jcfischer
8.12.2011 - Internet Briefing Developer Konferenz
Freitag, 9. Dezember 11
![Page 3: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/3.jpg)
Freitag, 9. Dezember 11
![Page 4: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/4.jpg)
http://www.youtube.com/watch?v=squxkHIaIdY
Freitag, 9. Dezember 11
![Page 5: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/5.jpg)
Olsen-Banden overgiver sig aldrig1979
Freitag, 9. Dezember 11
![Page 6: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/6.jpg)
http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
![Page 7: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/7.jpg)
http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
![Page 8: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/8.jpg)
Komplexität
Freitag, 9. Dezember 11
![Page 9: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/d-/5300044735/in/photostream/
Komplexität
Freitag, 9. Dezember 11
![Page 10: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/10.jpg)
Komplexität
http://www.flickr.com/photos/ecstaticist/2969032490/Freitag, 9. Dezember 11
![Page 11: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/11.jpg)
http://www.mygreyworld.com/blog/2007/04/01/madness/
Komplexität
Freitag, 9. Dezember 11
![Page 12: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/12.jpg)
Nicht zu vermeiden
Freitag, 9. Dezember 11
![Page 13: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/13.jpg)
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
![Page 14: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/14.jpg)
Simplicity
http://www.flickr.com/photos/stevewall/1095860966Freitag, 9. Dezember 11
![Page 15: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/15.jpg)
Divide and Conquer
Freitag, 9. Dezember 11
![Page 16: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/16.jpg)
Objekt Orientierung
Freitag, 9. Dezember 11
![Page 17: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/17.jpg)
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 18: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/18.jpg)
• Eine Aufgabe, eine Anwendung
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 19: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/19.jpg)
• Eine Aufgabe, eine Anwendung
• Definierte Verantwortlichkeit
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 20: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/20.jpg)
• Eine Aufgabe, eine Anwendung
• Definierte Verantwortlichkeit
• Definiertes API
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 21: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/21.jpg)
• Eine Aufgabe, eine Anwendung
• Definierte Verantwortlichkeit
• Definiertes API
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 22: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/22.jpg)
• Eine Aufgabe, eine Anwendung
• Definierte Verantwortlichkeit
• Definiertes API
• SOA
Viele, kleine Anwendungen
Freitag, 9. Dezember 11
![Page 23: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/23.jpg)
Zusammensetzen von grossen Anwendungen durch viele kleine Services
Super Idee!
Service Oriented Architecture
Freitag, 9. Dezember 11
![Page 24: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/24.jpg)
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
![Page 25: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/25.jpg)
SOAP
Freitag, 9. Dezember 11
![Page 26: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/26.jpg)
SOA
Freitag, 9. Dezember 11
![Page 27: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/27.jpg)
Simplify
SOAP XML
Freitag, 9. Dezember 11
![Page 28: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/28.jpg)
Simplify
Freitag, 9. Dezember 11
![Page 29: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/29.jpg)
Simplify
REST JSON
Freitag, 9. Dezember 11
![Page 30: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/30.jpg)
http://www.flickr.com/photos/hgesell/1257717725/
Web
Freitag, 9. Dezember 11
![Page 31: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/31.jpg)
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
![Page 32: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/32.jpg)
• Eine Ressource hat eine Adresse
• Diese Adresse ist eine URL
• http://server.ch/konferenz/sessions/2
Ressourcen
Freitag, 9. Dezember 11
![Page 33: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/33.jpg)
• GET - Daten ansehen
• POST - Daten neu erstellen
• PUT - Daten ändern
• DELETE - Daten löschen
Verben
Freitag, 9. Dezember 11
![Page 34: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/34.jpg)
Einfache Verben
Freitag, 9. Dezember 11
![Page 35: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/35.jpg)
• 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
![Page 36: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/36.jpg)
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
![Page 37: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/37.jpg)
Freitag, 9. Dezember 11
![Page 38: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/38.jpg)
Beliebig Skalierbar
Freitag, 9. Dezember 11
![Page 39: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/39.jpg)
• Horizontales Skalieren
• Vertikales Skalieren
• HTTP gibt uns vieles „umsonst“
• Cache
• Load Balancing
• Proxying
Web Scale
Freitag, 9. Dezember 11
![Page 40: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/40.jpg)
• JavaScript Object Notation
• Standardformat für Serialisierung von JavaScript Objekten
• Kompakt
• Menschenlesbar
JSON
Freitag, 9. Dezember 11
![Page 41: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/41.jpg)
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
![Page 42: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/42.jpg)
{ "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
![Page 43: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/43.jpg)
Praxis: Mobino
Freitag, 9. Dezember 11
![Page 44: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/44.jpg)
Trichet Volcker Duisenberg Greenspan Keynes Smith
Mobino Crew
Freitag, 9. Dezember 11
![Page 45: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/45.jpg)
Volcker Trichet
Duisenberg Keynes Greenspan
SmithRedis
Postgres 9
Freeswitch
Acapela
VAAS
Customer Web Merchant WebWidget Customer Voice
Freitag, 9. Dezember 11
![Page 46: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/46.jpg)
Volcker Trichet
Duisenberg Keynes Greenspan
SmithRedis
Postgres 9
Freeswitch
Acapela
VAAS
Customer Web Merchant WebWidget Customer Voice
Freitag, 9. Dezember 11
![Page 47: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/47.jpg)
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
![Page 48: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/48.jpg)
• Eigentlich alles - gewisse sind allerdings geeigneter als andere
• Ruby
• Python
• JavaScript - CoffeeScript
Technologien?
Freitag, 9. Dezember 11
![Page 49: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/49.jpg)
• Kaum Einschränkungen
• REST API
• JSON
• HTTP
• Alle sprechen mit allen
• Austausch von Komponenten möglich
Server
Freitag, 9. Dezember 11
![Page 50: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/50.jpg)
Client Server
http://www.flickr.com/photos/obd-design/2374030181Freitag, 9. Dezember 11
![Page 51: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/51.jpg)
Browser
Freitag, 9. Dezember 11
![Page 52: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/52.jpg)
Freitag, 9. Dezember 11
![Page 53: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/53.jpg)
JavaScript
Gute SpracheNettes Spielzeug
Freitag, 9. Dezember 11
![Page 54: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/54.jpg)
• Model
• View
• Controller
MVC
Freitag, 9. Dezember 11
![Page 55: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/55.jpg)
• Model
• View
• Controller
MVC
Freitag, 9. Dezember 11
![Page 56: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/56.jpg)
Ruby / Python
Freitag, 9. Dezember 11
![Page 57: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/57.jpg)
• Backbone http://documentcloud.github.com/backbone
• Sammy http://sammyjs.org
• Flatironhttp://flatironjs.org
• Derbyhttp://derbyjs.com/
JavaScript Libraries
Freitag, 9. Dezember 11
![Page 58: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/58.jpg)
• Modelle
• Verbindung zu Daten-Backends
• Routes
• Views
• Templates
Was bieten diese Libraries?
Freitag, 9. Dezember 11
![Page 59: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/59.jpg)
• SproutCorehttp://sproutcore.com
• Cappucinohttp://cappuccino.org
JavaScript Frameworks
Freitag, 9. Dezember 11
![Page 60: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/60.jpg)
• 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
![Page 61: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/61.jpg)
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
![Page 62: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/62.jpg)
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
![Page 63: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/63.jpg)
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
![Page 64: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/64.jpg)
Templates
Templates können sowohl auf Server als auch im Browser ausgeführt werden:
Keine Codeduplizierung!
Freitag, 9. Dezember 11
![Page 65: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/65.jpg)
JavaScript auf Server
Freitag, 9. Dezember 11
![Page 66: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/66.jpg)
JavaScript auf Server
Freitag, 9. Dezember 11
![Page 67: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/67.jpg)
JavaScript auf Server
Auf jeden FallGaht‘s no?
Freitag, 9. Dezember 11
![Page 69: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/69.jpg)
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
![Page 70: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/70.jpg)
• 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
![Page 71: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/71.jpg)
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
![Page 72: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/72.jpg)
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
![Page 73: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/73.jpg)
Wohin jetzt?
Freitag, 9. Dezember 11
![Page 74: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/74.jpg)
Freitag, 9. Dezember 11
![Page 75: Architektur der kleinen Bausteine](https://reader034.fdocuments.net/reader034/viewer/2022052301/547ba2d6b4af9fda158b4f09/html5/thumbnails/75.jpg)
Fragen
Freitag, 9. Dezember 11