Architektur der kleinen                         Bausteine                                         Jens-Christian Fischer  ...
Wie baue ich eine                     komplette Anwendung                         im Browser                              ...
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/           ...
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 Verantwortlic...
Viele, kleine Anwendungen                     • Eine Aufgabe, eine Anwendung                     • Definierte Verantwortlic...
Viele, kleine Anwendungen                     • Eine Aufgabe, eine Anwendung                     • Definierte Verantwortlic...
Viele, kleine Anwendungen                     • Eine Aufgabe, eine Anwendung                     • Definierte Verantwortlic...
Service Oriented Architecture                 Zusammensetzen von grossen Anwendungen                 durch viele kleine Se...
<soap:Envelope xm                  lns:soap="http:/               xmlns:xsi="http:                                   /s   ...
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), A...
Ressourcen                     • Eine Ressource hat eine Adresse                     • Diese Adresse ist eine URL         ...
Verben                     • GET - Daten ansehen                     • POST - Daten neu erstellen                     • PU...
Einfache VerbenFreitag, 9. Dezember 11
Darstellungssache                     • Gleicher Link, verschieden Darstellung                      • http://example.com/c...
class CustomersController < ApplicationController                respond_to :html, :xml, :json                   def index...
Freitag, 9. Dezember 11
Beliebig SkalierbarFreitag, 9. Dezember 11
Web Scale                     • Horizontales Skalieren                     • Vertikales Skalieren                     • HT...
JSON                     • JavaScript Object Notation                     • Standardformat für Serialisierung von         ...
{ "completed_in" : 0.10000000000000001,    "max_id" : 144353241361154049,    "max_id_str" : "144353241361154049",         ...
{ "completed_in" : 0.10000000000000001,    "max_id" : 144353241361154049,    "max_id_str" : "144353241361154049",    "next...
Praxis: MobinoFreitag, 9. Dezember 11
Mobino Crew                Trichet   Volcker   Duisenberg   Greenspan   Keynes   SmithFreitag, 9. Dezember 11
Merchant Web                    Customer Web                         Customer Voice                                       ...
Merchant Web                    Customer Web                         Customer Voice                                       ...
Merchant Web                    Customer Web                               Customer Voice                                 ...
Technologien?                     • Eigentlich alles - gewisse sind allerdings                          geeigneter als and...
Server                     • Kaum Einschränkungen                      • REST API                      • JSON             ...
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 SpielzeugFreita...
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     ...
Was bieten diese Libraries?                     • Modelle                     • Verbindung zu Daten-Backends              ...
JavaScript Frameworks                     • SproutCore                          http://sproutcore.com                     ...
Und die Frameworks?                     • Komplettes Angebot an Komponenten                     • Neue Programmiersprache:...
Sammy Anwendung                          // initialize the application                          var app = Sammy(#main, fun...
GET / POST / PUT / ...                  var app = Sammy(function(request) {                    this.post(#/widgets, functi...
Templates                          var view = {                            title: "Joe",                            calc: ...
Templates                          Templates können sowohl auf Server                          als auch im Browser ausgefü...
JavaScript auf ServerFreitag, 9. Dezember 11
JavaScript auf ServerFreitag, 9. Dezember 11
JavaScript auf Server                                          Auf jeden Fall                                          Gah...
node.js                          http://nodejs.orgFreitag, 9. Dezember 11
HTTP Server         var http = require(http);         http.createServer(function (req, res) {           res.writeHead(200,...
Beispiel Server / Client                     • Anwendung läuft halb / halb im Browser                          und auf dem...
server.js   var express = require(express),       hello = require(./hello),       server = express.createServer()         ...
hello.js              var hello = require(derby).createApp(module),                  view = hello.view,                  g...
Wohin jetzt?Freitag, 9. Dezember 11
Freitag, 9. Dezember 11
FragenFreitag, 9. Dezember 11
Kontakt                                    Jens-Christian Fischer                          jens-christian.fischer@simplifica...
Nächste SlideShare
Wird geladen in …5
×

Architektur der kleinen Bausteine

1.404 Aufrufe

Veröffentlicht am

Betrachtungen zur Architektur von Software Systemen.

  • Als Erste(r) kommentieren

Architektur der kleinen Bausteine

  1. 1. Architektur der kleinen Bausteine Jens-Christian Fischer simplificator.com @jcfischer 8.12.2011 - Internet Briefing Developer KonferenzFreitag, 9. Dezember 11
  2. 2. Wie baue ich eine komplette Anwendung im Browser Jens-Christian Fischer simplificator.com @jcfischer 8.12.2011 - Internet Briefing Developer KonferenzFreitag, 9. Dezember 11
  3. 3. Freitag, 9. Dezember 11
  4. 4. http://www.youtube.com/watch?v=squxkHIaIdYFreitag, 9. Dezember 11
  5. 5. Olsen-Banden overgiver sig aldrig 1979Freitag, 9. Dezember 11
  6. 6. http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
  7. 7. http://www.youtube.com/watch?v=LGkkyKZVzugFreitag, 9. Dezember 11
  8. 8. KomplexitätFreitag, 9. Dezember 11
  9. 9. Komplexität http://www.flickr.com/photos/d-/5300044735/in/photostream/Freitag, 9. Dezember 11
  10. 10. Komplexität http://www.flickr.com/photos/ecstaticist/2969032490/Freitag, 9. Dezember 11
  11. 11. Komplexität http://www.mygreyworld.com/blog/2007/04/01/madness/Freitag, 9. Dezember 11
  12. 12. Nicht zu vermeidenFreitag, 9. Dezember 11
  13. 13. New York 1811 http://www.smartplanet.com/blog/smart-takes/five-ways-to-make-new-york-citys-street-grid-greener/ 15628Freitag, 9. Dezember 11
  14. 14. Simplicity http://www.flickr.com/photos/stevewall/1095860966Freitag, 9. Dezember 11
  15. 15. Divide and ConquerFreitag, 9. Dezember 11
  16. 16. Objekt OrientierungFreitag, 9. Dezember 11
  17. 17. Viele, kleine AnwendungenFreitag, 9. Dezember 11
  18. 18. Viele, kleine Anwendungen • Eine Aufgabe, eine AnwendungFreitag, 9. Dezember 11
  19. 19. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte VerantwortlichkeitFreitag, 9. Dezember 11
  20. 20. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes APIFreitag, 9. Dezember 11
  21. 21. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes APIFreitag, 9. Dezember 11
  22. 22. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes API • SOAFreitag, 9. Dezember 11
  23. 23. Service Oriented Architecture Zusammensetzen von grossen Anwendungen durch viele kleine Services Super Idee!Freitag, 9. Dezember 11
  24. 24. <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
  25. 25. SOAPFreitag, 9. Dezember 11
  26. 26. SOAFreitag, 9. Dezember 11
  27. 27. Simplify SOAP XMLFreitag, 9. Dezember 11
  28. 28. SimplifyFreitag, 9. Dezember 11
  29. 29. Simplify REST JSONFreitag, 9. Dezember 11
  30. 30. Web http://www.flickr.com/photos/hgesell/1257717725/Freitag, 9. Dezember 11
  31. 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.htmFreitag, 9. Dezember 11
  32. 32. Ressourcen • Eine Ressource hat eine Adresse • Diese Adresse ist eine URL • http://server.ch/konferenz/sessions/2Freitag, 9. Dezember 11
  33. 33. Verben • GET - Daten ansehen • POST - Daten neu erstellen • PUT - Daten ändern • DELETE - Daten löschenFreitag, 9. Dezember 11
  34. 34. Einfache VerbenFreitag, 9. Dezember 11
  35. 35. 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
  36. 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 endFreitag, 9. Dezember 11
  37. 37. Freitag, 9. Dezember 11
  38. 38. Beliebig SkalierbarFreitag, 9. Dezember 11
  39. 39. Web Scale • Horizontales Skalieren • Vertikales Skalieren • HTTP gibt uns vieles „umsonst“ • Cache • Load Balancing • ProxyingFreitag, 9. Dezember 11
  40. 40. JSON • JavaScript Object Notation • Standardformat für Serialisierung von JavaScript Objekten • Kompakt • MenschenlesbarFreitag, 9. Dezember 11
  41. 41. { "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
  42. 42. { "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
  43. 43. Praxis: MobinoFreitag, 9. Dezember 11
  44. 44. Mobino Crew Trichet Volcker Duisenberg Greenspan Keynes SmithFreitag, 9. Dezember 11
  45. 45. Merchant Web Customer Web Customer Voice Widget Volcker Trichet Freeswitch Duisenberg Keynes Greenspan Redis Smith VAAS Postgres 9 AcapelaFreitag, 9. Dezember 11
  46. 46. Merchant Web Customer Web Customer Voice Widget Volcker Trichet Freeswitch Duisenberg Keynes Greenspan Redis Smith VAAS Postgres 9 AcapelaFreitag, 9. Dezember 11
  47. 47. 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
  48. 48. Technologien? • Eigentlich alles - gewisse sind allerdings geeigneter als andere • Ruby • Python • JavaScript - CoffeeScriptFreitag, 9. Dezember 11
  49. 49. Server • Kaum Einschränkungen • REST API • JSON • HTTP • Alle sprechen mit allen • Austausch von Komponenten möglichFreitag, 9. Dezember 11
  50. 50. Client Server http://www.flickr.com/photos/obd-design/2374030181Freitag, 9. Dezember 11
  51. 51. BrowserFreitag, 9. Dezember 11
  52. 52. Freitag, 9. Dezember 11
  53. 53. JavaScript Gute Sprache Nettes SpielzeugFreitag, 9. Dezember 11
  54. 54. MVC • Model • View • ControllerFreitag, 9. Dezember 11
  55. 55. MVC • Model • View • ControllerFreitag, 9. Dezember 11
  56. 56. Ruby / PythonFreitag, 9. Dezember 11
  57. 57. JavaScript Libraries • Backbone http://documentcloud.github.com/backbone • Sammy http://sammyjs.org • Flatiron http://flatironjs.org • Derby http://derbyjs.com/Freitag, 9. Dezember 11
  58. 58. Was bieten diese Libraries? • Modelle • Verbindung zu Daten-Backends • Routes • Views • TemplatesFreitag, 9. Dezember 11
  59. 59. JavaScript Frameworks • SproutCore http://sproutcore.com • Cappucino http://cappuccino.orgFreitag, 9. Dezember 11
  60. 60. Und die Frameworks? • Komplettes Angebot an Komponenten • Neue Programmiersprache: Objective-J (Cappuccino) • Portierung von UI-Kit (Cappuccino) • Everything and the KitchensinkFreitag, 9. Dezember 11
  61. 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. 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. 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. 64. Templates Templates können sowohl auf Server als auch im Browser ausgeführt werden: Keine Codeduplizierung!Freitag, 9. Dezember 11
  65. 65. JavaScript auf ServerFreitag, 9. Dezember 11
  66. 66. JavaScript auf ServerFreitag, 9. Dezember 11
  67. 67. JavaScript auf Server Auf jeden Fall Gaht‘s no?Freitag, 9. Dezember 11
  68. 68. node.js http://nodejs.orgFreitag, 9. Dezember 11
  69. 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. 70. 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
  71. 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. 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
  73. 73. Wohin jetzt?Freitag, 9. Dezember 11
  74. 74. Freitag, 9. Dezember 11
  75. 75. FragenFreitag, 9. Dezember 11
  76. 76. Kontakt Jens-Christian Fischer jens-christian.fischer@simplificator.com @jcfischerFreitag, 9. Dezember 11

×