Front-End-Toolkit: Nützliche Dienstprogramme und Funktionen zur Beschleunigung der Entwicklung

Vorbei sind die Zeiten, in denen es für den Fronttender ausreichte, den Editor zu öffnen, einige Codezeilen zu schreiben, ihn in einem Browser zu überprüfen und per FTP auf den Server hochzuladen. Die moderne Entwicklung von Benutzeroberflächen ist viel komplizierter geworden. Das JavaScript-Ökosystem wächst und verändert sich so schnell, dass es leicht zu Verwirrung kommt. In diesem Beitrag werde ich Ihnen erklären, was das Parallels- Front-End-Team verwendet , um die Leistung zu optimieren.

Ich bin mir sicher, dass derzeit irgendwo auf der Welt zwei Front-End-Anbieter ernsthaft darüber streiten, welches Framework für das Projekt besser geeignet ist. Und der dritte ist mit ihnen verbunden - ein leidenschaftlicher Gegner von Frames. Er behauptet, dass Sie in Vanille-JavaScript schreiben müssen, weil all diese progressiven Pribluds nur Code mit unnötigen Abhängigkeiten aufblasen und im Allgemeinen für diejenigen gedacht sind, die nicht programmieren können. Ihre Diskussion wird wahrscheinlich in nichts enden. Eine Stunde später werden sich alle ruhig auf Jobs zerstreuen. Jeder wird in seiner eigenen Meinung bleiben und so arbeiten, wie er es früher getan hat.

Meiner Meinung nach sind solche Streitigkeiten schlimmer als Streitigkeiten über das, was früher erschien, ein Huhn oder ein Ei. Denn die einzig wirklich effektive Lösung für eine problemlose Front-End-Entwicklung gibt es nicht. Ich bin damit einverstanden, dass alle Grundfunktionen ohne Verwendung von Angular, React, Vue.js und ähnlichen Frameworks ausgeführt werden können. Wenn das Ziel jedoch die Zusammenarbeit ist und Sie nicht nur eine, sondern als Team eine groß angelegte Anwendung erstellen, ist dies mit ihnen einfacher.

Natürlich können Sie auf sie verzichten, aber sie ermöglichen es, keine Zeit mit der Erstellung eines Standards zu verschwenden, die Struktur festzulegen (Sie wissen immer, wo sie sich befindet), die Routine zu vereinfachen und die Entwicklung zu beschleunigen. Wenn wir davon ausgehen, dass Sprache ein Alphabet ist, kann das Framework als Sprachführer mit Klischeedialogen betrachtet werden, die den Aufbau von Kommunikation erleichtern.

In diesem Beitrag werde ich nützliche Tools vorstellen, die das Team und ich beim Erstellen der Benutzeroberfläche verwenden. Sie vereinfachen sowohl die gemeinsame Entwicklung als auch die weitere Projektunterstützung erheblich.

***
Ich denke, für den Anfang lohnt es sich, ein wenig über sich selbst zu erzählen. Ich bin vor neun Jahren, 2011, in die IT-Welt eingetreten. Er begann als Full Stack in einer kleinen Organisation. Dann beschäftigte er sich mit hybriden mobilen Anwendungen und war für den Teil der Logik verantwortlich, der in WebView enthalten war. Und einige Jahre später landete er in Parallels. Hier arbeite ich im Cloud-Team, einem Anbieter von Weblösungen für alle Produkte des Unternehmens. Für den Großteil der Geschäftsfunktionen muss ich Front-End-Aufgaben durchdenken und implementieren. Konzentrierte sich nun auf die Entwicklung des My Account-Portals.

Wie Sie wahrscheinlich bereits aus dem obigen Text verstanden haben, war die Erstellung der Benutzeroberfläche dieser Webanwendung nicht ohne Rahmen. Wir haben uns für Vue.js entschieden. Um die Arbeit mit ihm angenehm zu gestalten, setzten sie zusätzliche Tools ein. Dies hat uns geholfen, den Entwicklungsprozess so weit wie möglich zu optimieren.

Vue CLI

Dieses Befehlszeilenprogramm enthält viele nützliche Funktionen und ist für eine schnelle Projektentwicklung konzipiert. Grob gesagt erstellt es ein Standardframework für den Start und ermöglicht es Ihnen, sich auf die Erstellung der Anwendung zu konzentrieren, ohne in der Anfangsphase über die Werkzeuge und die Konfiguration der Baugruppe nachzudenken. Sie können später an die Anforderungen des Projekts angepasst werden.

Vue CLI bietet Unterstützung für die wichtigsten Webentwicklungstechnologien. Standardmäßig sind Tools wie Webpack, Babel, TypeScript, ESLint und Sass verfügbar. Außerdem gibt es eine integrierte Unterstützung für Unit- und End-to-End-Tests mit Mocha und Nightwatch.

Vue devtools

Eine Erweiterung für den Browser, mit der Sie die Anwendung in Echtzeit debuggen können. Es hat Zugriff auf die Eigenschaften und Methoden von Komponenten, eine Liste aller Ereignisse. Sie können den Status der Anwendung vollständig über eine Webseite steuern und nicht darauf warten, dass eine Partition das Ergebnis anzeigt.

Funktioniert in Chrome und Firefox. Es gibt keine offizielle Erweiterung für andere Browser, aber Sie können Vue Devtools über die Electron-App ausführen . Dann ist das Tool in jeder Umgebung verfügbar.

Zeplin

Der Service erleichtert die Übertragung von Layouts in die Entwicklung. Wie in jedem großen Unternehmen verfügen wir über eine Reihe von UI-Komponenten. Zuvor befand es sich in den PSD-Dateien, und aus diesem Grund war der Zugriff darauf sehr chaotisch. Und in Zeplin gibt es so etwas wie den globalen Styleguide.

Darin können Sie alle Regeln zum Erstellen von Unternehmensschnittstellen sammeln. Für jede UI-Komponente wird automatisch CSS-Code generiert. Die Farben, Größen, Einrückungen und anderen Eigenschaften jedes Blocks, aus dem das Element besteht, werden angezeigt. Das heißt, Stile müssen nicht mehr jedes Mal von Grund auf neu implementiert werden, was die Arbeit erheblich beschleunigt. Die PSD-Ära ist vorbei.

Außerdem gibt es eine Historie aller Änderungen. Sie können leicht verfolgen, wie es in der Anfangsphase war und was am Ende passiert ist.

Git URL als Abhängigkeit

Dies ist die von uns verwendete npm-Funktion. Wir mussten eine Reihe von UI-Komponenten gemeinsam nutzen, damit Kollegen im Unternehmen Zugriff darauf hatten und sie für ihre Anforderungen verwenden konnten. Die naheliegendste Lösung für dieses Problem ist das npm-Paket. Wir wollten es jedoch nicht in der öffentlichen Registrierung haben. Der lokale npm-Server war keine gute Idee, daher haben wir das git + npm-Bundle verwendet.

Somit hat jeder Parallels-Mitarbeiter Zugriff auf die UI-Codebasis, und da es sich um Git handelt, ist auch das Versionsproblem gelöst. Es wird keine Probleme aufgrund von Updates geben, nichts wird kaputt gehen.

Wache

Um Fehler und Protokolle auf der Clientseite zu erfassen, ohne auf eine Beschwerde zu warten, haben wir Sentry verbunden . Dieses Tool verfolgt die Codeausführung in benutzerdefinierten Browsern.

Wenn ein Fehler auftritt, wird automatisch eine Anfrage mit einem vollständigen Bericht an uns gesendet, der sowohl das Wesentliche des Vorfalls als auch die Liste der vorangegangenen Aktionen widerspiegelt. Basierend auf diesen Daten ist es sehr einfach, den Grund zu finden und alles zu beheben.

Außerdem konnten wir unseren technischen Support ein wenig entladen und unsere Kollegen vor unnötigen Anrufen und Anrufen bewahren.

Über die Gefahren von Sucht

Zum Schluss noch ein kleiner Rat. Versuchen Sie, Dienstprogramme selbst zu schreiben. In letzter Zeit sind Bibliotheken mit vorgefertigten Lösungen sehr beliebt geworden. Es kommt zu dem Punkt, dass Front-End-Angebote auch für "einzeilige" Funktionen Abhängigkeiten annehmen, die sie mit geschlossenen Augen schreiben können. Was bedroht das? Ein Fehler.

Eine lehrreiche Geschichte geschah vor vier Jahren. Eine Person entfernte sein 11-Zeilen-Paket aus der npm-Registrierung und brach damit etwa tausend Projekte ab. Entwickler auf der ganzen Welt erhielten beim Versuch, ihre Anwendungen bereitzustellen, Fehlermeldungen, da ein winziges Modul namens "Left-Pad" fehlte.

Seien Sie also nicht faul, ersetzen Sie den Code nicht durch eine Reihe von Abhängigkeiten. Verlassen Sie sich auf sich selbst und schreiben Sie selbst kleine Dienstprogramme. Verwenden Sie vorgefertigte Bibliothekslösungen nur für komplexe Funktionen - wo sie wirklich dazu beitragen, das Rad nicht neu zu erfinden.