Was ist Web-Frontend-Architektur?

Web-Frontend-Architektur ist eine Sammlung von Tools und Prozessen, die darauf ausgelegt sind, die Qualität des Frontend-Codes zu verbessern und effiziente und nachhaltige Arbeitsabläufe zu erreichen. Es gibt 4 Kerne der Web-Frontend-Architektur: 1. Code (HTML, CSS, JavaScript); 2. Prozess, wie man Tools und Prozesse verwendet, um einen effizienten und fehlerfreien Workflow aufzubauen; Abdeckung erstellen Ein umfangreiches Testprogramm kann sicherstellen, dass alter Code weiterhin normal ausgeführt werden kann. 4. Dokumentation und Designdokumentation sind ein Werkzeug, mit dem Sie mit anderen kommunizieren können.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Heutzutage werden Web-Frontend-Projekte aufgrund der rasanten Veränderungen in der Web-Frontend-Technologie immer komplexer. Auch die Front-End-Architektur wird sich mit unseren sich ständig ändernden iterativen Anforderungen und Architekturtechnologien weiterentwickeln. Dies ist ein Thema, auf das nicht nur Architekten, sondern auch jeder unserer Entwickler achten muss.

1. Der Ursprung der Web-Front-End-Architektur

Auf der CSS Developer Conference am 13. Oktober 2014 wurde in einem überfüllten Raum im New Orleans Convention Center „die Flagge der Front-End-Architektur gehisst“. ein Kampf an vorderster Front Das ist der gemeinsame Reiz aller Entwickler. Danach stellten Entwickler, die herauszufinden versuchten, wer sie waren und welche Rolle sie im Unternehmen spielten, fest, dass sie die Rolle des Front-End-Architekten gespielt hatten, diesen Titel jedoch nie innehatten oder nicht das Selbstvertrauen hatten, dafür zu kämpfen die Kraft, die diese Position mit sich bringt.

Einige Wochen nach der Konferenz änderten viele Menschen ihr Profil auf Twitter in „Front End Architect“.

2. Was versteht man unter der Web-Frontend-Architektur?

Front-End-Architektur ist wie Architekturdesign. Während des Bauprozesses müssen Architekturdesigner Pläne entwerfen und planen und den Bauprozess verfolgen. Dies ähnelt der Arbeit eines Front-End-Architekten, mit der Ausnahme, dass dieser Websites statt Gebäude erstellt. Architekten geben sich mehr Mühe, die Zusammensetzung eines Projekts zu entwerfen, als Beton zu gießen. Ebenso konzentrieren sich Frontend-Architekten mehr auf die Entwicklung von Tools und die Optimierung von Prozessen als auf das Schreiben von spezifischem Code.

Front-End-Architektur ist eine Sammlung von Tools und Prozessen, die darauf ausgelegt sind, die Qualität des Front-End-Codes zu verbessern und effiziente und nachhaltige Arbeitsabläufe zu erreichen.不 Die Front-End-Design-Architektur ist nicht ein für alle Mal fertig. Kein Design ist am Anfang perfekt und es gibt keinen Plan, der umgesetzt werden muss.

Die Besonderheit der Front-End-Architektur

Das Front-End ist kein eigenständiges Subsystem, sondern überspannt das gesamte System

Dispersion: Front-End-Engineering

Abstraktion, Entkopplung und Kombination von Seiten

Steuerbar : Gerüstbau, Entwicklungsspezifikationen usw Ausnahmebehandlung usw B. die Bauarbeiter, dann kann es zu einem solchen Szenario kommen: Eine Wand besteht aus Stein, die zweite Wand besteht aus Ziegeln, die dritte Wand besteht aus Holz und die vierte Wand bleibt der Mode halber leer.

Obwohl das Gesamterscheinungsbild und der Stil der Website vollständig von erfahrenen visuellen Designern bestimmt werden, kontrollieren Front-End-Architekten die Front-End-Entwicklungsmethoden und die Systemdesign-Philosophie dahinter. Durch den Entwurf von Systemspezifikationen, denen alle Front-End-Entwickler folgen, schaffen Front-End-Architekten ein klares Bild der endgültigen Form des Produkts und des Codes.

Sobald der Front-End-Architekt die Systemdesignspezifikationen festlegt, verfügt das Projekt über einen Standard zur Messung der Codequalität. Wie können wir sonst beurteilen, ob der Code den Standards entspricht? Ein gut konzipiertes System sollte über einen vollständigen Prüfmechanismus verfügen und entsprechende Kompromisse eingehen, um sicherzustellen, dass der Code im System einen erheblichen Wert hat und nicht einfach angehäuft wird.

2. Arbeitsplanung

Nachdem Sie einen klaren Strukturentwurf haben, müssen Sie einen Entwicklungsworkflow formulieren. Welche Schritte muss ein Entwickler durchlaufen, um eine Codezeile zu schreiben und online einzureichen? Um das einfachste Beispiel zu nennen: Bei diesem Vorgang müssen Sie sich über FTP beim Server anmelden, eine Datei ändern und speichern. Bei den meisten Projekten kann der gesamte Workflow jedoch mehrere Tools verwenden, wie z. B. Versionscontroller, Taskplaner, CSS-Prozessoren, Dokumentationstools, Testkomponenten und Serverautomatisierungstools.

Das Ziel eines Frontend-Architekten ist es, ein System zu entwerfen, das reibungslos läuft. Dieses System kann nicht nur effizient und schnell starten, sondern durch Sprachanalyse, Testfälle, Dokumentation und andere Methoden auch kontinuierlich effektives Feedback liefern und menschliche Fehler, die durch wiederholte Vorgänge verursacht werden, erheblich reduzieren.

3. Überwachung und Nachbereitung

Das Design der Frontend-Architektur ist keineswegs eine einmalige Aufgabe. Kein Design ist von Anfang an perfekt und kein Plan ist in einem Schritt perfekt. Die Bedürfnisse von Kunden und Entwicklern ändern sich im Laufe der Zeit. Ein Entwicklungsprozess, der in einer Phase gut funktioniert, muss später möglicherweise umstrukturiert werden, um die Effizienz zu verbessern und Fehler zu reduzieren.

Eine sehr wichtige Fähigkeit eines Frontend-Architekten ist die Fähigkeit, den Workflow kontinuierlich zu optimieren. Die verschiedenen Build-Tools von heute ermöglichen es uns, unsere Arbeitsweise einfach zu ändern und jeden Entwickler zu benachrichtigen.

Manche Leute fragen, ob Front-End-Architekten gleichbedeutend mit Managementrollen sind und keinen Geschäftscode mehr schreiben müssen. Frontend-Architekten müssen nicht nur mehr Code schreiben, sondern auch in der Lage sein, mehrere Programmiersprachen zu verwenden und viele Tools zu verwenden. Die Menge des Codes wurde nicht reduziert, nur die Leser des Codes haben sich geändert. Front-End-Entwickler schreiben Code für Endbenutzer, während Front-End-Architekten Code für die Entwickler im Team schreiben.

4. Der Kern der Web-Frontend-Architektur

1. Code

Letztendlich bestehen alle Websites aus einer Reihe von Textdateien und Ressourcendateien, die aus HTML, CSS usw. bestehen JavaScript. Wenn wir mit der Menge an Code konfrontiert werden, die in die Erstellung einer Website einfließt, wird deutlich, wie wichtig es ist, Erwartungen an Code und Ressourcen festzulegen.

2. Prozess

Wie man Tools und Prozesse nutzt, um einen effizienten und fehlerfreien Arbeitsablauf aufzubauen, ist eine wichtige Überlegung. Arbeitsabläufe werden immer komplexer, und damit auch die Tools, mit denen sie erstellt werden. Diese Tools bringen erstaunliche Ergebnisse bei der Steigerung der Produktivität, der Beschleunigung der Effizienz und der Aufrechterhaltung der Codekonsistenz, bergen jedoch auch das Risiko von Over-Engineering und Abstraktion.

3. Testen

Um ein skalierbares und kontinuierlich optimiertes System aufzubauen, müssen wir sicherstellen, dass neuer Code gut mit altem Code kompatibel ist. Unser Code wird nicht isoliert existieren, sie sind alle Teil eines großen Systems Testplan mit umfassender Abdeckung, um sicherzustellen, dass der alte Code weiterhin normal ausgeführt werden kann.

4. Dokumentation

Die Designdokumentation ist ein Werkzeug, mit dem Sie mit anderen kommunizieren, Ihre Designentscheidungen erklären, Ihre Designentscheidungen treffen und erklären können, warum Ihre Entscheidungen gut sind. Sofern nicht ein wichtiges Mitglied des Teams das Team verlässt, werden nur wenige die Bedeutung der Dokumentation erkennen.

Diese vier Kerne bilden die Grundlage für den Aufbau eines skalierbaren und nachhaltig optimierten Systems.

(Lernvideo-Sharing: Erste Schritte mit dem Web-Frontend)

Das obige ist der detaillierte Inhalt vonWas ist Web-Frontend-Architektur?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!