🔤 👎🏽 🕰️ Frontend-Entwicklung im Unternehmen: Was es ist und wie es effektiv gemacht werden kann 🎦 🤧 🕶️

Wir von KORUS Consulting CIS organisieren seit mehr als zehn Jahren die Entwicklung von Webdiensten für unsere Kunden. Wir haben bereits mehrere Dutzend ernsthafte Projekte im Bankensektor, von denen einige internationale Anerkennung gefunden haben.

In den letzten zwei Jahren hat sich die Anzahl der Teams und Projekte in unserem Unternehmen um ein Vielfaches erhöht, und auch die Effektivität der Frontend-Entwicklung hat sich um ein Vielfaches erhöht. Wir haben gelernt, wie man Anwendungen in wenigen Wochen statt in wenigen Monaten erstellt.

Wir arbeiten ständig an der Entwicklung der Infrastruktur unserer Front-End-Entwicklung, und heute werde ich einige Entwicklungen in Bezug auf die Organisation der Front-End-Einheit vorstellen, die für diejenigen nützlich sein können, die das Front-End in ihrem Unternehmen organisieren.

In diesem Artikel erfahren Sie mehr über unseren Weg zur Beantwortung der folgenden Fragen:

, ;
, ;
;
;
;
.

Der Frontend-Teil einer Site oder Anwendung ist das, was Sie in Ihrem Browser sehen. Dieser Teil interagiert aktiv mit dem Server-Teil (Backend-Teil), der sich auf einem beliebigen Server befindet, und tauscht ständig Daten mit ihm aus.

Aus technischer Sicht besteht das Front-End der Anwendung aus einer Reihe von Dateien, darunter HTML-, CSS- und JavaScript-Dateien, Bilder usw. Die Arbeit mit CSS und HTML bezieht sich auf den Satz, JavaScript - auf die Programmierung. Beide Bereiche bieten eine Vielzahl von Werkzeugen und Technologien für die Arbeit, entwickeln sich aktiv und erfordern viel Wissen. Dies gilt insbesondere für JavaScript, das eine Vielzahl von Frameworks und Bibliotheken für die "immer effizientere" Erstellung von Webanwendungen geschrieben hat.

Irgendwie wurde ich gefragt, was ich jetzt tun muss, um Anträge zu stellen, damit sie für einige Jahre nicht veraltet sind.

Als Programmierer kann ich eine völlig genaue und völlig nutzlose Antwort geben: HTML, CSS und JavaScript. Was genau zu wählen ist, jQuery, Angular oder React - das sind die Details.

Wenn Sie sich mit diesen Details befassen, können Sie eine andere ebenso korrekte wie nutzlose Antwort geben: auf alles. Ja, das stimmt. Die Anwendung kann auf alles geschrieben werden, sie wird funktionieren, sie kann geändert und entwickelt werden.

Was ist der Unterschied?

Um die Antwort zu finden, schauen wir uns an, was das Unternehmen vom Frontend will. Ich denke, dass ich niemanden überraschen werde, wenn ich sage, dass das Unternehmen schnell und kostengünstig ein qualitativ hochwertiges Ergebnis erzielen möchte.

Also, was müssen Sie jetzt tun, damit Anwendungen schnell und effizient ablaufen und den Kunden nicht ruinieren?

Entwicklungsgeschwindigkeit

Ein Programmierer mit umfassender Erfahrung mit React kann schnell eine Anwendung in React schreiben. Wenn er Erfahrung mit Angular hat, kann er schneller mit Angular arbeiten und so weiter. Alles ist ziemlich offensichtlich. Die Frameworks selbst sparen Entwicklungszeit, indem sie Lösungen für häufig auftretende Probleme und Aufgaben bereitstellen. Im Wesentlichen können diese Lösungen sehr nahe beieinander liegen, und der Unterschied zwischen ihnen kann in der Syntax oder im Programmierparadigma liegen.

Die Geschwindigkeit der Entwicklung unter Verwendung eines bestimmten Frameworks hängt von der Erfahrung und Qualifikation der Programmierer ab, die darauf schreiben. Das Framework selbst ist von untergeordneter Bedeutung.

Produktqualität

Hier ist es dasselbe: Es ist gut und schlecht, dass Sie auf jedem Framework schreiben können. Sie können überall richtige und falsche Architektur legen.

Es hängt alles von der Erfahrung und dem Wissen des Entwicklers ab.

Kosten

Alle wichtigen modernen Frameworks sind kostenlos. Wenn Sie also die Details weglassen, sind die Entwicklungskosten die Zeitkosten, die Entwickler für das Studium der Anforderungen, Technologien, die Ausarbeitung der Architektur und das Schreiben von Code aufgewendet haben. Plus die Kosten für das Finden / Trainieren dieser Entwickler.

Daher die Schlussfolgerung: Sie müssen sich weniger auf Technologie als auf Entwickler und die Organisation ihrer Arbeit verlassen.

Fast jedes moderne populäre Framework ist gut genug, um darauf fast jede Anwendung zu erstellen, die moderne Unternehmen benötigen.

Daher wird es weiter um die Effektivität des Frontends in Bezug auf die Organisation der Entwicklung gehen.

Wie war es bei uns?

Bis 2017 hatten wir Anwendungen für fast alles, was in der JavaScript-Welt Aufmerksamkeit verdient: von jQuery bis zu verschiedenen Versionen von Angular und React on Typescript und Flow. Layouts und Backend- / Fullstack-Entwickler arbeiteten auf der Client-Seite unserer Anwendungen. Jeder Entwickler wählte Tools für seine Aufgaben aus, abhängig von seinem Wissen über Front-End-Technologien.

Jetzt kann ich nur spekulieren, aber es scheint mir, dass die Auswahl von Frameworks und Bibliotheken durch Fullstack- / Backend-Entwickler ungefähr so war:

"Mal sehen, was sie im Internet schreiben ..."

Nun, Sie verstehen.

Bei der Auswahl eines Frameworks / einer Bibliothek ist der Entwickler zeitlich begrenzt. Meistens hat er keine Zeit, neue Frameworks unabhängig für ihn bereitzustellen und Testanwendungen zu erstellen. Deshalb trifft er irgendwie eine mehr oder weniger gut begründete Wahl und folgt dann in die gewählte Richtung.

Zu verschiedenen Zeitpunkten kann diese Auswahl auch für denselben Entwickler unterschiedlich sein (siehe Abbildungen oben). Gleichzeitig wird er nicht weniger vernünftig. Was kann man dann von verschiedenen Entwicklern mit unterschiedlichen Erfahrungen erwarten?

Unbekannt bis 2017 haben wir uns in einen echten Front-End-Technologie-Zoo verwandelt.

Frontend als separate Einheit

Eine Vielzahl unterschiedlicher Technologien im Unternehmen ist eine Risikoquelle. Ein Entwickler mit den erforderlichen Kenntnissen kann mit einem anderen Projekt beschäftigt sein, er kann das Unternehmen vollständig verlassen. Die Einstellung von Spezialisten mit umfassender Erfahrung in verschiedenen Bereichen ist ebenfalls keine leichte Aufgabe.

Eine qualitativ hochwertige Dokumentation kann die negativen Auswirkungen einer solchen Vielfalt abschwächen. In der Regel dauert es jedoch lange, bis Sie sich mit unbekannten Technologien vertraut gemacht haben.

Im Jahr 2017 erschien in unserem Unternehmen eine Front-End-Abteilung, die auf die wachsenden Anforderungen an die Qualität des Front-End-Teils unserer Projekte und deren Quantität sowie auf den Versuch, die Vielfalt der Technologien zu stabilisieren und die Entwicklungseffizienz zu steigern, reagierte.

Dies war eine wichtige Phase für die Entwicklung unseres Unternehmens: Was wir jetzt tun, wäre mit der Hilfe von Entwicklern unmöglich, ohne sich auf Front-End zu spezialisieren.

Wie kann man den Zoo heilen?

Eine unkontrollierte Vielfalt von Technologien macht es schwierig, die Geschwindigkeit und Qualität der Entwicklung im Allgemeinen vorherzusagen, während die kommerzielle Entwicklung genau dies erfordert.

Daher bestand unser nächster Schritt darin, den Stack des Unternehmens mithilfe von Experten aus dem neuen Geschäftsbereich zu vereinheitlichen.

Ein einheitlicher Stapel ist ein streng begrenzter Satz von Bibliotheken und Tools, mit denen Entwickler geschäftliche Probleme lösen können. Es enthält auch Richtlinien zu verschiedenen Programmieransätzen, z. B. die Verwendung eines überwiegend funktionalen Ansatzes oder umgekehrt dessen Ablehnung.

Mit einem einzigen Stack kann der Entwickler schnell von einem Projekt zum anderen wechseln, eine teamübergreifende Überprüfung durchführen und Erfahrungen und Best Practices effektiv mit Kollegen austauschen.

Die Hauptaufgabe besteht hier nicht darin, zu entscheiden, was wir über React oder Angular schreiben, sondern Entwickler dazu zu bringen, dieselben Tools zum Erstellen von Anwendungen und dieselben Ansätze zum Lösen allgemeiner Probleme zu verwenden.

Als Referenz: Unser Hauptwerkzeug ist React, aber wir entwickeln auch Know-how in Angular.

Hier beginnt der Spaß. Forcen in der Programmierwelt funktioniert sehr schlecht.

Anstelle von Zwang müssen Sie daher sicherstellen, dass die Entwickler selbst bestimmte Entwicklungsregeln befolgen möchten.

Dazu benötigen Sie:

irgendwie fixieren, Entwicklungsanforderungen formalisieren;
Ermutigen Sie die Entwickler, diese Richtlinien zu befolgen.

Das Formalisieren eines Stapels ist eine Aktivität, die die Fähigkeit erfordert, ein Gleichgewicht zu halten. Es ist nicht notwendig, detaillierte Vorschriften für alles zu erstellen, um den Entwicklern die Grundideen zu vermitteln. Darüber hinaus verbraucht das Erstellen und Verwalten detaillierter Spezifikationen viele Ressourcen.

Wir haben das Motivationsproblem wie folgt gelöst: Es ist besser als jede Dokumentation, dem Entwickler eine halbfertige Anwendung (Vorlage) zu geben.

Dies ermöglicht Entwicklern, Aufgaben schneller zu lösen und Kollegen mit ihrer Produktivität zu beeindrucken, und ermutigt sie gleichzeitig, die Grundregeln einzuhalten, die bereits im Code geschützt sind.

Einerseits führen ähnliche Anwendungen letztendlich zu einer deutlichen Steigerung der Entwicklungsgeschwindigkeit aufgrund der Anhäufung von Erfahrungen, vorgefertigten Lösungen, einer eingehenderen Überprüfung und der Möglichkeit, von Projekt zu Projekt zu wechseln. Auf der anderen Seite hat jedes Projekt seine eigenen Besonderheiten, daher ist es auch hier wichtig, es nicht mit Standardisierung zu übertreiben.

Was müssen Sie in die Anwendungsvorlage legen

Beim Starten neuer Projekte lösen Entwickler normalerweise die folgenden typischen Aufgaben:

Definition der Architektur, Auswahl der Technologien / Werkzeuge;
Erstellung, Montage von Anwendungsframeworks;
Erstellung und Konfiguration gemeinsamer Mechanismen: Fehlerbehandlung, modale Fenster, Benachrichtigungen, Routing, Serveranforderungen;
Definition eines Satzes von Schnittstellenelementen;
Suche / Erstellung, Anpassung, Stilisierung von Schnittstellenkomponenten mit den erforderlichen Funktionen;
Formularverarbeitung, Validierung;
Layout;
Implementierung von Funktionen im Auftrag eines Kunden (Geschäftslogik);
Code-Review;
Datensatzverwaltung.

Welche dieser Aufgaben können Ihre Entwickler in wenigen Minuten lösen?

Die von uns entwickelte Anwendungsvorlage schließt die ersten drei Elemente aus dieser Liste. In dieser Vorlage haben wir nicht nur unsere Wünsche nach einem einzelnen Stapel für die Entwicklung zum Ausdruck gebracht, sondern auch die Grundregeln der Anwendungsarchitektur.
Im Vergleich zu gängigen Lösungen, die gemeinfrei sind (z. B. Create-React-App), enthält unsere Vorlage bereits:

fertige Ordnerstruktur;
konfigurierter Router (Routen);
Konfigurierter Redux-Speicher
Serveranforderungsmodul;
vorgefertigte Mechanismen zur Anzeige verschiedener Arten von Ladern, Benachrichtigungen und modalen Fenstern durch Redux;
Fehlerverarbeitungsmodul (Server und Benutzer) mit der Ausgabe von Nachrichten an den Benutzer;
Vorlagenseiten;

Vorlagen für Geschäftslogikvorlagen, mit denen Fehler-, Lade- und Benachrichtigungshandler verbunden sind.

Im Wesentlichen ist dies eine produktionsbereite Anwendung mit einer Seite, auf der Hallo Welt steht. Beginnend mit dem Morgenkaffee kann der Entwickler zur Mittagszeit die erste Seite eines Arbeitsprojekts anzeigen.

Aber dann wartet eine große Anzahl anderer interessanter (und nicht so) Aufgaben auf den Entwickler.

Auswahl der Komponentenbibliothek

Alles, was Layout, Schnittstellenkomponenten (Dropdown-Listen, Kalender usw.), Formulare und Validierung betrifft, haben wir uns für die Verwendung unserer eigenen Bibliothek entschieden. Es war der schwierigste Teil.

2017 war die Hauptbibliothek des Unternehmens die kostenpflichtige Kendo-Komponentenbibliothek, die UI-Lösungen für verschiedene Technologien bereitstellte, beginnend mit jQuery. Aus verschiedenen Gründen passte es nicht zu uns, und wir beschlossen, alternative Bibliotheken in Betracht zu ziehen, einschließlich der Möglichkeit, eigene Bibliotheken zu erstellen.

Dies ist ein sehr wichtiger Punkt, an dem Sie die richtige Wahl treffen müssen: Finden Sie eine andere Bibliothek, die für uns besser ist, oder erstellen Sie Ihre eigene. Die weitere Verteilung der Entwicklungsressourcen und die Zeit, die Teams für die Erstellung und Fertigstellung von Schnittstellenelementen aufwenden, hängen von dieser Auswahl ab. Bei unserer Wahl gingen wir von den folgenden Überlegungen aus.

;
;
.

( , , );
;
, . ;
, . .

;
;
.

;
, / ( ..);
( , , , ).

In der Tat sind fertige Lösungen nicht so fertig. Fast jede Bibliothek muss bis zu dem einen oder anderen Grad vorbereitet sein. Wenn Sie ein kleines Projekt erstellen müssen, ist dies möglicherweise nicht der Fall. Wenn Sie jedoch ein großes Projekt oder viele kleine und unterschiedliche Projekte durchführen, sind die Kosten für Verbesserungen möglicherweise höher als die Kosten für die Erstellung Ihrer eigenen Bibliothek erfüllt voll Ihre Bedürfnisse.

Es stellt sich heraus, dass Sie zwischen der Installation sofort vorgefertigter Funktionen mit einer Reihe von Einschränkungen und der Entwicklung eigener Lösungen wählen müssen, wobei Sie warten und zusätzliche Ressourcen für die Entwicklung aufwenden müssen.

Keine der Optionen passte vollständig zu uns und wir fanden eine andere Lösung.

Wir haben uns entschlossen, unser Add-On für die fertige Bibliothek zu erstellen.

Ich möchte Sie daran erinnern, dass wir zu diesem Zeitpunkt die Kendo-Bibliothek bereits in ihrer reinen Form verwendet haben, eine Alternative, die wir finden wollten. Dies ist, was wir beschlossen haben, als Grundlage für unsere Hauptbibliothek von Komponenten für Anwendungen auf React zu verwenden. Und unsere neue Bibliothek selbst war eine Fassade über Kendo. Ich werde die technischen Details weglassen, ich werde nur sagen, dass eine solche Lösung es uns ermöglichte, sofort alle Kendo-Funktionen zu erhalten, und wir haben das getan, was uns fehlte, einschließlich der schnellen Behebung von Fehlern, in der Ebene zwischen der Client-API der Bibliothek und Kendo.

Diese Architektur ermöglichte es uns, die Anzahl der Komponenten aufgrund anderer Bibliotheken und Module schnell zu erweitern, indem wir sie einfach in unsere Ebene einbetten. Für Bibliotheksclients (für Anwendungsentwickler) schien dies eine schnelle Erweiterung der Funktionalität einer Bibliothek zu sein (ich werde dies in einem separaten Artikel ausführlich erörtern).

Im Laufe der Zeit haben wir alle Komponenten durch unsere eigenen Implementierungen ersetzt und die zweite Version der Bibliothek veröffentlicht, in der wir alle bisherigen Erfahrungen berücksichtigt, die API überarbeitet und unsere eigene Dokumentation erstellt haben.

Wir haben uns entschlossen, unsere Erfolge öffentlich zugänglich zu machen. Bald können sie heruntergeladen und in unseren Projekten verwendet werden. Folgen Sie den Ankündigungen.

Was haben wir am Ende bekommen?

Jetzt haben wir mehr als 10 Front-End-Entwickler in mehreren Teams, die am selben Stack und mit einer Reihe von Technologien arbeiten. Auf einem Stapel haben wir bereits ungefähr zwanzig Projekte erstellt.

Statistiken zeigen, dass sich die Arbeitseffizienz in zwei Jahren mehr als verdreifacht hat. Die Projekte, für die wir früher 4-6 Monate aufgewendet haben, machen wir jetzt in 1-2 Monaten (wir sprechen über den Front-End-Teil).

Wir haben begonnen, die Entwicklungszeit zu verkürzen, indem wir die Struktur der Aufgaben der Programmierer geändert haben. Schauen wir uns an, wie sie sich verändert haben.

Ich habe bereits eine Liste von Aufgaben angegeben, die Entwickler vor zwei Jahren gelöst haben:

Definition der Architektur, Auswahl der Technologien / Werkzeuge;
Erstellung, Montage von Anwendungsframeworks;
Erstellung und Konfiguration gemeinsamer Mechanismen: Fehlerbehandlung, modale Fenster, Benachrichtigungen, Routing, Serveranforderungen;
Definition eines Satzes von Schnittstellenelementen;
Suche / Erstellung, Anpassung, Stilisierung von Schnittstellenkomponenten mit den erforderlichen Funktionen;
Formularverarbeitung, Validierung;
Layout;
Implementierung von Funktionen im Auftrag eines Kunden (Geschäftslogik);
Code-Review;
Datensatzverwaltung.

Von diesen beschäftigen sich Entwickler in unserem heutigen Unternehmen nur mit den letzten drei:

Implementierung von Funktionen im Auftrag eines Kunden (Geschäftslogik);
Code-Review;
Projektdokumentation pflegen.

Der Rest ist bereits in der Anwendungsvorlage und Komponentenbibliothek festgelegt.

Dies wirkte sich nicht nur auf die Arbeitsgeschwindigkeit aus, sondern allgemein auf die Stimmung der Entwickler. Auf jeden Fall ist die Implementierung von Geschäftslogik viel interessanter als das Einrichten von Dropdown-Listen. Für den Projektmanager ist es auch viel einfacher, dem Kunden zu erklären, dass eine Woche Arbeitszeit für die Entwicklung wichtiger Geschäftsfunktionen aufgewendet wurde, und nicht für die Tatsache, dass ein kleines Schnittstellenelement fertiggestellt werden musste, obwohl diese in Bezug auf die Arbeitskosten durchaus gleichwertig sein können.

Wir arbeiten weiterhin in die gewählte Richtung und eine der Hauptaufgaben für die nahe Zukunft ist es, die Motivation der Entwickler zu erhöhen, ihre Kompetenzen im ausgewählten Stapel zu vertiefen und nach neuen effektiven Lösungen zu suchen. Dank einer gemeinsamen Bibliothek und Anwendungsvorlage ist es jetzt einfach, solche Lösungen im gesamten Unternehmen zu skalieren.

Mit Wünschen nach Effizienz und bis bald!

Frontend-Entwicklung im Unternehmen: Was es ist und wie es effektiv gemacht werden kann