HTML5, JavaScript und jQuery

Der Crashkurs für Softwareentwickler

Dane Cameron

• Verlag: dpunkt
• Jahr: 2015
• ISBN:
  9783864916687
• Thema: Informatik
• Thema: Webprogrammierung

Ihr Crashkurs in moderner WebprogrammierungSie haben Programmiergrundwissen und suchen einen Quereinstieg in HTML5, JavaScript und jQuery? Mit dieser konzentrierten Einführung lernen Sie zügig und praxisnah, was Sie zur Entwicklung moderner Webanwendungen wissen müssen. Geschrieben von einem Entwickler für Entwickler, vermittelt dieses Buch die relevanten Konzepte und ihre Anwendung direkt anhand eines Beispielprojekts, ganz ohne theoretischen Ballast.Autor Dane Cameron macht Sie zunächst mit den Elementen und Konzepten von HTML5, JavaScript und jQuery vertraut. Kapitel für Kapitel bauen Sie die Beispielanwendung als Single Page Webanwendung (SPA) auf und implementieren dabei alle benötigten Features. Sie lernen unter anderem, mit jQuery das DOM zu bearbeiten, eigene Plugins zu schreiben, client-seitig Daten zu speichern oder Ihre Webanwendung auch offline nutzbar und mit Web Worker "multithread-fähig" zu machen.

1 Einleitung

Ich möchte nicht spekulieren, warum Sie dieses Buch lesen – lieber will ich Ihnen erzählen, warum ich es geschrieben habe.

Ich hatte bereits 15 Jahre lang Erfahrung als Java-Softwareentwickler von großen Unternehmensanwendungen gesammelt. Diese Anwendungen waren nicht für Endnutzer bestimmt, sondern erfüllten system-interne Aufgaben.

Danach kam ich in ein Entwicklerteam, das eine komplexe Webanwendung von Grund auf schrieb. Diese stellte einige Anforderungen, denen ich zuvor noch nie begegnet war:

Anforderungen an Webanwendungen

• Sie musste in der neuesten Version der wichtigsten Browser laufen.
• Sie musste zeitweilig auch ohne Netzwerkverbindung weiterlaufen und daher recht große Datenmengen auf dem Client speichern.
• Sie musste Dateien einlesen, die der Anwender im Offlinebetrieb ausgewählt hatte.
• Sie musste sehr dynamisch sein und komplexe Interaktionen ohne erneutes Laden der Seite erlauben.
• Sie musste mindestens ebenso flüssig wie eine Desktop-Anwendung laufen.
• Sie musste auf bestehenden Standards aufbauen und ohne Browser-Plugins laufen.

Im Lauf der Jahre hatte ich einfache HTML-Seiten und schlichtes JavaScript geschrieben, was mich oft frustrierte – insbesondere JavaScript: Es glich Java (das ich gut kannte), aber vieles passte irgendwie nicht so ganz. Je mehr ich meine Java-Denkweise auf JavaScript übertrug, desto schlimmer schien alles zu werden.

Immerhin erkannte ich, dass ich mir nie Zeit genommen hatte, um JavaScript zu lernen. Ich hatte viele Annahmen darüber getroffen, was JavaScript war und wie es funktionierte – ohne mir aber jemals Zeit zu nehmen, diese Annahmen zu überprüfen.

Bevor ich nun mit meinem neuen Projekt anfing, wollte ich erst von Grund auf den besten Ansatz zur Entwicklung einer Webanwendung mit den verfügbaren Sprachen erlernen. In den letzten Jahren hatte ich selbst genug Webanwendungen genutzt, um das Potenzial der browserbasierten Technologien zu erkennen. Ich wusste aber noch nicht, wie ich mir dieses Potenzial erschließen konnte.

HTML5

Die Plattform, die moderne Browser uns Softwareentwicklern bereitstellen, überraschte mich immer mehr, je mehr ich drüber in Erfahrung brachte. Die lose zu HTML5 zusammengefassten Standards bieten eine große Funktionsvielfalt, von der Datenspeicherung über offline gespeicherte Ressourcen bis hin zur Dateiverwaltung.

JavaScript

Auch JavaScript beeindruckte mich mit wachsendem Kenntnisstand immer tiefer. Auf den ersten Blick gab es vielleicht Ähnlichkeiten mit Java – ich stellte jedoch fest, dass JavaScript in Wirklichkeit viel mehr mit funktionalen Programmiersprachen wie LISP und Scheme gemein hatte. Gerade die Merkmale, die mir anfänglich Schwierigkeiten bereiteten, stellten sich letztlich als besondere Stärken von JavaScript heraus.

jQuery

Schließlich stieß ich auch noch auf die jQuery-Bibliothek. Ein Softwareentwickler kann mit jQuery auch nicht mehr bewerkstelligen als mit nativen JavaScript-APIs. Das Framework bietet jedoch eine so elegante Abstraktionsebene für JavaScript, dass es aus meinem Werkzeugkasten nicht mehr wegzudenken ist. Dank jQuery ließ ich auch meinen letzten Vorbehalt gegenüber browserbasierten Technologien fallen: die umständliche DOM-API.

Dies ist das Buch, das ich zu Beginn meiner Reise gerne gelesen hätte. Es setzt bei Ihnen ein wenig Erfahrung als Softwareentwickler oder Computerprogrammierer voraus und liefert Ihnen die Grundlagen, die Sie verstehen müssen – ohne den Anspruch, jede Sprache bis ins Detail zu behandeln. Haben Sie die Grundlagen einmal verstanden, können Sie Ihr Wissen in diesen Sprachen relativ einfach erweitern.

Zuvor lohnt sich jedoch noch ein Blick auf den Aufstieg von HTML und JavaScript, ganz besonders während der letzten Jahre – und warum es so kam.

1.1 Die Browserkriege

Erster Browserkrieg: Netscape und Microsoft

Der ursprüngliche Browserkrieg tobte Ende der 1990er Jahre zwischen Netscape und Microsoft. Microsoft ging als Sieger daraus hervor und im Ergebnis kam die Browsertechnologie zum Stillstand: Von 2001 bis 2006 änderte sich die Weberfahrung für die Anwender kaum.

Zweiter Browserkrieg: Firefox und Chrome

Der zweite Browserkrieg begann ungefähr 2005, zuerst mit Firefox und dann mit dem Aufkommen von Chrome. Dieser Browserkrieg wurde zur Materialschlacht, bei der alle großen Browseranbieter neue und interessante Funktionen implementierten. Viele von ihnen wurden letztendlich als Teil von HTML5 standardisiert und von anderen Browserherstellern übernommen.

Eine der bedeutendsten Auswirkungen des zweiten Browserkriegs war die drastische Leistungssteigerung von JavaScript.

JavaScript ist eine Interpreter-Sprache. Als solche hinkt ihre Performance einer kompilierten Sprache wie C oder C++ tendenziell immer hinterher. Schließlich muss der zwischengeschaltete Interpreter die auszuführenden Programmbefehle zunächst in Echtzeit in Maschinensprache übersetzen. Im Internet Explorer war die Leistung von JavaScript so erbärmlich, dass sich die Sprache wirklich nur für einfache Aufgaben wie die Überprüfung von Formularen eignete.

JavaScript-Engine »V8«

Besonders Google erkannte in der schlechten JavaScript-Leistung ein bedeutendes Hindernis für die Entwicklung von Webanwendungen. Zur Verbesserung der Leistung brachte Google 2008 die JavaScript-Engine »V8« heraus.

Dadurch wurde die Ausführungsgeschwindigkeit von JavaScript enorm gesteigert, weil der JavaScript-Code nicht bei jeder Ausführung interpretiert, sondern »Just-In-Time« (JIT) in Maschinensprache kompiliert wurde.

Nach dem Erscheinen von V8 bauten alle großen Browserhersteller die JIT-Kompilierung in ihre JavaScript-Engines ein. Es entbrannte ein offensiver Wettbewerb um die schnellste JavaScript-Engine und eine Reihe von Benchmarks zum Geschwindigkeitsvergleich kamen heraus. Microsoft stieg mit dem Internet Explorer 9 in das Rennen ein und konnte die Leistung mit dem Internet Explorer 10 weiter ausbauen.

Node.js

Auf der aktuellen Entwicklungsstufe von JavaScript gibt es kaum noch Geschwindigkeitsprobleme. Große Webanwendungen laufen häufig ebenso schnell oder sogar schneller als vergleichbare Desktop-Programme. Alle gängigen Browser verfügen über stark optimierte JavaScript-Engines. Die Performance ist so gut, dass JavaScript inzwischen auch außerhalb des Browsers eingesetzt wird: Node.js nutzt JavaScript erfolgreich als serverseitige Technologie (unter Verwendung der V8-JavaScript-Engine).

1.2 Der Aufstieg der Webanwendungen

Optimierte Browser-Technologien bildeten die Grundlage zur Entwicklung komplexer Webanwendungen, die komplett im Browser laufen.

In den Anfangstagen des World Wide Web enthielten die Seiten größtenteils statische Inhalte. Bald entwickelten sich die Websites weiter und erlaubten eine dynamische Nutzer-Interaktion. So konnten auch kommerzielle Marktplätze wie Amazon entstehen. Die Technologien zur dynamischen Manipulation von Webseiten wurden als DHTML (Dynamic HTML) bezeichnet. Sie sind die Vorstufe zu den in diesem Buch vorgestellten HTML5-Technologien.

DHTML

Webseiten konnten mit DHTML nach dem Laden in Echtzeit manipuliert werden. Größere Webanwendungen, die auch ohne häufiges Neuladen der Seite auskamen, waren aber immer noch schwer umzusetzen. Das war besonders der mangelnden Performance von JavaScript und den fehlenden Browser-APIs für relativ einfache Aufgaben wie etwa der Datenspeicherung geschuldet.

Gmail

An breiter Front änderte sich das erstmals, als Gmail 2007 einer größeren Öffentlichkeit zugänglich wurde. Gmail beschleunigte mit einem bisher unerreicht großen Onlinespeicher von 1 GB nicht nur den Trend zum Cloud-Computing, sondern es machte auch den Einsatz von AJAX bekannt.

AJAX

Mit Hilfe von AJAX kann eine Webseite mit einem Webserver interagieren, ohne dass sie erneut geladen werden muss. Eine Webanwendung konnte jetzt also aus einer einzelnen Webseite bestehen. Sie aktualisierte sich einfach selbst, während der Nutzer mit ihr interagierte und sie zusätzliche Daten vom Server empfing.

Google hat die Technologien hinter AJAX nicht selbst erfunden (das war in Wirklichkeit Microsoft); und Google hat auch nicht als erstes eine AJAX-basierte Webanwendung entwickelt. Aber erst durch Gmail rückte AJAX ins Rampenlicht und die Programmierer erkannten, was damit möglich war.

In den letzten 5 Jahren ist AJAX als Webtechnologie so dominant geworden, dass man sich kaum noch in die Zeit vor seinem Aufkommen zurückdenken kann.

Jetzt war klar geworden, was sich alles im Browser bewerkstelligen lässt. Und sowohl IT-Abteilungen als auch Endanwender drängten darauf, browserbasierte Webanwendungen für viele Aufgaben einzusetzen, die bisher klassischerweise den Desktopanwendungen vorbehalten waren. Im Browser ausgeführte Webanwendungen haben für die Anwender viele Vorteile:

Vorteile browserbasierter Webanwendungen

• Die Anwendung muss nicht auf jedem Computer installiert werden.
• Neue Software-Versionen können regelmäßig veröffentlicht werden, ohne dass der Anwender selbst Aktualisierungen einspielen muss. Manche Webanwendungen werden sogar täglich aktualisiert.
• Webanwendungen können in einer cloudbasierten Infrastruktur bereitgestellt werden. Die Verfügbarkeit steigt bei gleichzeitig sinkenden Kosten.
• Dieselbe Webanwendung funktioniert auf verschiedenen Geräten, auch auf mobilen Geräten wie Smartphones und Tablets.
• Die Anwender können die Anwendung weltweit und zu jeder Zeit aufrufen.

Im Hinblick auf die für Software-Entwickler bereitstehenden Funktionen und Bibliotheken sind die Webbrowser den Betriebssystemen inzwischen ebenbürtig. Wir können den Browser jetzt also als ausgereifte Plattform für die Softwareentwicklung verstehen – genau wie OS X, Android oder Windows.

1.3 Die vernetzte Welt

Breitband-Netzwerke

Eine weitere wichtige Veränderung der letzten ...

Inhaltsverzeichnis

• Cover
• Titel
• Impressum
• Inhalt
• 1 Einleitung
• 2 Über dieses Buch
• 3 Ein kurzer Überblick über Webanwendungen
• 4 Die Markup-Sprache HTML5
• 5 JavaScript-Grundlagen
• 6 jQuery
• 7 Debuggen
• 8 Umzug auf einen Webserver
• 9 Die Webanwendung programmieren
• 10 Umgang mit clientseitigen Daten
• 11 Die Webanwendung aufräumen
• 12 Offline-Webanwendungen
• 13 Mit Dateien arbeiten
• 14 Web Worker
• 15 AJAX
• 16 Server-Sent Events und WebSockets
• 17 Fehlerbehandlung
• 18 Fazit
• Anhang A: Cascading Style Sheets (CSS)
• Anhang B: Empfohlene Bibliotheken
• Stichwortverzeichnis