SlideShare ist ein Scribd-Unternehmen logo
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 ,[object Object]
$('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 ,[object Object]
var src = $('img.logo').attr('src');
var html = $('div.footer').html();
DOM Navigation jQuery bietet einige Methoden um im DOM Baum zu navigieren ,[object Object]
$('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“ ,[object Object]
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 ,[object Object],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 ,[object Object]
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! ,[object Object]
Multi-Version Concurrency Control (MVCC)
Verteilte Datenspeicherung

Weitere ähnliche Inhalte

Ähnlich wie jQuery & CouchDB - Die zukünftige Webentwicklung?

Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
Frank Müller
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 
Dokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte AkzeptanztestsDokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte Akzeptanztests
Sebastian Sanitz
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
Stephan Schmidt
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Tech Talk: Groovy
Tech Talk: GroovyTech Talk: Groovy
Tech Talk: Groovy
mwie
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBMario Müller
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Java Usergroup Berlin-Brandenburg
 
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
Nils Adermann
 
Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Engine
drubb
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
FunThomas424242
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
johofer
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XML
Stephan Schmidt
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 

Ähnlich wie jQuery & CouchDB - Die zukünftige Webentwicklung? (20)

Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Dokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte AkzeptanztestsDokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte Akzeptanztests
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Tech Talk: Groovy
Tech Talk: GroovyTech Talk: Groovy
Tech Talk: Groovy
 
jQuery Kurz-Intro
jQuery Kurz-IntrojQuery Kurz-Intro
jQuery Kurz-Intro
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDB
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
Apache CouchDB at PHPUG Karlsruhe, Germany (Jan 27th 2009)
 
Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Engine
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XML
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 

Mehr von openForce Information Technology GesmbH

openExperts Talk - 12 Jahre agiles Manifest
openExperts Talk - 12 Jahre agiles ManifestopenExperts Talk - 12 Jahre agiles Manifest
openExperts Talk - 12 Jahre agiles Manifest
openForce Information Technology GesmbH
 
openExperts Talk - Kunden an die Macht
openExperts Talk - Kunden an die MachtopenExperts Talk - Kunden an die Macht
openExperts Talk - Kunden an die Macht
openForce Information Technology GesmbH
 
openExperts Talk: die Cloud und ich
openExperts Talk: die Cloud und ichopenExperts Talk: die Cloud und ich
openExperts Talk: die Cloud und ich
openForce Information Technology GesmbH
 
node.js - Fast event based web application development
node.js - Fast event based web application developmentnode.js - Fast event based web application development
node.js - Fast event based web application development
openForce Information Technology GesmbH
 
CouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relaxCouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relax
openForce Information Technology GesmbH
 
Web Testen mit Selenium
Web Testen mit SeleniumWeb Testen mit Selenium
Sonar - Software Qualitätsmanagement ohne Schmerzen
Sonar - Software Qualitätsmanagement ohne SchmerzenSonar - Software Qualitätsmanagement ohne Schmerzen
Sonar - Software Qualitätsmanagement ohne Schmerzen
openForce Information Technology GesmbH
 

Mehr von openForce Information Technology GesmbH (7)

openExperts Talk - 12 Jahre agiles Manifest
openExperts Talk - 12 Jahre agiles ManifestopenExperts Talk - 12 Jahre agiles Manifest
openExperts Talk - 12 Jahre agiles Manifest
 
openExperts Talk - Kunden an die Macht
openExperts Talk - Kunden an die MachtopenExperts Talk - Kunden an die Macht
openExperts Talk - Kunden an die Macht
 
openExperts Talk: die Cloud und ich
openExperts Talk: die Cloud und ichopenExperts Talk: die Cloud und ich
openExperts Talk: die Cloud und ich
 
node.js - Fast event based web application development
node.js - Fast event based web application developmentnode.js - Fast event based web application development
node.js - Fast event based web application development
 
CouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relaxCouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relax
 
Web Testen mit Selenium
Web Testen mit SeleniumWeb Testen mit Selenium
Web Testen mit Selenium
 
Sonar - Software Qualitätsmanagement ohne Schmerzen
Sonar - Software Qualitätsmanagement ohne SchmerzenSonar - Software Qualitätsmanagement ohne Schmerzen
Sonar - Software Qualitätsmanagement ohne Schmerzen
 

jQuery & CouchDB - Die zukünftige Webentwicklung?

  • 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.
  • 9.
  • 10. var src = $('img.logo').attr('src');
  • 11. var html = $('div.footer').html();
  • 12.
  • 17. jQuery Event Handling jQuery bietet Browser unabhängiges Eventhandling $('a').click( function(event) { $(this).css({backgroundColor:'red'}); event.preventDefault(); });
  • 18.
  • 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.
  • 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.
  • 32.
  • 33.
  • 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.
  • 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 :)