Web Notes
1.0.0
Lesen Sie online >>
Codefälle · Referenzmaterial
Die Webentwicklung ist leicht zu beginnen, aber schwer zu kennen. Es ist in Phasen unterteilt, wie zum Beispiel der erste Blick an die Tür, ein Betreten des Raums und die Integration des gesamten Prozesses. Wenn Sie zum ersten Mal die Artikelreihe des Autors lesen, wird empfohlen, den technischen Weg eines bestimmten Bären für ein umfassendes Verständnis zu erreichen. In dieser Serie verpflichtet sich der Autor, zu untersuchen, wie die F & E -Effizienz des Teams effektiv verbessert und die Lieferung während des gesamten Lebenszyklus der Produkt -Iteration rechtzeitig und zuverlässig vervollständigt werden kann. Gleichzeitig kann es die Gesamtkomplexität des Systems steuern und die Leistung und Erfahrung des Systems kontinuierlich optimieren.
Rückblickend auf die brillanten Veränderungen in der Web -Technologie und -ökologie in den letzten Jahrzehnten haben wir aufregende Veränderungen erlebt und sind in der Verwirrung der Wahl oft verloren. Mit der Innovation von Browserversionen und der Verbesserung der Hardwareleistung hat die Web-Front-End-Entwicklung in eine schnelle und sich ständig verändernde Ära eingetreten. Unzählige Front-End-Entwicklungsrahmen und technische Systeme konkurrieren um Schönheit, wodurch Entwickler verwirrt und sogar lediglich sind. Insbesondere mit dem Aufkommen moderner Web-End-Front-End-Frontworks (Angular, React, Vue.js), der Verbesserung der Sprachmerkmale wie JavaScript, CSS, HTML usw. und den vorgeschlagenen theoretischen Konzepten wie technischen Konzepten wie Engineering, plattformübergreifend, breit, mikrofront-abends, und BFF, die technologische Spart- und Community-Communitys-Entwicklung sind konstant angrenzend. Status. In Bezug auf die sogenannten modernen Front-End-Ingenieure müssen sie normalerweise eine Menge professioneller Kenntnisse nutzen, um technische Probleme zu lösen, einschließlich der Modularisierung des Projekts, zum Entwerfen von Interaktionen zwischen Komponenten, der Verbesserung der Wiederverwendbarkeit, der Verbesserung der Verpackungseffizienz, der Optimierung der Browser-Rendernleistung usw.; Nicht mehr wie zuvor benötigen sie nur HTML/CSS/JS -Routine, um statische Seiten zu entwickeln.
Insgesamt wird jedes Programmierökosystem drei Phasen durchlaufen, zunächst die ursprüngliche Zeit. Da es notwendig ist, Sprache und grundlegende APIs zu erweitern, wird diese Phase eine große Anzahl von Hilfstools zur Welt bringen. In der zweiten Stufe werden, wie die Dinge, die gemacht werden, komplexer werden, mehr Organisationen benötigt und eine große Anzahl von Entwurfsmustern und architektonischen Mustern eingeführt. Diese Phase wird eine große Anzahl von Frameworks zur Welt bringen. In der dritten Stufe trat mit der weiteren Komplexität der Nachfrage und der Ausweitung des Teams in die technische Stufe ein, und verschiedene hierarchische MVC-, MVP-, MVVM usw., visuelle Entwicklung, automatisierte Tests und Teamkollaborationssysteme.
Interessanterweise ist auch die Aufteilung dieser drei Stadien inkonsistent, wenn wir zu unterschiedlichen Zeitpunkten stehen. Nach dem aktuellen Verständnis des Autors ist es in drei verschiedene Phasen unterteilt: Vorlagenrendern, Front-End-Trennung und einseitige Anwendungen, Engineering und Micro Front-End, Large Front-End und Serverless.
Natürlich wird jede kleine Bühne von der Entstehung neuer Frameworks und neuer Tools begleitet:
Die Entwicklung von Web-Front-End-Entwicklung kann 1991 auf die öffentliche Erwähnung von HTML-Beschreibung von Tim Berners-Lee zurückgeführt werden, und dann veröffentlichte W3C 1999 den HTML4-Standard. Diese Phase war hauptsächlich eine B/s-Architektur, und es gab kein sogenanntes Front-End-Entwicklungskonzept. Zu diesem Zeitpunkt waren es hauptsächlich statische Seiten, die auf der Renderung der Vorlage basierten. Die Hauptsache ist, einige dynamische Vorlagen über JSP, PHP und andere Technologien zu schreiben und die Vorlagen dann über Webserver in HTML -Dateien zu analysieren. Der Browser ist nur dafür verantwortlich, diese HTML -Dateien zu rendern. Zu diesem Zeitpunkt gibt es keine Arbeitsteilung zwischen Vorder- und Rückseite, und normalerweise schreibt der hintere Endingenieur die Seite vorne.
In den nächsten Jahren werden die Konzepte der Front-End-Trennung und des reichen Kunden zunehmend anerkannt. Wir müssen Sprache und grundlegende APIs erweitern. Zu diesem Zeitpunkt entstand eine Reihe von Front-End-Hilfstools, die von JQuery vertreten sind. Basierend auf Ajax haben die vorderen und hinteren Enden auch die Straße der Trennung geöffnet, und die Front- und Back -End -Trennungsarchitektur ist allmählich beliebt geworden. Das Front-End ist für die Schnittstelle und Interaktion verantwortlich, und das Back-End ist für die Verarbeitung der Geschäftslogik verantwortlich. Die vorderen und hinteren Enden interagieren durch die Schnittstelle. Wir müssen in jeder Backend-Sprache nicht mehr schwer zu machende HTML schreiben. Die Komplexität der Webseiten hat sich auch vom Backend-Webserver zum Browser-Seite JavaScript verlagert.
Seit 2009 ist die Entwicklung von Smartphones beliebt geworden, und die Welle der mobilen Terminals war nicht mehr aufzuhalten. Das Design-Konzept der Spa-einseitigen Anwendung ist ebenfalls populär geworden. Die damit verbundene Front-End-Modularität, Komponentierung, reaktionsschnelle Entwicklung, Hybridentwicklung und andere Technologien sind dringend. Insbesondere die Entstehung von Node.js im Jahr 2009 sowie die begleitenden CommonJS -Spezifikationen und der NPM -Paketmanagementmechanismus brachten eine Reihe hervorragender Rahmenbedingungen wie Angular 1 und Ionic sowie Modulstandards wie AMD, CMD, UMD, Anforderungen, SEAJS und Tools wie GrunD und Gulp. Front-End-Ingenieure sind auch zu einem speziellen Entwicklungsfeld mit einem technischen System- und Architekturmodell unabhängig vom Backend geworden.
In der Vergangenheit brauchten wir nur einfache HTML und JS. Jetzt mussten wir den Paket-Manager verwenden, um Pakete von Drittanbietern automatisch herunterzuladen, mit dem Modul-Manager eine einzelne Skriptdatei zu erstellen, den Übersetzungskompiler zu verwenden, um neue JavaScript-Funktionen anzuwenden, und den Aufgabenläufer verwenden, um jeden Konstruktionsschritt automatisch auszuführen.
In den letzten zwei Jahren benötigen wir mit zunehmender Komplexität von Webanwendungen, der Ausweitung des Teampersonals und der Nachfrage des Benutzers nach Freundlichkeit und Leistungsoptimierung des Benutzers ein hervorragenderes und flexibleres Entwicklungsrahmen, um uns dabei zu helfen, eine bessere vollständige Entwicklung der Front-End-Entwicklung zu erzielen. Diese Phase hat sich viele Rahmenbedingungen mit relativ konzentrierten Bedenken und besseren Designkonzepten entwickelt. Zum Beispiel ermöglichen es Komponentenrahmen wie React, Vue.js und Angular 2, die imperative Programmierung durch DOM -Operationen als Kern mit deklarativer Programmierung zu ersetzen, was die Entwicklung der Komponenten beschleunigt und die Wiederverwendbarkeit und Verbesserbarkeit der Komponenten verbessert. Redux, der funktionaler Programmierungen folgt, und MOBX, das das Konzept der reaktionsschnellen Programmierung leiht, ist beide sehr gute Hilfsrahmen für das staatliche Management, das Entwicklern dabei hilft, die Geschäftslogik von der Sichtweite zu trennen, die Projektstruktur angemessener zu trennen, das Prinzip der einzigen Verantwortung besser zu implementieren und die Wartbarkeit von Code zu verbessern. In den Projektbautools, das durch Grunzen und Gulp und von Webpack, Rollup und JSPM dargestellte Projektverpackungswerkzeuge, die den Entwicklern besser erstellen, können die Konstruktionsprozesse und die Vorbereitung von Asynchronen, Polyfassen, Komprimierung und andere Vorgänge automatisch besser erstellen.
Die Reife der Werkzeugkette hat ebenfalls die technische Nachfrage geführt, wobei die Geschäftstechnologie und Technologiegeschäfte vorantreiben. Front-End-Engineering soll den Front-End-Entwicklungsprozess, die Technologie, die Tools, die Erfahrung usw. standardisieren und basierend auf bestimmten Geschäftsmerkmalen. Sein Ziel ist es, die Entwicklung von Front-End-Entwicklung zu ermöglichen, ein eigenes System zu bilden, die Entwicklungseffizienz von Front-End-Ingenieuren zu maximieren und die Koordinations- und Kommunikationskosten zu reduzieren, die durch die Auswahl der Technologie, Front-End- und Back-End-gemeinsame Inbetriebnahme usw. verursacht werden.
Die eigene logische Komplexität, das Engineering-Beladung und die Verbesserung der Kombinationskomplexität der Anwendung bringen auch bestimmte Herausforderungen für die Leistung des Front-Ends. Beispielsweise haben Komponentenrahmen wie React die weiße Bildschirmzeit, wenn die Seiteninitialisierung nicht zu SEO freundlich ist. Das Front-End hat begonnen, dieses Problem durch Serverwiedergabe zu lösen und die Vorlagen von Serversprachen wie JSP und PHP zu ersetzen, basierend auf isomorphen Anwendungen, die von React, Vue usw. implementiert sind, oder sie in Form eines vollständigen HTML-Dokuments an den Browser zurückzugeben.
Node.js konzentrierte sich nach jahrelanger Entwicklung auf den vollständigen Stapel und hat die Fähigkeit, Anwendungen auf Unternehmensebene zu unterstützen, voll und ganz in der Lage, in vielen inländischen und ausländischen Unternehmen wie Lowe, Netflix und Alibaba eine große Anzahl von Praktiken zu haben. Darüber hinaus hat Node.js eine natürliche Sprachaffinität, die es Entwicklern erleichtert, die Verantwortung des gesamten Stapels zu übernehmen. Mit dem Aufstieg von Konzepten wie Microservice-Architektur und Cloud Native und Serverless werden die Backend-Schnittstellen allmählich zu Atomic, und die Microservice-Schnittstellen sind nicht mehr direkt auf die Seite gerichtet, und die Front-End-Anrufe sind kompliziert geworden. Daher entstand das von GraphQL dargestellte BFF -Konzept (Backend for Frontend). Es wurde eine BFF-Schicht zwischen dem Microservice und dem Front-End hinzugefügt, und die Grenzfläche wurde aggregiert und von BFF beschnitten und dann zum Front-End ausgegeben.
BFF löst die Probleme der Grenzflächenkoordination und -aggregation und trägt auch den ursprünglichen gleichzeitigen Druck auf das Backend, was auch den Front-End-Ingenieuren viel Entwicklung und Betrieb und Wartungsdruck bringt. Serverless kann dieses Problem lindern. Wir können Funktionen verwenden, um die Aggregation und das Zuschneiden von Schnittstellen zu implementieren. Die Front-End-Anfrage für BFF wird in einen Auslöser für FAAS-HTTP-Trigger umgewandelt. Diese Funktion implementiert die Geschäftslogik für die Anforderung, z. B. das Aufrufen mehrerer Microservices, um Daten zu erhalten, und dann die Verarbeitungsergebnisse an das Front-End zurückzugeben. Auf diese Weise hat sich der Betriebs- und Wartungsdruck vom vorherigen BFF-Server auf FAAS-Dienste verlagert, und das Front-End muss sich nicht mehr um den Server kümmern. Serverless kann auch auf das serverseitige Rendering angewendet werden, die jede vorherige Route in Funktionen aufteilt und dann die entsprechenden Funktionen auf FAAs bereitstellt. Auf diese Weise entspricht der vom Benutzer angeforderte Pfad jeder einzelnen Funktion. Auf diese Weise werden die Betriebs- und Wartungsvorgänge auf die FAAS -Plattform übertragen. Wenn das Front-End die Serverseite rendert, müssen Sie sich nicht um die Betriebs- und Wartungsbereitstellung des Serverprogramms kümmern. Darüber hinaus bieten Mini-Programme wie WeChat und Alipay auch Cloud-Entwicklungsplattformen an, die den serverlosen Konzepten entsprechen und die schnelle Iteration von Geschäftsfrontendern befähigen.
Weitere Informationen und Führer finden Sie in Einführung.
Chinesische Version | Englische Version
Wenn Sie ein sehr erfahrener Entwickler sind und etwas über Front-End-Ingenieurwesen und Architektur wissen möchten, wird empfohlen, den Artikel Front-End-Evolution zu lesen.
Wenn Sie keine vollständige Verständnis der JavaScript -Basic -Syntax haben, wird empfohlen, zuerst "moderne JavaScript -Syntax -Grundlagen und technische Praxis" zu durchsuchen, um die Basis -JavaScript -Syntax und die praktischen Anwendungen zu verstehen.
Wenn Sie Node.js vollständige Stapelentwicklung verstehen möchten, können Sie sich auf Knotennoten beziehen.
Nach dem Verständnis des theoretischen Wissens wird empfohlen, nach WX-Fe zu gehen, um alle Open-Source-Projekte des Autors zu überprüfen.
Alle Artikel des Autors unterliegen der kreativen Commons Attribution-nicht-kommerziellem Nutzungsbeschreibung. Nachdruck ist willkommen und das Urheberrecht wird respektiert. Sie können auch die NGTE Books-Homepage besuchen, um eine Liste von Büchern für mehrere Kategorien zu durchsuchen, darunter Wissenssystem, Programmiersprache, Software-Engineering, Modell und Architektur, Web und große Front-End, Server-Seite-Entwicklungspraxis und technische Architektur, verteilte Infrastruktur, künstliche Intelligenz und Deep-Lernen, Produktoperationen und Unternehmertum und andere:
