Reihe
Grundlagen für alle, die aus dem Backend ins Frontend kommen oder JavaScript an ein paar Stellen genauer verstehen wollen: der Aufbau eines Frontend-Projekts, this, bind, call und apply, Prototypen und die package.json.
Für Entwickler:Innen, die nicht im Frontend aktiv sind, sich aber zumindest einen Überblick dort verschaffen wollen.
In diesem Artikel möchte ich einen ersten Überblick über ein typisches Frontend-Projekt geben und dabei helfen, sich dort etwas zu orientieren. Auch wenn man seinen Schwerpunkt in anderen Bereichen der Anwendung sieht, kommt man hin und wieder nicht am Frontend vorbei. Glücklicherweise gibt es hier ein paar Standards, an denen man sich orientieren kann.
Wir sehen uns also an wie man eine bestehende Frontend-Anwendung lokal einrichtet und dann auch starten, testen oder bauen kann. Bei allen Schritten besteht die Gefahr, dass es natürlich gerade im jeweiligen Projekt etwas anders gelöst wurde. In vielen Fällen kann man das sicher diskutieren, aber wir gehen mal davon aus, dass die Entwickler sich dabei was gedacht haben. Sollte Euer Projekt also davon abweichen, was ich hier schreibe, müsst ihr wohl mal bei den Kolleg:Innen nachfragen.
Gerade als ich mit JavaScript losgelegt habe, habe ich versucht this in meinem Code zu vermeiden. Ich sage nur undefined is not a function. Zu beliebig wirkte das Verhalten, verglichen mit anderen Sprachen, die ich damals kannte.
Da ich immer mal wieder gefragt werde, wie das Ganze denn funktioniert, dachte ich mir, ich schreibe es hier mal zusammen.
In meinem letzten Beitrag habe ich bewusst noch ein paar Dinge unterschlagen, die im Umgang mit this hilfreich sein können: bind, apply und call. Zum einen war der Artikel schon gefühlt lang genug und außerdem nutze ich die drei Methoden (so gut wie) nie. Da mich Tobias aber darauf hingewiesen hat, hole ich das Ganze hier nach.
Für diesen Blog möchte ich ein paar Dinge aus dem JavaScript Umfeld zusammenfassen, die mir immer wieder begegnen und stellenweise auch mal für Probleme sorgen. Prototypen sind etwas, dass immer mal wieder für Verwirrung sorgt und hier möchte ich versuchen, dass ganze verständlich zu erklären.
JavaScript ist eine prototypenbasierte Programmiersprache. Das bedeutet also zunächst, dass JavaScript Objektorientierung unterstützt. Laut Definition allerdings eine "ohne Klassen" (was nicht stimmt, mehr dazu später im Artikel).
Während in anderen Programmiersprachen Objekte durch die Instanziierung einer Klasse erzeugt werden (x = new Foo("bar")), wird in prototypenbasierten ein Objekt durch das Klonen eines bereits existierenden Objekts instanziiert. Klonen bedeutet, dass der Klon alle Eigenschaften des Originals hat und nutzen kann.
Vor einiger Zeit habe ich eine Einführung in ein Standard-Frontend-Projekt gegeben und dabei mit Blick auf die package.json einige Dinge etwas vereinfacht. In diesem Beitrag möchte ich daher einige dieser Details genauer zeigen. Übrigens: zu diesem Thema habe ich vor ein paar Jahren auch etwas im Blog der codecentric geschrieben. Der Artikel ist größtenteils noch aktuell und wird durch diesen Beitrag ergänzt.