Architektur der kleinen Bausteine

1.354 Aufrufe

Veröffentlicht am

Betrachtungen zur Architektur von Software Systemen.

0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.354
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
18
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×