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 A...
Los gehts... jQuery('div#footer') jQuery('div.article > p') jQuery('li:first-child') $('a[href ^ =“mailto:“]') $ ist ein S...
Eine Selektion liefert Collections $('div.section')  … liefert eine Collection Mit den Collections kann weitergearbeitet w...
Arbeiten mit Collections Es gibt eine Vielzahl an Methoden die mit Collections arbeiten Die meisten werden automatisch auf...
$('img.logo').attr('src', 'images/logo.png')
$('tr.even').css('background-color','red') </li></ul>
Zugriff auf DOM Attribute Manche Methoden wirken auf das erste gefundene Element <ul><li>var h = $('div.section').height();
var src = $('img.logo').attr('src');
var html = $('div.footer').html(); </li></ul>
DOM Navigation jQuery bietet einige Methoden um im DOM Baum zu navigieren <ul><li>$('div.section').next()
$('div.section').prev()
$('div.section').prev('a')
$('div.section').parent()
$('div.section').parents() </li></ul>
jQuery Event Handling jQuery bietet Browser unabhängiges Eventhandling $('a').click( function(event) { $(this).css({backgr...
jQuery = unobtrusive $(document).ready(function() { alert('Dokument wurde geladen!'); }); Dadurch wird Funktionalität von ...
Wenn JavaScript aktiv -> dann werden die netten Effekte auf ausgeführt </li></ul>
AJAX mit jQuery jQuery bietet ausgezeichneten AJAX Support $('div#footer').load('some/footer.html'); Es gibt auch noch kom...
jQuery kann noch so viel mehr Alleine mit jQuery könnte man ganze Vorträge füllen Das grundlegendsten Funktionen haben wir...
CouchDB ist … ein Apache Projekt (Top Level und Open Source) eine dokument-orientierte Datenbank Schema frei extrem gut sk...
CouchDB Dokumente Eine beliebig strukturierte Datenmenge <ul><ul><li>Testfall, Requirement, Ticket, Blogeintrag,… </li></u...
portabel
leicht aus beliebigen Sprachen erzeugbar </li></ul></ul>
Datenbank? Aber wo sind die Tabellen und Spalten? -> es gibt keine Es werden einfach Dokumente gespeichert Dokumente unter...
Das ist doch keine Datenbank... Doch! <ul><li>Erfüllt ACID Kriterien
Multi-Version Concurrency Control (MVCC)
Verteilte Datenspeicherung
Upcoming SlideShare
Loading in …5
×

jQuery & CouchDB - Die zukünftige Webentwicklung?

13,477 views

Published on

Folien zum Vortrag beim openForce Java Abend am 11. März 2010.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

jQuery & CouchDB - Die zukünftige Webentwicklung?

  1. 1. jQuery & CouchDB Wohin geht die Zukunft der Web Entwicklung? Gerhard Hipfinger [email_address]
  2. 2. Agenda Was ist jQuery Was ist CouchDB Was kann man damit anstellen
  3. 3. 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!
  4. 4. Los gehts... jQuery('div#footer') jQuery('div.article > p') jQuery('li:first-child') $('a[href ^ =“mailto:“]') $ ist ein Shortcut für jQuery – sehr praktisch
  5. 5. 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 })
  6. 6. Arbeiten mit Collections Es gibt eine Vielzahl an Methoden die mit Collections arbeiten Die meisten werden automatisch auf jedes Element einer Collection angewendet <ul><li>$('div.section').addClass(„highlight“)
  7. 7. $('img.logo').attr('src', 'images/logo.png')
  8. 8. $('tr.even').css('background-color','red') </li></ul>
  9. 9. Zugriff auf DOM Attribute Manche Methoden wirken auf das erste gefundene Element <ul><li>var h = $('div.section').height();
  10. 10. var src = $('img.logo').attr('src');
  11. 11. var html = $('div.footer').html(); </li></ul>
  12. 12. DOM Navigation jQuery bietet einige Methoden um im DOM Baum zu navigieren <ul><li>$('div.section').next()
  13. 13. $('div.section').prev()
  14. 14. $('div.section').prev('a')
  15. 15. $('div.section').parent()
  16. 16. $('div.section').parents() </li></ul>
  17. 17. jQuery Event Handling jQuery bietet Browser unabhängiges Eventhandling $('a').click( function(event) { $(this).css({backgroundColor:'red'}); event.preventDefault(); });
  18. 18. jQuery = unobtrusive $(document).ready(function() { alert('Dokument wurde geladen!'); }); Dadurch wird Funktionalität von der Struktur getrennt! Grundlage von „Degrading Gracefully“ <ul><li>Grundlegende Funktionalität steht auch ohne JS zur Verfügung
  19. 19. Wenn JavaScript aktiv -> dann werden die netten Effekte auf ausgeführt </li></ul>
  20. 20. 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)
  21. 21. 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
  22. 22. 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)
  23. 23. CouchDB Dokumente Eine beliebig strukturierte Datenmenge <ul><ul><li>Testfall, Requirement, Ticket, Blogeintrag,… </li></ul></ul>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 <ul><ul><li>kompakt
  24. 24. portabel
  25. 25. leicht aus beliebigen Sprachen erzeugbar </li></ul></ul>
  26. 26. Datenbank? Aber wo sind die Tabellen und Spalten? -> es gibt keine Es werden einfach Dokumente gespeichert Dokumente unterliegen keinen Schema Einschränkungen
  27. 27. Das ist doch keine Datenbank... Doch! <ul><li>Erfüllt ACID Kriterien
  28. 28. Multi-Version Concurrency Control (MVCC)
  29. 29. Verteilte Datenspeicherung
  30. 30. Master/Slave Replikation
  31. 31. Multi Master Replikation
  32. 32. Try this with your RDBMS :) </li></ul><ul><li>Sie ist halt nicht relational! </li></ul>
  33. 33. Zugriff auf Dokumente Alle Zugriffe erfolgen über eine REST API <ul><ul><li>Erstellen HTTP POST /testfall/
  34. 34. Lesen HTTP GET /testfall/T001
  35. 35. Ersetzen HTTP PUT /testfall/T001
  36. 36. Löschen HTTP DELETE /testfall/T001 </li></ul></ul>Durch die Verwendung von HTTP können auch Proxies verwendet werden -> ausgezeichnete Skalierbarkeit!
  37. 37. 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)
  38. 38. Map Werden über JavaScript definiert function(doc) { if (doc.status == &quot;accept&quot;) { emit(null, doc); } } Mit emit() werden Daten in das Ergebnis gespielt Format: emit(key, result)
  39. 39. Map function(doc) { if (doc.status == &quot;accept&quot;) { 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
  40. 40. Reduce Mit Reduce können Berechnungen basierend auf Ergebnissen ausgeführt werden Ein komplettes Beispiel
  41. 41. Beispiel { &quot;_id&quot; : &quot;monkeys-are-awesome&quot; , &quot;_rev&quot; : &quot;1534115156&quot; , &quot;type&quot; : &quot;article&quot; , &quot;title&quot; : &quot;Monkeys are awesome&quot; , &quot;posted_at&quot; : &quot;2008-09-14T20:45:14Z&quot; , &quot;tags&quot; : [ &quot;monkeys&quot; , &quot;awesome&quot; ], &quot;status&quot; : &quot;Live&quot; , &quot;author_id&quot; : &quot;gerhard.hipfinger@openforce.com&quot; , &quot;updated_at&quot; : &quot;2008-09-14T21:23:59Z&quot; , &quot;body&quot; : &quot;The article body would go here...&quot; }
  42. 42. Map function ( doc ) { if ( doc.type == 'article' ) { for ( i in doc.tags ) { emit ( doc.tags[i], 1 ) ; } } } Ergebnis ( &quot;awesome&quot; , 1 ), ( &quot;monkeys&quot; , 1 )
  43. 43. Reduce function ( tag, counts ) { var sum = 0; for ( var i=0; i < counts.length; i++ ) { sum += counts[i]; } return sum; }
  44. 44. Ergebnis { &quot;rows&quot; :[ { &quot;key&quot; : &quot;awesome&quot; , &quot;value&quot; :1}, { &quot;key&quot; : &quot;monkeys&quot; , &quot;value&quot; :1}, ... ]} Wooohhh!
  45. 45. Abfragen sind Dokumente Die Abfragen selbst sind wieder Dokumente! { &quot;tags&quot; : { &quot;map&quot; : &quot;function(doc) { if(doc.type == 'article') { for(var i in doc.tags) { emit(doc.tags[i], 1); }}}&quot; , &quot;reduce&quot; : &quot;function(tag, counts) { var sum = 0; for(var i = 0; i < counts.length; i++) { sum += counts[i]; }; return sum; }&quot; } }
  46. 46. CouchDB Ausblick <ul><li>Cluster of unreliable commodity Hardware (also Cloud ready)
  47. 47. Lock-freie Architektur (schnell)
  48. 48. Vom Konzept her als verteiltes System geplant (skalierbar)
  49. 49. Verwaltung von riesiger Datenmengen (Multi-TByte Bereich) – viele Anwendungen im Bereich Logfile Analyse </li></ul>
  50. 50. jQuery & CouchDB im Einsatz DEMO 3 Zeilen jQuery!
  51. 51. 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 :)

×