Das Dokument gibt einen Überblick über jQuery und CouchDB, zwei Technologien der Web-Entwicklung. Es erklärt die Funktionen von jQuery als JavaScript-Bibliothek zur Manipulation von DOM-Elementen sowie deren hervorragenden Ajax-Support und die Eigenschaften von CouchDB als schemafreie, dokumentenorientierte Datenbank, die auf einer REST-API basiert. Darüber hinaus wird die Skalierbarkeit und die Verwendung von Map/Reduce für Datenabfragen in CouchDB hervorgehoben.

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

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

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. 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. 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. 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“)

7. $('img.logo').attr('src', 'images/logo.png')

8. $('tr.even').css('background-color','red')

9. Zugriff auf DOM Attribute Manche Methoden wirken auf das erste gefundene Element var h = $('div.section').height();

10. var src = $('img.logo').attr('src');

11. var html = $('div.footer').html();

12. DOM Navigation jQuery bietet einige Methoden um im DOM Baum zu navigieren $('div.section').next()

13. $('div.section').prev()

14. $('div.section').prev('a')

15. $('div.section').parent()

16. $('div.section').parents()

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

18. 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

19. Wenn JavaScript aktiv -> dann werden die netten Effekte auf ausgeführt

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. 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. 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. 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

24. portabel

25. leicht aus beliebigen Sprachen erzeugbar

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

27. Das ist doch keine Datenbank... Doch! Erfüllt ACID Kriterien

28. Multi-Version Concurrency Control (MVCC)

29. Verteilte Datenspeicherung

30. Master/Slave Replikation

31. Multi Master Replikation

32. Try this with your RDBMS :) Sie ist halt nicht relational!

33. Zugriff auf Dokumente Alle Zugriffe erfolgen über eine REST API Erstellen HTTP POST /testfall/

34. Lesen HTTP GET /testfall/T001

35. Ersetzen HTTP PUT /testfall/T001

36. Löschen HTTP DELETE /testfall/T001 Durch die Verwendung von HTTP können auch Proxies verwendet werden -> ausgezeichnete Skalierbarkeit!

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. 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)

39. 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

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

41. 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..." }

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

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

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. 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. CouchDB Ausblick Cluster of unreliable commodity Hardware (also Cloud ready)

47. Lock-freie Architektur (schnell)

48. Vom Konzept her als verteiltes System geplant (skalierbar)

49. Verwaltung von riesiger Datenmengen (Multi-TByte Bereich) – viele Anwendungen im Bereich Logfile Analyse

50. jQuery & CouchDB im Einsatz DEMO 3 Zeilen jQuery!

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 :)