Vor zwei Jahren habe ich eine JavaScript-Anfragestrategiebibliothek namens alovajs entworfen und entwickelt. Seit seiner Einführung im April 2023 hat es Anerkennung von Entwicklern auf der ganzen Welt erhalten und über 2700 Sterne erhalten, darunter auch Anerkennung von Experten großer Unternehmen.
Derzeit wurde alova@3.x veröffentlicht und als „das Anforderungstool der nächsten Generation für optimierte Arbeitsabläufe“ positioniert.
Ich habe es 30 Monate lang ohne Entschädigung gewartet und die Version hat 3.x erreicht. In dieser Zeit habe ich durch kontinuierliches Nachdenken, Zurückweisen und Umdenken das Ziel verfolgt, etwas zu erreichen, was andere Anforderungstools nicht erreicht haben, nämlich ein Tool zu werden, das die Front-End-Entwicklung wirklich unterstützen kann. Ich glaube, ich habe eine verlässliche Richtung gefunden.
Das heißt, ein „Anfragetool der nächsten Generation für optimierte Arbeitsabläufe“ zu schaffen, das die Unterstützung der Front-End-Entwicklung bei der Optimierung des API-Integrationsprozesses maximiert.
Unten finden Sie die Erkundungsgeschichte von alovajs, die auch die Geschichte eines Open-Source-Projekts von Anfang an ist.
Wenn Sie sich für Alovajs interessieren, lade ich Sie herzlich ein, der Community beizutreten und gemeinsam Fortschritte zu machen.
Eines Tages im März 2022 kam mir aufgrund bestimmter Umstände die Idee, eine App namens „Con of goal“ zu entwickeln. Inspiriert durch einige Apps hoffte ich, dass „Con of Goal“ verzögerungsfreie Datenanfragen und -übermittlungen erreichen könnte, also einen sofortigen Antwortmodus, selbst unter schwachen oder keinen Netzwerkbedingungen. Nachdem ich jedoch online gesucht und keine passende Lösung gefunden hatte und ähnliche optimistische Update-Lösungen nicht den Anforderungen entsprachen, veranlasste mich mein verdammter Wunsch, sie zu teilen, zu der Entscheidung, sie in Form einer Anforderungsbibliothek zu implementieren, was den Ausgangspunkt von alovajs bildete. aber es hatte damals noch keinen Namen.
Der Anfang einer Bibliothek ist nicht Design, nicht Entwicklung, sondern die Klärung der Bedürfnisse
Profi-Tipps: Es wird dringend empfohlen, dass Sie zunächst kurz den Übersichtsabschnitt von alovajs verstehen, um den folgenden Inhalt besser zu verstehen.
Zu dieser Zeit gab es noch keine Produktpositionierung, sondern lediglich die Erstellung einer JavaScript-Bibliothek, um meine eigenen Bedürfnisse zu erfüllen. Ich habe bestehende Anforderungsbibliotheken untersucht und die folgenden Anforderungen aufgelistet:
Dann wurde basierend auf den Anforderungen die API der Bibliothek entworfen.
Für Bedarf 2 wurden drei zentrale useHooks entwickelt: useRequest, useWatcher und useFetcher. Dies ist jedem sehr vertraut, wie zum Beispiel useRequest von ahooks, useAsyncState von vueuse, React-Query und SWR. Es versteht sich von selbst, dass es in der Tat sehr praktisch ist.
Da das useHook-Design verwendet wird, verfügen verschiedene Frameworks über eine unterschiedliche Statusverwaltung, aber ich möchte nicht für jedes Framework eine JavaScript-Bibliothek wie React-Query erstellen. Daher wurden für Bedarf 3 die Spezifikationen für StateHook-Adapter, Anforderungsadapter und Speicheradapter entworfen, und verschiedene Adapter können entsprechend den Spezifikationen geschrieben werden, wodurch die Framework-Umgebung und die laufzeitumgebungsbezogene Logik in separate Module aufgeteilt werden.
For needs 4, the method instance proxy pattern was designed, and the method instance proxy calls the hook functions of different adapters, so that even if you develop any application, you can get started with alovajs without any unfamiliarity, and it can also be seamlessly transplanted.
For needs 5, similar JavaScript libraries implement caching in the form of custom keys, but my idea is to focus on request information. The common scenario is that when requesting the same interface with the same request method and parameters, it is necessary to hit the response data of the last time. Why don't we use these request information as caching keys? Therefore, alovajs has designed an automatic caching mechanism, which is enabled by default on GET requests.
For needs 6, refer to and learn from axios.
These designs have indeed been proven over time. alovajs has perfectly compatible with Vue, React, Svelte frameworks through the adapter method, and can also run in various JavaScript environments such as browsers, React Native, UniApp, and Taro, while maintaining a consistent usage method, which has given me a glimmer of hope.
In the following months, although alovajs was released, it has not been promoted. On the one hand, it is because I used it in the "Con of goal" project. Although it has been tempered and improved in this project, it is still very incomplete, and the positioning is not clear. The initial version introduction is like this.
Later, the "Con of goal" project was aborted, but alovajs is still persisting.
With the obsession of once being an Internet product manager, I still hope to make alovajs a differentiated product. I often ask myself, what is the difference between alovajs and other request libraries? Why should users use alovajs? It is indeed different from other libraries in design, which is not a question that can be answered immediately. Later, I tried to position the direction of the request library as a "lightweight request library" and a "multi-end unified request library", but they were all denied by myself, because these cannot bring substantial help to developers, and they cannot be called advantages.
In September 2022, an opportunity made me discover the excellent request library based on Vue, vue-request. Its usePagination and useLoadMore immediately inspired me. This form of pagination implementation made me realize that this is also what I want. At the same time, it made me realize the power of useHook. I can divide the module according to the request scenario, use different useHooks for different scenarios, and the previously implemented seamless data interaction is actually one of the scenarios. If this is the direction, developers can choose different useHooks according to different request scenarios, which not only improves development efficiency and reduces coding complexity, but also prevents junior front-end from writing inefficient code, and can make better use of the core features of alovajs to achieve better performance and less server pressure. request features, so far, the "lightweight request strategy library" was chosen by me.
Then, in order to guide the future design direction of alovajs, I also refined and abstracted the request scenario model (RSM) of alovajs, mainly divided into the following four processes:
Request timing -> Request behavior -> Request event -> Response processing
Let's do it, I started to reconstruct alovajs 2.0 according to this positioning, separated the seamless data interaction function from 1.0, and designed a middleware mechanism to adapt to the development of more request scenario strategy useHooks, studied and developed the pagination strategy and seamless data interaction strategy.
The pagination strategy of alovajs is what I think is the most useful usePagination. It uses the caching function of alovajs to achieve pre-loading of front and back page data, pagination data search, request-level debouncing, and provides automated management of new editing and deletion functions, as well as refreshing the data of a specified page code without resetting.
Die nahtlose Dateninteraktionsstrategie hat mich 4 Monate gekostet, ich bin ständig in Sackgassen geraten und habe das Ergebnis ständig neu gestaltet. Es wurde eine Strategie entwickelt, die es Benutzern ermöglicht, auch in schwachen oder nicht verbundenen Netzwerkumgebungen ohne Verzögerung mit Daten zu interagieren, und außerdem den Erfolg der Anfrage stabiler sicherstellen kann. Ich habe eine virtuelle Datensache entworfen, die als Platzhalter für Antwortdaten vor der Antwort verwendet werden kann, sodass Benutzer das Gefühl haben, dass es sich um eine unmittelbare Antwort handelt, und die virtuellen Daten nach erfolgreicher Antwort durch reale Daten ersetzt werden kann. Den aktuellen Untersuchungsergebnissen zufolge kann es sich bei den Nutzungsszenarien um editorähnliche Anwendungen, Systemeinstellungsmodule und einige einfachere Listen handeln.
Später wurden auch Anforderungsstrategiemodule wie useForm, useAutoRequest und useSSE hinzugefügt, aber das ist bei weitem nicht genug.
Am 13. Mai 2023 erhielt ich eine solche Ausgabe auf Github
Zuerst habe ich diesem Problem nicht viel Aufmerksamkeit geschenkt, sondern nur die Funktion des automatischen Generierens von Anforderungscode für openAPI verstanden und fand es sehr gut, aber aufgrund der begrenzten Energie habe ich nicht tief darüber nachgedacht es, und ich hatte zu diesem Zeitpunkt noch nicht über die Richtung von alovajs nachgedacht. Aber in letzter Zeit habe ich gelegentlich über die Richtung von Alovajs nachgedacht, und dieses noch offene Problem ist mir immer in den Sinn gekommen und habe dann stillschweigend die Bezeichnung dieses Problems von „Feature-Request“ in „Feature-Request: bestätigt“ geändert. .
Gleichzeitig wurde mir durch dieses Problem klar, dass Alovajs auch die Zusammenarbeitsdistanz zwischen Front-End und Back-End verringern und den Front-End-Entwicklungsworkflow weiter vereinfachen können. Dies ist die Entwicklungsrichtung, die ich für alovajs 3.0 festgelegt habe:
alovajs hilft Entwicklern dabei, den API-Integrationsworkflow weitestgehend zu vereinfachen. Sie müssen lediglich angeben, welche API verwendet werden soll (dies ist auch das Ergebnis dreimonatiger Überlegungen)
Mein konkreter Plan ist wie folgt:
Die Schritte 1, 2, 3, 4, 6 in der obigen Abbildung werden durch die automatische Generierung von API-Code gelöst, aber unser Generierungsplan geht im Vergleich zu Tools wie openapi-generator weiter. Es generiert automatisch vollständige TS-Typen und vollständige Beschreibungsanforderungsfunktionen. Unabhängig davon, ob es sich um ein JS-Projekt oder ein TS-Projekt handelt, ist keine Einführung erforderlich. Entwickler können den Aufruf so bequem wie den direkten Aufruf von location.reload durchführen, und die Anforderungsfunktion kann direkt angezeigt werden die vollständige Beschreibung und Eingabeaufforderungen für den Anforderungsparametertyp.
Da die automatisch generierten Anforderungsfunktionen über vollständige Beschreibungen und Eingabeaufforderungen verfügen, vervollständigt das vscode-Plugin die interaktive Möglichkeit, die erforderlichen APIs schnell abzurufen, und Sie müssen nicht mehr auf die API-Dokumentation zurückgreifen.
Lösen Sie das Problem der Front-End- und Back-End-Zusammenarbeitslücke, und alle Änderungen an der Schnittstelle können dem Front-End automatisch mitgeteilt werden. Wenn während der Projektkonstruktion Änderungen festgestellt werden, wird ein Fehler ausgegeben, um die Konstruktion zu stoppen. Wenn es sich um ein TS-Projekt handelt, wird beim Kompilieren auch ein Fehler ausgegeben, und die Änderungsdatensätze können auch über das vscode-Plugin angezeigt werden.
Hier ist das Demovideo der vscode-Erweiterung.
Wie löse ich Schritt 6 „Komplexe Anforderungslogik schreiben“? Natürlich muss das Anforderungsstrategiemodul verwendet werden, das die Eigenschaften einer hohen Leistung und Szenenbasis aufweist, und Benutzer können eine sehr kleine Menge Code verwenden, um verschiedene Szenenanforderungsfunktionen zu implementieren.
Im März 2024 wurde der Entwicklungsplan für alova@3.0 formuliert und es dauerte 4 Monate, fast das gesamte Projekt mit dem Kernmitglied MeetinaXD neu zu strukturieren, und es gab viele Optimierungen:
Die zugrunde liegende Architektur wurde neu gestaltet und eine Reihe von Hooks können gleichzeitig in Vue, React, Svelte und sogar im Vue-Optionsstil verwendet werden.
Der verfügbare Bereich wurde auf der Serverseite erweitert. Sie können alova in serverseitigen Frameworks wie Express, Koa und NestJS verwenden, und es wurden neue Server-Hooks für serverseitige Anforderungsstrategien hinzugefügt.
10 Konfigurationen in alova@2.x wurden veraltet und 9 Designs wurden optimiert.
Darüber hinaus ist auch der wichtigste Teil von 3.0, das vscode-Plugin, das für unser Kernmitglied czlin zuständig ist, verfügbar und hat im Grunde die Ziele erreicht, die wir uns zu Beginn gesetzt haben.
Bisher hat alova@3.0 die Beta-Phase bestanden und kann stabil in der Produktionsumgebung verwendet werden.
Damals schaffte es ein kritisierter Artikel „Es ist Zeit, Ihre Axios zu ersetzen“ in die heiße Suche.
Als es gerade auf den Markt kam, war es zwar nicht so gut, aber ich weiß, dass nicht jedes Produkt über Nacht entsteht und es Zeit braucht, bis es sich niederschlägt.
Der Apple-1-Computer hatte am Anfang noch nicht einmal ein Gehäuse
Die Entwicklungsreise von Vue ist auch ein Prozess der kontinuierlichen Erforschung und des Fortschritts
Eine solche Produktreise bewegt mich einfach und der einfachste Weg zum Erfolg ist es, beharrlich eine Sache zu tun. Gute Produkte müssen mehrere Jahre lang getestet werden, ganz zu schweigen von Alovajs, die es erst seit etwa 1,5 Jahren gibt und von einigen Leuten erst seit 8 Monaten kontaktiert wird. In dieser Zeit wurden auch bessere Lösungen erforscht und Schritt für Schritt vorangetrieben.
alovajs entwarf zunächst useHooks, einschließlich useRequest, useWatcher, useEffectWatcher, useManual, useController, und reduzierte sie dann schrittweise auf nur drei Kern-Hooks: useRequest, useWatcher und useFetcher.
Adresse festschreiben
Beim Entwurf paralleler Anforderungen, sei es die Implementierung eines Promise.all-ähnlichen Formulars oder die aktuelle Form der Bindung an die onSuccess-Funktion, habe ich mich in mehrere Versionen verwickelt, hin und her geändert, und das Folgende ist das Design des verlassenen Responders dieses Jahres.
Commit-Datensatz nicht gefunden
Um mit asynchronen Caching-Schemata wie IndexedDB kompatibel zu sein, habe ich zunächst versucht, den Speicheradapter als asynchrone Funktion zu entwerfen, was jedoch eine Reihe von Problemen mit sich bringen würde, und dann versucht, den Ereignismechanismus über StorageConnector zu implementieren ist immer noch nicht perfekt genug, und schließlich zum aktuellen benutzerdefinierten asynchronen Funktionsmechanismus von localCache.
Adresse festschreiben
Ich danke auch Freunden, die alovajs unterstützt und dazu beigetragen haben. Im Folgenden finden Sie einige Screenshots, und es gibt viele Beiträge, die nicht enthalten sind.
Und ergänzen Sie die Details des Dokuments kontinuierlich und verbessern Sie die Best Practices. Probieren Sie mutig den Cache-Versionsplan für den Cache-Wiederherstellungsmodus aus und versuchen Sie, die automatische Typinferenz zu verwenden, um vollständige ts-Typ-Eingabeaufforderungen für Alovajs bereitzustellen Entwickler haben Schwierigkeiten beim Definieren von Typen und investieren in der Tat viel Aufwand in die Optimierung und Kompatibilität mit verschiedenen UI-Frameworks usw.
Unter anderem wurde das Dokument zwei- bis dreimal stark verändert. Ich bin @Orange Peel für die Bereitstellung der ersten Stellungnahme zur Dokumentänderung und @Well für die Bereitstellung der zweiten Stellungnahme zur Dokumentänderung dankbar, und dann hat unser Dokument einen solchen Ruf.
@green tree hat mir geholfen, neue Ideen für alova zu entwickeln.
Viele Dinge sind nicht mehr klar und die Aufzeichnungen auf npmjs sagen mir, dass 146 Versionen veröffentlicht wurden.
Es gibt auch viele Leute auf Github, die Fehler gemeldet haben, und ich habe auch beim ersten Mal darauf reagiert und sie behoben. Ich bin wirklich sehr dankbar. Wenn ich das Problem nicht sofort beurteilen kann, werde ich es auch auf codesandbox reproduzieren und diese Demo als Brücke für die Kommunikation mit Benutzern verwenden.
Vielen Dank für Ihre Lektüre? Egal wie schwierig es ist, der Weg muss trotzdem weitergehen.
Wenn Sie Alovajs erkennen, gehen Sie bitte zu Github, um ihm einen Stern zu geben.
Wenn Sie alova verstehen möchten, können Sie die offizielle Website besuchen. Dort finden Sie detailliertere Dokumentation und Beispielcode, die Ihnen helfen, dieses Tool besser zu verstehen und zu verwenden.
Wenn Sie Fragen haben, können Sie sich zur Beratung den folgenden Gruppenchats anschließen oder Diskussionen im Github-Repository posten. Wenn Sie auf Probleme stoßen, reichen Sie diese bitte in Github Issues ein, und wir werden sie so schnell wie möglich lösen.
Wir heißen Sie auch herzlich willkommen, Ihre Kraft einzubringen, bitte schauen Sie sich den Beitragsleitfaden an.
Das obige ist der detaillierte Inhalt vonMonate Open Source: Wie ich das Next-Gen-Anfragetool pflege. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche sind die am häufigsten verwendeten Drittanbieter-Bibliotheken in PHP?
js-Methode zum Abfangen von Zeichenfolgen
So spielen Sie Videos mit Python ab
Art der Systemschwachstelle
Tutorial zum Ausführen von C++-Code
Was bedeutet Ping?
Welche Plattform ist besser für den Handel mit virtuellen Währungen?
So löschen Sie hao.360
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
