Fassen Sie die großen Frontend-Technologietrends der vergangenen Jahre zusammen und freuen Sie sich auf die Technologietrends im Jahr 2022

Es gibt im Jahr 2021 keine revolutionären Starprojekte im Bereich „großes Frontend“, aber es gibt eine gewisse Erweiterung und tiefgreifende Entwicklung in verschiedenen unterteilten technischen Bereichen. Es wird erwartet, dass viele neue Technologien oder neue Funktionen explodieren 2022.

Im aktuellen „kalten Winter“ des Internets können Front-End-Techniker dem „Ostwind“ des Frühlings nur besser begegnen, indem sie ihre internen Fähigkeiten kultivieren und sich ständig stärken.

Welche „Muskeln“ sollten Front-End-Techniker üben? Vielleicht können wir im „JavaScript Star Project 2021“ einige Antworten finden:

zx Toolkit wurde in nur 7 Monaten zum jährlichen Star-Wachstum gezählt. Das schnellste Projekt, das zeigt die kontinuierliche Durchdringung und den Einfluss der Front-End-Entwicklung im gesamten Stack.

• In Bezug auf Front-End-Frameworks entwickeln sich die führenden Unternehmen React und Vue immer noch stetig weiter und bringen weiterhin Innovationen hervor. Das dunkle Pferd Svelte ist dieses Jahr hervorgegangen, hat Angular überholt und auf einen Schlag den dritten Platz belegt, und hat die Spitzenposition im Visier. Kann
Svelte also durchbrechen?

• Unter den Node.js-Frameworks übernimmt Reacts „Meta-Framework“ Next.js die Führung. Rookie Remix hat in nur zwei Monaten den vierten Platz erreicht, was Aufmerksamkeit verdient.

• In Bezug auf Build-Tools
die Akzeptanz nativer ES-Module hält an
• und Vite ist unaufhaltsam. Andererseits

  aus Leistungsgründen beginnen immer mehr Front-End-Tools, andere Sprachen zu verwenden ​​​( Rust, Go) zum Bauen.

  Auf dem Desktop hat das beliebte Tauri die Dominanz von Electron gebrochen. Basierend auf Rust (austauschbar) hat Tauri eine kleinere Paketgröße und einen kleineren Speicherbedarf als Electron, und die Zukunft ist vielversprechend.

• Als nächstes werden wir eine Bestandsaufnahme der wichtigen Dinge machen, die im Jahr 2021 in der Front-End-Branche passiert sind, und auch darüber berichten, was das Tencent IMWeb-Team im vergangenen Jahr getan hat.

Zusammenfassung der jährlichen Trends im Jahr 2021

1. Das stetige Wachstum von TypeScript

Gemessen an den Sprachnutzungsdaten von Github (Top-Sprachen im Laufe der Jahre) liegt 2021 TypeScript immer noch auf dem vierten Platz.

Nach den neuesten JS-Umfragedaten für 2020 zu urteilen, steht die TypeScript-Nutzung unter ähnlichen Tool-Wettbewerben immer noch an erster Stelle (State of JS-Umfrage).

Der Stack Overflow Developer Survey 2021 zufolge nimmt die Popularität von TypeScript immer noch zu und es wird geschätzt, dass sie im Jahr 2022 weiter zunehmen wird.

Rezension

Rückblickend auf das Jahr 2021 verdeutlicht die offizielle Roadmap, dass das Ziel von TypeScript darin besteht, sein Typsystem weiter zu verbessern, leistungsstarke Tools zur Steigerung der Produktivität zu implementieren, die Benutzererfahrung zu verbessern, die Beteiligung der Community zu erhöhen, Infrastruktur und Technik zu verbessern System. Nach der Festlegung des Ziels hat das TypeScript-Team dieses Jahr sehr effektiv vier Versionen veröffentlicht. Die neueste Version ist 4.5. Viele der neuen Funktionen machen in der Tat mehr Spaß, wie zum Beispiel:

Bessere Tupeltypunterstützung Verbleibende und optionale Typen an jeder Position.

• Bessere Unterstützung für Vorlagenzeichenfolgen-Literaltypen.

• Intelligentere Typinferenz für bedingte Verzweigungsfelder.

• Der Indextyp unterstützt die Modi Symbol und Vorlagenzeichenfolge.

• Erwartete Verbesserungen für Typ und Promise-Typ.

• und mehr.

• Zusätzlich zu den Funktionen verbessert es auch viele Nutzungserlebnisse, wie zum Beispiel:

Leistungsoptimierungen wie schnellere Typgenerierung, inkrementelle Kompilierung und Sourcemap-Generierung.

• Intelligentere IDE-Vervollständigung.

• Speicherort der Nicht-Javascript-Quelldatei.

• und mehr.

• Darüber hinaus wurde im August die neue offizielle TypeScript-Website gestartet und die neuen Dokumente sind bequemer zu durchsuchen.

Derzeit ist TypeScript zum Standard für das IMWeb-Team geworden. Unabhängig davon, ob es sich um ein

Web-Frontend

, ein Node.js-Projekt oder ein öffentliches Modul handelt, unterstützt die Gerüstvorlage standardmäßig TypeScript. Das öffentliche Modulsystem verwendet nicht nur TypeScript zum Schreiben von Code und zur Typprüfung, sondern verwendet auch ESLint zur Implementierung spezifischer Überprüfung des TS-Sprachstandards AST, Implementierung öffentlicher Modulspezifikationen und Kombination von TypeDoc, um Nutzungsdokumentation usw. zu erstellen.

Ich freue mich auf die Zukunft

TypeScript wird in Zukunft weitere aufregende Funktionen bieten, wie zum Beispiel:

Flattening-Deklarationen, die nur eine gesamte d.ts-Datei anstelle einer für jedes Modul ausgeben.

• Ambient-Dekoratoren werden verwendet, um einige Umgebungsinformationen anzugeben, z. B. ob die API veraltet ist. Laufzeitcode, der sich nicht auf die Ausgabe auswirkt, wird nur in der d.ts-Deklarationsdatei widergespiegelt.

• Die bedingte Kompilierung ähnelt in gewisser Weise der #if-Makrodefinition in C++. Sie kann den Code vor der Kompilierung vorverarbeiten und die Codezweige beibehalten, die die Bedingungen erfüllen.

• Dekoratoren für Funktionsausdrücke/Pfeilfunktionen Derzeit können Dekoratoren in TypeScript nur in Klassen verwendet werden. In Zukunft ist es möglicherweise möglich, die Verwendung von Dekorationen für Funktionsausdrücke und Pfeilfunktionen außerhalb des Klassengeräts zu unterstützen.

• und mehr.

Wie es in der Roadmap heißt, geht TypeScript in die richtige Richtung. Es gibt viele Schriftfunktionen, Leistungsoptimierungen, Erfahrungsoptimierungen und unterstützende Tools, die zur Verbesserung der Produktivität eingesetzt werden können der JS-Sprache. Wird TypeScript angesichts der zunehmenden Entwicklung und Verbesserung von TypeScript in Zukunft nativ von Browsern und Node.js unterstützt? Freuen wir uns gemeinsam darauf.

2. React ist führend und setzt seine Innovationen fort

React 18 hat die Veröffentlichung der Alpha-, Beta- und Release-Candidate-Versionen in der zweiten Jahreshälfte 2021 abgeschlossen und wird die offizielle Version Anfang 2022 veröffentlichen.

Wenn React 18 veröffentlicht wird, wird es sofort einsatzbereite Verbesserungen (wie automatisches Batching), neue APIs (wie startTransition) und eine neue SSR-Architektur mit integrierter Unterstützung für React.lazy enthalten.

Diese Funktionen sind dank des in React 18 neu hinzugefügten optionalen „Concurrent Rendering“-Mechanismus möglich, der viele neue Möglichkeiten für React freischaltet, um Ihnen bei der Verbesserung der tatsächlichen Leistung im Vergleich zur wahrgenommenen Leistung des Programms zu helfen.

React 18 verfolgt eine schrittweise Strategie. Da Parallelität in React 18 eine optionale Funktion ist, führt sie nicht sofort zu offensichtlichen störenden Änderungen am Komponentenverhalten. Sie können fast ohne Änderungen am Code in Ihrer Anwendung direkt auf React 18 aktualisieren und neue Funktionen in Ihrem eigenen Tempo und Bedarf ausprobieren.

Im Allgemeinen bringt React 18 Updates in den folgenden 3 Aspekten:

➢ Automatisches Batching

➢ SSR für Suspense

➢ Neue APIs für App- und Bibliotheksentwickler

● Automatisches Batching

React 18 Fügt Out- hinzu Standardmäßige Leistungsverbesserungen durch standardmäßig mehr Batchverarbeitung, wodurch die Notwendigkeit manueller Batchaktualisierungen im Anwendungs- oder Bibliothekscode entfällt.

Batching bedeutet, dass React mehrere setState-Ereignisse in der Callback-Funktion in einem Rendering kombinieren kann.

React 17 stapelt nur Ereignisrückrufe, während React 18 so viel Stapelverarbeitung wie möglich für setState aus jeder Quelle durchführt. Auch wenn setState mehrmals in Versprechens-, Timeout- oder Ereignisrückrufen aufgerufen wird, werden sie in einem Rendering zusammengeführt.

Ersetzen Sie ReactDOM.render durch die Aufrufmethode ReactDOM.createRoot, um diese neuen Funktionen zu aktivieren.

● SSR for Suspense

Der vollständige Name lautet: Streaming SSR mit selektiver Flüssigkeitszufuhr.

Es ist wie ein Wasserfluss, der eine kontinuierliche Rendering-Pipeline vom Server zum Client erstellt, anstelle eines einmaligen Rendering-Mechanismus wie renderToString. Selektive Hydratation bedeutet, dass JS Ereignisse an das Front-End binden muss, um auf Benutzerinteraktion oder DOM-Aktualisierungsverhalten zu reagieren. Vor React 18 muss dies geschehen Ganzheitlich und der Hydratationsprozess kann langsam sein und eine globale Verzögerung verursachen, sodass die selektive Hydratation der Hydratation nach Bedarf Priorität einräumen kann.

● Neue APIs für App- und Bibliotheksentwickler

Gleichzeitige APIs:

Änderungen im Zusammenhang mit dem gleichzeitigen Rendering sind eine der wichtigsten Änderungen in React 18. Kurz gesagt, diese Funktion sorgt für eine bessere Reaktionsfähigkeit von React-Anwendungen. Dies ist eine Designarchitektur, die das Rendern unterbrechen kann. Wann muss das Rendern unterbrochen werden? Wenn ein Rendering mit höherer Priorität eintrifft, wird das aktuelle Rendering abgebrochen und das Rendering mit höherer Priorität sofort ausgeführt, im Austausch für eine schnellere visuelle Reaktion.

• useTransition: Ermöglicht Komponenten, auf das Laden von Inhalten zu warten, bevor sie zur nächsten Schnittstelle wechseln, wodurch unnötige Ladezustände vermieden werden.

• startTransition: Renderings, die durch setState ausgelöst werden, das in den startTransition-Rückruf eingeschlossen ist, werden als nicht dringende Renderings markiert, und diese Renderings können durch andere dringende Renderings vorweggenommen werden.

• useDeferredValue: Gibt einen verzögerten Antwortwert zurück, z. B. ein Szenario, in dem ein Auswahleingabefeld eine Liste filtert. Wir können useDeferredValue verwenden, damit die Liste den dem Selektor entsprechenden Wert übergibt.

Mit den neuen APIs startTransition und useDeferredValue können Sie im Wesentlichen einen Teil der Benutzeroberfläche mit einer niedrigeren Aktualisierungspriorität markieren.

Andere APIs:

• useSyncExternalStore: useSyncExternalStore ersetzt useMutableSource für das Abonnieren externer Quellen, um das Problem der Dateninkonsistenz zu lösen, die durch gleichzeitiges Rendern verursacht werden kann und wahrscheinlich auch nicht erforderlich ist Wird von allgemeinen Entwicklern verwendet.

• useId: useId wird verwendet, um eine eindeutige ID zwischen dem Client und dem Server zu generieren, um Elementkonflikte während der SSR-Hydrierung zu vermeiden.

• useInsertionEffect: Wird zum Einfügen globaler DOM-Knoten verwendet.

React 18 wird nächstes Jahr mit der neuen React Native-Architektur veröffentlicht (mit verfügbaren React 18-Funktionen).

3. Svelte, das dunkle Pferd im Front-End-Framework-Kampf

Das Front-End-Feld ist turbulent und die drei Front-End-Wagen, React, Vue und Angular war schon immer unter den ersten drei. Gleichzeitig ist uns auch aufgefallen, dass Svelte, entwickelt von Rich Harris (Autor von Ractive, Rollup und Bubble), unter den vielen Front-End-Frameworks voraussichtlich ein dunkles Pferd werden und sich von den Front-End-Frameworks abheben wird.

In der neuesten Umfrage von Stack Overflow aus dem Jahr 2021 wählten 71,47 % der Befragten Svelte als beliebtestes Framework, vor React.js mit 69,28 % und Vue mit 64,41 %. In der JS Status 2020-Umfrage erreichte Svelte den ersten Platz bei der Benutzerzufriedenheit mit 89 % und dem Interesse mit 66 %. Seit seiner Geburt wird Svelte zum Benchmarking von Frameworks wie React/Vue verwendet. Wir haben auch die Debatte über Svelte und React gesehen und die Antwort von Youda im Jahr 2019 gesehen vue-Svelte – Die Auswertung der Größenanalyse zeigt den Entwicklungstrend von Svelte.

Das dunkle Pferd im Front-End-Kampf

Unsere Umfrage ergab, dass Entwickler Svelte vor allem wegen der folgenden Punkte lieben:

1. Svelte verfügt über eine äußerst prägnante Syntax und die interaktiven Tutorials ermöglichen eine geringe Lernkurve und einen geringen Startaufwand. Wer mit der Vue-Syntax vertraut ist, kann im Grunde schnell loslegen.

2. Kleinere Größe. Die Kernidee von Svelte besteht darin, die Codemenge zur Laufzeit des Frameworks durch statische Kompilierung zu reduzieren. Dies hat bei kleinen Anwendungen offensichtliche Vorteile. Die komprimierte Version von React ist 42,2 KB groß und die komprimierte Version von Svelte ist 1,6 KB groß . Bei mittleren und großen Anwendungen wird sich dieser Vorteil jedoch allmählich verringern und sogar zum Nachteil werden.

3. Höhere Leistung. Svelte verwendet nicht das häufig verwendete Virtual Dom, sondern verwendet die Template-Syntax, damit der Compiler aufzeichnen kann, welche Daten während der Kompilierungsphase aktualisiert werden müssen. Dadurch ist Svelte nicht nur besser als React, sondern auch als Angular und Vue.

4. Bessere Verteilung von Webkomponenten. Svelte wird direkt in JS kompiliert und generiert Webkomponenten, die von Browsern erkannt werden können. Dadurch können auf Svelte basierende Komponenten in anderen Frameworks wie React/Vue/Angular usw. verwendet werden.

Die Zeit vergeht wie im Flug und die Entwicklungsgeschwindigkeit von Svelte könnte unsere Vorstellungskraft übertreffen. Svelte, das als Frontend-Framework, das TypeScript nicht unterstützt, als zukunftslos kritisiert wird, unterstützt 2021 auch TypeScript. Auch die UI-Bibliothek Svelte Material UI iteriert nach und nach. Auch die Entwickler-Community hat sich immer mehr kleinen Partnern angeschlossen , Bereicherung der Svelte-Einheit Praxis in Tests, Webkomponenten, SSR usw.

Rückblickend auf das Jahr 2021 sind die folgenden zwei Dinge die wichtigsten Dinge:

1 Der Herbstgipfel fand am 20. November 2021 statt. Auf dem Gipfel erzählte uns Rich Harris von der Geschichte von Svelte und kündigte an, dass er zu Vercel wechseln und Svelte dann hauptberuflich betreuen werde. Viele Entwickler aus der Community wurden ebenfalls zum Gipfel eingeladen, um einige der Praktiken von Svelte vorzustellen und uns so die Möglichkeit zu geben, mehr Möglichkeiten von Svelte zu sehen.

2. SvelteKit veröffentlicht offiziell die Beta-Version. SvelteKit ist ein auf Svelte basierendes Webanwendungs-Framework, ähnlich dem auf Vue.js entwickelten Nuxt.js-Framework. Es erbt serverseitiges Rendering SSR, Routing, unterstützt TypeScript, unterstützt less/sass, unterstützt Vite-Paketierung und andere Funktionen. Es kann effizient entwickelt werden und weist eine hohe Leistung auf. Allerdings gibt es in SvelteKit noch einige Fehler, die noch behoben werden müssen, und einige fehlende Funktionen müssen dringend verbessert werden. Dennoch hindert es Projekte nicht daran, den Einsatz in Produktionsumgebungen zu wagen.

Warten auf die Blüte des Disruptors

Obwohl wir sehen, dass Svelte bei Entwicklern sehr beliebt ist, ist es bisher immer noch schwierig, groß angelegte Anwendungen zu sehen, die Svelte verwenden, und seine Leistungsvorteile, Größenvorteile usw. sind es nicht in Großanwendungen bewährt. Da React/Vue/Angular vor allem in großen Unternehmen vorherrschen, gibt es bereits sehr komplette systemunterstützende Lösungen. Ausgereifte Systeme sind grundsätzlich schwer zu ändern und es ist für aufstrebende Stars schwierig, eine aktive Community wie React und andere zu haben Frameworks. Svelte wird gehen. Der Weg ist noch lang. Wir haben jedoch beobachtet, dass große Unternehmen wie Alibaba, Byte und Tencent auch versuchen, die Svelte-Entwicklung in kleinen und mittleren Anwendungen, H5-Anwendungen, Webkomponenten usw. zu nutzen ist einen Versuch wert. Obwohl Svelte viele Vorteile bietet, müssen Sie, wenn Sie den Status von React/Vue/Angular selbst in Frage stellen möchten, immer noch auf Benchmark-Großanwendungen warten und darauf warten, dass große Unternehmen auf Svelte basierende UI-Bibliotheken auf den Markt bringen Abheben. Die Zeit für Großes wird kommen.

4. Desktop – das nächste Schlachtfeld der Front-End-Entwicklung

Den Einfluss von Desktop-Anwendungen weiter ausbauen

Seit Github das Open-Source-Framework Electron im Jahr 2014 auf den Markt gebracht hat, ist das Front-End über die Grenzen des Web-Clients hinausgesprungen und hat in den letzten Jahren die Möglichkeit, Desktop-Anwendungen zu entwickeln, indem es sich auf Anwendungs-Frameworks wie Electron, React Native, verlässt. und Flutter hat das Konzept der Front-End-Cross-End-Entwicklung von Desktop-Anwendungen immer mehr an Bedeutung gewonnen. Obwohl diese Lösungen im Vergleich zu herkömmlichen Technologie-Stacks wie QT und Xaramrin möglicherweise nicht unbedingt die beste Leistung aufweisen, bedeutet dies, dass einige äußerst kostengünstige Optionen entstanden sind, was die Schwelle für die Entwicklung von Desktop-Anwendungen erheblich senkt.

Im Jahr 2021 waren die Update-Iterationen von Anwendungs-Frameworks wie Front-End Electron und React Native Desktop tendenziell stabil. Obwohl einige bahnbrechende Highlight-Funktionen nicht erschienen sind, führt jedes Framework weiterhin eingehende Untersuchungen zu Schwachstellenproblemen durch B. Leistungs- und Anwendungsszenarien, und Flutter, das sich in den letzten Jahren zu einem beliebten Konzept entwickelt hat, hat 2021 auch seine Desktop-Version in die Beta-Phase aufgenommen. Tauri, das plötzlich aufgetaucht ist, hat durch seine hervorragende Leistung und Paketgröße Aufmerksamkeit erregt , und sein Potenzial ist nicht zu unterschätzen. Insgesamt nimmt im Bereich der Desktop-Anwendungsentwicklung der Einfluss der Front-End-Technologie von Tag zu Tag zu, und auch der Anteil der Inhalte, an denen das Front-End teilnehmen kann, nimmt zu.

Electron

Electron ist ein von GitHub entwickeltes Open-Source-Framework. Es ermöglicht die Entwicklung plattformübergreifender Desktop-GUI-Anwendungen unter Verwendung von Node.js (als Backend) und der Rendering-Engine von Chromium (als Frontend). Eine große Anzahl bekannter Desktop-Anwendungen wurde mit Electron entwickelt, wie z. B. Slack, VSCode usw. Die erforderlichen Entwicklungsfunktionen von Electron weisen große Überschneidungen mit dem Front-End-Entwicklungstechnologie-Stack auf. Daher ist die Schwelle für die Verwendung von Electron für die Desktop-Entwicklung relativ niedrig Electron wurde 8 Jahre lang intensiv kultiviert und iteriert und verfügt über ein Anwendungsökosystem, das die Kosten für den Einstieg weiter senkt.

Die Verwendung von Electron für die Entwicklung von Desktop-Anwendungen ermöglicht es dem Front-End auch, seine eigenen Fähigkeiten zu verbessern. Einerseits erweitert es die Bandbreite der Technologie und kann den Umfang der Front-End-Geschäftsfunktionen von einer einzelnen Webseite auf PC-Anwendungen erweitern Einige werden derzeit von Electron nicht unterstützt, indem Node-Komponenten in C++ geschrieben werden. Andererseits wurden viele Einschränkungen auf der Front-End-Seite aufgehoben, beispielsweise einige traditionelle Web-Sicherheitsbeschränkungen der zugrunde liegenden Schnittstellen des Systems, die die Entwicklungskapazitäten verbessern können.

Natürlich ist Electron nicht ohne Mängel:

• Die Paketgröße ist im Allgemeinen zu groß 100 Millionen+. Wir können ASA-Komprimierung, dynamische Linkbibliotheken usw. zur Optimierung verwenden.

• Hoher Speicherverbrauch Aufgrund des mitgelieferten Chromium-Kernels ist auch der Speicherverbrauch von Electron im Allgemeinen hoch.

• Die visuelle Rendering-Effizienz der UI-Ebene ist gering. Dies kann auch durch Optimierungsmethoden wie Multiprozess-Verarbeitungsaufgaben und sogar die Verwendung visueller Artefakte zur Verbesserung der Benutzererfahrung optimiert werden.

Obwohl Electron einige bekannte Probleme aufweist, sind seine vollständige ökologische Kette und die hohe Überschneidung mit der Front-End-Technologie immer noch die empfohlene Lösung für die schnelle Entwicklung von Desktop-Anwendungen. Außerdem ist es für uns einfacher, Leistungsprobleme durch einige gängige Optimierungsmethoden zu lösen um es zu lösen und das Level von 80 Punkten zu erreichen. Im Jahr 2021 behält Electron weiterhin eine stabile Update-Frequenz von einer Hauptversion alle acht Wochen bei und hat mehrere Hauptversionen von V12 bis V15 herausgebracht. Der aktualisierte Inhalt konzentriert sich hauptsächlich auf das Löschen und Ändern von APIs, die Anpassung von Systemfunktionen und abhängige Versionen wie die Chromium-Kernel-Updates und andere Details. React Native Desktop Was die Erstellung von Desktop-Anwendungen betrifft, hat das RN-Team noch keine offizielle Desktop-Version herausgebracht und verlässt sich hauptsächlich auf Community-Projekte, um Kapazitäten für eine nachhaltige Entwicklung aufzubauen. Unter ihnen ist die von Microsoft entwickelte technische Lösung React Native für Windows + macOS die Lösung mit der größten gesammelten Erfahrung und den stabilsten Entwicklungsiterationen. Seit der Veröffentlichung des Projekts Ende 2015 hat es 6 Jahre stabile Iterationen durchlaufen . Im Jahr 2021 brachte das RN-Team drei wichtige Versionen 0.64–0.66 auf den Markt, und Microsoft stellt in der Iteration von React Native für Windows stets Aktualisierungen der Hauptversion von RN sicher und unterstützt auch eine große Anzahl von Windows-bezogenen Funktionen. Wenn Sie eine Desktop-Anwendung erstellen, deren Hauptzielbenutzer sich auf der Windows-Plattform befinden, ist die Verwendung von React Native For Windows eine gute Wahl.

Es ist erwähnenswert, dass das RN-Technikteam im Jahr 2021 neben der Unterstützung der neuen Android 12- und iOS 15-Systeme in den wichtigen eingeführten Versionen auch die gemeinsame Entwicklung der Desktop-Anwendungskonstruktionstechnologie mit dem Microsoft-Team hervorhob. Das RN-Team gab an, dass es durch die Einführung des Messenger-Teams von Facebook einige „einzigartige“ technische Funktionen für Desktop-Anwendungen bereitstellen wird, um das Benutzererlebnis der React Native-Desktop-Version zu verbessern.

Flutter Desktop

Flutter ist ein von Google eingeführtes Hybrid-Entwicklungsframework für mobile Benutzeroberflächen. Es implementiert eine Reihe grundlegender Bottom-up-Bibliotheken, damit Benutzer hochwertige native Benutzeroberflächen auf iOS und Android erstellen können.

Um Entwicklungsfunktionen auf der Desktop-Seite zu unterstützen, verwendet Flutter derzeit eine Cross-End-Rendering-Lösung, die Code in Web umwandelt. Es gibt jedoch noch viel Raum für Verbesserungen in der Leistung von Flutter to Web. Obwohl es in der Branche in diesem Jahr viele Optimierungspläne gibt, wird dies mehr oder weniger durch magische Änderungen erreicht, wenn Sie die Leistung erheblich verbessern möchten Der Flutter-Quellcode wird langfristig mit hohen Optimierungskosten verbunden sein. Dennoch ist die optimierte Leistung von Flutter to Web im Vergleich zu herkömmlichen Webprojekten etwas unzureichend. Daher sollten Entwickler, die die to Web-Lösung verwenden, ohne Berücksichtigung der Kompatibilität versuchen, den Canvaskit-Rendermodus zu verwenden. Dieser Modus basiert auf der WebAssembly-Lösung von Skia und bietet eine bessere Renderleistung, die Ladeleistung muss jedoch kontinuierlich optimiert werden.

Vielleicht um das Leistungsproblem auf dem Desktop vollständig zu lösen, hat Flutter Desktop Mitte 2021 die Windows Native-Lösung auf den Markt gebracht, die jedoch derzeit nur 64-Bit-Systeme unterstützt, sodass Windows-Versionen niedrigerer 32-Bit-Versionen nicht unterstützt werden können Systeme wie Win7 Dies wird die Kompatibilitätskosten für Entwickler erheblich erhöhen. Im Februar 2022 brachte Flutter Desktop jedoch offiziell eine stabile Version heraus und passte viele gängige Plug-Ins an, um Unterstützung für Windows zu bieten, darunter Kamera, File_Picker und Shared_Preferences. Darüber hinaus hat die Community Unterstützung für Windows mit einer Vielzahl anderer Pakete hinzugefügt, die alles von der Windows-Taskleistenintegration bis zum Zugriff auf serielle Schnittstellen abdecken. Gleichzeitig haben auch viele Microsoft-Teams aktiv mitgearbeitet und große Beiträge zur Veröffentlichung der offiziellen Version geleistet. Im Jahr 2022 ist Flutter Desktop einen Versuch wert.

Tauri

Tauri, das kürzlich Rust ausgenutzt hat, hat im Vergleich zu Electron vor allem die folgenden vier Vorteile erhalten:

• Kleinere Paketgröße

• Mehr Speicherverbrauch während der Laufzeit Klein

• Sicherheit steht an erster Stelle

• Echte Open Source

Aber rational betrachtet gibt es für Front-End-Entwicklung drei fatale Mängel:

• Tauri verwendet System-Webview, wird dort sind Kompatibilitätsprobleme, die auch die Hauptprobleme sind, die Electron löst

Natürlich ist Tauri noch nicht sehr ausgereift, aber da sich das Rust-Ökosystem weiterentwickelt und die Browserkompatibilität kleiner wird, ist das Ergebnis noch ungewiss. 5. Rust – Es ist Zeit, eine neue Sprache zu beherrschen. Ende, alle Gleichzeitig denken wir immer noch darüber nach, wie wir die Leistung des Tools verbessern können. Wie wir alle wissen, wurde die Leistung von JavaScript immer von allen kritisiert, aber die Front-End-Infrastruktur stellt hohe Anforderungen an die Leistung. Daher begann jeder darüber nachzudenken, ob andere Sprachen zum Schreiben von Front-End-Tools verwendet werden können. Seit seiner Geburt hat die Rust-Sprache mit ihrer Sicherheit eine große Anzahl von Entwicklern angezogen , Leistung und moderne Syntax haben sich in den letzten sechs Jahren zur beliebtesten Programmiersprache entwickelt und die Sprache hat sich kontinuierlich an die Spitze gesetzt, und in vielen Bereichen sind Rust-Rewriting-Projekte aufgetaucht Um einige Funktionen neu zu schreiben, kann man sagen, dass der Einstieg von Rust in den Front-End-Bereich ebenfalls ein unvermeidlicher Trend ist. Ein von Lee Robinson im Jahr 2021 verfasster Artikel „Rust ist die Zukunft der JavaScript-Infrastruktur“ listete viele in Rust geschriebene Front-End-Tool-Projekte auf und sagte, dass Rust seinen Einfluss auf das Javascript-Ökosystem weiter verstärken wird. Dieser Artikel wurde von vielen öffentlichen Accounts retweetet , was bei allen zu hitzigen Diskussionen führte.

• Rust-Tools sind in das Front-End-Ökosystem integriert

• Im Bereich Front-End-Konstruktion ist 2021 ein sehr prominentes Projekt entstanden – swc, ein in Rust geschriebenes Build-Tool, das zum Kompilieren verwendet werden kann , komprimieren und verpacken. Derzeit wird es von einigen bekannten Projekten wie Next.js, Parcel, Deno usw. verwendet. Next.js 12 verwendet direkt swc anstelle von babel, und ihr offizieller Website-Blog gab dies an Nach der Verwendung von swc wurde die Hot-Update-Geschwindigkeit auf das Dreifache erhöht. Die Build-Geschwindigkeit wurde auf das Fünffache erhöht, was die leistungsstarke Leistung von Rust zeigt.

Neben der Konstruktion wird Rust auch in anderen Bereichen des Frontends verwendet. Beispielsweise ist die Laufzeit-Engine von Deno auch eine in Rust geschriebene V8-Engine, die Family Bucket Rome angekündigt hat dass es in Rust neu geschrieben wird; Node .js kann Rust-Module über napi-rs aufrufen, um eine Hochleistungserweiterung zu erreichen; der in Rust geschriebene dprint-Standardcoder ist 30-mal schneller als Rust und kann auch in WASM kompiliert werden Wie Yew und Percy sind Front-End-Frameworks erschienen.

Es ist absehbar, dass Rust-Tools tiefer in das Front-End-Ökosystem integriert werden, was möglicherweise ein weiteres Update des Front-End-Ökosystems auslöst.

Es ist Zeit für Front-End-Leute, eine neue Sprache zu lernen

Ich glaube, viele Leute haben einen solchen Twitter-Screenshot gesehen. Redux-Autor Dan Abramov beantwortete eine Frage: „Welche Sprache lohnt sich in den nächsten drei Jahren am meisten zu lernen?“ „Rust“ könnte eine Inspiration für Front-End-Mitarbeiter sein. Es ist an der Zeit, eine neue Sprache zu lernen, um das Front-End-Ökosystem wiederzubeleben. Viele Menschen werden jedoch durch den steilen Lernpfad von Rust entmutigt sein Front-End-Entwicklung ist vielerorts ein Thema, und der Einstieg ist gar nicht so schwer.

In der Toolkette entspricht Rusts Rustup beispielsweise NVM, das die Version der laufenden Tool-Ladung (Rust-Version von NPM) ändern kann, aber auch leistungsfähiger als NVM ist Es wird außerdem Clippy (Rust-Version von Eslint), Rustfmt (Rust-Version von Prettier) installiert. Projekte, die mit Rust-Unterstützungstools erstellt wurden, verfügen bereits über Codeformatierungs- und Analyseunterstützungstools.

Werfen wir einen Blick auf die Ähnlichkeiten zwischen Cargo und NPM. Die beiden Tools sind in vielen Befehlen ähnlich, und einige Befehle, die im Projekt konfiguriert werden müssen, müssen nicht in Cargo konfiguriert werden Ohne Monorepo-Verwaltung können Sie Projekte mit mehreren Paketen direkt konfigurieren, anstatt zu sagen, dass Cargo eher eine Kombination aus NPM und Yarn ist. Dies ist auch das Ergebnis des Verweises des Rust-Teams auf die moderne Sprachtoolkette .

Auch syntaktisch weist Rust die Merkmale einer sehr modernen Sprache auf. Es greift auf die Merkmale funktionaler Programmierung und strukturierter Sprachen zurück und erstellt darauf basierend auch viele fortgeschrittenere Syntaxen. In der funktionalen Programmierung gibt es auch viele JavaScript-Methoden. Die Pfeilfunktion von JS entspricht beispielsweise auch der Funktion „map“, „reduce“, „filter“ und „rust“. einer Variablen zugewiesen werden.

Wenn die zweite Sprache, die das Front-End lernen konnte, in der Vergangenheit C++ war, dann ist es jetzt vielleicht Rust. Es verfügt über ein moderneres Abhängigkeitsmanagement, eine modernere Syntax und eine modernere Toolkette als C++, sodass Sie sich davon nicht entmutigen lassen beginnend, und es kann Sie auch im Front-End-Bereich wettbewerbsfähiger machen. 6. Low Code wird weiterhin ein heißes Thema sein Milliarden im Jahr 2021. Dies zeigt zweifellos, dass dieser Bereich immer noch heiß ist und sich schnell entwickelt. Wenn uns das Jahr 2020 Erwartungen hinsichtlich einer weiteren Aufheizung des Low-Code-Bereichs gab, dann werden wir im Jahr 2021 weitere Trends zur zukünftigen Entwicklung des Low-Code-Bereichs erkennen können.

Einerseits haben wir gesehen, dass Low-Code-Plattformen auf Unternehmensebene wie Tencent WeChat und Alibaba YiDe in der Branche allmählich an Dynamik gewinnen, und es gibt auch Plattformen innerhalb des Unternehmens, die sich auf Gebäudemanagement-Desks konzentrieren, wie z Wuji und reifen allmählich heran. Eine große Anzahl plattformbasierter Produkte entwickelt sich immer noch differenziert und schnell und ist immer noch die gängige Entwicklungsidee. Innerhalb des IMWeb-Teams haben wir vom Betrieb der Low-Code-Plattform Vision im Jahr 2019 bis zur Low-Code-Managementplattform Hulk in 20 Jahren die geschäftliche Forschung und Entwicklung durch vertikale Low-Code-Plattformen beschleunigt. Im Jahr 2021 haben wir das serverseitige Szenario weiter ausprobiert und die HulkData-Plattform mit Schwerpunkt auf der Schnittstellenkonstruktion verfeinert. HulkData baut eine Pipeline durch visuelle Webkomponenten auf und generiert mit einer kleinen Menge Code neue API-Schnittstellen basierend auf Datenbanken oder vorhandenen APIs. HulkData nutzt das BPMN 2.0-Protokoll, um Grafiken zur Darstellung von Geschäftsprozessen zu verwenden und unterstützt mehrere Unternehmen, mehrere Datenressourcen, Low-Code, Plug-in-Mechanismus, Prozessorchestrierung sowie die Änderung von Anforderungs- und Antwortparametern. Serverless wird immer ausgereifter und die betriebsfreie Funktion von Serverless ist eine sehr gute Gelegenheit für HulkData. Die auf HulkData erstellten Schnittstellen werden in Form von SCF in Tencent Cloud bereitgestellt, und es besteht keine Notwendigkeit, auf den Serverbetrieb zu achten und Wartung. Mithilfe der serverseitigen Schnittstellenorchestrierung kann die Geschäftslogik schnell implementiert und Geschäftsanwendungen agil empfangen und bereitgestellt werden. Die Bereitstellungsgeschwindigkeit ist 80 % schneller als beim herkömmlichen Entwicklungsmodell. Derzeit nutzen die drei großen internen Geschäftszugänge insgesamt über 400 Schnittstellen und laufen normal. Andererseits lohnt es sich darüber nachzudenken, ob es einige Gemeinsamkeiten zwischen den sich schnell entwickelnden differenzierten und szenariobasierten Plattformprodukten gibt? Denn egal, auf welches Szenario es abzielt, die Kosten für den Aufbau einer Low-Code-Plattform von Grund auf sind keineswegs gering, und diese Art der Ressourcenverschwendung ist bei großen Herstellern besonders ausgeprägt.

Das Ende 2020 vom IMWeb-Team gestartete Gems-Low-Code-Engine-Projekt ist eigentlich eine Untersuchung dieses Problems. Das Hauptziel der Low-Code-Engine besteht darin, eine Reihe grundlegender Standards und Einrichtungen bereitzustellen, um den effektiveren Aufbau der oberen Plattform zu unterstützen. Der Schlüssel zu seinem Denken liegt in der Vollständigkeit des Motormodells und seiner Fähigkeiten sowie seiner Skalierbarkeit in verschiedenen Szenarien. Als Low-Code-Engine hat Gems in den letzten 21 Jahren seine Grundfunktionen und sein Design kontinuierlich verbessert und bietet ein Vollplatinen-Plug-in, eine Kernbearbeitungsobjekt-API und andere Funktionen. Neben der stabilen Unterstützung der Low-Code-Plattform für Betrieb und Management innerhalb des Teams wurde sie auch nach und nach über das Team hinaus ausgeweitet, um mehreren Teams innerhalb des Unternehmens dabei zu helfen, Low-Code-Plattformen effizient für ihre eigenen Geschäftsszenarien aufzubauen.

Gleichzeitig haben wir auf der GMTC-Konferenz Ende dieses Jahres gesehen, dass Alibaba die Low-Code-Engine der Gruppe nach außen gefördert hat. Den geteilten Inhalten nach zu urteilen, hat sie den Aufbau von unterstützt Mehr als 60 Low-Code-Plattformen; und Tencents interne Low-Code-Engine Code Oteam begann ebenfalls im Jahr 2021 mit der Organisation, deren Hauptziel auch darin besteht, den zugrunde liegenden Kern mitzugestalten. Betrachtet man die gesamte Branche, so sind mittlerweile Low-Code-Engines auf dem Vormarsch, und es ist absehbar, dass der Trend weiter steigen wird. Es ist nur so, dass an diesem segmentierten Track möglicherweise nur große Hersteller beteiligt sind, da eine große Anzahl von Überprüfungen der Szenenunterstützung erforderlich ist, über die kleine Hersteller oder unabhängige Entwickler nicht verfügen.

Insgesamt werden differenzierte Plattformprodukte weiterhin unser Hauptzugang zum Low-Code-Bereich sein, und das Aufkommen von Low-Code-Engines wird der gesamten Branche mehr Möglichkeiten bieten.

7. Die Zukunft der D2C-Front-End-Intelligenz ist vielversprechend

„Front-End-Intelligence“ ist eine neue Erkundung der Branche in Richtung Front-End + KI in den letzten Jahren. Was ist Intelligenz? Es bedeutet, intelligente Algorithmen mit Front-End-Engineering-Praktiken zu kombinieren und Maschinen bei der Entwicklung unterstützen zu lassen.

D2C: Geschichte und aktuelle Situation

Die bisher größte Produktform im Bereich Front-End-Intelligence sind verschiedene Design-to-Code-Tools (im Folgenden als D2C bezeichnet): Eingabe von UI-Designentwürfen über eine Reihe von Algorithmen, nutzbaren Code ausgeben.

Ein Artikel aus dem Jahr 2017, pix2Code, schlug die Idee eines Bildgenerierungscodes vor.

Im Jahr 2018 hat Microsoft das Sketch2Code-Projekt als Open Source bereitgestellt und damit die Machbarkeit dieser Richtung weiter überprüft.

Im Jahr 2019 startete Alibaba Taobao imgcook und unterstützte in den folgenden Jahren eine große Anzahl von Unternehmen wie Double Eleven und 618. Dies markiert die allmähliche Reife der D2C-Technologie und die Notwendigkeit einer groß angelegten Geschäftsimplementierung.

Das Jahr 2021 ist gekommen und große in- und ausländische Unternehmen haben entsprechende Erkundungen und Praktiken in diesem Bereich eingeleitet:

Das Tencent IMWeb-Team hat Project Auton gestartet, das intern getestet wurde und voraussichtlich im Juni dieses Jahres externe Dienste bereitstellen wird Jahr; Alibaba imgcook entwickelt sich weiterhin rasant; Byte hat das „ALYX“-Projekt auf Basis der Low-Code-Plattform ins Leben gerufen und das 58-köpfige Team hat die „Magic Brush Ma Liang“-Plattform ins Leben gerufen; ... .

Darüber hinaus sind eine Reihe von Startups im D2C-Bereich entstanden. Wie inländischer CodeFun, Blue Lake, ausländischer Framer, Anima usw.

Es ist erwähnenswert, dass CodeFun in Bezug auf Benutzerfreundlichkeit und Wiederherstellung eine relativ gute Leistung aufweist und sich seit seiner Einführung einen guten Ruf erworben hat.

Aber in der gesamten Front-End-Open-Source-Community gibt es derzeit kein ausreichend einflussreiches Open-Source-Projekt im D2C-Bereich. Daher befindet sich jedes Unternehmen grundsätzlich in einem Zustand des „Arbeitens hinter verschlossenen Türen“.

Zwei Seiten der Medaille: Fehler, Szenarien und Chancen

Im Vergleich zu frühen Lösungen, die auf rein visuellen Algorithmen basieren, verwenden die aktuellen D2C-Großprodukte grundsätzlich Design-Quelldateien (Sketch, Figma, XD usw.). das Original eingeben.

Da es für rein visuelle Algorithmen schwierig ist, Informationen wie UI-Ebenen aus zweidimensionalen Bildern zu extrahieren, kann die Entwurfsentwurfsdatei durch Parsen des internen DSL eine detailliertere strukturierte UI-Beschreibung erhalten, was für die nachfolgende Verarbeitung und den Code bequemer ist Generation.

Im traditionellen Pro-Code-Entwicklungsmodell wird „PRD + Designentwurf“ normalerweise als Eingabe für die Erstellung von Geschäftscode verwendet. Allerdings verwendet das D2C-System den Designentwurf als einzige Eingabe, und der Designentwurf ist nur eine einfache UI-Beschreibung, was zu vielen Informationen führt, die nicht aus dem Design abgeleitet werden können. Beispielsweise können Animation, Interaktion, Logik und sogar Reaktionsfähigkeit nicht allein durch D2C erreicht werden.

Aufgrund dieser Mängel werden die meisten D2C-Szenarien nur als Hilfswerkzeuge für die Entwicklung verwendet. Es ist noch zu früh, um wirklich vollständig intelligent zu sein (das Code mit vollständiger Logik erzeugen und ohne menschliches Eingreifen in der Produktionsumgebung verwenden kann).

Trotz der vielen oben genannten Mängel hat D2C großes Potenzial im Bereich der UI-Entwicklung.

D2C-Produkte (Komponenten-/Seitencode oder DSL, die die Benutzeroberfläche beschreiben) haben normalerweise die folgenden Verbrauchspfade:

• Ausgabecode als grundlegende UI-Komponente wird von Entwicklern sekundär entwickelt.

• Der Ausgabecode wird als Basismaterial geliefert und mit der Low-Code/No-Code-Plattform für die sekundäre Bearbeitung und Anordnung kombiniert.

• Produzieren Sie DSL und kombinieren Sie es mit benutzerdefiniertem Rendering für direktes Rendering.

Speziell für den zweiten Konsumpfad werden mithilfe der in den letzten Jahren beliebten Low-Code-Plattform manuelle Eingriffe und sekundäre Eingriffe wie Datenbindung, logische Anordnung, Stilbearbeitung und interaktive Anordnung durchgeführt Die von D2C Editing erstellten UI-Materialien können die Mängel der D2C-Funktionen beheben und eine Reihe schneller, effizienter, hinterlegbarer und wiederverwendbarer SOPs für die Codeproduktion erstellen.

Darüber hinaus kann D2C mit seiner hohen Liefereffizienz den Engpass bei der Produktion von Low-Code/No-Code-Material überwinden und so die Transformation des Front-End-F&E-Paradigmas von Pro-Code zu Low-Code vorantreiben.

Mit Hilfe von D2C + Low-Code/No-Code, kombiniert mit den in den letzten Jahren beliebten Technologieproduktformen wie SaaS, FaaS und BaaS, ist absehbar, dass dies in naher Zukunft wirklich ohne das erreicht werden kann Ingenieure müssen eine Zero-Code-Geschwindigkeit erreichen. Ein Produkt mit vollständigen Daten, Interaktion und Logik auf den Markt bringen. Dies hat die Anschaffungskosten vieler innovativer Unternehmen erheblich gesenkt und könnte sogar die nächste Welle des Internet-Unternehmertums ankurbeln.

Allerdings gibt es bisher keine Plattform, die die oben genannten Produktformen (D2C + Low-Code/No-Code + SaaS/FaaS/BaaS) perfekt integrieren kann, um einen geschlossenen Kreislauf zu bilden und gleichzeitig ein hervorragendes Benutzererlebnis zu gewährleisten. In den nächsten Jahren könnte dieser Bereich einige Star-Startups hervorbringen.

Blick in die Zukunft: Tiefe Kultivierung, Integration, F&E-Paradigmenwechsel

Mit Blick auf das Jahr 2022 kann vorhergesagt werden, dass sich die Intelligenz und D2C der Front-End-Branche weiter entwickeln werden, mit den folgenden zwei großen Trends als Ganzes:

• Vertikal: kontinuierlich Prozesse, Algorithmen und Erfahrungen tiefgreifend kultivieren und optimieren, um „intelligent“ wirklich immer „intelligenter“ zu machen.

• Horizontal: Standards und Prozesse etablieren, Upstream- und Downstream-Funktionen integrieren, Low-Code, No-Code, FaaS, BaaS, SaaS, Designsystem, Algorithmussystem, F&E-System, Datensystem usw. miteinander verbinden Form: Industrialisiertes Schnellproduktionssystem setzt Produktivität frei.

Sobald das oben genannte System etabliert ist, wird es die Branche auf lange Sicht sicherlich dazu bringen, die nächste Transformation des F&E-Modells einzuleiten. Vom aktuellen Pro-Code-basierten F&E-Modell wird es in ein Modell umgewandelt, in dem Pro-Code, Low-Code und No-Code einander ergänzen, versorgen und stärken. Gleichzeitig können Materialien und Produkte durch die Etablierung eines standardisierten Systems leichter verallgemeinert und wiederverwendet werden. Die Auswirkungen auf die Effizienz von Forschung und Entwicklung sind zweifellos enorm!

Diese sind alle voller Fantasie. Auch wenn der Weg zur Intelligenz voller Zweifel und Hindernisse ist, lohnt es sich, auf die Zukunft zu blicken. Wir werden uns im neuen Jahr weiter kultivieren und weiterentwickeln und können uns auf die Zukunft im Jahr 2022 freuen...

8 DevOps, F&E-Effizienz steht weiterhin im Mittelpunkt

FuE-Effizienz ist ein Bereich von ​Sowohl für Internetunternehmen als auch für traditionelle Softwareunternehmen ist es ein großes Anliegen, durch „F&E-Effizienz“ eine kontinuierliche Verbesserung der Forschungs- und Entwicklungskapazitäten zu erreichen die Vorteile von Nachzüglern durch „F&E-Effizienz“ Da große inländische Internetunternehmen einhellig stark in diesen Bereich investiert haben, bereiten sie sich auch auf Leistungsanstrengungen vor.

Ähnlich wie beim agilen Konzept ist es schwierig, genau zu definieren, was F&E-Effektivität ist. Tatsächlich werden viele komplexe Konzepte nicht definiert, sondern nach und nach weiterentwickelt. Sie erscheinen zunächst als Phänomene und finden dann geeignete Ausdrucksformen. Tatsächlich waren Effizienz und Effektivität nie ausschließlich Begriffe für Software-Engineering. Im Laufe der Geschichte der menschlichen Entwicklung wurden Produktivität und Produktionseffizienz kontinuierlich verbessert. Im digitalen Zeitalter wurde die Bedeutung der Software-F&E-Effizienz hervorgehoben. Wenn wir die F&E-Effektivität in einem Satz zusammenfassen würden, würden wir es so zusammenfassen: „Effizienter, mit höherer Qualität, zuverlässiger und nachhaltiger einen besseren Geschäftswert liefern“.

Was wir tun können, ist nicht, den absoluten Wert der F&E-Effizienz zu verbessern, sondern die Verschlechterung der F&E-Effizienz so weit wie möglich zu verlangsamen, damit sie nicht zu schnell abnimmt, ist ein Erfolg .

Das IMWeb-Team hat im Jahr 2021 große Fortschritte bei DevOps gemacht. Einerseits haben wir mit Tencent Cloud Coding in verschiedenen Bereichen wie Entwicklung, Test, Bereitstellung, Betrieb und Wartung zusammengearbeitet. Die vom Team selbst entwickelte Leistungsplattform Thanos und das Coding-Team haben tiefgreifende Anwendungs-Workflow-Lösungen erstellt. und die gemeinsame Debugging-Plattform der Agentur TDE und Coding Das Team öffnete das Nohost-Gateway für die Testumgebung und die gemeinsame Debugging-Vertragsplattform der Schnittstelle Tolstoy und Coding bauten gemeinsam API-Hosting-, Mock- und Testfunktionen auf. Im Zusammenhang mit der Forschungseffizienz haben wir durch Tencent Cloud Coding einheitliche Leistungsplattformen erreicht und die Gesamteffizienz von Forschung und Entwicklung ist um mehr als 30 % gestiegen.

9. Mikro-Frontend, ein nicht zu unterschätzender Teil

Im Jahr 2016 schlug ThoughtWorks die Idee des Mikro-Frontends vor: Teilen Sie große Projekte in kleine flexible Projekte auf miteinander und können unabhängig voneinander entwickelt und unabhängig bereitgestellt werden, wodurch der Vorhang für das Mikro-Frontend geöffnet wird. Nachdem Alibaba 2019 das auf Single-Spa basierende Qiankun-Micro-Front-End-Framework entwickelt hatte, nahm die Beliebtheit von Micro-Front-Ends zu. Im Entwicklungsprozess des Micro-Front-Ends haben Entwickler langsam auch die aktuellen Anwendungsszenarien des Micro-Front-Ends herausgefunden:

Im Jahr 2021 gibt es bereits viele Micro-Front-End-Frameworks, darunter die berühmten sind die alten Single-Spa, Qiankun, das Micro-Front-End-Framework mit der höchsten Anzahl an Github-Stars, und JD.coms MicroApp, das aufstrebende Micro-Front-End-Framework.

single-spa Da v5.0 im Jahr 2020 veröffentlicht wurde, bestand die Hauptarbeit in der ersten Hälfte des letzten Jahres darin, einige Fehler in v5.0 zu beheben, und in der zweiten Jahreshälfte folgte die Beta-Version von v6 .0 wurde im Juli veröffentlicht. Obwohl v6.0 auch einige Breaking Changes enthält, müssen die meisten Benutzer ihren Code für diese Änderungen nicht aktualisieren. Wichtiger ist, dass v6.0 in Bezug auf Browser die letzte Version sein wird, die IE11 unterstützt, und dass die zukünftige Version v7.0+ IE11 nicht mehr unterstützen wird. Das Single-Spa-Team wird sich mehr auf den Browser konzentrieren. Bei der Kompatibilität geht es um die Aufrechterhaltung des gesamten Single-Spa-Ökosystems. v6.0 fügt außerdem zwei neue Funktionen hinzu:

• unterstützt den asynchronen Abbruch der Seitennavigation.

• Mit der Exposed patchHistoryApi können Entwickler pushState/replaceState/popstate/hashchange mit einem Spa-Kapsel verwenden.

Nicht nur die alten Frameworks arbeiten hart, sondern Qiankun, das behauptet, „die wahrscheinlich umfassendste Micro-Front-End-Lösung, die Sie je gesehen haben“, zu sein, wird auch ständig aktualisiert. Qiankun löst hauptsächlich einige Probleme in verschiedenen Anwendungsszenarien und behebt einige JavaScript-Kompatibilitätsprobleme in der Sandbox, z. B. DefineProperty-Probleme in der Sandbox und Sandbox-Leistungsprobleme. Obwohl Qiankun letztes Jahr nicht viele Updates zu haben schien, veröffentlichte es auch die aufregende V3.0 RoadMap, in der viele Updates erwähnt wurden. Zu den wichtigsten Updates gehören: unabhängiges Anwendungslademodul und unabhängiges Sandbox-Modul.

Allerdings hat Qiankun das Problem des starken Eindringens immer noch nicht gelöst und kann Seiten nicht so einfach einbetten wie Iframes.

Eine gute Nachricht in der zweiten Jahreshälfte ist, dass JD.com auch seine eigene Micro-Frontend-Lösung MicroApp auf den Markt gebracht hat. Es übernimmt nicht die Komponentisierungsideen von Single-Spa und Qiankun, sondern basiert auf der Idee von WebComponent. Es verwendet CustomElement in Kombination mit dem angepassten ShadowDom, um das Mikro-Frontend in eine Klassen-WebComponent-Komponente zu kapseln und so das Komponenten-Rendering zu realisieren des Mikro-Frontends. Es weist die folgenden Merkmale auf: E-Klasse-Webkomponente + HTML-Eintrag

• Lebenszyklus

• Ressourcenadressenergänzung

• , Stilisolation, Elementisolation

• Datenkommunikation

• Vorladen

• Plug-in-System

• MicroApp ist in Bezug auf Benutzerfreundlichkeit und Eindringlichkeit perfekt. Die Entwicklung und Zukunft dieses Frameworks sind sehr gespannt.

Im Allgemeinen liegt die Grundlage des Mikro-Frontends darin, dass „alle großen Systeme dem Gesetz der Entropiezunahme nicht entkommen können“. Das Problem, das es lösen kann, besteht auch darin, einige monolithische Anwendungen zu dekonstruieren, sodass das Mikro-Frontend häufiger ein „ „pessimistischer Ingenieur“ im technischen Kompromiss. Zur Frage, ob Mikro-Frontends verwendet werden sollen, können Sie die Analyse des Qiankun-Autors Kuitos in diesem Artikel „Sie benötigen möglicherweise keine Mikro-Frontends“ lesen.

Das IMWeb-Team hat im vergangenen Jahr auch eingehende Untersuchungen zu Mikro-Frontends durchgeführt und eine sehr erfolgreiche Mikro-Frontend-Praxis der inkrementellen Rekonstruktion von Qiankun x auf Basis von Qiankun abgeschlossen, bei der das alte Vue-Monolith-Projekt in die neuen React-Projekte integriert wurde sind organisch integriert, um eine parallele Entwicklung und eine nahtlose Rekonstruktion zu erreichen und so die Front-End-Produktivität erheblich zu verbessern. Für spezifische praktische Details beachten Sie bitte die nachfolgenden Artikel im offiziellen Konto des IMWeb-Teams.

Mit Blick auf die Technologietrends 2022

Unternehmen können auf Engpässe stoßen, aber die technologische Entwicklung wird niemals aufhören. Nur „dicke Akkumulation“ kann zu „dünnem Erfolg“ führen. Front-End-Leute müssen sich immer zügeln und ihre eigenen Grenzen durchbrechen, um in diesem Zeitalter der Standardisierung, Industrialisierung, Intelligenz und großen Vereinheitlichung weiterzukommen! In Bezug auf die segmentierten Bereiche können wir einige Ausblicke für 2022 geben:

React und Vue entwickeln sich weiterhin entsprechend ihrer eigenen Merkmale weiter,

Der Fokus liegt weiterhin auf Benutzererfahrung und Entwicklererfahrung

. Ob das dunkle Pferd Svelte durchbrechen kann und welche Auswirkungen und Einfluss Sveltes neuer Denktrend hat, ist es wert, gespannt zu sein.

• Mit der umfassenden Entwicklung des gesamten Stacks verfügt jedes große UI-Framework über ein eigenes „Meta-Framework“, um Full-Stack-Anwendungen zu erstellen. Zusammen mit dem traditionellen großen Bruder Nest und dem aufstrebenden Stern Remix ist dies möglich sagte, dass hundert Denkschulen miteinander konkurrieren.

  Aber das tiefe Meer der Backend-Entwicklung kann nicht durch ein bestimmtes Framework gefüllt werden. Ich glaube, dass das Front-End im nächsten Jahr tiefer eindringen wird umfassender.

• TypeScript ist bereits der Standard für Frontend-Projekte

  Es ist zu erwarten, dass es in Zukunft leistungsfähigere unterstützende Tools zur Verbesserung der Produktivität und Benutzererfahrung geben wird.

• Alle großen Cross-End-Frameworks zielen auf den Desktop ab. Darüber hinaus haben „Cloud-Anwendungen“ mit der Beliebtheit natürlich auch ein großes Potenzial, diese Position nicht zu verlieren,

  Electrons Community und Tauri Es lohnt sich, sich auf den Auftritt zu freuen.

• Wenn Sie weiter gehen möchten, ist es Zeit, eine neue Sprache zu lernen, die Zukunft der JS-Infrastruktur – Rust, Full Stack – Go, AI – Python, Flutter – Dart, Front-End-Person. Wann werden Sie dazu in der Lage sein? Deine eigenen Grenzen sprengen? WASM wird in Zukunft definitiv ein großer Erfolg sein, und ohne das Frontend werden Sie es nicht wissen!

• Der Transformationstrend von ToB ist offensichtlich, Low-Code hat viel Potenzial, erfreulich ist, dass immer mehr große Unternehmen dazu neigen, Low-Code- und Open-Source-Engines zu vereinheitlichen und das Chaos der überall laufenden Low-Code-Plattformen zu beenden , das ist auch die Internetbranche Der einzige Weg in Richtung Industrialisierung und Intelligenz.

• D2C ist der Beginn der Front-End-Intelligenz und der Weg ist noch sehr lang. Ich freue mich auf die Einführung weiterer intelligenter Front-End-Produkte!

• Die Forschungs- und Wirksamkeitsplattform befindet sich ebenfalls in der Phase der Vereinheitlichung und sollte im nächsten Jahr fortgesetzt werden Auch wenn es für die zukünftige F&E-Industrialisierung und -Intelligenz Schmerzen geben wird, lohnt sich der Aufwand!

• Mit der Popularisierung von 5G-Netzen und der kontinuierlichen Verbesserung der Mobiltelefonhardware können traditionelle Grafikmedien den Appetit der Mehrheit der Internetnutzer nicht mehr befriedigen. Ich glaube, dass es im Audiobereich noch viel Raum für Entwicklung gibt und Videobereich in der Zukunft, in Virtualisierung und Metadaten Bevor das kosmische Zeitalter kam, war der Audio- und Videobereich noch der Kern dieser Ära.

• Mit der Geschäftsentwicklung, dem kontinuierlichen Wachstum von Managementsystemen und dem Trend zur großen Vereinheitlichung sind Jushi-Anwendungen unvermeidlich und werden immer mehr auftreten Wenn Sie an dieser Krankheit leiden, kann Micro-Frontend als eine angesehen werden Gute Medizin, die Ökologie und Entwicklung der Micro-Frontend-Konstruktion sowie die Anleihen von MicroApp bei WebComponent sind es wert, gespannt zu sein!