Moderne Webanwendungen mit Rails und Backbone.js &

Transkript

1 Moderne Webanwungen mit Rails und Backbone.js & Malte Schmitz, Johannes Thorn MetaNook Ziele dieses Vortrags Inhaltsverzeichnis 1. Konzepte moderne Webapplikationen und Single-Page-Application mit JavaScript verstehen 2. Prinzipien eines Webservice mit Rails 3.2 kennen 3. Prinzipien eines JavaScript-Client mit Backbone kennen 4. Verwete Technologien und Frameworks gesehen haben 1 Webanwungen moderne Webanwungen RESTful Webservice Single-Page-Application Webservice Model-View-Controller Responder Views Assoziationen Validierung Client Models und Collections Views Routing AMD Dokumentation Auf der Seite github.com/malteschmitz/rails-backbone befinden sich diese Präsentation Script-Version L A TEX-Quellcode 4 3

2 Rails & Backbone 1 Webanwungen 2 1 Webanwungen Darstellung Präsentation Geschäftslogik Datenhaltung Desktop Application Client Server Web Application Client Server Single-Page-Application Client Server moderne Webanwungen Geschäftslogik im Server zentrale Berechnung und Datenhaltung zustandsloser Server Abfragen in sich komplett Daten auf der Leitung Daten frei von Darstellung Präsentation im Client spezielle Clients möglich RESTful Webservice Was sind Webservices Stellen Funktionalitäten über ein Netzwerk bereit Eindeutig definierte Schnittstelle Kommunikation über definierte Protokolle Zwei bekannte Vertreter: SOAP und RESTful 7 Representational State Transfer (REST) Identität Ressource eindeutig identifiziert Manipulation Selbst beschreibe Ressourcen Nachrichten Alle Informationen zur Verarbeitung enthalten Hypermedia Wenige Einstiegspunkte Interaktion durch Hypermedia Zustandslos Status einer Interaktion mit dem Client unbekannt 8

3 Rails & Backbone 2 Webservice 3 Was sind RESTful Webservices Representational State Transfer (REST) Bekannter Vertreter WWW HTTP als Kommunikationsprotokoll Ressourcen als Elementen der Domäne Nutzt Verben des HTTP-Protokolls GET zum Informationsabruf POST zum Anlegen neuer Daten PUT zum Aktualisieren DELETE zum Löschen von Daten Single-Page-Application gesamter Client durch Laden einer Website im Browser Daten werden per AJAX bei Bedarf nachgeladen[2ex] Client agiert als Anwung: Navigationselemente werden nicht neu geladen und Flackern der Seite wird vermieden. Client reagiert schneller[2ex] Browser-Historie muss manuell befüllt werden keine Zugänglichkeit ohne JavaScript Suchmaschinen können nicht mehr so gut indizieren, spezielle Browser für Behinderte werden ausgeschlossen, Initialisierung 1. Client vom Server laden über klassischen GET-Request im Browser 2. Client starten über eingebundenes JavaScript Interaktionsschleife 1. Daten als JSON laden über GET-Request mit XMLHttpRequest-Objekt 2. Daten darstellen über Manipulation des Document Object Model (DOM) 3. auf Anwer-Interaktion reagieren über Ereignis-Registrierung im DOM 4. Daten an Server sen über POST/PUT/DELETE-Request mit XMLHttpRequest 11 AJAX stand ursprünglich für Asynchronous JavaScript and XML. Inzwischen wird meistens die JavaScript Object Notation (JSON) verwet und es sind auch synchrone Anfragen mölich, sodass AJAX eher ein steher Begriff für einen Architkturstil ist als eine konkrete Beschreibung der verweten Technik. 2 Webservice mit Rails 3.2 Was ist Rails Ruby on Rails Web-Framework Annahmen über»the Rails Way«Folgt Prinzipien DRY»Don t Repeat Yourself«

4 Rails & Backbone 2 Webservice 4 Convention Over Configuration REST-Architekturstil Model-View-Controller Controller View Model 13 Models Repräsentieren Daten Interagieren mit der Datenbank Enthalten Applikationslogik Häufig: Model ˆ= Datenbank-Tabelle 14 Views Bieten Benutzungsschnittstelle der Applikation Präsentieren ausschließlich Daten Liefern Daten aus Häufig: HTML-Dokumente mit eingebettetem Ruby-Code 15 Controllers Integrieren Views und Models Verarbeiten Anfragen Rufen Daten beim Model ab Liefern Daten zum View 16 Komponentenübersicht

5 Rails & Backbone 2 Webservice 5 Client Files WEBrick Routing Views Controllers Database Models 17 RESTful Rails Addressierung von Ressourcen durch URIs Austausch von Zustands-Repräsentationen Zwei URIs Collection-URI GET /users Item-URI GET /users/42 18 Aktion Methode Bedeutung index GET Abrufen aller Entitäten create POST Anlegen einer Entität show GET Abrufen einer Entität update PUT Aktualisieren einer Entität destroy DELETE Löschen einer Entität new GET Formular zum Erzeugen edit GET Formular zum Editieren Responder Alte Implementierung: class PlanetsController < ApplicationController def = Planet.all respond_to do format format.html # index.html.erb format.xml { rer :xml format.json { rer :json

6 Rails & Backbone 2 Webservice 6 # Responder Neue Implementierung: class PlanetsController < ApplicationController respond_to :html, :xml, :json def = Planet.all respond_with(@planets) # Responder Ablauf Anfrage mit XML-Medientyp: 1. Template in planets/index.xml? 2. to_xml Aufrufen 3. to_format Aufrufen 22 HTTP-Semantik def = Planet.new(params[:planet]) flash[:notice] = 'Planet created.' respond_with(@planet) Erfolg Status 201 Created Fehler Status 422 Unprocessable Entity Views ERB Views Ruby Code eingebettet in HTML-Dokumente Unterstützt Partials <h1>sonnensystem %></h1> do planet %> <%= %> <% %>

7 Rails & Backbone 2 Webservice 7 <p> Der Planet <%=h planet.name => hat die Masse <%=h planet.mass => und die Albedo <%=h planet.albedo =>. </p> 24 JSON- und XML-Repräsentationen { } "id": 42, "name": "Mars", "mass": 6.419e23, "albedo": 0.15 <planet id="42" name="mars" mass="6.419e23" albedo="0.15" /> 25 to_xml Methode def = Planet.find(params[:id]) respond_to do format format.xml { rer :xml :except => [:mass, :albedo] #... ) } Darstellungslogik im Controller 26 to_xml Methode def = Planet.find(params[:id]) respond_with(@planet) Kopplung zwischen Datenmodell und Repräsentation 27

8 Rails & Backbone 2 Webservice 8 Representative View r.element :id r.element :name r.element :mass r.element :albedo Repräsentation frei konfigurierbar Assoziationen Assoziationen: Nutzer / Gruppen class User < ActiveRecord::Base has_and_belongs_to_many :groups attr_accessible :login, :password_hash class Group < ActiveRecord::Base has_and_belongs_to_many :users attr_accessible :name 29 many-to-many USERS GROUPSUSERS GROUPS u 1 gu 1,1 g 1 gu 1,2 u 2 gu 2,1 g 2 many-to-one one-to-many 30 Gruppen-Nutzer-Controller Create class GroupsUsersController < ApplicationController # POST /groups/users def = = respond_with(:status => 201) #... 31

9 Rails & Backbone 2 Webservice 9 Gruppen-Nutzer-Controller Destroy class GroupsUsersController < ApplicationController #... # DELETE /groups/users?group_id=23 # &user_id=42 def = respond_with(:status => 201) Validierung Validierung von Referentieller Integrität class Moon < ActiveRecord::Base belongs_to :planets attr_accessible :name, :mass # Validations validates :name, :mass, :presence => true validates :planet, :referential_integrity => true 33 Validierung von Referentieller Integrität class ReferentialIntegrityValidator < ActiveModel::EachValidator def validate_each(record, attribute, value) attribute_id = (attribute.to_s + "_id"). to_sym if (record.s(attribute_id).blank?) record.errors[attribute_id] << 'blank' elsif value.blank? record.errors[attribute_id] << 'no_record' 34

10 Rails & Backbone 3 Client 10 3 Client mit Backbone.js Architektur BACKBONE Router CUSTOM StateModel JQUERY DOM BACKBONE Views BACKBONE Collections BACKBONE Models UNDERSCORE Templates JQUERY Ajax Server 35 Backbone.js benötigt Underscore.js _.each, _.map, _.reduce, _.all, _.any, _.contains, _.escape, _.result, _.template,... jquery (oder zepto.js) $, $().html, $().app, $().on, $().addclass, $().val, $.ajax, Models und Collections Models Daten der Server-Modelle Logik zur Datenmanipulation direkt berechnete Eigenschaften kennen Server über Collection Methoden get, escape, set, has, unset, fetch, save, destroy, parse, tojson,... Ereignisse change, attribute:change, destroy,... 37

11 Rails & Backbone 3 Client 11 Ereignisse in Backbone listener model setter bind("a:change", listener.handler) trigger("a:change") set("a",2) handler() 38 Unterschiede zwischen Ereignissen in Backbone und der klassischen Realisierung des Ovserver- Patterns in Java: Es gibt benannte Ereignisse, damit kann ein zu beobachtes Objekt verschiedenen Mengen von Beobachtern haben, die bei unterschiedlichen Situationen benachrichtigt werden. Ereignisse werden nicht vorher registriert, dass heißt, das zu beobachte Objekt ruft einfach trigger mit dem Namen des Ereignisses auf. Ein Beobachter muss nicht sich als Objekt mit addlistener am zu beobachten Objekt registriert, sondern mit bind eine (seiner) Methoden zusammen mit dem Namen des zu beobachten Ereignisses an das zu beobachten Objekt binden. Es werden also Funktionen statt Objekt als Ereignisbehandler übergeben. Collections geordnete Menge von Models gehört zu einer Modellklasse Verbindung zum Server Metadaten, z. B. Paginierung Methoden add, remove, reset parse, tojson, fetch Ereignisse reset, add, remove, destroy 39

12 Rails & Backbone 3 Client 12 Beispiel var OrderModel = Backbone.Model.ext({ // Logik des Modells var OrdersCollection = Backbone.Collection.ext({ model: OrderModel, url: 'orders', parse: function(response) { return response.orders; } var orders = new OrdersCollection(); orders.bind('add', function(order) { console.log(order.get('designator')); orders.fetch(); Views mehr Konvention als Code enthalten Code einer GUI-Ansicht Eigenschaften tagname, el, events, $el,... Methoden $, rer, Templates var template = "Hello, <%=user %>!"; this.template = _.template(template); function(obj){ var p = ''; with (obj {}) { p += 'Hello, ' + (name) + '!'; } return p; } 42

13 Rails & Backbone 3 Client 13 FormBuilder tag('p', {class: 'alert', id:'user'}, 'Nutzer nicht vorhanden'); <p class="alert" id="user"> Nutzer nicht vorhanden </p> formtext('designator'); 43 <div class="control-group"> <label for="designator" class="control-label"> Bezeichner </label> <input type="text" id="designator" autocomplete="off" value="veranstaltungsraum"> </div> 44 Internationalization (I18N) view.formtext('designator') ruft auf view.translate('models.'+ this.model.name + '.designator') ruft auf i18n.getvalue('models.room_type' + '.designator') ruft auf i18n.find('de.models.room_type' + '.designator') basiert auf _.ext(yaml.eval(de), YAML.eval(en)) 45 FormBuilder <h3> <%=t('.title') %> <%=model.escape('occasion') %> </h3> <p> <a href="#"><%=t('.back') %></a> <a href="#"><%=t('.edit') %></a> <a href="#"><%=t('.print') %></a> </p> Routing Backbone.Router Reaktivierung der Browser-Historie neuer Eintrag mit navigate(fragment) Navigation über Anker in URL (oder HTML5 pushstate)

14 Rails & Backbone 3 Client 14 Wenn alle Router konfiguriert Backbone.history.start(); 47 StateModel zirkuläre Abhängigkeiten Router view = new View(); Benutzer Interaktion View router.navigate(fragment); ereignisgesteuerte Architektur State view = new View(); State view.bind('navigate', state.nav); Benutzer Interaktion View view.trigger('nav', options); State router.navigate(fragment); Asynchronous Module Definition (AMD) Asynchronous Module Definition klassisch Definitionen über direkt ausgeführten Code Bibliotheken über globale Variablen und <script> Reihenfolge der <script>-tags wichtig Kompression schwierig mit Modulen Definitionen über Funktion Bibliotheken über Laden von Abhängigkeiten Reihenfolge automatisch korrekt Tools zur Kompression 49

15 Rails & Backbone 3 Client 15 Asynchronous Module Definition mit Require.js public index.html main.js libs app require.js text.js backbone.js 50 public/index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script data-main="main" src="libs/require.js" /> </head> <body> <div id="passat"> models/order.js views/orders/show.js templates/orders/show.html <!-- application template --> </div> </body> </html> public/main.js: require.config({ paths: { backbone: 'libs/backbone', }, shim: { 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } require(['jquery', 'app/app'], function ($, app) { $(function () { app.initialize(); public/app/models/order.js: define(['backbone'], function (Backbone) { var OrderModel = Backbone.Model.ext({ // methods of order return OrderModel; public/app/views/order/show.js: define(['jquery', 'backbone', 'text!app/templates/orders/show.html'], function ($, Backbone, template) { var OrdersShowView = Backbone.View.ext({ tagname: 'tr', template: _.template(template), initialize: function () { this.$el.html(this.template(this));

16 Rails & Backbone 3 Client 16 } return OrdersShowView; public/app/views/order/show.html: <h3><%=t('.title') %></h3> <dl class="dl-horizontal"> <%=showleg(t('.order')) %> <%=showtext('occasion') %> </dl> Dokumentation RDoc app/models/order.rb # -*- encoding : utf-8 -*- # == Schema Information # # Table name: orders # # id :integer not null, primary key # customer_id :integer # user_id :integer not null class Order < ActiveRecord::Base # Checks if customer and user are set. def complete?!user.blank? &&!customer.blank? rake doc:app JSDoc public/app/models/order.js

17 Rails & Backbone 3 Client 17 define(['backbone', 'app/models/base'], function (Backbone, ApplicationModel) { ApplicationModel */ var OrderModel = ApplicationModel.ext( OrderModel# */ { /** * Name of this model. */ name: 'order' return OrderModel; 58 JSDoc lib/tasks/jsdoc.rake namespace :doc do desc "Generate docs for the client." task :client do `jsdoc -r -d doc/client public/main.js public/app` puts "Created doc/client." rake doc:client Zusammenfassung 1. Moderne Webanwungen kombinieren Vorteile von Webanwungen und Desktopanwungen. 2. REST als Schnittstelle erlaubt starke Entkopplung von Client und Server. 3. Rails wird durch Einsatz von Respondern und Representative View zu einem mächtigen Server für RESTful Webservices.

18 Rails & Backbone 3 Client Mit Backbone.js stehen Modelle des Servers dem Client zur Verfügung und können direkt manipuliert werden. 5. Die vorgestellte Lösung ist technologisch anspruchsvoll, bietet aber viele Vorteile gegenüber klassischen Web-Frameworks. 61