SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
Architektur der kleinen
                         Bausteine
                                         Jens-Christian Fischer
                                            simplificator.com
                                               @jcfischer
                          8.12.2011 - Internet Briefing Developer Konferenz




Freitag, 9. Dezember 11
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
Freitag, 9. Dezember 11
http://www.youtube.com/watch?v=squxkHIaIdY
Freitag, 9. Dezember 11
Olsen-Banden overgiver sig aldrig
                                      1979




Freitag, 9. Dezember 11
http://www.youtube.com/watch?v=LGkkyKZVzug
Freitag, 9. Dezember 11
http://www.youtube.com/watch?v=LGkkyKZVzug
Freitag, 9. Dezember 11
Komplexität




Freitag, 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 vermeiden




Freitag, 9. Dezember 11
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
Simplicity




                              http://www.flickr.com/photos/stevewall/1095860966
Freitag, 9. Dezember 11
Divide and Conquer




Freitag, 9. Dezember 11
Objekt Orientierung




Freitag, 9. Dezember 11
Viele, kleine Anwendungen




Freitag, 9. Dezember 11
Viele, kleine Anwendungen

                     • Eine Aufgabe, eine Anwendung




Freitag, 9. Dezember 11
Viele, kleine Anwendungen

                     • Eine Aufgabe, eine Anwendung
                     • Definierte Verantwortlichkeit




Freitag, 9. Dezember 11
Viele, kleine Anwendungen

                     • Eine Aufgabe, eine Anwendung
                     • Definierte Verantwortlichkeit
                     • Definiertes API



Freitag, 9. Dezember 11
Viele, kleine Anwendungen

                     • Eine Aufgabe, eine Anwendung
                     • Definierte Verantwortlichkeit
                     • Definiertes API



Freitag, 9. Dezember 11
Viele, kleine Anwendungen

                     • Eine Aufgabe, eine Anwendung
                     • Definierte Verantwortlichkeit
                     • Definiertes API

                     • SOA

Freitag, 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
SOAP




Freitag, 9. Dezember 11
SOA




Freitag, 9. Dezember 11
Simplify



            SOAP                 XML

Freitag, 9. Dezember 11
Simplify




Freitag, 9. Dezember 11
Simplify



                REST JSON

Freitag, 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.htm

Freitag, 9. Dezember 11
Ressourcen

                     • Eine Ressource hat eine Adresse
                     • Diese Adresse ist eine URL
                     • http://server.ch/konferenz/sessions/2


Freitag, 9. Dezember 11
Verben

                     • GET - Daten ansehen
                     • POST - Daten neu erstellen
                     • PUT - Daten ändern
                     • DELETE - Daten löschen

Freitag, 9. Dezember 11
Einfache Verben




Freitag, 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.json

Freitag, 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
              end




Freitag, 9. Dezember 11
Freitag, 9. Dezember 11
Beliebig Skalierbar




Freitag, 9. Dezember 11
Web Scale
                     • Horizontales Skalieren
                     • Vertikales Skalieren
                     • HTTP gibt uns vieles „umsonst“
                      • Cache
                      • Load Balancing
                      • Proxying
Freitag, 9. Dezember 11
JSON

                     • JavaScript Object Notation
                     • Standardformat für Serialisierung von
                          JavaScript Objekten
                     • Kompakt
                     • Menschenlesbar

Freitag, 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: Mobino




Freitag, 9. Dezember 11
Mobino Crew




                Trichet   Volcker   Duisenberg   Greenspan   Keynes   Smith




Freitag, 9. Dezember 11
Merchant Web
                    Customer Web                         Customer Voice
                                          Widget



                           Volcker       Trichet                     Freeswitch




                          Duisenberg     Keynes       Greenspan




                            Redis         Smith                           VAAS




                                        Postgres 9                        Acapela


Freitag, 9. Dezember 11
Merchant Web
                    Customer Web                         Customer Voice
                                          Widget



                           Volcker       Trichet                     Freeswitch




                          Duisenberg     Keynes       Greenspan




                            Redis         Smith                           VAAS




                                        Postgres 9                        Acapela


Freitag, 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 9

Freitag, 9. Dezember 11
Technologien?

                     • Eigentlich alles - gewisse sind allerdings
                          geeigneter als andere
                          • Ruby
                          • Python
                          • JavaScript - CoffeeScript

Freitag, 9. Dezember 11
Server
                     • Kaum Einschränkungen
                      • REST API
                      • JSON
                      • HTTP

                     • Alle sprechen mit allen
                     • Austausch von Komponenten möglich
Freitag, 9. Dezember 11
Client Server




                               http://www.flickr.com/photos/obd-design/2374030181
Freitag, 9. Dezember 11
Browser




Freitag, 9. Dezember 11
Freitag, 9. Dezember 11
JavaScript


                                       Gute Sprache
                                       Nettes Spielzeug




Freitag, 9. Dezember 11
MVC

                     • Model
                     • View
                     • Controller


Freitag, 9. Dezember 11
MVC

                     • Model
                     • View
                     • Controller


Freitag, 9. Dezember 11
Ruby / Python




Freitag, 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
                     • Templates

Freitag, 9. Dezember 11
JavaScript Frameworks

                     • SproutCore
                          http://sproutcore.com
                     • Cappucino
                          http://cappuccino.org




Freitag, 9. Dezember 11
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
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 Server




Freitag, 9. Dezember 11
JavaScript auf Server




Freitag, 9. Dezember 11
JavaScript auf Server


                                          Auf jeden Fall
                                          Gaht‘s no?




Freitag, 9. Dezember 11
node.js




                          http://nodejs.org

Freitag, 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.js

Freitag, 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
Fragen




Freitag, 9. Dezember 11
Kontakt

                                    Jens-Christian Fischer
                          jens-christian.fischer@simplificator.com
                                          @jcfischer




Freitag, 9. Dezember 11

Weitere ähnliche Inhalte

Andere mochten auch

As 100 Melhores Leis De Murphy
As 100 Melhores Leis De Murphy As 100 Melhores Leis De Murphy
As 100 Melhores Leis De Murphy
Diogo Devitte
 
Comer Invitation
Comer InvitationComer Invitation
Comer Invitation
jurggraf
 
Df9.9 15(96 01)
Df9.9 15(96 01)Df9.9 15(96 01)
Df9.9 15(96 01)
btms12
 
06 evans, charlotte enciclopedia de la historia - comercio e imperios
06 evans, charlotte    enciclopedia de la historia - comercio e imperios06 evans, charlotte    enciclopedia de la historia - comercio e imperios
06 evans, charlotte enciclopedia de la historia - comercio e imperios
Luis Cerda
 

Andere mochten auch (18)

Property fund
Property fundProperty fund
Property fund
 
Exposicion de guna yala
Exposicion de guna yalaExposicion de guna yala
Exposicion de guna yala
 
Digital Scholarship at the British Library
Digital Scholarship at the British LibraryDigital Scholarship at the British Library
Digital Scholarship at the British Library
 
Comunicado de prensa misión técnica a bilbao
Comunicado de prensa misión técnica a bilbaoComunicado de prensa misión técnica a bilbao
Comunicado de prensa misión técnica a bilbao
 
“El mòbil acaba vehiculant tot el que tenim al costat"
“El mòbil acaba vehiculant tot el que tenim al costat"“El mòbil acaba vehiculant tot el que tenim al costat"
“El mòbil acaba vehiculant tot el que tenim al costat"
 
As 100 Melhores Leis De Murphy
As 100 Melhores Leis De Murphy As 100 Melhores Leis De Murphy
As 100 Melhores Leis De Murphy
 
Manga Rosario + vampire Tomo 9
Manga Rosario + vampire Tomo 9Manga Rosario + vampire Tomo 9
Manga Rosario + vampire Tomo 9
 
Comunicacion Digital
Comunicacion Digital Comunicacion Digital
Comunicacion Digital
 
ALD & 4CC @ bdma dcongress 2013
ALD & 4CC @  bdma dcongress 2013ALD & 4CC @  bdma dcongress 2013
ALD & 4CC @ bdma dcongress 2013
 
Benjamin Schulz Portfolio 2007
Benjamin Schulz Portfolio 2007Benjamin Schulz Portfolio 2007
Benjamin Schulz Portfolio 2007
 
Comer Invitation
Comer InvitationComer Invitation
Comer Invitation
 
Prezentacja 2
Prezentacja 2Prezentacja 2
Prezentacja 2
 
Df9.9 15(96 01)
Df9.9 15(96 01)Df9.9 15(96 01)
Df9.9 15(96 01)
 
L 11. Muscles And Movement New
L 11. Muscles And Movement NewL 11. Muscles And Movement New
L 11. Muscles And Movement New
 
Web 2.0 ist mehr als Facebook
Web 2.0 ist mehr als Facebook Web 2.0 ist mehr als Facebook
Web 2.0 ist mehr als Facebook
 
Curved Motion System Design for Machinery and Automation
Curved Motion System Design for Machinery and AutomationCurved Motion System Design for Machinery and Automation
Curved Motion System Design for Machinery and Automation
 
Vis.io Keynote speech 2016 (English version)
Vis.io Keynote speech 2016 (English version) Vis.io Keynote speech 2016 (English version)
Vis.io Keynote speech 2016 (English version)
 
06 evans, charlotte enciclopedia de la historia - comercio e imperios
06 evans, charlotte    enciclopedia de la historia - comercio e imperios06 evans, charlotte    enciclopedia de la historia - comercio e imperios
06 evans, charlotte enciclopedia de la historia - comercio e imperios
 

Mehr von Jens-Christian Fischer

Mehr von Jens-Christian Fischer (9)

Beyond HTML Internet Briefing
Beyond HTML Internet BriefingBeyond HTML Internet Briefing
Beyond HTML Internet Briefing
 
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrBeyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Mobino at Webmondy Frankfurt, Mai 2011
Mobino at Webmondy Frankfurt, Mai 2011Mobino at Webmondy Frankfurt, Mai 2011
Mobino at Webmondy Frankfurt, Mai 2011
 
Testing distributed, complex web applications
Testing distributed, complex web applicationsTesting distributed, complex web applications
Testing distributed, complex web applications
 
SOLID Ruby, SOLID Rails
SOLID Ruby, SOLID RailsSOLID Ruby, SOLID Rails
SOLID Ruby, SOLID Rails
 
Ruby Coding Dojo
Ruby Coding DojoRuby Coding Dojo
Ruby Coding Dojo
 
Synology Workshop07 06
Synology Workshop07 06Synology Workshop07 06
Synology Workshop07 06
 
Offline Arbeiten
Offline ArbeitenOffline Arbeiten
Offline Arbeiten
 

Architektur der kleinen Bausteine

  • 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
  • 5. Olsen-Banden overgiver sig aldrig 1979 Freitag, 9. Dezember 11
  • 10. Komplexität http://www.flickr.com/photos/ecstaticist/2969032490/ Freitag, 9. Dezember 11
  • 11. Komplexität http://www.mygreyworld.com/blog/2007/04/01/madness/ Freitag, 9. Dezember 11
  • 12. Nicht zu vermeiden Freitag, 9. Dezember 11
  • 13. 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
  • 14. Simplicity http://www.flickr.com/photos/stevewall/1095860966 Freitag, 9. Dezember 11
  • 15. Divide and Conquer Freitag, 9. Dezember 11
  • 18. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung Freitag, 9. Dezember 11
  • 19. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit Freitag, 9. Dezember 11
  • 20. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes API Freitag, 9. Dezember 11
  • 21. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes API Freitag, 9. Dezember 11
  • 22. Viele, kleine Anwendungen • Eine Aufgabe, eine Anwendung • Definierte Verantwortlichkeit • Definiertes API • SOA Freitag, 9. Dezember 11
  • 23. Service Oriented Architecture Zusammensetzen von grossen Anwendungen durch viele kleine Services Super Idee! Freitag, 9. Dezember 11
  • 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
  • 27. Simplify SOAP XML Freitag, 9. Dezember 11
  • 29. Simplify REST JSON 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
  • 35. Darstellungssache • Gleicher Link, verschieden Darstellung • http://example.com/customers/1.html • http://example.com/customers/1.xml • http://example.com/customers/1.json 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
  • 39. Web Scale • Horizontales Skalieren • Vertikales Skalieren • HTTP gibt uns vieles „umsonst“ • Cache • Load Balancing • Proxying Freitag, 9. Dezember 11
  • 40. JSON • JavaScript Object Notation • Standardformat für Serialisierung von JavaScript Objekten • Kompakt • Menschenlesbar Freitag, 9. Dezember 11
  • 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. { "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
  • 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
  • 53. JavaScript Gute Sprache Nettes Spielzeug Freitag, 9. Dezember 11
  • 54. MVC • Model • View • Controller Freitag, 9. Dezember 11
  • 55. MVC • Model • View • Controller Freitag, 9. Dezember 11
  • 56. Ruby / Python Freitag, 9. Dezember 11
  • 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. Was bieten diese Libraries? • Modelle • Verbindung zu Daten-Backends • Routes • Views • Templates Freitag, 9. Dezember 11
  • 59. JavaScript Frameworks • SproutCore http://sproutcore.com • Cappucino http://cappuccino.org 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
  • 67. JavaScript auf Server Auf jeden Fall Gaht‘s no? 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
  • 76. Kontakt Jens-Christian Fischer jens-christian.fischer@simplificator.com @jcfischer Freitag, 9. Dezember 11