/
bibliotheken.html
187 lines (181 loc) · 15.1 KB
/
bibliotheken.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Bibliotheken und Frameworks</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="https://molily.de/">molily</a>. Derzeit ist sie noch lückenhaft, wächst aber nach und nach. Kommentare und Feedback werden gerne per <a href="mailto:molily@mailbox.org">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Bibliotheken und Frameworks</h1>
<div id='notizen' class='section'>
<h2>Notizen</h2>
<ul>
<li>
<a href='https://blog.selfhtml.org/2007/10/20/javascript-bibliotheken/'>JavaScript-Bibliotheken und die jüngere JavaScript-Geschichte</a>
</li>
<li>
<a href='https://blog.selfhtml.org/2008/09/04/thesen-javascript-gebrauch/'>Sieben Thesen zum gegenwärtigen JavaScript-Gebrauch</a>
</li>
<li>
<a href='https://wiki.selfhtml.org/wiki/JavaScript/Organisation_von_JavaScripten#Ausblick_auf_JavaScript-Frameworks'>Organisation von JavaScripten: Ausblick auf JavaScript-Frameworks</a>
</li>
</ul>
</div>
<div class='section' id='einfuehrung'>
<h2>Einführung</h2>
<p>Wie bei jeder Programmiersprache finden sich unzählige Fertigscripte und Codeschnipsel im Netz, die Sie in Ihren Programmen verwenden können und die spezifische Aufgaben lösen. Um solche Fertig- und Helferscripte soll es hier nicht gehen, sondern um Bibliotheken, die den Programmierstil grundlegend ändern können.</p>
<p>Die meisten Web-Programmiersprachen bringen die wichtigsten Funktionen schon mit und es gibt einen relativ festen Rahmen, der zentral weiterentwickelt wird. In JavaScript hingegen gibt es verschiedene Schnittstellen unterschiedlicher Herkunft, die zum Teil alles andere als einfach und intuitiv sind. Es gibt einflussreiche proprietäre Erweiterungen und selbst der Sprachkern ist in den verschiedenen Browsern unterschiedlich umgesetzt (siehe ). Für Standardaufgaben wie das Event-Handling gibt es in JavaScript kein verlässliches Fundament.</p>
<p>Sogenannte
<strong>Frameworks</strong> (englisch für Rahmenwerk, Grundstruktur) kaschieren diese chaotische Situation, indem sie eine Abstraktionschicht über JavaScript legen. Ziel ist es, dass grundlegende Aufgaben des
<em>DOM Scripting</em> nicht immer wieder von Hand mit viel Aufwand erledigt werden müssen. Anstatt z.B. direkt mit dem DOM zu arbeiten, führen Frameworks einige Objekte und Methoden als Abstraktionsschicht ein. Diese sind einfacher und intuitiver zu bedienen und nehmen dem Webautor einen Großteil der Arbeit ab.
</p>
<p>Heutige Frameworks setzen auf Vereinfachungen unter anderem in folgenden Bereichen:</p>
<ol>
<li>
<strong>Arbeiten mit dem DOM-Elementbaum:</strong>
<ol>
<li>Effizientes Ansprechen von Elementen im Dokument z.B. über CSS-artige Selektoren</li>
<li>Durchlaufen und Durchsuchen von Elementlisten nach bestimmten Kriterien</li>
<li>Einfaches Ändern des DOM-Baumes, Einfügen von neuen Elementen und Textinhalten</li>
<li>Zuverlässiges Auslesen und Setzen von Attributen</li>
</ol>
</li>
<li>
<strong>Event-Handling:</strong>
<ol>
<li>Aufrufen von Initialisierungs-Funktionen, sobald der DOM-Baum verfügbar ist, um dem Dokument die gewünschte Interaktivität
hinzuzufügen
</li>
<li>Registrieren und Entfernen von Event-Handlern sowie die Kontrolle des Event-Flusses</li>
<li>Browserübergreifender Zugriff auf Event-Eigenschaften wie die Mausposition und gedrückte Tasten</li>
</ol>
</li>
<li>
<strong>Darstellung abfragen und beeinflussen:</strong>
<ol>
<li>Auslesen und Ändern der CSS-Eigenschaften von Elementen</li>
<li>Hinzufügen und Entfernen von Klassen</li>
<li>Animationen und Effekte, Wiederholungen und Verzögerungen</li>
<li>Zugriff auf die Eigenschaften des sogenannten
<em>Viewports</em> (der rechteckige Raum, in dem die Webseite dargestellt wird), der Position sowie der Ausmaße eines Elements
</li>
</ol>
</li>
<li>Vereinfachtes Arbeiten mit <strong>Formularen</strong></li>
<li>
<strong>Ajax</strong>: Kommunikation mit dem Webserver, um Daten zu übertragen oder nachzuladen, ohne das Dokument zu wechseln (<code>XMLHttpRequest</code>)
</li>
<li>Strukturierte und
<strong>objektorientierte Programmierung</strong>, Modulverwaltung
</li>
</ol>
<p>Dies ist nur eine Auswahl der wichtigsten Bereiche, sodass Sie einen Einblick bekommen, an welchen Stellen die meisten Frameworks Vereinfachungen anbieten. Darüber hinaus bieten viele Frameworks freilich noch weitere Funktionen an, z.B. Bedienelemente (englisch <em>Controls</em> oder <em>Widgets</em>) für JavaScript-Webanwendungen.</p>
</div>
<div id='vorteile-nachteile' class='section'>
<h2>Vor- und Nachteile von Frameworks</h2>
<p>In letzter Zeit ist gleichsam ein Hype um Frameworks zu verzeichnen. Ihr Einsatz ist oft mit überzogenen Erwartungen und Missverständnissen verbunden. Diese sollen im Folgenden kritisch beleuchtet werden.</p>
<p>Frameworks sollten hier weder verteufelt noch vergöttert werden. Ihre Anwendung ist nämlich ein zweischneidiges Schwert:</p>
<dl>
<dt>Frameworks helfen Anfängern, setzen aber JavaScript-Grundkenntnisse voraus</dt>
<dd>Frameworks legen ein Abstraktionsschicht über die Browserunterschiede, vereinheitlichen den Flickenteppich von schwer zu bedienenden Schnittstellen und bieten Helferfunktionen an. Das kann Webautoren viel Arbeit abnehmen und vor allem Unerfahrenen dabei helfen, sich in der unübersichtlichen JavaScript-Welt zurechtzufinden.</dd>
<dd>Sie sollten jedoch nicht darauf hoffen, dass Frameworks das Schreiben von JavaScript ohne JavaScript-Kenntnisse ermöglichen! Frameworks nehmen Ihnen nicht das Verständnis der Grundlagen ab, sondern setzen diese stillschweigend voraus. Frameworks können Ihnen in gewissen Punkten helfen und Vorgaben machen, an vielen Stellen sind sie jedoch weiterhin auf Ihre eigenen Programmierfähigkeiten angewiesen.
</dd>
<dt>Abstraktion hat Vor- und Nachteile</dt>
<dd>Die Abstraktionsschicht verbirgt die internen Vorgänge und gibt vor, einen schnellen Einstieg in eine schwierige Materie zu ermöglichen. Es ist in vielen Fällen jedoch unverzichtbar, die interne Arbeitsweise zu kennen. Hier gilt: Wenn Sie die Aufgaben schon einmal ohne Framework von Hand gelöst haben bzw. die Lösungsansätze kennen, stehen Sie nicht im Regen, wenn die Abstraktion in der Praxis nicht mehr greifen sollte.</dd>
<dt>Frameworks stecken voller Know-How und eine effiziente Anwendung erfordert Profiwissen</dt>
<dd>Frameworks setzen Programmiertechniken ein, die dem gemeinen JavaScript-Programmierer meist unbekannt sind. Die ausgiebige Nutzung von Frameworks läuft zudem immer wieder darauf hinaus, dass Sie in deren Code schauen müssen, um gewisses Verhalten zu verstehen. Das Nachvollziehen dieses anspruchsvollen Codes erfordert wiederum fortgeschrittenes JavaScript-Wissen.</dd>
<dd>Dass die heutigen Frameworks in einer bestimmten Weise aufgebaut sind, ist das Resultat eines langen Entwicklungsprozesses. Wenn Sie die ausgeklügelten Techniken der Frameworks einsetzen möchten, kommen Sie nicht umhin, diese Entwicklung nachzuvollziehen.</dd>
<dt>Frameworks <em>können</em> den Stil entscheidend verbessern</dt>
<dd>Mit verschiedenen Frameworks ist ein hochentwickelter Programmierstil möglich. Sie betonen vernachlässigte JavaScript-Fähigkeiten wie die funktionale und objektorientierte Programmierung. Zudem bringen sie bewährte Konzepte aus anderen Sprachen in die JavaScript-Welt.</dd>
<dd>Auch hier gilt: Um diese Möglichkeiten auszureizen, müssen Sie sich intensiv mit den dahinterstehenden Konzepten auseinandersetzen. Alleine durch den Einsatz eines Frameworks wird ihr Code nicht automatisch eleganter, strukturierter oder kompatibler - Frameworks können Ihnen aber entscheidende Hinweise geben.</dd>
<dt>Dokumentationen sind größtenteils unzureichend</dt>
<dd>Sie sollten die Herausforderung nicht unterschätzen, die Schnittstelle eines Frameworks zu überblicken und zu verstehen. Die verbreiteten Frameworks bieten leider wenig gute Dokumentation und Anleitungen, die Ihnen die jeweiligen Grundideen vermitteln.</dd>
</dl>
<p>Ausgehend von diesen Beobachtungen sei Ihnen folgender Umgang mit Frameworks empfohlen:</p>
<ol>
<li>Lernen Sie auf jeden Fall die
<strong>Grundlagen von JavaScript</strong>! Dabei werden Sie die Schwierigkeiten der Praxis kennenlernen und eine Eindruck davon bekommen, wo Frameworks ansetzen.
</li>
<li>Entwickeln Sie zunächst
<strong>eigene kleine Bibliotheken</strong>, indem Sie ständig wiederholte Vorgänge in Helferfunktionen auslagern. Frameworks sind der Versuch, solch lose Helferfunktionen zu einer neuen, einheitlichen Schnittstelle zusammenzufassen.
</li>
<li>Lernen Sie eine verbreitetes Framework und dessen typischen Programmiertechniken kennen. Verschaffen Sie sich einen Überblick über den grundlegenden Funktionsumfang, sodass Sie bekannte Aufgaben mithilfe des Frameworks schneller umsetzen können. Entwickeln Sie anfangs kleine Scripte mithilfe des Frameworks und versuchen Sie, dabei die Möglichkeiten des Frameworks auszureizen.</li>
<li>Wenn Sie tiefer in die JavaScript-Programmierung einsteigen wollen, informieren Sie sich über die Konzepte der verschiedenen Frameworks, ihre Unterschiede und Grenzen.</li>
</ol>
</div>
<div id="eigene-bibliothek" class="section">
<h2>Eigene Bibliotheken zusammenstellen</h2>
<p>Bei den verbreiteten Frameworks ist zu beobachten, dass viele Anwender den Funktionsumfang nicht ausnutzen, sondern gerade einmal von drei oder vier gesonderten Funktionen Gebrauch machen. Die begrüßenswerten Innovationen haben die Anwender größtenteils noch nicht erreicht. Das liegt zum einen an den besagten fehlenden Dokumentationen, zum anderen an der Komplexität und fehlenden Modularisierbarkeit. Heraus kommt ein Code, bei dem Framework-Logik und herkömmlichen Lösungsweisen vermischt werden. Dieses Kauderwelsch ist inkompatibel, schwer verständlich und schlecht wartbar.</p>
<p>Es ist deshalb nicht immer klug, ein vorgefertigtes, umfangreiches Framework zu nehmen, von dem der größte Teil unverstanden ist. Setzen Sie diejenigen Hilfsmittel ein, die sie verstehen und beherrschen. Sie können Sie Ihre JavaScript-Programmierung bereits entscheidend vereinfachen, indem Sie <strong>punktuell Helferscripte einsetzen</strong>. Diese Scripte helfen dabei, häufige Aufgaben umzusetzen und gängige Probleme zu lösen. In der Regel sind sie leichter verständlicher und erfordern wenig Einarbeitung.</p>
<p>Im Folgenden werden Bausteine kurz vorgestellt, aus denen Sie sich eine eigene Bibliothek zusammenstellen können. Diese Vorstellung ist auch gleichzeitig ein Einstieg in die Funktionsweise der »großen« Frameworks.</p>
<div class="section">
<h3>»Scripting Essentials« von Dan Webb</h3>
<p>Diese Zusammenstellung von Helferfunktionen ist ein gutes Beispiel dafür, wie bereits ein paar gezielte Funktionen die Programmierung
vereinfachen und verbessern können. Dan Webb nennt sie seine <a href="http://www.danwebb.net/2007/1/10/scripting-essentials" lang="en">Scripting Essentials [en]</a>. <a href="http://www.danwebb.net/assets/2007/1/11/micro.js" class="anchor-external-file">Code herunterladen</a>. Das Script umfasst folgende Teile:</p>
<dl>
<dt>Verbessertes Arbeiten mit Listen (Arrays, Knotenlisten, Strings usw.)</dt>
<dd>Das Script fügt allen Arrays neue Methoden hinzu, die in Mozillas JavaScript-Spezifikation 1.6 definiert werden, aber noch nicht browserübergreifend umgesetzt werden. Mit diesen Methoden lassen sich alle möglichen Listen einfach durchlaufen, durchsuchen und Funktionen auf jedes Listenelement anwenden. Zudem stehen die Methoden für alle listenartige Objekttypen zur Verfügung, z.B. DOM-Knotenlisten und Strings.</dd>
<dt>Funktionen zum Ansprechen von Elementen nach ID und Klasse</dt>
<dd>Das Script definiert Funktionen mit den Kurznamen <code>$</code> bzw. <code>$$</code>. Mit der ersten lassen sich Elemente anhand ihrer ID, mit der zweiten anhand einer Klasse ansprechen. Mit langen Namen könnten Sie <code>getElementsById</code> und <code>getElementsByClassName</code> heißen.</dd>
<dt>Browserübergreifendes Event-Handling</dt>
<dd>Mithilfe der Funktionen <code>Event.add</code> und <code>Event.remove</code> können Sie komfortabel Event-Handler registrieren und entfernen. Die wichtigsten Browserunterschiede beim Event-Handling werden nivelliert.</dd>
<dt>…</dt>
<dd>…</dd>
</dl>
<p>…</p>
<div class="section">
<h3>forEach von Dean Edwards</h3>
<p>http://dean.edwards.name/weblog/2006/07/enum/</p>
<p>ist eine Enumeration-Funktion für unterschiedliche Objekttypen</p>
</div>
<div class="section">
<h3>DOMhelp von Christian Heilmann</h3>
<p>http://www.beginningjavascript.com/DOMhelp.js</p>
<p>ist ein Sammlung von Helferfunktionen aus Christian Heilmanns Buch »Beginning JavaScript with DOM Scripting and Ajax«.</p>
</div>
<div class="section">
<h3>Struktur zur Verkettung eigener Helferfunktionen von Dustin Diaz</h3>
<p>http://www.dustindiaz.com/roll-out-your-own-interface/</p>
<p>Dustin Diaz zeigt, wie man sich eine eigenes kleines Framework im $(…)-Stil zusammenstellt.</p>
</div>
<div class="section">
<h3>ffjs von Sven Helmberger</h3>
<p>http://fforw.de/ffjs/</p>
<p>minimalistische Bibliothek</p>
</div>
</div>
</div>
<div id="grosse-frameworks" class="section">
<h2>Verbreitete Frameworks</h2>
<p>…</p>
<p>Hier ist eigentlich nur interessant, diese drei beispielhaft vorzustellen und auf deren unterschiedliche Konzepte hinzuweisen.</p>
<p>mootools ist sehr prototype-like, dojo hat Namespaces wie YUI</p>
<div class="section">
<h3>jQuery</h3>
</div>
<div class="section">
<h3>Prototype</h3>
</div>
<div class="section">
<h3>Yahoo! User Interface Library (YUI)</h3>
</div>
</div>
<div class="sequence-navigation">
<p class="next"><a href="organisation-ueberblick.html" rel="next">Organisation von JavaScripten: Voraussetzungen und Überblick</a></p>
<p class="prev"><a href="ajax.html" rel="prev">Serverkommunikation und dynamische Webanwendungen (Ajax)</a></p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="https://molily.de/">molily</a> · Kontakt: <a href="mailto:molily@mailbox.org">molily@mailbox.org</a></p>
<p>Lizenz: <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0</a></p>
<p><a href="https://github.com/molily/javascript-einfuehrung">JavaScript-Einführung auf Github</a></p>
<p>Kostenloses Online-Buch und E-Book:<br><a href="https://testing-angular.com" lang="en" hreflang="en">Testing Angular – A Guide to Robust Angular Applications</a> (englisch)</p>
</div>
<script src="js-doku.js"></script>
</body>
</html>