Dies ist ein Leitfaden, der Entwicklern beim Einstieg in JavaScript helfen soll und erfahrenen Entwicklern mit Best-Practices helfen soll.
Trotz des Namens steht dieser Leitfaden nicht für "den einzigen Weg", den man mit JavaScript gehen kann.
Wir sammeln lediglich all diese Artikel, Tipps und Tricks von namhaften Entwicklern und fügen sie hier ein. Da sie von ausgezeichneten Leuten stammen, können wir sagen, dass es "der richtige Weg" oder der beste Weg ist.
Erstellt von Netscape im Jahre 1995 als eine Erweiterung von HTML für den Netscape Navigator 2.0, waren die grundlegenden Funktionen von JavaScript die Manipulation von HTML-Dokumenten und die Formularvalidierung. Bevor der Name zu seinem heutigen Bekanntheitsgrad gelangt ist, wurde JavaScript früher Mocha genannt. Als zunächst Beta-Versionen davon erschienen sind, wurde es offiziell LiveScript gennant und schließlich, als es von Sun Microsystems veröffentlicht wurde, hat es den heutigen Namen angenommen. Wegen der ähnlichen Namen, wird JavaScript oft mit Java verwechselt. Obwohl beide die lexikalische Struktur einer Programmiersprache haben, handelt es nicht um dieselbe Programmiersprache. Anders als C, C# und Java, ist JavaScript eine interpretierte Programmiersprache. Sie braucht also einen "Interpreter". Im Fall von JavaScript, ist der Browser der Interpreter.
Der JavaScript-Standard ist ECMAScript. Nach dem Stand von 2012 unterstützen alle modernen Browser ECMAScript 5.1 vollständig. Ältere Browser unterstützen zumindest ECMAScript 3. Nach dem Stand vom Juni 2015 wurde die Spezifikation für ES6/ES2015 verabschiedet. Die ECMAScript 2015 Spezifikation ist verfügbar auf Ecma International.
Eine gute Sammlung für Versionen, Referenzen und Neuigkeiten über JavaScript findet man im Mozilla Developer Network.
Das Document Object Model (DOM) ist eine API für HTML- und XML-Dokumente. Es liefert eine strukturelle Representation des Dokuments. Damit ist es möglich, den Inhalt und die visuelle Präsentation des Dokuments mit einer Skriptsprache wie JavaScript zu verändern. Erfahre mehr unter Mozilla Developer Network - DOM.
Auch JavaScript hat, so wie jede Programmiersprache, viele unterschiedliche Leitfäden für den Code-Style. Der womöglich am meisten verwendete und weiterempfohlene ist der Google Code-Style-Guide für JavaScript, aber wir empfehlen dir Idiomatic.js zu lesen.
Mittlerweile hat sich als Tool für die Code-Analyse (Linting) von JavaScript-Code JSHint bewährt. Wir empfehlen euch, euren Code-Style und Entwurfsmuster durchgehend mit einem Lint-Tool zu überprüfen.
JavaScript hat große Möglichkeiten für objektorientierte Programmierung auch wenn es einige Diskussionen bezüglich der Unterschiede von objektorientierten JavaScript zu anderen Programmiersprachen gegeben hat.
Quelle: Einführung in objektorientiertes JavaScript
Anonyme Funktionen sind Funktionen, die dynamisch zur Laufzeit deklariert werden. Sie werden anonyme Funktionen genannt, weil ihnen im Gegensatz zu normalen Funktionen kein Name vergeben wird.
Quelle: JavaScript anonymous functions
Funktionen sind in JavaScript First-Class-Objekte. Das bedeutet, dass JavaScript-Funktionen einfach nur ein spezieller Typ von Objekten sind, die wie normale Objekte behandelt werden.
Quelle: Functions are first class objects in JavaScript
Viele Frontend-Entwickler haben ihre erste Erfahrung mit einer Skript- und/oder interpretierten Sprache mit JavaScript gemacht. Für jene Entwickler mag das Konzept und die Folgen von Variablen mit "loose typing" eher zweiter Natur sein. Jedoch hat der rasant steigende Bedarf nach modernen Webapplikationen zur Folge, dass viele Backend-Entwickler in clientseitige Technologien eintauchen. Viele von ihnen kommen aus einem Bereich, in dem Sprachen mit "strong typing" wie z.B. C# oder Java verbreitet sind und sind daher nicht vertraut mit der Freiheit und zugleich den möglichen Fallstricken, die das Arbeiten mit "loose typing" mit sich bringen.
Quelle: Understanding Loose Typing in JavaScript
Scoping: In JavaScript sind Funktionen unsere de facto Trennzeichen von Gültigkeitsbereichen (Scopes) für das Deklarieren von Variablen, was wiederum bedeutet, dass die üblichen Blöcke von Schleifen und Bedingungen (wie if, for, while, switch und try) keinen neuen Gültigkeitsbereich (Scope) erzeugen wie in vielen anderen Sprachen. Daher teilen sich diese Blöcke denselben Gültigkeitsbereich wie die Funktion, von der sie umgeben werden. Auf diese Weise kann es gefährlich sein, Variablen innerhalb von Blocks zu definieren, weil es so scheinen mag, als ob die Variable nur zu dem Block gehöre.
Hoisting: Während der Laufzeit werden alle Variablen- und Funktionen-Deklarationen an den Beginn jeder Funktion (ihren Gültigkeitsbereich) gestellt - dieses Verfahren ist als "Hoisting" bekannt. Vor diesem Hintergrund ist es eine gute Praxis, Variablen allesamt in der ersten Zeile zu deklarieren, um falschen Erwartungen mit Variablen vorzubeugen, die später deklariert wurden, aber bereits vorher einen Wert beinhalten. Für viele Entwickler, die aus einer Sprache mit blockweisen Gültigkeitsbereichen kommen, ist dies ein häufiger Fallstrick.
Quelle: JavaScript Scoping and Hoisting
Die Bindung von Funktionen ist sehr wahrscheinlich das kleinste Problem beim Einstieg in JavaScript. Wenn man jedoch eine Lösung für das Problem sucht, wie man den Kontext vom Schlüsselwort this in einer anderen Funktion beibehält, dann wird man wahrscheinlich auf Function.prototype.bind() kommen.
Quelle: Understanding JavaScript’s Function.prototype.bind
Closures sind Funktionen, die auf unabhängige (freie) Variablen verweisen. In anderen Worten: Die Funktion, welche innerhalb einer Closure definiert wurde, merkt sich, in welcher Umgebung sie erstellt wurde. Dies ist ein wichtiges Konzept, welches man verstehen sollte, weil es während der Entwicklung hilfreich sein kann, um bspw. private Methoden zu emulieren. Es kann ebenfalls dabei helfen, häufige Fehler zu vermeiden, wie bspw. Closures in Schleifen zu erstellen.
Quelle: Closures (Funktionsabschlüsse)
ECMAScript 5's strikter Modus (Strict Mode) ist eine Möglichkeit, um eine etwas eingeschränktere Variante von JavaScript zu betreten. Der strikte Modus ist nicht einfach nur ein untergeordneter Modus: er hat absichtlich eine andere Semantik als normaler Code. Bei Browsern, die den strikten Modus nicht unterstützen, wird sich Code im strikten Modus anders verhalten als bei Browsern mit Unterstützung. Daher sollte man sich nicht auf den strikten Modus verlassen, ohne die relevanten Aspekte des Modus auf die Unterstützung der entsprechenden Features zu testen. Es kann auch neben Code für den strikten Modus zusätzlich noch Code für den nicht-strikten Modus existieren, damit Skripte bei Möglichkeit den strikten Modus verwenden können.
Quelle: Strict Mode
Ein unmittelbar aufgerufener Funktionsausdruck (Immediately-Invoked Function Expression - IIFE) ist ein Muster, welches einen lexikalischen Gültigkeitsbereich mittels einer JavaScript-Funktion erzeugt. Diese Ausdrücke können dazu genutzt werden, das Hoisting von Variablen innerhalb eines Blocks zu verhindern, sich gegen das Zumüllen der globalen Umgebung zu schützen und zeitgleich öffentlichen Zugang zu Methoden zu schaffen, während die Variablen nur innerhalb ihrer Funktion aufgerufen werden können, also privat bleiben.
Dieses Muster wurde oft als selbstausführende anonyme Funktion (self-executing anonymous function) bezeichnet, jedoch hat @cowboy (Ben Alman) den Begriff IIFE als semantisch passenderen Begriff für das Muster eingeführt.
Während JavaScript einige exklusive Entwurfsmuster besitzt, können viele klassische Entwurfsmuster ebenfalls implementiert werden.
Ein guter Weg, mehr darüber zu erfahren, ist Addy Osmani’s frei erhältliches Buch "Learning JavaScript Design Patterns", auf dem die meisten der unten aufgelisteten Links basieren.
Creational Design Patterns
Structural Design Patterns
Behavioral Design Patterns
Verschiedene Bibliotheken und Frameworks, um Tests in JavaScript auszuführen.
wird gewartet von TJ Holowaychuk
wird gewartet von jQuery
wird gewartet von Pivotal Labs
wird gewartet von dem Team hinter AngularJS. Am meisten durch Vojta Jina
wird gewartet von Sitepen
Ein JavaScript Code-Coverage-Tool, geschrieben in JavaScript. Wird gewartet von Krishnan Anantheswaran
Eigenständige Test-Spies, Stubs und Mocks für JavaScript. Keine Abhängigkeiten, funktioniert mit beliebigen Unit-Test-Frameworks. Erstellt von der Sinon.JS Community
Ein Test-Helferlein, um Mocks von Funktionen und dem XHR-Objekt zu erstellen, gewartet von Leo Balter
Test Runner mit asynchronen Tests, gewartet von Sindre Sorhus
Painless JavaScript Testing, maintained by Facebook
jQuery ist eine schnelle, kleine und featurereiche JavaScript-Bibliothek. Erstellt von John Resig.
Erstellt von Yahoo!, YUI ist eine freie, quelloffene JavaScript- und CSS-Bibliothek für die Erstellung von interaktiven Webanwendungen. Die Weiterentwicklung wurde seit dem 29. August 2014 gestoppt..
Zepto ist eine minimalistische Javascript-Bibliothek für moderne Browser mit einer weitestgehend jQuery-kompatiblen API. Wenn du bereits jQuery verwendest, weißt du bereits, wie man Zepto benutzt.
Dojo ist ein freies, quelloffenes JavaScript-Toolkit zum Erstellen von hochperformanten Webanwendungen. Projektsponsoren umfassen unter anderem IBM und SitePen.
Underscore.js ist eine JavaScript-Bibliothek, die unterschiedlichste hilfreiche und funktionale Programmhelferlein bietet, ohne die eingebauten Objekte zu verändern.
Sehr beliebtes clientseitiges JavaScript-Framework, erstellt von @jashkenas.
Erstellt von @wycats, jQuery und den Ruby on Rails-Hauptentwicklern.
Vereinfacht dynamische JavaScript-UIs, indem es dem Model-View-View Model (MVVM)-Schema folgt.
Erstellt von Google, Angular.js ist eine Art Polyfill für die Zukunft von HTML.
Ein framework.Mobile & desktop. Eine Möglichkeit, Anwendungen mit Angular zu erstellen und Ihren Code und Fähigkeiten zu verwenden, um Anwendungen für jedes Deployment-Ziel zu erstellen. Für Web, mobiles Web, native mobile und native Desktop.
Cappuccino ist ein quelloffenes Framework, welches die Erstellung von Desktop-Caliber-Anwendungen, die im Webbrowser laufen, vereinfacht.
JavaScriptMVC ist ein quelloffenes Framework, welches die besten Ideen aus der jQuery-Entwicklung beinhaltet.
Meteor ist eine quelloffene Plattform zum Erstellen von qualitativ hochwertigen Web-Apps in kürzester Zeit, egal ob du ein erfahrerener Entwickler bist oder gerade erst angefangen hast.
Spice ist ein extrem minimales (< 3k) und flexibles MVC-Framework für JavaScript. Spice kann leicht in bestehende Anwendungen integriert werden und arbeitet gut mit anderen Technologien wie jQuery, pjax, turbolinks, node oder womit auch immer du arbeitest, zusammen
Riot ist eine unglaublich schnelle, mächtige und zugleich kleine clientseitige (MV*) Bibliothek zum Erstellen von umfangreichen Webanwendungen. Trotz der kleinen Größe sind alle wichtigen Bausteine vorhanden: eine Template-Engine, ein Router, eine Event-Bibliothek und ein striktes MVP-Muster, um Dinge organisiert zu halten.
CanJS ist ein JavaScript-Framework, welches die Entwicklung von komplexen Anwendungen einfach und schnell macht. Einfach zu erlernen, klein und eine flexible Anwendungsstruktur, dazu moderne Features wie Custom Tags und Two-Way-Binding.
Erstellt von Facebook. React ist eine JavaScript-Bibliothek zum Erstellen von User Interfaces von Facebook und Instagram. React wird von vielen als das V in MVC angesehen.
Handlebars bietet die Mächtigkeit, semantische Templates effektiv ohne Frust zu erstellen.
Asynchrone Templates für den Browser und node.js.
Asynchronous templates for the browser and node.js.
Velocity ist eine Animations-Engine mit derselben API wie jQuerys $.animate().
Bounce.js ist ein Werkzeug und eine JS-Bibliothek, mit dem man schöne CSS3 getriebene Animationen erstellen kann.
Eine einfache aber mächtige JavaScript-Bibliothek für das Animieren und Tweenen von HTML5- und JavaScript-Objekten.
Move.js ist eine kleine JavaScript-Bibliothek, die das Erstellen von CSS3 getriebenen Animationen extrem einfach und elegant macht.
SVG ist ein ausgezeichneter Weg, um interaktive, auflösungsunabhängige Vektorgrafiken zu erstellen, die auf allen Bildschirmgrößen gut aussehen.
Rekapi ist eine Bibliothek zum Erstellen sowohl von Canvas- und DOM-Animationen mit JavaScript als auch von CSS @keyframe-Animationen für moderne Browser.
Mach Gebrauch von deinem Favicon mit Badges, Bildern oder Videos.
Textillate.js kombiniert einige geniale Bibliotheken, um ein einfach zu verwendendes Plugin zum Zuweisen von CSS3-Animationen zu jeglichen Texten zur Verfügung zu stellen.
Motio ist eine kleine JavaScript-Bibliothek für einfache aber umfangreiche auf Sprites basierende Animationen und Panning.
Mit Anima ist es einfach, mehr als hundert Objekte zur selben Zeit zu animieren. Jedem Element kann eine Masse und Viskosität zugewiesen werden, um reale Objekte zu emulieren.
With Anima it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate reallife objects!
MelonJS ist eine freie, leichtgewichtige HTML5 Spiele-Engine. Die Engine verwendet ein tiled Map-Format, welches das Leveldesign vereinfacht.
ImpactJS ist eine der eher länger bewährten HTML5 Spiele-Engines, deren erste Veröffentlichung bis Ende 2010 zurückreicht. Sie wird sehr gut gewartet und regelgemäßig geupdatet und hat eine große Community, die sie unterstützt. Es existieren sowohl umfangreiche Dokumentationen als auch zwei Bücher zum Thema Spieleentwicklung mit dieser Engine.
LimeJS ist ein HTML5 Spiele-Framework zum Erstellen von schnellen, native-experience Spielen für alle modernen Touchscreens und Desktop-Browser.
Crafty ist eine Spiele-Engine, welche von Ende 2010 stammt. Crafty ermöglicht einen einfachen Einstieg in das Erstellen von JavaScript-Spielen.
Cocos2d-HTML5 ist ein quelloffenes 2D Web-Spiele-Framework, veröffentlicht unter der MIT Lizenz. Es ist eine HTML5-Version von dem Cocos2d-x Projekt. Das Ziel der Cocos2d-HTML5- Entwicklung ist, Cocos2d plattformunabhängig von Browsern und nativen Anwendungen zu machen.
Phaser basiert stark auf Flixel. Es wird gewartet von Richard Davey (Photon Storm), der in der HTML5-Community bereits seit Jahren sehr aktiv ist.
Goo ist eine 3D JavaScript-Spiele-Engine, die komplett auf WebGL/HTML5 aufbaut.
LycheeJS ist eine JavaScript-Spiele-Bibliothek, die eine Komplettlösung für das Prototyping und die Entwicklung von HTML5 Canvas, WebGL oder nativen OpenGL(ES) basierten Spielen innerhalb des Browsers oder einer nativen Umgebung bietet.
Quintus ist eine HTML5-Spiele-Engine, die einen modularen und leichtgewichtigen Ansatz mit einer prägnanten JavaScript-freundlichen Syntax verfolgt.
Kiwi.js ist eine lustige und freundliche quelloffene HTML5-Spiele-Engine. Manche bezeichnen es als WordPress der HTMl5-Spiele-Engines.
Panda.js ist eine HTML5-Spiele-Engine mit Canvas und WebGL-Rendering für mobile Endgeräte und für den Desktop.
Rot.js ist eine Sammlung von JavaScript Bibliotheken, die einen bei der Rogue-like Entwicklung in der Browserumgebung unterstützen soll.
Isogenic is an advanced game engine that provides the most advanced networking and realtime multiplayer functionality available in any HTML 5 game engine. The system is based on entity streaming and includes powerful simulation options and client-side entity interpolation from delta updates.
Super-fast 3D framework for Web Applications & Games. Based on Three.js. Includes integrated physics support and ReactJS integration.
von Quildreen Motta
von Yehuda Katz
von Scott Allen
von Ben Alman
von Nico Bevacqua
von Viljami S.
von Ju Gonçalves
von Marijn Haverbeke
von David Flanagan
von Stoyan Stefanov
von James Coglan
von Henrik Joreteg
von Stoyan Stefanov
von Dustin Diaz
von Addy Osmani
von John Resig
von Nicolas Bevacqua
von Axel Rauschmayer
von >Kyle Simpson
von Ryan Burgess
von Ivo Wetzel
von David Herman
von Michael Fogus
von Axel Rauschmayer
von DevFreeBooks
Dieses Projekt wäre ohne die Hilfe von diesen großartigen Personen nicht zustande gekommen. Vielen Dank, dass ihr es ermöglicht!
JavaScript: Der richtige Weg von William Oliveira.
Lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell 4.0 International Lizenz.
Basierend auf der Arbeit an http://jstherightway.org.
William Oliveira
Allan Esquina