Architektur der kleinen Bausteine
Upcoming SlideShare
Loading in...5
×
 

Architektur der kleinen Bausteine

on

  • 1,224 views

Betrachtungen zur Architektur von Software Systemen.

Betrachtungen zur Architektur von Software Systemen.

Statistics

Views

Total Views
1,224
Views on SlideShare
1,223
Embed Views
1

Actions

Likes
1
Downloads
13
Comments
0

1 Embed 1

http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Architektur der kleinen Bausteine Architektur der kleinen Bausteine Presentation Transcript

  • Architektur der kleinen Bausteine Jens-Christian Fischer simplificator.com @jcfischer 8.12.2011 - Internet Briefing Developer KonferenzFreitag, 9. Dezember 11
  • Wie baue ich eine komplette Anwendung im Browser Jens-Christian Fischer simplificator.com @jcfischer 8.12.2011 - Internet Briefing Developer KonferenzFreitag, 9. Dezember 11
  • Freitag, 9. Dezember 11
  • http://www.youtube.com/watch?v=squxkHIaIdYFreitag, 9. Dezember 11
  • Olsen-Banden overgiver sig aldrig 1979Freitag, 9. Dezember 11
  • http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
  • http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
  • KomplexitätFreitag, 9. Dezember 11
  • Komplexität http://www.flickr.com/photos/d-/5300044735/in/photostream/Freitag, 9. Dezember 11
  • Komplexität http://www.flickr.com/photos/ecstaticist/2969032490/Freitag, 9. Dezember 11
  • Komplexität http://www.mygreyworld.com/blog/2007/04/01/madness/Freitag, 9. Dezember 11
  • Nicht zu vermeidenFreitag, 9. Dezember 11
  • New York 1811 http://www.smartplanet.com/blog/smart-takes/five-ways-to-make-new-york-citys-street-grid-greener/ 15628Freitag, 9. Dezember 11
  • Simplicity http://www.flickr.com/photos/stevewall/1095860966Freitag, 9. Dezember 11
  • Divide and ConquerFreitag, 9. Dezember 11
  • Objekt OrientierungFreitag, 9. Dezember 11
  • Viele, kleine AnwendungenFreitag, 9. Dezember 11
  • Viele, kleine Anwendungen • Eine Aufgabe, eine AnwendungFreitag, 9. Dezember 11
  • Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte VerantwortlichkeitFreitag, 9. Dezember 11
  • Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes APIFreitag, 9. Dezember 11
  • Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes APIFreitag, 9. Dezember 11
  • Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes API • SOAFreitag, 9. Dezember 11
  • Service Oriented Architecture Zusammensetzen von grossen Anwendungen durch viele kleine Services Super Idee!Freitag, 9. Dezember 11
  • <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>Freitag, 9. Dezember 11
  • SOAPFreitag, 9. Dezember 11
  • SOAFreitag, 9. Dezember 11
  • Simplify SOAP XMLFreitag, 9. Dezember 11
  • SimplifyFreitag, 9. Dezember 11
  • Simplify REST JSONFreitag, 9. Dezember 11
  • Web http://www.flickr.com/photos/hgesell/1257717725/Freitag, 9. Dezember 11
  • 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.htmFreitag, 9. Dezember 11
  • Ressourcen • Eine Ressource hat eine Adresse • Diese Adresse ist eine URL • http://server.ch/konferenz/sessions/2Freitag, 9. Dezember 11
  • Verben • GET - Daten ansehen • POST - Daten neu erstellen • PUT - Daten ändern • DELETE - Daten löschenFreitag, 9. Dezember 11
  • Einfache VerbenFreitag, 9. Dezember 11
  • Darstellungssache • Gleicher Link, verschieden Darstellung • http://example.com/customers/1.html • http://example.com/customers/1.xml • http://example.com/customers/1.jsonFreitag, 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 end endFreitag, 9. Dezember 11
  • Freitag, 9. Dezember 11
  • Beliebig SkalierbarFreitag, 9. Dezember 11
  • Web Scale • Horizontales Skalieren • Vertikales Skalieren • HTTP gibt uns vieles „umsonst“ • Cache • Load Balancing • ProxyingFreitag, 9. Dezember 11
  • JSON • JavaScript Object Notation • Standardformat für Serialisierung von JavaScript Objekten • Kompakt • MenschenlesbarFreitag, 9. Dezember 11
  • { "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" }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: MobinoFreitag, 9. Dezember 11
  • Mobino Crew Trichet Volcker Duisenberg Greenspan Keynes SmithFreitag, 9. Dezember 11
  • Merchant Web Customer Web Customer Voice Widget Volcker Trichet Freeswitch Duisenberg Keynes Greenspan Redis Smith VAAS Postgres 9 AcapelaFreitag, 9. Dezember 11
  • Merchant Web Customer Web Customer Voice Widget Volcker Trichet Freeswitch Duisenberg Keynes Greenspan Redis Smith VAAS Postgres 9 AcapelaFreitag, 9. Dezember 11
  • Merchant Web Customer Web Customer Voice Widget Volcker FRONT Trichet Freeswitch Duisenberg Keynes Greenspan Back VOICE Redis Smith VAAS Postgres Acapela Database 9Freitag, 9. Dezember 11
  • Technologien? • Eigentlich alles - gewisse sind allerdings geeigneter als andere • Ruby • Python • JavaScript - CoffeeScriptFreitag, 9. Dezember 11
  • Server • Kaum Einschränkungen • REST API • JSON • HTTP • Alle sprechen mit allen • Austausch von Komponenten möglichFreitag, 9. Dezember 11
  • Client Server http://www.flickr.com/photos/obd-design/2374030181Freitag, 9. Dezember 11
  • BrowserFreitag, 9. Dezember 11
  • Freitag, 9. Dezember 11
  • JavaScript Gute Sprache Nettes SpielzeugFreitag, 9. Dezember 11
  • MVC • Model • View • ControllerFreitag, 9. Dezember 11
  • MVC • Model • View • ControllerFreitag, 9. Dezember 11
  • Ruby / PythonFreitag, 9. Dezember 11
  • JavaScript Libraries • Backbone http://documentcloud.github.com/backbone • Sammy http://sammyjs.org • Flatiron http://flatironjs.org • Derby http://derbyjs.com/Freitag, 9. Dezember 11
  • Was bieten diese Libraries? • Modelle • Verbindung zu Daten-Backends • Routes • Views • TemplatesFreitag, 9. Dezember 11
  • JavaScript Frameworks • SproutCore http://sproutcore.com • Cappucino http://cappuccino.orgFreitag, 9. Dezember 11
  • Und die Frameworks? • Komplettes Angebot an Komponenten • Neue Programmiersprache: Objective-J (Cappuccino) • Portierung von UI-Kit (Cappuccino) • Everything and the KitchensinkFreitag, 9. Dezember 11
  • 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
  • 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
  • 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 ServerFreitag, 9. Dezember 11
  • JavaScript auf ServerFreitag, 9. Dezember 11
  • JavaScript auf Server Auf jeden Fall Gaht‘s no?Freitag, 9. Dezember 11
  • node.js http://nodejs.orgFreitag, 9. Dezember 11
  • 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
  • Beispiel Server / Client • Anwendung läuft halb / halb im Browser und auf dem Server - transparent für den Entwickler • Beispiel mit derby.jsFreitag, 9. Dezember 11
  • 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
  • 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
  • Wohin jetzt?Freitag, 9. Dezember 11
  • Freitag, 9. Dezember 11
  • FragenFreitag, 9. Dezember 11
  • Kontakt Jens-Christian Fischer jens-christian.fischer@simplificator.com @jcfischerFreitag, 9. Dezember 11