Sie sind hier
E-Book

Mobile Web-Apps mit JavaScript

Leitfaden für die professionelle Entwicklung

AutorStefan Scheidt, Tobias Bosch, Torsten Winterberg
Verlagentwickler.press
Erscheinungsjahr2012
Seitenanzahl212 Seiten
ISBN9783868022735
FormatPDF/ePUB
Kopierschutzkein Kopierschutz/DRM
GerätePC/MAC/eReader/Tablet
Preis21,99 EUR
Es herrscht ein regelrechter Hype um mobile Lösungen, erst recht seitdem androidbasierte Smartphones massenhaft auf den Markt drängen. Einen ähnlichen Aufschwung erlebt JavaScript, denn mit der enormen Ausbreitungsgeschwindigkeit von HTML5 wird diese Sprache immer interessanter. Dieses Buch richtet sich an Entwickler, die sich bewusst für den Weg der mobilen JavaScript Web-App entschieden haben und lernen möchten, wie man ein gutes Softwaredesign implementiert. Es entstand aus dem Wunsch nach einer kompletten, durchgehenden Anleitung, wie man professionell auf hohem Niveau Webanwendungen für mobile Endgeräten schreibt. Die Autoren vollführen dabei einen kompletten End-to-End-Durchlauf über alle relevanten Implementierungsbestandteile und der Leser erhält einen hervorragenden Einstieg in die Programmierung mobiler Web-Apps, in die testgetriebene Entwicklung für JavaScript und das Schreiben von Clean Code. Das Buch richtet sich sowohl an professionelle Softwareentwickler Teams als auch an alle, die den TFS mal beschnuppern wollen.

Torsten Winterberg arbeitet im Bereich Business Development & Innovation für das Projekthaus OPITZ CONSULTING GmbH. Er ist bekannt als Autor von Fachartikeln, Sprecher auf diversen Konferenzen und besitzt langjährige Erfahrung als Trainer, Projektcoach und Architekt rund um die Erstellung von Java- EE-Anwendungen. Sein besonderes Interesse liegt im Design und der Entwicklung von komplexen ITSystemen unter Berücksichtigung von BPM, BPEL, ESB, BAM sowie allgemein den serviceorientierten Architekturen und speziell der Kombination mit mobilen Endgeräten. Torsten ist Oracle ACE Director und Koleiter der DOAG Middleware Community. Tobias Bosch und Stefan Scheidt sind Solution Architects bei der OPITZ CONSULTING GmbH. Sie beschäftigen sich seit mehreren Jahren mit Architektur und Implementierung von Enterprise-Applikationen. Ihre Schwerpunkte sind Enterprise Java, testgetriebene Entwicklung und Mobile Computing. In diesem Bereich haben sie sich auf die Implementierung mobiler JavaScript-Web-Apps spezialisiert. Sie sind Autoren von Fachartikeln und sprechen regelmäßig auf Fachkonferenzen. Darüber hinaus ist Tobias Bosch Autor der Open-Source-Projekte jQuery Mobile Angular Adapter, Jasmine-UI und PhoneGap-Proxy (http://github.com/tigbro).

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

2 JavaScript-Grundlagen

Wir wollen in diesem Buch keine Einführung in JavaScript geben. Es gibt bereits einige sehr gute Bücher, die eine solche Einführung zum Ziel haben, beispielsweise „Eloquent JavaScript“ von Marijn Haverbeke (­http://eloquentjavascript.net/), „JavaScript: The Good Parts“ von Douglas Crockford oder „JavaScript für Enterprise-Entwickler“ von Oliver Ochs. Auch für fortgeschrittene Fragestellungen beim Einsatz von JavaScript gibt es gute Bücher, wie beispielsweise „JavaScript Patterns“ von Stoyan Stefanov. Wir möchten in diesem Kapitel in einer losen Sammlung auf die für unsere Beispiele relevanten Grundlagen eingehen und diese kurz erläutern.

2.1 Objekte und Objektliterale

Objekte in JavaScript sind im wesentlichen Container für Properties mit ihren Werten. Im Grunde genommen sind JavaScript-Objekte also Hash Maps. Objekte können in JavaScript wie in Listing 2.1 gezeigt erzeugt und um Properties erweitert werden.

1 var customer = new Object();
2 customer.firstName = "John";
3 customer.lastName = "Doe";

Listing 2.1: Erzeugen und initialisieren von Objekten in JavaScript

In Zeile 1 erzeugen wir ein neues Objekt mithilfe der Konstruktorfunktion Object und dem Operator new. In den Zeilen 2 und 3 erweitern wir dieses neue Objekt um zwei Properties und initialisieren diese. Eine alternative Möglichkeit, ein „leeres“ Objekt zu erzeugen, ist die Verwendung des entsprechenden Objekt-Literals. Die erste Zeile in Listing 2.1 könnte auch lauten: var customer = {};. Die Syntax für Objektliterale unterstützt auch das Definieren von Properties. Die Werte der Properties können dabei wieder Objektliterale sein. Die Syntax kann darüber hinaus mit der Verwendung von [ und ] für Listen-Literale kombiniert werden. Ein Beispiel zeigt Listing 2.2.

var customer = {
firstName: "John",
lastName: "Doe",
address: {
street: "Some Street",
city: "Some City",
zipcode: "12345"
},
contacts: [ { type: "home", value: "000-1234" },
{ type: "mobile", value: "111-9876" } ]
};

Listing 2.2: Geschachtelte Objektliterale und Objektlisten

Der Wert einer Objekt-Property kann auch eine Funktion sein. Mehr dazu in Abschnitt 2.2.3.

2.2 Funktionen

In JavaScript sind Funktionen bekanntlich „First Class Citizens“. Sie sind Objekte vom Typ function. Sie können Variablen und Objekt-Properties zugewiesen werden und als Argument an andere Funktionen übergeben werden. Ferner haben Funktionen wie alle Objekte Properties und können auch um selbstdefinierte Properties erweitert werden. In Kapitel 6 werden wir beispielsweise eine Property $inject auf Funktionen definieren, um damit anzugeben, welche Abhängigkeiten der Funktion bei ihrem Aufruf übergeben werden sollen. Diese Property wird dann zur Laufzeit von einem Dependency-Injection-Framework ausgewertet. Mehr dazu in Kapitel 6.

2.2.1 Codeblöcke

Werden Funktionen an andere Funktionen übergeben, dienen sie häufig nur als „Container“ für einen Codeblock, der von der aufgerufenen Funktion dann zur gegebenen Zeit ausgeführt wird. Solche Funktionen werden häufig nicht explizit definiert, sondern als anonymer Funktionsausdruck übergeben. Listing 2.3 zeigt ein Beispiel, in dem eine anonyme Funktion an eine globale Funktion it des Testframeworks Jasmine (siehe Kapitel 4) übergeben wird. Sie wird vom Testframework aufgerufen, sobald dieses den Test ausführt. Die anonyme Funktion enthält also den Code, der den eigentlichen Test ausmacht.

it("should be true", function() {
expect(1 + 1).toBe(2);
});

Listing 2.3: Anonyme Funktionen als Codeblöcke

2.2.2 Callbacks

Callbacks liefern einen weiteren Anwendungsfall für das Übergeben von Funktionen an andere Funktionen. Callback-Funktionen werden aufgerufen, sobald ein bestimmtes Ereignis auftritt. Einer fiktiven Funktion loadData könnten beispielsweise als Argumente ein URL als String, eine Success-Callback-Funktion success und eine Error-Callback-Funktion error übergeben werden. Sobald loadData die Daten erfolgreich vom angegebenen URL geladen hat, ruft sie success auf und übergibt die geladenen Daten. Wenn ein Fehler auftritt, ruft sie error auf und übergibt zum Beispiel einen Error-Code. Auch Callback-Funktionen werden häufig als anonyme Funktionsausdrücke übergeben. Listing 2.4 zeigt den Aufruf unserer fiktiven Funktion loadData mit zwei anonymen Funktionsausdrücken.

loadData("http://some.host:1234/some_path",
function(data) {
// do something with the loaded data...
}, function(errorCode) {
// handle error...
});

Listing 2.4: Anonyme Funktionsausdrücke als Callbacks

2.2.3 Methoden

Eine Funktion kann auch der Wert einer Objekt-Property sein. Diese Funktionen können dann als Methoden ihrer Objekte aufgerufen werden und haben in diesem Fall über den Bezeichner this Zugriff auf „ihr“ Objekt und damit auf dessen Properties. Der fiktive Code aus Listing 2.5 verdeutlicht dies.

var customer = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + this.lastName;
}
};
customer.fullName(); // -> John Doe

Listing 2.5: Funktionen als Methoden

Wichtig ist in diesem Zusammenhang, dass eine Funktion nur dann über this Zugriff auf „ihr“ Objekt hat, wenn sie als Methode aufgerufen wird. Wird eine Funktion beispielsweise als Callback-Funktion verwendet, so findet dieses Binding nicht statt. Der Code aus Listing 2.6 funktioniert daher nicht! Ein gebräuchliches Idiom zur Vermeidung dieses Fehlers ist das Speichern von this in einer lokalen Variablen, die dann meist self oder that benannt wird, siehe Listing 2.7.

var customer = {
contacts: [],
loadContacts: function() {
load(someUrl, function(result) {
this.contacts = result; // WON'T WORK!!!
});
}
};

Listing 2.6: Fehlerhafte Verwendung von „this“

var customer = {
contacts: [],
loadContacts: function() {
var self = this;
load(someUrl, function(result) {
self.contacts = result;
});
}
};

Listing 2.7: Korrekte Verwendung von „this“

2.2.4 Sofort ausgeführte Funktionsausdrücke

Anonyme Funktionen können auch in Form einer so genannten „Immediate Invoked Function Expression“ (IIFE) sofort ausgeführt werden. Dieses Konstrukt wird verwendet, um einen dedizierten Gültigkeitsbereich für die Deklaration von Variablen zu erzeugen und damit die „Verschmutzung“ des globalen Namensraums einer JavaScript-Laufzeitumgebung zu vermeiden. Listing 2.8 zeigt die Syntax einer IIFE. Die Anwendung wird im Abschnitt 2.4 beschrieben.

(function() {
// do something in a local function scope
})(); // will execute the anonymous function immediately

Listing 2.8: Syntax für einen sofort ausgeführten Funktionsausdruck

2.3 Namespaces

JavaScript verfügt über keine in der Sprachsyntax eingebauten Mechanismen zur Steuerung der Sichtbarkeit und Gültigkeit von Deklarationen. Die einzige Ausnahme ist der Function Scope. Variablen, die in einer Funktion deklariert werden, sind nur in dieser Funktion und in Funktionen, die innerhalb dieser Funktion definiert werden, sichtbar. Gleiches gilt für die Funktionen, die in einer Funktion definiert werden. Alles andere erweitert das globale Objekt, das eine JavaScript-Laufzeitumgebung einem Skript zur Verfügung stellt, und ist somit global sichtbar. Damit ist es eine Herausforderung, diesen globalen Namensraum nicht durch applikationsspezifische Objekte zu verschmutzen. Ein einfaches und weit verbreitetes Muster zur Lösung dieses Problems ist die Verwendung eines dedizierten Namespace-Objekts, das dann alle weiteren applikationsspezifischen Objekte aufnimmt. Für unsere Beispielapplikation könnten wir ein solches Namespace-Objekt einfach durch die Anweisung var rylc = {}; erzeugen. Wir müssen nur sicherstellen, dass diese Anweisung die erste applikationsspezifische Codezeile ist, die beim Laden der Applikation durch den Browser ausgeführt wird.

2.4 Module

Mithilfe sofort ausgeführter Funktionsausdrücke können wir eine einfache Form von Modulen implementieren, die nur bestimmte Objekte publik machen. Listing 2.9 verdeutlicht das an dem Beispiel eines Moduls utils, das über unser Namespace-Objekt rylc bestimmte Utility-Funktionen zur Verfügung stellt.

1 (function(rylc) {
2 // --- Private Implementation ---
3 function parseSimpleDate(dateAsString) {
4 // ...
5 }
6 function formatSimpleDate(Date) {
7 // ...
8 }
9 // more private stuff ...
10
11 // --- Public API ---
12 rylc.utils = {
13 parseSimpleDate: parseSimpleDate,
14 formatSimpleDate: formatSimpleDate
15 }
16 })(window.rylc);

Listing 2.9: Beispiel für ein einfaches JavaScript-Modul

Wir verwenden...

Blick ins Buch

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

Augenblick mal

Augenblick mal

Die Zeitschrift mit den guten Nachrichten "Augenblick mal" ist eine Zeitschrift, die in aktuellen Berichten, Interviews und Reportagen die biblische Botschaft und den christlichen Glauben ...

Card-Forum

Card-Forum

Card-Forum ist das marktführende Magazin im Themenbereich der kartengestützten Systeme für Zahlung und Identifikation, Telekommunikation und Kundenbindung sowie der damit verwandten und ...

Computerwoche

Computerwoche

Die COMPUTERWOCHE berichtet schnell und detailliert über alle Belange der Informations- und Kommunikationstechnik in Unternehmen – über Trends, neue Technologien, Produkte und Märkte. IT-Manager ...

Demeter-Gartenrundbrief

Demeter-Gartenrundbrief

Einzige Gartenzeitung mit Anleitungen und Erfahrungsberichten zum biologisch-dynamischen Anbau im Hausgarten (Demeter-Anbau). Mit regelmäßigem Arbeitskalender, Aussaat-/Pflanzzeiten, Neuigkeiten ...

rfe-Elektrohändler

rfe-Elektrohändler

rfe-Elektrohändler ist die Fachzeitschrift für die CE- und Hausgeräte-Branche. Wichtige Themen sind: Aktuelle Entwicklungen in beiden Branchen, Waren- und Verkaufskunde, Reportagen über ...

building & automation

building & automation

Das Fachmagazin building & automation bietet dem Elektrohandwerker und Elektroplaner eine umfassende Übersicht über alle Produktneuheiten aus der Gebäudeautomation, der Installationstechnik, dem ...