Laufen vor Ort und Webentwicklung

Hallo allerseits!

Jetzt erzähle ich Ihnen eine seltsame Geschichte. Einmal lebte ich in einer Wohnanlage, in der sich im Erdgeschoss ein Fitnessraum mit Laufbändern befand. In meiner Jugend war ich aktiv im Sport tätig und habe dann den Zustand kennengelernt, der beim Laufen auftritt und als „zweiter Wind“ bezeichnet wird. Dann fühlt man sich plötzlich von einer Gottheit inspiriert, die keine Müdigkeit kennt. Atmung, Herzklopfen und Körperbewegungen kommen in besonderer Resonanz und verwandeln Sie in ein laufendes Auto. Das Gefühl ist meiner Meinung nach umso besser, je mehr Sie NICHT bis zu diesem Punkt laufen wollten. Also ging ich jeden Tag an den Laufbändern vorbei und dachte, es wäre schön, mich an die Jugend zu erinnern. Nun, ich erinnerte mich. Das Laufband half dabei, es ermöglichte Ihnen, das Tempo zu optimieren und den gewünschten Rhythmus zu erreichen. Auf der Straße kann ich das nicht tun: Es ist sehr schwierig, mit gleichmäßiger Geschwindigkeit durch die Stadt zu rennen, das Gelände und die Hindernisse stören. Nach einiger Zeit zog ich in eine normale Wohnung (ohne Fitnessraum) und begann darüber nachzudenken, mein eigenes Laufband zu erwerben.

Ja, natürlich können Sie einfach ein Abonnement für den nächsten Sportverein kaufen, aber ich bin wie viele meiner IT-Kollegen eine soziale Phobie. Wenn nicht einmal ein Soziopath. Übung ist für mich ein intimer Prozess. Nun, jede freie Minute für das Training zu nutzen, war auch verlockend: „Geek's Health“ und all das ... Kurz gesagt, ich habe mir Angebote aus Online-Shops angesehen, Bewertungen gelesen und mich gefragt, wie viel ich für dieses Geschäft ausgeben könnte, wie ich das Problem mit Lärm lösen könnte und wo ich diese ziemlich große Bandura platzieren könnte ... Dann fiel ich in die Hände eines gewöhnlichen Springseils und sagte mir: Nun, hier ist er, eine gute Option für Cardio-Training ohne zu viele Hämorrhoiden! Alles was Sie brauchen sind hohe Decken und ... Es ist nichts dabei herausgekommen: Um rhythmisch und gleichmäßig auf ein Springseil zu springen, müssen Sie dazu in der Lage sein. Wir kehren zu den Gedanken über das Laufband zurück oder ... Moment mal, warum nicht einfach RUNNING IN PLACE ausprobieren? Na ja, irgendwie ZU einfach und dumm. Aber ich habe es versucht. Und weißt du was? Das ist großartig! Die Empfindungen sind fast die gleichen wie auf dem Laufband, nur alles ist um ein Vielfaches einfacher: Sie klammern sich ein Fitnessarmband an die Hand, setzen Kopfhörer mit Wurstmusik auf, schalten den Timer ein - und los! Ja, es gibt Nuancen, aber glauben Sie mir, sie sind unbedeutend. Infolgedessen habe ich dieses Thema schon seit einiger Zeit so sehr, dass ich mich der Sekte derselben verrückten Leute anschließen möchte. Sie fragen mich: Worüber sprechen Sie im Allgemeinen, wie hängt das alles mit der Webentwicklung zusammen?

Und so geht's

Betrachten Sie den beliebten Technologie-Stack für die moderne Front-End-Entwicklung:

TypeScript + WENIGER / SCSS / PostCSS + Reagieren + Redux / Mobx + Webpack

De facto ist dies nun ein bestimmter Standard. Dies lässt sich leicht durch die Analyse von Stellenangeboten überprüfen. Jedes neue Projekt in diesem Jahr wird mit der höchsten Wahrscheinlichkeit mit einer ähnlichen Liste unter der Haube gestartet. Dies ist ein so guter Satz bewährter Laufbänder . Lassen Sie uns diese Liste gemeinsam durchgehen und sehen, was davon übrig bleibt, wenn wir den Run in Place-Ansatz verwenden.

TypeScript

Wunderbare Sache. Jeder, der jemals etwas Ernstes für das Web geschrieben hat, wird dies verstehen. In Artikeln über TypeScript für Anfänger, die Beispiele enthalten, werden häufig einige sehr einfache und banale Dinge behandelt, z. B. das Übergeben typisierter Argumente an eine Funktion oder die Wechselfälle beim Typumwandeln in JavaScript, aus denen Sie gespeichert werden. Die Fähigkeiten von TS sind jedoch größer und tiefer als die Typprüfungen in der Kompilierungsphase. Sie können den Entwickler während des gesamten Projekts "an der Hand" führen und dazu führen, dass man nicht noch einmal stolpert. Aber TS hat seine Nachteile: Es funktioniert NICHT in einem Browser ohne Transpail und seine Syntax, sagen wir, "Wellen" in den Augen. Wenn Sie mit dem Front-End arbeiten, müssen Sie in Ihrem Workflow häufig überprüfen, wie Ihr Code im Browser ausgeführt wird. Sie benötigen ständigen Zugriff auf die native Laufzeit. Der Zeitverlust beim Wiederaufbau eines Projekts, um Änderungen insgesamt widerzuspiegeln, kann enorm sein. Auch wenn Sie alles haben, was Sie brauchen, wird es zwischengespeichert und optimiert. Was tun? Meine Option: Verwenden Sie JS + JSDoc. Ja, TS Static Analyzer unterstützt das JSDoc- Format. Gleichzeitig sehen Sie Ihren Code direkt im Browser und nutzen die Vorteile der Zivilisation. Blöcke, die Typen und andere Hinweise beschreiben, werden nicht mit dem Code gemischt und haben offensichtliche Grenzen, was mir persönlich sehr hilft, den Code „diagonal“ zu lesen. Wenn Sie VS-Code verwenden, können Sie diesen Ansatz ausprobieren, indem Sie einfach die Zeile // @ ts-check am Anfang Ihres Codes hinzufügen. Wenn Sie Unterstützung für ältere Browser benötigen, ist die Kompilierung von ES6 + natürlich weiterhin erforderlich, jedoch nur für die Produktionsversion. Infolgedessen vereinfachen Sie das Debuggen zur Laufzeit (wodurch das Fehlen von Fehlern und Warnungen während der Montage nicht spart) und sparen viel Zeit.

WENIGER / SCSS / PostCSS

Von diesem Set waren meine Favoriten WENIGER und PostCSS. Ich mochte LESS wegen seiner „nativeren“ Syntax und der relativen Leichtigkeit der notwendigen Abhängigkeiten für die Entwicklungsumgebung. PostCSS half dabei, alle möglichen Tricks mit SVG zu erstellen und Präfixe zu verfolgen. Die Nachteile, wie im vorherigen Absatz, würde ich die Notwendigkeit einer ständigen Neukompilierung nennen. Nun, die Abhängigkeiten selbst. In unserem Jahr 2018 haben wir jedoch so etwas Wunderbares wie native CSS-Variablen! Dies ist eine äußerst leistungsstarke Sache, mit der kein Präprozessor vergleichen kann: Sie können Ihre Variablen direkt zur Laufzeit neu definieren! Dies eröffnet eine ganze Welt neuer Möglichkeiten. Sie können beispielsweise ganz einfach "on the fly" die Themen der gesamten Anwendung sowie deren einzelne Blöcke ändern. Ein Benutzer kann buchstäblich einen Skin für eine Anwendung mit einem Farbwähler kleben, und dafür müssen Sie keine separaten Pakete mit vorkompilierten Stilen aufbewahren oder Ihr JS mit zusätzlicher Logik belasten. Und viel subtiler und spezifischer. Ich wähle natives modernes CSS. Aber wenn Sie IE11 unterstützen müssen, dann Traurigkeit .

Reagiere

React brachte uns ein neues Konzept der modularen Zerlegung, das sehr gut auf die Bedürfnisse der clientseitigen Entwicklung abgestimmt war, da die Struktur der Komponenten die Struktur der Präsentation wiederholte, die Wahrnehmung vereinfachte und den Entwicklern Ordnung brachte. Deshalb ist er meiner Meinung nach so beliebt geworden und deshalb dankt er ihm. Jetzt jedoch erwirbt React immer mehr die Eigenschaften eines Frachtkultes: Die Leute beginnen, ihn nur deshalb in Projekte zu ziehen, weil "jeder es tut". Und das ist schrecklich, weil die technische Wahl, insbesondere in einem so wichtigen Thema, so bewusst wie möglich sein sollte. Und um sich bewusst zu werden, müssen Sie verstehen, dass React voller Fehler ist. Für mich ist dies zuallererst, dass es eine zu dicke Abstraktion über dem nativen DOM ist und eine große Menge seiner eigenen Besonderheiten einbringt, mit denen Sie sich befassen müssen, anstatt Probleme direkt zu lösen. Dies ist besonders spürbar und deprimierend, wenn Ihre Aufgaben etwas weniger trivial sind als banale Formen. Sie können lange über dieses Thema sprechen, sich an JSX, VDOM und mehr erinnern, aber für uns lautet die Hauptfrage jetzt: Was ist die Alternative? Nein, nicht Vue. Und nicht besonders Angular. Für mich sind dies Webkomponenten: eine Reihe von Standards CustomElements + ShadowDOM + ES-Module + HTML-Vorlagen . Warum? Denn dies sind die Standards, die von der Webplattform selbst unterstützt werden, und nicht die Metaplattform und JS-Add-Ons.

Sie können Ihren Code in übersichtliche Blöcke aufteilen und ihn mithilfe nativer Module nach Ihren Wünschen organisieren. Ja, Module werden von allen modernen Browsern unterstützt und müssen während des Entwicklungsprozesses nicht neu erstellt werden. Ja, Sie können Stile und Vorlagen separat in Modulen speichern. Ja, Sie können die Syntaxunterstützung für diese Dateien speziell aktivieren und als natives HTML und CSS damit arbeiten. Der Lebenszyklus von Webkomponenten hilft Ihnen dabei, Rendering und Updates zu organisieren, ohne das DOM unnötig zu analysieren und die Struktur des DOM zu ändern. Mit ShadowDOM können Sie umständliches BEM loswerden und sich nicht zusätzlich um die Kapselung von Stilen kümmern.
ShadowDOM ist für CSS-Variablen transparent und ermöglicht es Ihnen, Parameter von jeder geeigneten Verschachtelungsebene nach innen zu übergeben. Auf diese Weise können Sie mit parametrischem Design experimentieren und viele andere Tricks ausführen. Webkomponenten arbeiten vollständig mit der üblichen DOM-API und sind gleichzeitig vollwertige HTML-Elemente: Alle Standardmethoden liegen in Ihren Händen. Sie können benutzerdefinierte Attribute verwenden, um Parameter und Anzeigeeinstellungen zu übergeben (im Gegensatz zu React können Sie jedoch nur Zeichenfolgen und Boolesche Werte übergeben, aber für mich ist dies überhaupt kein Problem). Ihr Code wird einfacher und schneller. Glauben Sie mir, ich konnte vergleichen. Ein bisschen traurig: Für die meisten Benutzer funktioniert alles von Haus aus, aber einige benötigen Polyphile . Wenn Ihre Statistiken und Ihre Zielgruppe, hauptsächlich über moderne Browser, sich gerne mit diesem Thema befassen, lohnt es sich.

Redux / Mobx

Es ist komplizierter. Einerseits gibt es eine Reihe von Artikeln, in denen die Stärken und Schwächen aufgelistet und verschiedene Ansätze zum Speichern von Zuständen verglichen werden. Und um zu den Einzelheiten zu gelangen, benötigen Sie einen bestimmten Fall. Es stellte sich heraus, dass mich dieses Thema schon seit einiger Zeit beschäftigt: Ich stoße auf recht komplexe Aufgaben bei der Arbeit mit komplexen strukturierten Daten. Nun, im Allgemeinen: Daten, die der Realität nahe kommen, sind in der Praxis niemals einfach und bequem mit einer klaren universellen Hierarchie normalisiert. In den meisten Fällen handelt es sich um ein kniffliges Diagramm, für das Sie zunächst die maximale Flexibilität im System festlegen müssen. In dieser Angelegenheit bin ich ein Anhänger des Fahrradbaus, aber ich werde meinen eigenen Weg nicht wahllos jedem empfehlen. Was ich definitiv raten kann, ist, die Grundlagen der modernen Informatik nicht zu verachten, etwas Populärwissenschaftliches über Graphentheorie, Mengenlehre, Chaostheorie zu lesen. Außerdem spreche ich nicht von einer Art Hardcore: Die allgemeinsten Ideen können sehr nützlich sein und das Gehirn auf die richtige Weise „klären“. Im einfachen Fall können Sie Ihr eigenes Status-Repository mit Blackjack und Abonnements auf Ihrem Knie schreiben, und es ist nicht schwieriger, als sich mit der Dokumentation beliebter Bibliotheken zu befassen.

Webpack

Natürlich können wir das Montagesystem komplett aufgeben. Das Auflösen der Importkette in Echtzeitcode ist jedoch nicht das Schnellste. Daher benötigen wir noch Bundles für die Produktionsversion. Nun, wieder eine Art Minimierung / Verschleierung und ein kompakter Papa ... Deshalb verlassen wir Webpack. Aber wir brauchen für ihn nur ein paar Module mit minimalen Konfigurationen und keine Beobachter und Umbauten für den Entwicklungsprozess. Persönlich sieht meine Build-Konfiguration sehr kompakt aus und erfordert keine große Anzahl von Abhängigkeiten. In letzter Zeit höre ich oft von dem neuen Paketbauer, und sein minimalistisches Konzept gefällt mir sehr gut, aber soweit ich weiß, funktioniert es nicht mit ES-Modulen, und meiner Meinung nach handelt es sich um eine Datei. Hoffe das ändert sich.

Was ist das Ergebnis?

Ich höre oft die Meinung, dass Sie beim Schreiben von "Vanille" unweigerlich auf die Tatsache stoßen werden, dass Ihr Projekt bald zu einem nicht unterstützten Brei mit Nudeln wird. Lassen Sie mich parieren: Erstens kann Brei auf Wunsch auch aus einem Redukt mit einem Redukt hergestellt werden (ich habe genug davon gesehen). Und zweitens ist alles sehr gut, wenn Sie Module, JSDoc und gute OOP-Praktiken verwenden. Also, wozu sind wir gekommen:

JS + CSS + Webkomponenten + Webpack

Von den fünf "Laufbändern" haben wir nur noch eines, das deutlich leichter ist. Und das ist genug, um die "Flügel dahinter" zu spüren.

PS Ich versichere in keiner Weise, dass meine Ansätze für jeden geeignet sind. Ich bitte Sie, dieses Werk zumindest als Gelegenheit zu betrachten, darüber nachzudenken, was uns selbstverständlich erscheint.