jQuery & CouchDB - Die zukünftige Webentwicklung?

jQuery & CouchDB Wohin geht die Zukunft der Web Entwicklung? Gerhard Hipfinger [email_address]

Agenda Was ist jQuery Was ist CouchDB Was kann man damit anstellen

Was ist jQuery JavaScript Bibliothek basierend auf CSS Selektoren Drängt sich nicht im globalen JavaScript Namespace auf Arbeitet ausgezeichnet mit anderen Bibliotheken zusammen Hervorragende API (nicht invasiv) Alle wichtigen Browser werden unterstützt!

Los gehts... jQuery('div#footer') jQuery('div.article > p') jQuery('li:first-child') $('a[href ^ =“mailto:“]') $ ist ein Shortcut für jQuery – sehr praktisch

Eine Selektion liefert Collections $('div.section') … liefert eine Collection Mit den Collections kann weitergearbeitet werden $('div.section').size() … liefert die Anzahl der gefundenen Elemente $('div.section').each(function(div) { // hier kann div manipuliert werden })

Arbeiten mit Collections Es gibt eine Vielzahl an Methoden die mit Collections arbeiten Die meisten werden automatisch auf jedes Element einer Collection angewendet
$('div.section').addClass(„highlight“)
$('img.logo').attr('src', 'images/logo.png')
$('tr.even').css('background-color','red')

Zugriff auf DOM Attribute Manche Methoden wirken auf das erste gefundene Element
var h = $('div.section').height();
var src = $('img.logo').attr('src');
var html = $('div.footer').html();

DOM Navigation jQuery bietet einige Methoden um im DOM Baum zu navigieren
$('div.section').next()
$('div.section').prev()
$('div.section').prev('a')
$('div.section').parent()
$('div.section').parents()

jQuery Event Handling jQuery bietet Browser unabhängiges Eventhandling $('a').click( function(event) { $(this).css({backgroundColor:'red'}); event.preventDefault(); });

jQuery = unobtrusive $(document).ready(function() { alert('Dokument wurde geladen!'); }); Dadurch wird Funktionalität von der Struktur getrennt! Grundlage von „Degrading Gracefully“
Grundlegende Funktionalität steht auch ohne JS zur Verfügung
Wenn JavaScript aktiv -> dann werden die netten Effekte auf ausgeführt

AJAX mit jQuery jQuery bietet ausgezeichneten AJAX Support $('div#footer').load('some/footer.html'); Es gibt auch noch komplexere Möglichkeiten $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback)

jQuery kann noch so viel mehr Alleine mit jQuery könnte man ganze Vorträge füllen Das grundlegendsten Funktionen haben wir aber vorgestellt Natürlich gibt es noch sehr viele Effekte (CSS Animation) Weiteres gibt’s unter http://jquery.com/ (offizielle Seite) Jetzt einmal die CouchDB Grundlagen

CouchDB ist … ein Apache Projekt (Top Level und Open Source) eine dokument-orientierte Datenbank Schema frei extrem gut skalierbar in Erlang geschrieben (kommt aus dem Telekom Bereich)

CouchDB Dokumente Eine beliebig strukturierte Datenmenge
Testfall, Requirement, Ticket, Blogeintrag,…
Hat nicht zwangsläufig eine bestimmte Struktur Besteht aus einer Menge Attributen Java Entwickler stellen sich am Besten eine Map darunter vor In früheren Versionen als XML Daten abgelegt Jetzt: JSON
kompakt
portabel
leicht aus beliebigen Sprachen erzeugbar

Datenbank? Aber wo sind die Tabellen und Spalten? -> es gibt keine Es werden einfach Dokumente gespeichert Dokumente unterliegen keinen Schema Einschränkungen

Das ist doch keine Datenbank... Doch!
Erfüllt ACID Kriterien
Multi-Version Concurrency Control (MVCC)
Verteilte Datenspeicherung
Master/Slave Replikation
Multi Master Replikation
Try this with your RDBMS :)
Sie ist halt nicht relational!

Zugriff auf Dokumente Alle Zugriffe erfolgen über eine REST API
Erstellen HTTP POST /testfall/
Lesen HTTP GET /testfall/T001
Ersetzen HTTP PUT /testfall/T001
Löschen HTTP DELETE /testfall/T001
Durch die Verwendung von HTTP können auch Proxies verwendet werden -> ausgezeichnete Skalierbarkeit!

Views Mit Views kann auf den Datenbestand (Dokumente) zugegriffen werden Map/Reduce Algorithmus Abfragesprache ist JavaScript Weiter wollen wir an dieser Stelle gar nicht gehen (sonst wäre das alleine ein eigener Vortrag)

Map Werden über JavaScript definiert function(doc) { if (doc.status == "accept") { emit(null, doc); } } Mit emit() werden Daten in das Ergebnis gespielt Format: emit(key, result)

Map function(doc) { if (doc.status == "accept") { emit(doc.subject, {author: doc.author, description: doc.description}); } } Hier wird nur ein Teil des Dokuments (ein Testfall) als Ergebnis erzeugt: subject ist der key, author und description sind Teil des Ergebnisdokuments

Reduce Mit Reduce können Berechnungen basierend auf Ergebnissen ausgeführt werden Ein komplettes Beispiel

Beispiel { "_id" : "monkeys-are-awesome" , "_rev" : "1534115156" , "type" : "article" , "title" : "Monkeys are awesome" , "posted_at" : "2008-09-14T20:45:14Z" , "tags" : [ "monkeys" , "awesome" ], "status" : "Live" , "author_id" : "gerhard.hipfinger@openforce.com" , "updated_at" : "2008-09-14T21:23:59Z" , "body" : "The article body would go here..." }

Map function ( doc ) { if ( doc.type == 'article' ) { for ( i in doc.tags ) { emit ( doc.tags[i], 1 ) ; } } } Ergebnis ( "awesome" , 1 ), ( "monkeys" , 1 )

Reduce function ( tag, counts ) { var sum = 0; for ( var i=0; i < counts.length; i++ ) { sum += counts[i]; } return sum; }

Ergebnis { "rows" :[ { "key" : "awesome" , "value" :1}, { "key" : "monkeys" , "value" :1}, ... ]} Wooohhh!

Abfragen sind Dokumente Die Abfragen selbst sind wieder Dokumente! { "tags" : { "map" : "function(doc) { if(doc.type == 'article') { for(var i in doc.tags) { emit(doc.tags[i], 1); }}}" , "reduce" : "function(tag, counts) { var sum = 0; for(var i = 0; i < counts.length; i++) { sum += counts[i]; }; return sum; }" } }

CouchDB Ausblick
Cluster of unreliable commodity Hardware (also Cloud ready)
Lock-freie Architektur (schnell)
Vom Konzept her als verteiltes System geplant (skalierbar)
Verwaltung von riesiger Datenmengen (Multi-TByte Bereich) – viele Anwendungen im Bereich Logfile Analyse

jQuery & CouchDB im Einsatz DEMO 3 Zeilen jQuery!

Gerhard Hipfinger [email_address] openForce Information Technology GesmbH Dresdner Str. 108 / 3. Stock / Top 11 1200 Wien TEL +43 1 3191775 FAX +43 1 3191775-20 www.openforce.com Das wars :)

jQuery & CouchDB - Die zukünftige Webentwicklung?

by openForce Information Technology GesmbH

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 21

Statistics

jQuery & CouchDB - Die zukünftige Webentwicklung? Presentation Transcript