Jakob Westhoff. Plug-in-Entwicklung mit jquery

Transkript

1 Jakob Westhoff Plug-in-Entwicklung mit jquery

2 2 Willkommen in der Welt von jquery Download von der jquery-webseite Download der Bibliothek Die einfachste Möglichkeit zur Beschaffung von jquery ist der Download von den Webseiten des Projekts selbst. Direkt auf der Startseite befindet sich in der oberen rechten Ecke eine gut sichtbare Downloadschaltfläche (Abbildung 2.1), über die auf das aktuellste Release zugegriffen werden kann. Direkt oberhalb der Schaltfläche befindet sich die Auswahl zur PRODUCTION- oder DEVELOPMENT-Version der Bibliothek. Diese beiden Varianten unterscheiden sich durch ihre Quelltextgröße. Die Produktionsversion wurde durch einen JavaScript Minifier verkleinert. Als Resultat dieses Vorgangs wurden sämtliche Kommentare entfernt, sowie Zeilenumbrüche und Abstände auf ein Minimum reduziert. Außerdem wurden Variablen innerhalb der Bibliothek umbenannt, um Speicherplatz zu sparen. Diese Veränderungen führen zu Quelltext, der zwar noch von einer JavaScript-Engine ausgeführt, aber nur noch begrenzt von Menschen gelesen werden kann. Während der Entwicklungsphase bietet es sich aus diesen Gründen an, die DEVELOPMENT- Version zu verwenden, um u. a. das Debuggen zu erleichtern. Bevor die Bibliothek allerdings zusammen mit der Applikation an Anwender ausgeliefert wird, sollte sie durch eine minifizierte Version ersetzt werden. Hierbei ist es unerheblich, ob der fertige PRODUC- TION-Download der jquery-seite eingesetzt oder eine eigene minifizierte Variante erzeugt wird. Abbildung 2.1: Downloadbereich der jquery-webseite 22

3 Herunterladen und Einbinden von jquery Einbinden in eine Webseite Um jquery innerhalb einer Webseite einsetzen zu können, muss die Bibliothek zunächst geladen werden. Üblicherweise geschieht das durch die Verwendung eines script-elements. Listing 2.1 enthält ein minimales HTML-Dokument, das eine zuvor heruntergeladene Version von jquery einbindet. Nachdem der Ladevorgang durchgeführt wurde, kann jeglicher jquery-basierte Quelltext innerhalb der Seite zur Ausführung gebracht werden. Zu beachten ist lediglich, dass eingesetzte Plug-ins nach der Bibliothek eingebunden werden müssen, da JavaScript keine automatische Verwaltung von Abhängigkeiten besitzt. Aber dazu mehr in Kapitel 3. <!DOCTYPE html> <html> <head> <title>minimal jquery environment</title> <script type="text/javascript" src="jquery min.js"></script> </head> </html> Listing 2.1: Minimales HTML-Dokument zur Verwendung der jquery-bibliothek Vorteile Vollständige Kontrolle über den ausgelieferten Quelltext Kontrolle über gesendete Cache-Header und übrige Metadaten Eigenverantwortlichkeit für die Verfügbarkeit der Bibliothek Nachteile Pflege im Fall eines Bibliotheksupdates erforderlich Kosten für die verbrauchte Bandbreite können entstehen Eventuell komplexe Administration des Servers erforderlich (Cache Header, Metadaten) Daten meist nur an einem Standort verfügbar und somit ausfallgefährdet Plug-in-Entwicklung mit jquery 23

4 2.1.2 Verwendung eines CDN 2 Willkommen in der Welt von jquery Neben der vorgestellten Möglichkeit, die nötigen Dateien der Bibliothek zusammen mit der eigenen Applikation auszuliefern, gibt es außerdem die Möglichkeit, jquery von einem Content Delivery Network (CDN) zu beziehen. Was ist ein CDN? Hinter dem Begriff Content Delivery Network (auch Content Distribution Network) verbirgt sich ein Netzwerk mehrerer Serversysteme, um in großen Mengen Daten über das Internet auszuliefern. Meist handelt es sich hier um große Mediendateien wie Audio- oder Videodateien. Jedoch auch kleinere Elemente wie die jquery-bibliothek sind darüber verfügbar. Wer das Wort CDN noch nie gehört hat, kann eventuell mit dem momentan geprägten Begriff Cloud Storage etwas anfangen. Im Prinzip handelt es sich dabei um die gleiche Technik. Neben Firmen wie Akamai, Amazon und Rackspace, die sich darauf spezialisiert haben, CDNs auf Kundenwunsch bereitzustellen, besitzen auch viele große Firmen, wie Google oder Microsoft ihre eigenen CDN-Serverfarmen für den internen und externen Einsatz. jquery aus der Wolke jquery kann und darf von einigen der großen CDNs direkt in die eigene Webapplikation eingebunden werden. Der Aufwand, eine eigene Kopie der Bibliothek bereitzustellen und zu pflegen, entfällt somit. Als konkretes Beispiel wird im Folgenden Googles CDN für AJAX APIs, das Google Library API 2,vorgestellt. Hinweis: Auch andere große Anbieter wie Microsoft bieten jquery zur direkten Verwendung aus ihren CDNs an. Eine Einbindung von den Projektservern der Bibliothek ist ebenfalls möglich. Unter Hosted_jQuery finden Sie detaillierte Informationen und weitere alternative Quellen. Neben der jquery-bibliothek stellt Google auch noch diverse weitere Bibliotheken bereit wie Dojo, Ext.JS und prototype. Der Suchmaschinenriese kümmert sich außerdem um Aktualität seiner Downloadangebote und ist bemüht, auch alte Versionen stets verfügbar zu halten. Alles in allem stellt Googles Library API also einen sehr nützlichen Verbündeten bei der Entwicklung von größeren JavaScript-Projekten dar. Listing 2.2 zeigt, wie jquery mit dessen Hilfe direkt in ein Projekt eingebunden werden kann. 2 Informationen über das Google Library API finden Sie auch bei Google unter apis/libraries/. 24

5 Herunterladen und Einbinden von jquery <!DOCTYPE html> <html> <head> <title>minimal jquery environment loaded from the Google CDN</title> <script src=" jquery.min.js"></script> </head> </html> Listing 2.2: Einsatz der aktuellen jquery-version aus dem Google CDN Die Integration der Bibliothek könnte nicht einfacher sein. Eine Änderung des URL innerhalb des verwendeten script-elements reicht aus, um die Auslieferung an Google zu übertragen. Profitipp: Wie zu erkennen ist, besteht der URL zum Abruf der Bibliothek aus dem Google CDN aus verschiedenen Elementen. Im Besonderen fällt die Trennung zwischen Bibliotheksname, Versionsnummer und Quelltextversion durch Pfadtrenner (/) auf. Grundsätzlich gilt: Jedes dieser Elemente kann ausgetauscht werden, um eine andere Bibliothek, eine andere Version oder eine andere Quelltextausprägung zu laden. Das Ersetzen von jquery.min.js durch jquery.js im Beispiel aus Listing 2.2 würde die DEVELOPMENT-Version statt der Produktionsversion von den Google-Servern herunterladen. Eine besondere Fähigkeit kommt hierbei der Versionsnummer zu. Sie wird jeweils automatisch auf die aktuellste Version innerhalb des gegebenen Bereichs aufgerundet. Die Angabe von liefert also exakt das Release 1.4.2, wohingegen die Angabe von 1.4 immer das aktuellste Release der 1.4er Serie anfordern würde. Eine schlichte Angabe von 1 verweist automatisch auf die aktuellste jquery-version aus der ersten Generation. In der Praxis hat es sich für viele Projekte als sinnvoll erwiesen den aktuellen Entwicklungszweig von jquery zu spezifizieren, aber nicht die vollständige Versionsnummer zu verwenden. Also im aktuellen Beispiel 1.4 anstelle der Auf diese Weise fließen Bugfix- und Sicherheitspatches automatisch in Ihre Applikation ein, sobald sie verfügbar sind. Hinweis: Neben der Möglichkeit, über das script-element direkt Bibliotheken des Google Library API einzubinden, gibt es auch einen JavaScript Loader von Google. Details dazu finden Sie in der entsprechenden Dokumentation: apis/libraries/ devguide.html Plug-in-Entwicklung mit jquery 25

6 2 Willkommen in der Welt von jquery Vorteile Bibliothek oftmals bereits im Cache der Browser, durch wiederholten Einsatz auf vielen Seiten Keine Kosten für übertragene Datenvolumina Korrekte Cache-Header und Metadaten ohne Administrationsaufwand Keine Pflege bei Sicherheitsupdates oder Bugfixes der Bibliothek nötig Auslieferung aus einem Multi-Server-Netzwerk mit hoher Verfügbarkeit und örtlicher Abhängigkeit Nachteile Keine Kontrolle über ausgelieferten Quelltext Keine Kontrolle über die Integration von Sicherheitsupdates oder Bugfixes Mögliches Sammeln von statistischen Daten durch einen potenziellen Mitbewerber Keine Kontrolle über die Verfügbarkeit des Auslieferungssystems Welcher Weg ist der bessere? Leider kann die Frage, welcher Auslieferungsweg zu bevorzugen ist, nicht pauschal beantwortet werden. Sowohl projektabhängig als auch nach dem persönlichen Empfinden, muss von jedem Anwender selbst bewertet werden, welcher der für ihn und seine Applikation beste Weg ist. Für diverse Projekte des Autors hat sich die Auslieferung über Googles Library API jedoch als vorteilhaft erwiesen. Oft werden die Ladezeiten der Applikationen dramatisch verkürzt, da sich die nötigen Dateien bereits im Cache des Browsers befinden. Des Weiteren konnte der Autor noch in keinem seiner Projekte ein Problem feststellen, das auf Verfügbarkeitsprobleme von Googles CDN zurückzuführen war. 2.2 jquery vs. JavaScript Bevor die einzelnen Fähigkeiten von jquery dargestellt werden, gibt dieses Kapitel zunächst einen Einblick in die allgemeinen Vorteile von jquery gegenüber nativem JavaScript. Durch diesen Schritt möchte der Autor Ihnen einen kleinen Einblick in die Eleganz von jquery geben, die ihn täglich aufs Neue begeistern kann. jquery verspricht, die Art zu verändern, wie Entwickler JavaScript schreiben 3. Das ist nicht nur ein Werbeslogan, sondern eine Tatsache. Den Unterschied verdeutlichen die fol- 3 Slogan von der jquery-webseite: jquery is designed to change the way that you write JavaScript 26