Ein Minimales JavaScript-Setup

0
17

Einige Leute bevorzugen es zu schreiben, mit JavaScript Reagieren. Für andere, es ist Vue oder jQuery. Für andere noch, es ist Ihre eigene Reihe von tools oder ein komplett leeres Dokument. Einige setups sind minimal, einige ermöglichen es Ihnen, Dinge zu erledigen schnell und einige sind verrückt, leistungsstark, so dass Sie erstellen Sie komplexe und wartbare Anwendungen. Jedes setup hat vor-und Nachteile, aber das positive überwiegt die negative, wenn es um beliebte frameworks verifiziert und geprüft durch eine aktive community.

Reagieren und Vue sind leistungsfähige JavaScript-frameworks. Natürlich sind Sie — das ist der Grund, warum beide Trends sind so hoch in der Allgemeinen Verwendung. Aber was macht diese und andere Rahmenbedingungen, so mächtig? Ist es die Geschwindigkeit? Die übertragbarkeit auf andere Plattformen wie desktop und mobile? Support von der community?

Der Erfolg einer team-Entwicklung beginnt mit einer Vereinbarung. Eine Vereinbarung, wie die Dinge fertig sind. Ohne eine Vereinbarung, code bekommen würde, chaotisch, und die software nicht nachhaltig ganz schnell, selbst für relativ kleine Projekte. Deshalb, eine Menge (wenn nicht die meisten) die macht der Rahmen liegt innerhalb dieser Vereinbarung. Die Möglichkeit der Definition von Konventionen und gemeinsame Muster, die sich jeder hält. Diese Idee gilt für alle framework, JavaScript oder nicht. Diese “Regeln” sind unerlässlich, um die Entwicklung und bringen teams Wartbarkeit in jeder Größe, Wiederverwendbarkeit von code, und die Fähigkeit zu teilen, die Arbeit mit einer community in einer form, die jeder verstehen wird. Deshalb können wir web-Suche für eine Komponente/plugin, das löst unser problem eher, als etwas zu schreiben auf unsere eigene. Wir setzen auf open-source-alternativen, egal in welchem Rahmen, die wir benutzen.

Leider gibt es auch Nachteile von frameworks. Als Adrian Holovaty (einer der Django-Macher), erklärt in seinem Vortrag, frameworks dazu neigen, sperrig und aufgebläht mit features, die für einen bestimmten Anwendungsfall. Könnte es sein, dass die Einbeziehung einer wirklich guten Idee. Es könnte auch sein Wunsch nach einer one-size-fits-all-Lösung für jedermann und jeden Bedarf. Könnte es sein, weiterhin beliebt. So oder so, es gibt Nachteile zu Rahmenbedingungen, angesichts all der Vorzüge, die Sie auch haben.

Im server-gerenderten Welt, in der wir mit den Inhalten, die bereitgestellt werden an den browser von einem server, dieser “Rahmen der mission” ist gefüllt mit Fähigkeiten, Ideen und Lösungen, die Menschen teilen mit Mitarbeitern, Freunden, und andere. Sie neigen dazu, anzunehmen, konsequente Entwicklung von Regeln und erzwingen Sie innerhalb Ihrer teams oder Unternehmen, anstatt sich auf einen vorgegebenen Rahmen. Für eine lange Zeit, es war, jQuery, erlaubt Menschen zu teilen und die Wiederverwendung von code auf globaler Ebene mit seinen plugins — aber diese ära schwindet, sobald neue frameworks sind in die Falten.

Lassen Sie uns nehmen einen Blick auf einige zentrale Punkte, die framework — custom oder nicht — der sollte sich überlegen entscheidend für die Förderung einer nachhaltigen und wiederverwendbaren Codebasis.

Namenskonventionen

Einige mögen sagen, dass die Benennung ist der schwierigste Teil der Entwicklung. Ob Benennung von JavaScript-Variablen, HTML-Kurse, oder jede andere Anzahl von Dinge, eine Namenskonvention hat einen großen Einfluss darauf, wie wir arbeiten zusammen, denn er fügt Kontext und die Bedeutung zu, die unseren code. Ein gutes Beispiel für eine Namenskonvention ist BEM, eine CSS-Methodik erstellt von den Leuten bei Yandex und angenommen von vielen, vielen vor-enders. Diese Art der Standardisierung und Konsistenz kann helfen, informieren unsere Zielsetzung, die eine Konvention für die Benennung von JavaScript-Selektoren.

Diese situation vielleicht bekannt vorkommen: Sie überdenken, ein Projekt nach ein paar Monaten, und Sie sehen einige Verhalten geschieht auf der Seite — vielleicht etwas, was Sie wollen zu ändern oder zu beheben. Allerdings kann die Suche nach der Quelle von diesem Verhalten kann eine heikle Angelegenheit sein. Ist es das id-Attribut sollte ich suchen? Ist es eine der Klassen? Vielleicht ist das data-Attribut für dieses element?

Ich denke, Sie erhalten den Punkt. Was hilft, ist, dass irgendeine Art von Konvention, um den Prozess zu vereinfachen und machen alle arbeiten mit dem gleichen Namen. Und ist es nicht eigentlich egal, wenn wir mit Klassen (z.B. js-[name]) oder data-Attribute (z.B. data-name=”[name]”). Alles was zählt ist, dass die Namen entsprechen den gleichen Stil. Sicher genug, jeden Rahmen, den Sie treffen werden, wird die Durchsetzung einer Namenskonvention, die von einer Art als auch, ob es Reagieren, Vue, Bootstrap, Foundation, etc..

Umfang

Ein Entwickler wird wahrscheinlich Kampf mit JavaScript-Bereich an einem gewissen Punkt in der Zeit, aber wir sind mit Fokus auf DOM Bereich hier. Egal was Sie tun, mit JavaScript, die Sie verwenden Sie auf einige DOM-element. Begrenzung Teile des Codes, der auf ein DOM-element fördert die Wartbarkeit und code macht mehr modular. Komponenten in beiden Reagieren und Vue betreiben, in ähnlicher Weise, obwohl Ihre “Komponente” – Konzept ist anders als die standard-DOM. Trotzdem, die Idee, die Bereiche der code für ein DOM-element, das wiedergegeben wird, indem die Komponenten.

Während wir auf das Thema DOM-manipulation, die Referenzierung von Elementen innerhalb des root-Elements der Komponente ist super hilfreich, da Sie helfen, vermeidet die ständige Notwendigkeit, um Elemente auszuwählen. Reagieren und Vue tun dies aus der box in einer sehr guten Weise.

Lifecycle

In der Vergangenheit, der Lebenszyklus der Seite war sehr einfach: die browser geladen, die Seite und der browser bleibt die Seite. Erstellen oder entfernen von Ereignis-Listenern, oder code ausführen, zur richtigen Zeit war viel einfacher, als würden Sie einfach erstellen Sie alles, was Sie auf laden, und nur selten die Mühe mit dem deaktivieren der Codes, da der browser es tun würde, für Sie standardmäßig.

Heutzutage ist der Lebenszyklus neigt dazu, viel mehr Dynamik, Dank der staatlichen Verwaltung und die Art, wie wir vorziehen zu manipulieren, änderungen direkt auf dem DOM, oder laden Sie die Inhalte von Seiten, die mit JavaScript. Leider, das bringt in der Regel einige Probleme, wo müssen Sie möglicherweise erneut ausführen, Teile des Codes zu bestimmten Zeiten.

Ich kann nicht sagen, wie viele Male in meinem Leben musste ich spielen, um mit code, um meine event-Handler, um korrekt ausgeführt wird, nachdem re-writing-Teil des DOM. Manchmal ist es möglich, dies zu lösen, mit event-delegation. Andere Zeiten, kann Ihr code-Handler nicht ausgeführt, an alle oder mehrere Male ausführen, weil Sie plötzlich befestigt zweimal.

Ein anderer Anwendungsfall wäre die Erstellung einer Instanz von Bibliotheken nach dem ändern der DOM, wie “fake wählt.”

In jedem Fall, der Lebenszyklus ist wichtig, und die Begrenzung der code für ein DOM-element sicherlich hilft hier auch nicht, da Sie wissen, dass der code auf dieses element angewendet wurden, muss erneut ausgeführt werden, im Falle das element erneut gerendert wird.

Frameworks machen das gleiche mit Funktionen wie componentDidMount oder componentDidUpdate, die Ihnen eine einfache Möglichkeit der Ausführung von code genau dann, wenn Sie es brauchen.

Wiederverwendbarkeit

Das kopieren von code von woanders und Wiederverwendung es ist super gemeinsam. Wer hat Sie nicht verwendet, ein Ausschnitt aus einem früheren Projekt oder eine Antwort von StackOverflow, richtig? Die Menschen selbst erfunden Dienste wie npm gedacht, für eine Sache: zu leicht zu teilen und die Wiederverwendung von code. Es gibt keine Notwendigkeit, das Rad neu zu erfinden und das freigeben von code für den anderen ist etwas, das ist bequem, praktisch und oft effizienter als Spinnerei etwas von Grund auf neu.

Komponenten, ob es Reagieren, Vue, oder andere Baustein eines Rahmens fördern die Wiederverwendbarkeit, indem ein wrapper um ein Stück code, das dient einigen bestimmten Zweck. Ein standardisierter wrapper mit ein erzwungenes format. Ich würde sagen, das ist eher ein Nebeneffekt mit etwas base auf dem wir aufbauen können, als eine absichtliche Anstrengung, die für die Wiederverwendbarkeit, da jeder base immer müssen einige standard-format eines code ausführen zu können, auf die gleiche Weise Programmiersprachen besitzen eine syntax, die wir brauchen, um zu Folgen… aber es ist ein super bequemer und nützlicher Nebeneffekt, sicher. Durch die Kombination dieser gewonnen Wiederverwendbarkeit mit Paket-Managern wie Garn, und bundlers wie webpack, können wir plötzlich einen code geschrieben, die von vielen Entwicklern auf der ganzen Welt arbeiten zusammen in unserer app mit fast keine Mühe.

Zwar nicht der gesamte code ist open-source und teilbar, eine gemeinsame Struktur wird helfen, Leute, die in kleineren teams als gut, so jemand ist in der Lage zu verstehen, die meisten der code innerhalb des Teams, ohne an den Autor.

DOM-manipulation mit Leistung im Verstand

Lesen und schreiben im DOM ist teuer. Der Entwickler des front-end-frameworks im Hinterkopf behalten und versuchen Sie zu optimieren, so viel wie möglich mit Staaten, virtual-DOM und andere Methoden, um änderungen an den DOM, wenn es gebraucht wird und wo es gebraucht wird… und so sollten wir. Während wir uns mehr um die server-gerendert wird in HTML, die meisten der code landet, Lesen oder schreiben auf die DOM. Nach allem, was JavaScript ist für.

Während die meisten der änderungen, die der DOM sind minimal, Sie kann auch auftreten, ziemlich oft. Ein schönes Beispiel häufige Lesen/schreiben ausgeführt wird, ein Skript auf Seite Blättern. Idealerweise würden wir gerne vermeiden, hinzufügen von Klassen, Attributen oder ändern Sie den Inhalt des elements direkt in der Prozedur, auch wenn wir schreiben die gleichen Klassen, Attribute oder Inhalt, da unsere änderungen noch verarbeitet der browser und sind immer noch teuer, selbst wenn keine änderungen für die Benutzer.

Größe

Last, but not least: die Größe. Größe kritisch ist oder zumindest sein sollte für einen Rahmen. Der code in diesem Artikel behandelt wird, soll als Basis verwendet werden, das über viele Projekte. Es sollte so klein wie möglich und vermeiden Sie alle unnötigen code Hinzugefügt werden kann, manuell für die einmalige Verwendung. Idealerweise sollte es modular, so dass wir können ziehen Sie Stücke davon aus à-la-carte, je nach den spezifischen Anforderungen für das Projekt an der hand.

Während die Größe der selbst geschriebene code ist in der Regel zumutbar, zu viele Projekte am Ende mit mindestens ein paar Abhängigkeiten/libraries, um Lücken zu füllen, und diese kann die Dinge ziemlich sperrig wirklich schnell. Sagen wir, wir haben ein Karussell auf einer Seite der obersten Ebene einer Website, und einige Diagramme irgendwo tiefer. Wir können wiederum auf bereits vorhandene Bibliotheken, die behandeln würden, diese Dinge für uns, wie slick carousel (10 KB minified/gzipped, ausgenommen jQuery) und highcharts (73 KB minified/Gzip). Das sind über 80 KB code, und ich würde Wetten, dass nicht jedes byte ist notwendig für unser Projekt. Wie Addy Osmani erklärt, JavaScript ist teuer, und seine Größe ist nicht das gleiche wie andere Elemente auf einer Seite. Es lohnt sich, das im Hinterkopf, wenn Sie das nächste mal finden Sie sich selbst erreichen und für eine Bibliothek, obwohl es sollte nicht entmutigen Sie aus, es zu tun, wenn das positive überwiegt das negative.

Ein Blick auf eine minimale Lösung, die wir rufen Gia

Lassen Sie uns nehmen einen Blick auf etwas, was ich gearbeitet habe und für eine Weile mit meinem team auf Riesen. Wir wie JavaScript und wollen wir arbeiten direkt mit JavaScript eher als ein framework. Aber zur gleichen Zeit, müssen wir die Wartbarkeit und Wiederverwendbarkeit , die Rahmenbedingungen bieten. Haben wir versucht, auf einige Konzepte aus den gängigen frameworks und bringen Sie an einen server gerenderte website, wo Sie die Optionen für JavaScript-setup so weit, und doch so beschränkt.

Wir gehen durch einige grundlegende Merkmale unserer Einrichtung und konzentrieren sich auf, wie Sie löst die Punkte haben wir behandelt, so weit. Beachten Sie, dass viele der Lösungen, um unsere Bedürfnisse sind direkt inspiriert von der großen frameworks, so dass, wenn Sie sehen, einige ähnlichkeiten, weiß, dass es nicht zu einem Unfall. Wir nennen es Gia (get it, wie kurz für Riesen?!) und Sie können es von npm und finden den Quellcode auf GitHub.

Gia, wie viele frameworks, basiert auf Komponenten, die Ihnen einen basic building block, und einige Vorteile, die wir berühren uns auf ein bisschen. Aber nicht zu verwechseln mit der Gia-Komponenten mit der Komponente verwendeten Konzepte, die durch Reagieren und Vue, wo alle Ihre HTML ist ein Produkt der Komponente. Dies ist anders.

In Gia-Komponente ist ein wrapper für Ihren eigenen code, der ausgeführt wird im Rahmen eines DOM-Elements, und die Instanz der Komponente gespeichert wird innerhalb des Elements selbst. Als ein Ergebnis, eine Instanz wird automatisch aus dem Speicher durch den garbage collector im Falle das element wird aus dem DOM entfernt. Der source-code der Komponente kann hier gefunden werden und ist ziemlich einfach.

Abgesehen von einer Komponente, Gia umfasst mehrere Helfer zu übernehmen, zu zerstören und die Arbeit mit der Komponente Instanz oder die Kommunikation zwischen Komponenten (mit standard-eventbus enthalten für die Bequemlichkeit).

Beginnen wir mit den Grundeinstellungen. Gia wird über ein Attribut, um Elemente auszuwählen, zusammen mit den Namen der Komponente ausgeführt wird (D. H. g-Komponente=”[name der Komponente]”). Dies erzwingt eine einheitliche Namensgebung. Läuft die loadComponents Funktion erzeugt die Instanzen definiert mit der g-Komponente Attribut.

Finden Sie die Pen Basic-Komponente von Georgy Marchuk (@gmrchk) auf CodePen.

Gia Komponenten erlaubt es uns auch zu einfach wählen Sie die Elemente innerhalb des root-Elements mit dem g-ref-Attribut. Alle, die getan werden muss, ist die Definition von Referenzen, die zu erwarten sind und ob wir arbeiten mit einem einzelnen element oder ein array von Ihnen. Referenz ist dann zugänglich.ref-Objekt innerhalb der Komponente.

Finden Sie die Stift-Komponente mit ref-Elemente von Georgy Marchuk (@gmrchk) auf CodePen.

Als bonus, Standard-Optionen kann festgelegt werden, in die Komponente, die automatisch neu geschrieben, indem Sie alle Optionen, die in g-options-Attribut.

Finden Sie die Stift-Komponente mit Optionen von Georgy Marchuk (@gmrchk) auf CodePen.

Die Komponente bietet Methoden, die ausgeführt werden, zu verschiedenen Zeiten, um zu lösen die lifecycle-Problem. Hier ist ein Beispiel, das zeigt, wie eine Komponente initialisiert oder entfernt:

Siehe den Stift laden/entfernen von Komponenten von Georgy Marchuk (@gmrchk) auf CodePen.

Beachten Sie, wie loadComponents Funktion nicht, gelten die gleichen Komponente, wenn es bereits vorhanden ist.

Es ist nicht erforderlich, entfernen Sie die Zuhörer an die Wurzel-element einer Komponente oder eines elements vor dem re-rendering, da Sie die Elemente aus dem DOM entfernt werden sowieso. Allerdings kann es einige Listener erstellt auf Globale Objekte (z.B. Fenster), wie diejenigen, die für scroll-handling. In diesem Fall ist es erforderlich, entfernen Sie den listener manuell vor dem zerstören der Komponente Instanz, um um Speicherverluste zu vermeiden.

Das Konzept einer Komponente bezieht sich auf ein DOM-element ist ähnlich in Ihrer Art, zu Reagieren und Vue-Komponenten, sondern mit einem Schlüssel Ausnahme, dass der DOM-Struktur ist außerhalb der Komponente. Als ein Ergebnis, wir haben zu stellen Sie sicher, es passt die Komponente. Die Definition des ref-elements hilft sicherlich, als Gia-Komponente wird Ihnen sagen, wenn die erforderlichen refs sind nicht vorhanden. Das macht die Komponente wiederverwendbar. Das folgende Beispiel für die Implementierung eines basic-Karussell, das könnte leicht wiederverwendet oder freigegeben:

Finden Sie die Pen Basic-carousel-Komponente von Georgy Marchuk (@gmrchk) auf CodePen.

Während wir reden, Wiederverwendbarkeit, es ist wichtig zu erwähnen, dass die Bauteile nicht wiederverwendet werden in Ihren vorhandenen Zustand. In anderen Worten, wir können erweitert werden zum erstellen von neuen Komponenten wie jede andere JavaScript-Klasse. Das bedeutet, wir bereiten für Sie eine Allgemeine Komponente und aufbauen können.

Um ein Beispiel zu geben, eine Komponente, die uns den Abstand zwischen dem cursor und dem Zentrum von einem element scheint wie eine Sache, die nützlich sein könnte, eines Tages. Eine solche Komponente kann hier gefunden werden. Nachdem das fertig ist, ist es lächerlich einfach zu aufbauen und die Arbeit mit zahlen, wie das nächste Beispiel zeigt, in der render-Funktion, obwohl wir könnten streiten über die Sinnhaftigkeit von diesem speziellen Beispiel.

Finden Sie den Stift ZMXMJo von Georgy Marchuk (@gmrchk) auf CodePen.

Lassen Sie uns versuchen, zu schauen, optimiert DOM-Manipulationen. Erkennen, wenn eine änderung am DOM-geschehen soll, können manuell gespeichert oder überprüft werden, ohne direkten Zugriff auf den DOM, aber das ist eher eine Menge Arbeit, die wir vielleicht vermeiden wollen.

Dies ist, wo Gia wirklich zeichnete inspiration von Reagieren, mit einfachen, abgespeckte Komponente staatlichen Verwaltung. Der Zustand einer Komponente wird festgelegt, ähnlich wie Staaten Reagieren, die über eine setState-Funktion.

Das heißt, es ist kein rendering beteiligt, die in unserer Komponente. Der Inhalt wiedergegeben wird, indem die server, so müssen wir eine nutzen, die Veränderungen in Staat anderswo. Die Status-änderungen werden ausgewertet und tatsächliche änderungen an den stateChange-Methode einer Komponente. Ideal, jede Interaktion zwischen der Komponente und der DOM behandelt werden würde in dieser Funktion. Bei einem Teil der Zustand nicht ändern, wird es nicht vorhanden sein, stateChanges-Objekt übergeben, in einer Funktion und wird daher nicht verarbeitet werden — der DOM nicht berührt werden, ohne dass es wirklich nötig ist.

Überprüfen Sie das folgende Beispiel mit einer Komponente zeigt, Abschnitte, die sichtbar in den Arbeitsbereich:

Finden Sie den Stift Abschnitte im Ansichtsfenster Komponente von Georgy Marchuk (@gmrchk) auf CodePen.

Beachten Sie, wie das schreiben an das DOM (visualisiert durch blinken) nur für Elemente, in denen der Staat tatsächlich ändert.

Jetzt kommen wir schon zu meinem Lieblings-Teil!!!! Gia ist wirklich minimal. Das gesamte bundle, welches alle code, einschließlich alle Helfer, nimmt einen mickrigen 2.68 KB (minified/Gzip). Nicht zu erwähnen, dass Sie wahrscheinlich nicht brauchen, alle von Gia Teile und würde am Ende den Import noch weniger mit einer bundler.

Wie bereits erwähnt, ist die Größe des Codes können schnell zu erhöhen, indem einschließlich third-party-Abhängigkeiten. Das ist, warum Gia beinhaltet auch code-splitting unterstützen, wo Sie können, definieren Sie eine Abhängigkeit für eine Komponente, die werden nur geladen, wenn die Komponente initialisiert wird zum ersten mal, ohne zusätzliche Konfiguration erforderlich, um die bundler. So, die sperrige Bibliotheken verwendet, irgendwo tief innerhalb Ihrer Website oder Anwendung nicht haben, um die Dinge verlangsamen.

Falls Sie sich entscheiden, eines Tages, dass Sie wirklich wollen, um die Vorteile von all den leckereien big Rahmenbedingungen bieten kann, die irgendwo in Ihrem code, es ist nichts leichter, als einfach laden wie jeder andere Abhängigkeiten für die Komponente.

Klasse SampleComponent extends Component {
async require() {
diese.vue = warten auf import(‘vue’);
}

mount() {
neu in diesem.vue({
el: dies.element,
});
}
}

Fazit

Ich denke, der wichtigste Punkt dieses Artikels ist, dass Sie nicht brauchen, ein framework zu schreiben, wartbaren und wiederverwendbaren code. Folgenden und die Durchsetzung der ein paar Konzepte (Architekturen) können Sie weit bringen, auf Ihre eigenen. Während Gia ist minimal und hat nicht viele von den robusten Funktionen, die big Player, wie Sie Reagieren und Vue, noch hilft es uns, die klare Struktur, das ist so wichtig, in die langfristige. Es umfasst einige weitere interessante Dinge, die nicht machen den Schnitt hier. Wenn Sie, wie es so weit kommen, gehen check it out!

GitHub Repo

Es gibt Unmengen von use-cases und unterschiedliche Bedürfnisse erfordern unterschiedliche Herangehensweisen. Die verschiedenen frameworks können die nicht viel Arbeit für Sie; in anderen Fällen Sie möglicherweise einengen.

Was ist Ihre minimal-setup, und wie erklären Sie sich die Punkte, die wir hier behandelt? Bevorzugen Sie ein framework oder nicht framework-Umgebung? Nutzen Sie frameworks in Kombination mit static-site-Generatoren wie Gatsby? Lassen Sie mich wissen!