Smashing Podcast Folge 26 mit Natalia Tepluhina: Was ist neu in Vue 3.0?
Veröffentlicht: 2022-03-10In dieser Podcastfolge sprechen wir alles über VueJS. Was ist neu in Version 3.0 und wie schwierig wird die Migration sein? Drew McLellan spricht mit Natalia Tepluhina, Mitglied des Kernteams, um es herauszufinden.
Notizen anzeigen
- VueJS
- Der Vue 3-Migrationsleitfaden
- Natalia auf Twitter
- Natalias persönliche Webseite
Wöchentliches Update
- Verschiedene Möglichkeiten zur Gestaltung digitaler Produktseiten
Geschrieben von Suzanne Scacca - Unit-Tests in React-nativen Anwendungen
geschrieben von Fortune Ikechi - 5 Möglichkeiten, wie Google Analytics Webentwicklern beim UI/UX-Design hilft
geschrieben von Clara Buenconsejo - TypeScript-Generika verstehen
geschrieben von Jamie Corkhill - So verwenden Sie Gesichtsbewegungen, um mit Typografie zu interagieren
geschrieben von Edoardo Cavazza
Abschrift
Drew McLellan: Sie ist eine leidenschaftliche Webentwicklerin, eine Google-Entwicklerexpertin und Konferenzrednerin und Autorin. Derzeit ist sie Staff Front Engineer bei GitLab, aber Sie kennen sie vielleicht am besten als Mitglied des Vue JS Core Teams. Sie kennt sich in Vue also besser aus als fast jeder andere. Aber wussten Sie, dass sie einmal einem Känguru das Singen beigebracht hat? Meine Smashing-Freunde, bitte heißen Sie Natalia Tepluhina willkommen.
Drew: Hallo Natalia, wie geht es dir?
Natalia Tepluhina: Hallo Drew, das war ein wirklich netter Versuch mit meinem Nachnamen. Ich muss Ihnen Credits geben. Es war eines der besten Dinge, die ich je von englischen Sprechern gehört habe, wenn sie versuchen, meinen Nachnamen auszusprechen. Ich denke, es ist nicht möglich, wenn Sie kein Russisch sprechen. Die korrekte Aussprache ist Tepluhina, aber es ist so, dass ich die Leute normalerweise darum bitte, mich Natalia zu nennen, und lassen Sie uns damit aufhören.
Drew: Okay, ich habe mir Mühe gegeben. Aber die wichtige Frage ist, bist du Smashing?
Natalia: Natürlich bin ich das.
Drew: Das ist gut. Deshalb wollte ich heute mit Ihnen über einige wirklich aufregende Neuigkeiten sprechen, die wir im September mit der Veröffentlichung von Vue 3.0 haben. Was die Versionsnummer betrifft, war es eine große Veröffentlichung, aber es ist wirklich eine große Veröffentlichung für Vue und ist schon seit geraumer Zeit in Arbeit, nicht wahr?
Natalia: Das ist es. Ich glaube, wir haben die dritte Version 2018 zum ersten Mal angekündigt. Ich glaube, sie wurde im Frühjahr angekündigt, und die eigentliche Arbeit begann im Frühjahr, die eigentliche Arbeit begann im Herbst 2018. Und ich glaube, es wurde offiziell auf der Londoner Konferenz angekündigt, die im Oktober 2018 stattfand. Die aktive Arbeit dauerte zwei Jahre. Und es ist viel, wenn man bedenkt, dass die vorherige Version 2016 veröffentlicht wurde. Die Hälfte dieser vier Jahre war also auch der Arbeit an Vue 3 gewidmet.
Drew: Was war der Motivationsfaktor bei der Entscheidung, dass eine neue Hauptversion erforderlich war? War es eine Art bewusste Entscheidung, dass wir an einer Hauptversion arbeiten, wir werden an Vue 3 arbeiten, oder war es nur eine Art Anhäufung von Änderungen, die einfach einen Versionsschub erforderten?
Natalia: Nein, ich denke, es war eine Idee, aufgrund einiger sehr wichtiger Dinge eine neue Version zu erstellen. Zunächst einmal gab es also eine Motivation, die Reaktivität zu ändern. Das vorherige wurde auf Object.defineProperty aufgebaut. Und es hatte ein paar Vorbehalte, sie sind alle dokumentiert, aber immer noch. Weißt du, selbst wenn du etwas dokumentierst, was die Leute nicht tun sollten, werden sie es trotzdem tun. Und Sie müssten sie auf die Dokumentation verweisen. Übrigens liest niemand Dokumentationen. Aus irgendeinem Grund passiert es einfach. Bis Sie darauf hinweisen, dass es in Dokumenten nicht existiert, existiert es nicht. Aber okay. Wir unterrichten Sie trotzdem. Reaktivität war also eines der Dinge.
Natalia: Als nächstes kam die Aufführung. Vue 2 hatte und hat immer noch nicht die schlechteste Leistung, aber wir hatten ein paar Ideen, wie wir Vue schneller machen können. Und es gab auch einen Schmerzpunkt für einen bestimmten Teil unseres, sagen wir, Publikum, Leute, die Vue verwenden. Es war TypeScript. Vue 2 wurde intern in Flow geschrieben, was immer noch stark typisiert ist, aber das Tippen mit TypeScript war ein echter Albtraum, besonders wenn Sie mit unserer Zustandsverwaltung Vuex arbeiten. Das war wieder ein Riesenteil. Und der letzte war, dass wir irgendwie die Funktionalität zur abstrakten Logik vermisst haben, nicht in Bezug auf Komponenten, sondern kombinierbare Logikteile. Wie Funktionshelfer und so weiter, aber sie sollten auch Zuschaueraktivitäten einbeziehen können. Ein nettes Beispiel hier könnten React Hooks sein, richtig, sie ermöglichen es Ihnen, die Teile der Funktionalität zu abstrahieren, und das hat in Vue eindeutig gefehlt. Und ich weiß, dass es sich im Moment anhört wie: „Du hast das Feature von React gestohlen.“ Nicht in der Tat. Ich glaube, dass die gegenseitige Befruchtung von Ideen ein großer und schöner Teil in unserem Ökosystem ist und auch Entwicklern hilft, zwischen Favoriten zu wechseln, oder?
Natalia: Also haben wir an diesen Hauptfunktionen gearbeitet, um Vue 3 als Hauptversion zu erstellen.
Drew: Ich denke, es ist eines der großartigen Dinge, in einem Open-Source-Ökosystem zu existieren, dass es eine Fülle von Ideen und Erfahrungen aus allen möglichen verschiedenen Projekten gibt und die Möglichkeit, diese Ideen und Erfahrungen von anderen zu übernehmen Projekte ist wirklich vorteilhaft und macht alles stärker, nicht wahr?
Natalia: Das ist es. Ich denke, es funktioniert so, wie wir es in GitLab als Iterationswert bezeichnen. Wenn man eine Idee hat, ist sie nie perfekt. Es ist meistens wie ein sehr rohes, sehr hart codiertes Ding. Vielleicht etwas ändern, aber es ist definitiv nicht perfekt. Und Sie brauchen ein paar Iterationen über diese Idee, um sie wirklich gut zu machen, nicht einmal perfekt, nur gut. Und passiert mit Ideen im Ökosystem. Jemand hat eine gute Idee, und Sie nehmen sie einfach und machen sie immer besser. Und ich wette, dass es etwas geben wird, das einige Ideen von Vue übernehmen wird, vielleicht haben sie bereits einige Ideen von Vue übernommen und es besser gemacht, und hier ist nichts Schlechtes.
Natalia: Ich bin strikt dagegen, wie „Du stiehlst Ideen“. Das ist kein Diebstahl, das ist nur Fremdbefruchtung.
Drew: Genau, ja. Sie haben erwähnt, dass die Migration zu TypeScript, also Vue 3 selbst jetzt mit TypeScript geschrieben wird, ist das richtig?
Natalia: Ja, ja, das tut es. Und glauben Sie mir, Drew, ich habe die Dokumentation geschrieben, das kleine Dokument darüber, wie man Vue mit TypeScript verwendet. Und ich dachte, okay, wahrscheinlich irgendwie wie Vue 2. Und ich habe das Dokument so sehr verkompliziert, dass ich fast alles explizit eingetippt hätte. Sieht gut aus, alles ist eingegeben. Ich kann Typen sehen, also ist mein ts-link zufrieden, soweit so gut. Und dann sagte einer unserer Entwickler, der mit TypeScript arbeitete: „Das müssen Sie nicht tun“. Wie, wie? „Sie müssen Daten nicht explizit typisieren. Sie geben ihm einfach einen Anfangswert und ts-link kennt seine Nummer. Es ist bereits getippt.“ Wie kommt das? „Ich habe 90 % der expliziten Typen aus dem Dokument entfernt. Es gibt nur zwei Dinge, die Sie wirklich eingeben müssen, nämlich Proxy der Komponente und berechnete Eigenschaften. Sie erfordern immer noch Rückgabetypen. Aber der Rest ist wie automatisch getippt, schreiben Sie einfach eine Komponente mit einer Methode, die wir „define component“ nennen. Und das ist es. Es ist getippt.“
Natalia: Es war wie, es funktioniert einfach. Und für mich, und ich habe in meiner Vergangenheit viel mit Angular gearbeitet, habe ich das Stockholm-Syndrom für TypeScript. Alles sollte explizit eingegeben werden. Ich meine, wenn Sie komplexe Typen haben, müssen Sie natürlich Schnittstellen schreiben, aber so funktioniert TypeScript. Trotzdem ist es jetzt mit Vue 3 viel einfacher, mit TypeScript zu arbeiten.
Drew: Das ist also großartig, also ist es ein Vorteil sowohl für das Vue Core Project als auch für Entwickler, die Anwendungen mit Vue erstellen, weil sie jetzt TypeScript in ihren Anwendungen gut mit Vue verwenden können, wo sie es mit 2.0, nun ja, keiner Version konnten von 2,0 so einfach. Wer die Vue-Community kennt, weiß, dass Vue-Schöpfer Evan You das Projekt immer noch sehr aktiv leitet. Wie funktioniert das Kernteam? Wie ist der Entwicklungsprozess strukturiert? Es ist nicht alles Evan, oder?
Natalia: Das ist so eine großartige Frage, Drew, denn jahrelang haben die Leute buchstäblich über Vue gesprochen, ich zitiere das und ich werde hart klingen, aber es tut mir leid, es ist wie „Ein Rahmen einer chinesischen Person, wie ein chinesischer Rahmen.“ . Und ich meine, sogar mit Vue 1.X gab es bereits ein Team und es gab ein großes Team hinter Vue 2 und ein noch größeres Team hinter Vue 3. Die Sache ist die, dass wir alle unterschiedliche Verantwortlichkeiten haben, wenn wir über Vue sprechen.
Natalia: Es gibt Leute, die an Core arbeiten, und das ist nicht nur Evan selbst, er macht definitiv die meiste Arbeit an Vue Core, und er leitet auch das Projekt. Aber es gibt Leute, die in Vue Core arbeiten, und ihre Beiträge sind absolut unschätzbar. Und es gibt ein paar neue Leute, die ebenfalls dem Vue-Team beitreten und in Core arbeiten. Und es gibt auch kleinere Teams, die am Ökosystem arbeiten, es gibt Leute, die am Pure Router arbeiten, wie Eduardo, es gibt Leute, die an Vue CLI, an Vuex und auch an der Dokumentation arbeiten.
Natalia: Es gibt ein ganzes Team, das an der Dokumentation arbeitet, weil wir glauben, dass Dokumentation wichtig ist. Und derzeit gibt es auf unserer Website, ich glaube, 21, 20 oder 21 Personen, immer verfehlt die Zählung, die zum Kernteam gehören, aber das ist keine statische Liste. Weil wir, wir stellen offensichtlich keine Mitarbeiter ein, wir sind ein Open-Source-Team, das ist kein bezahlter Job. Aber wir glauben, dass, wenn jemand viel zu einem Teil des Vue-Ökosystems beiträgt, wenn die Leute bereits die Arbeit des Kernteammitglieds erledigen, es nur ist, ihnen Anerkennung zu verschaffen, indem sie nur Zugang zu den Repositories und dem formalen Titel haben.
Drew: Das ist großartig, denn es ist ein Fall, in dem sich der Beitrag zu einem Open-Source-Projekt für eine Person wirklich auszahlen kann. Sie erhalten eine gewisse Anerkennung und das kann sich auf Ihre berufliche Karriere auswirken und was Sie haben.
Drew: Für Zuhörer, die vielleicht nicht an Vue gewöhnt sind, aber vielleicht mit anderen reaktiven Frameworks vertraut sind, wie Sie React, Angular und so weiter kennen. Was sind die großen Schlagzeilenänderungen bei Vue 3 und welche Probleme versuchen sie speziell zu lösen? Sie haben vorhin die Komposition als eines dieser Dinge erwähnt, ist das eine der großen Veränderungen?
Natalia: Ja, das ist eine der größten Änderungen, und es ist tatsächlich eines der Dinge, die zuallererst so sind, lassen Sie mich hier eine klare Aussage machen. Die Zusammensetzungs-API ist rein additiv. Es ist nicht so, dass Sie Ihre Komponenten neu schreiben müssen, Sie können ihnen TypeScript hinzufügen. Oder Sie ziehen es vor, die gesamte Syntax zu verwenden, jetzt nennen wir sie Options-API, und an diesen Bedingungen ändert sich für Sie nichts. Wenn wir über eine neue API sprechen, ist dies keine bahnbrechende Änderung. Ich möchte das nur wirklich betonen, es ist wirklich wichtig zu sagen, denn als es zum ersten Mal die Composition API ankündigte, war es ein schrecklicher Moment.
Natalia: Ich denke, wir haben die Änderungen nicht wirklich schön beschrieben und wir haben den Eindruck erweckt, dass der Standard-Build die Composition API sein wird. Es ist unser ganz schlechtes und Optionen waren wie, vielleicht werden wir es in zukünftigen Builds verwerfen, nicht in Vue 3, ganz klar. Und wenn die Möglichkeit besteht, dass die Leute das, was Sie gesagt haben, falsch lesen, werden sie es falsch lesen.
Natalia: Unmittelbar nach dieser Aussage, es war RFC, wo wir gerade die Änderung vorgeschlagen haben, explodierte Reddit. Reddit war voll von „Oh mein Gott. Ich muss alles schreiben. Oh mein Gott. Vue ist das neue Angular. Sie werden alles kaputt machen.“ Und da war ein Typ, der auf dev.to einen Artikel mit dem Titel Vue's Darkest Day erstellt hat. Es war ehrlich gesagt ein dunkelster Tag. Wir fühlten uns so, aber ich versuchte irgendwie, auf meinem eigenen Twitter dagegen anzukämpfen, wie: „Leute, die wir nicht wirklich sind … Sie sagten, dass wir begonnen haben, den RFC zu ändern, ich glaube, Evan hat begonnen, den RFC zu ändern, ohne Änderungen anzukündigen. Also sagte er: „Ich werde das einfach schnell umschreiben. Lassen Sie uns wie in den Meister schieben“. Die Leute waren darüber sauer. Weil sie sich über bestimmte Punkte gestritten haben, aktualisieren Sie einfach eine Seite und diese Punkte existieren nicht mehr. Du denkst, bin ich ein Idiot oder nur … Was zum Teufel? Ich meine, es war genau dort. Ich erinnere mich daran. Und ich glaube, dass unsere Kommunikationsstrategie besser sein könnte und das sind wir nicht.
Natalia: Im Moment ist jedes Mal, wenn ich über Komposition spreche, das rein additiv, Leute. Das ist einfach ein nettes Feature. Sie können es verwenden, Sie können es nicht verwenden, Sie sind nicht dazu verpflichtet. Nur … Es existiert.
Drew: Was ist die Art von Problem, in das jemand geraten könnte, wenn die Composition API eine neue Sache ist, die ihm hilft, aus diesem Problem herauszukommen? Welches Problem löst es?
Natalia: Stellen Sie sich die Komponente vor, die einige Funktionen enthält. Nehmen wir an, es ist Suchen und Sortieren. Nehmen wir an, wir suchen nach einer bestimmten Liste und versuchen, sie zu sortieren. Dies sind bereits zwei verschiedene Funktionen, und die Sache mit Vue-Komponenten ist, dass sie basierend auf den Optionen und nicht basierend auf der Logik aufgeteilt werden. Stellen Sie sich vor, Ihre Suche enthält wahrscheinlich eine Abfrage, da Sie eine Abfrage zum Suchen und Array von Ergebnissen durchführen müssen. Und das sind zwei reaktive Eigenschaften. In Bezug auf Ihre Komponente setzen Sie sie auf die Option, die als Daten bezeichnet wird. Und offensichtlich brauchen Sie eine Methode, um die Sortierung durchzuführen. Vielleicht ein Klick auf eine Schaltfläche, vielleicht etwas anderes, etwas, das die Suche ausführt. Sie erstellen die Methode. Und zum Sortieren müssen Sie etwas auf Sortieroptionen aufbauen, einer weiteren reaktiven Eigenschaft. Dann führen Sie einige Berechnungen durch, um die Ergebnisse zu sortieren.
Natalia: In Vue gibt es dafür auch berechnete Eigenschaften, was eine weitere Option ist. Am Ende wurde Ihre Komponente wirklich fragmentiert. Und stellen Sie sich vor, ich bin ein Entwickler und habe die Aufgabe, nur am Suchteil zu arbeiten. Ich kann die Komponente im Moment nicht teilen, weil diese beiden Merkmale sich irgendwie kreuzen. Ich suche nach einigen Ergebnissen und sortiere sie. Und ich muss von Daten zu Methoden springen, von Methoden zu Berechnungen, und am Ende ist es wirklich schwierig, einfach den Kontext zu wechseln. Vor allem, wenn das Bauteil richtig groß wird.
Natalia: Welche Optionen hatten wir in Vue 2.0? Die erste Option hieß Mixins und Mixin ist nur ein Objekt, das die gleichen Eigenschaften enthalten kann, die eine Komponente haben kann, und wir mischen sie mit einer Komponente. Klingt gut, ich kann einfach alle meine Suchen dorthin verschieben und was ist das Problem? Es gibt ein paar. Erstens ist dies völlig unflexibel. Wenn ich nach einem bestimmten Endpunkt suchen möchte und diesen nach Mixin verschiebe, ist dies der einzige Endpunkt, nach dem ich suchen kann. Mixins akzeptieren keine Parameter. Ich habe ein Mixin erstellt, es ist komplett statisch. Das zweite Problem ist, dass Mixin eingemischt wird, was bedeutet, dass es für bestimmte Eigenschaften wie eine Zusammenführung geschieht. Wenn Sie beispielsweise Hooks erstellt haben, werden diese zusammengeführt. Die gesamte Logik im Lebenszyklus-Hook aus der Mixin-Komponente wird zusammengeführt. Aber wenn Sie eine Dateneigenschaft, eine Kaltabfrage im Mixin und zufällig dasselbe in der Komponente haben, hat die Komponente Priorität. Es wird überschrieben. Sie erhalten keine Warnungen. Absolut. Es wird einfach passieren und Sie werden keine Ahnung haben, dass dies passiert ist.
Drew: Der gesamte Umfang ist komplett gemischt?
Natalia: Ja, vollständig. Es besteht keine Chance, dass Sie sehen, und auch Mixins sind sehr unklare Quellen. Importieren Sie einfach das Mixin mit dem Namen und stellen Sie es auf das Komponenteneigenschafts-Mixin, das war's. Es ist sehr implizit und ich spreche darüber aus meiner eigenen Erfahrung heraus. Wir haben eine Logik in GitLab, wo eine Komponente zwei Mixins enthält und jedes dieser zwei Mixins ein anderes Mixin enthält. Und hier ist es, hier ist eine Eigenschaft, die Sie überprüfen müssen und die nicht in der Komponente enthalten ist. Lassen Sie uns tiefer gehen, First-Level-Mixin. Dieser enthält es nicht und dieser enthält es auch nicht. Wo ist es? Sie tauchen tief, nur tiefer in den Kaninchenbau, nur um diese Eigenschaft zu finden, und das Testen wird auch zu einem Albtraum.
Natalia: Mixins sind sehr, sagen wir, dumme Methoden, um die Logik zu extrahieren. Es ist einfach, es ist klar, es ist sehr leicht zu bekommen. Es bringt Ihnen so viele Probleme, wenn Sie damit auf fortgeschrittenem Niveau arbeiten wollen. Die nächste Möglichkeit, Logik in Vue 2.0 zu abstrahieren, waren renderlose Komponenten. In Vue kann die Komponente einen Slot enthalten. Im Grunde ein Stück, in das Sie alles aus der übergeordneten Komponente einfügen können. Ein kleines Fenster, eigentlich ein Schlitz. Und es gibt eine Idee von Scoped Slots. Stellen Sie sich vor, die untergeordnete Komponente kann ihren eigenen Bereich wieder dem übergeordneten Inhalt anzeigen, und der Slot-Inhalt hat Zugriff darauf. Stellen Sie sich vor, ich habe eine Komponente mit einem Steckplatz und die Komponente führt die gesamte Suchlogik aus, sagen wir, die Suche hat einen Endpunkt mit vergangenen Parametern. Unsere untergeordnete Komponente, wie die Suche, und dann gibt sie diesen Teil ihres Geltungsbereichs wieder an die übergeordnete Komponente weiter. Dies sind Suchergebnisse. Genießen. Klingt gut. Klingt definitiv besser als Mixins. Wir können Parameter testen. Die Logik ist hier eindeutig, wir geben etwas zurück. Themen? Es gibt ein paar.
Natalia: Zunächst einmal haben Sie Ihre Komponenteninstanz erstellt. Dies ist nicht die billigste Operation der Welt. Zweiter Teil, es ist Laufzeit. Die Komponente funktioniert nur zur Laufzeit, und das bedeutet, dass exponierte Eigenschaften dieser Komponente nur in dem Slot verfügbar sind, in dem Sie sie als Bereich von Slots verfügbar gemacht haben, sodass Ihre Suchergebnisse nur in einem kleinen Teil Ihrer Vorlage verfügbar sind. Wenn Sie mit dem diskreten Teil der Komponente spielen möchten, haben Sie dort keinen Zugriff. Es ist Laufzeit. Es gab kein Handeln dieser Logik, wenn man woanders einen reaktiven Zustand brauchte. Natürlich kann es Helfer wie eine reine Funktion erstellen und Ergebnisse zurückgeben, aber was ist, wenn ich für die reaktiven Eigenschaften arbeiten muss? So wurde die Composition API erstellt. Mit der Kompositions-API können Sie einen eigenständigen reaktiven Zustand haben. Der reaktive Zustand ist nicht mehr nur ein Teil der Komponente. Sie können jedes Objekt oder Primitiv reaktiv machen. Und Sie können es den Eltern zeigen, es ist sehr explizit.
Natalia: Jedes Eigentum, das Sie an die Eltern zurückgeben möchten, wird aufgedeckt. Es ist eindeutig, Sie können darauf klicken, Sie können sehen, wo es ist, was es ist und so weiter. Und das Beste daran, wenn Sie den Teil der Kompositions-API in eine alte gute Komponente einfügen, die Datenmethoden, Computereigenschaften usw. enthält, funktioniert es einfach. Es funktioniert einfach perfekt, Sie fügen Ihrer Komponente einfach ein paar reaktive Eigenschaften und Methoden hinzu und können sie auch mit der alten Options-API verwenden.
Drew: Das hört sich so an, als würde es Entwicklern wirklich helfen, ihre Codebasis zu bereinigen, wenn es um sehr komplexe Komponenten oder sogar leicht komplexe Kombinationen von Komponenten geht. Und Sie haben die Testbarkeit von Mixins und anderen Dingen erwähnt, ermöglicht die Composition API eine bessere Testbarkeit?
Natalia: Ja, definitiv wegen der Composition API, wenn wir Lebenszyklus-Hooks davon ausschließen, weil Sie auch einen anderen Lebenszyklus-Hook im Composeable ausführen können. Eigentlich reine Funktion. Sie haben S-Parameter, Sie tun etwas, und außerhalb von Lifecycle-Hooks gibt es immer noch Nebenwirkungen. Und das Testen reiner Funktionen ist, wie Sie wissen, wahrscheinlich das Einfachste. Es ist nur eine Blackbox, Sie haben S-Parameter, Sie müssen etwas zurückgeben.
Drew: Das klingt nach einer sehr umfassenden Lösung für ein Problem, von dem ich sicher bin, dass viele Leute, die komplexere Apps mit Vue erstellen, es zu schätzen wissen werden. Und es klingt auf jeden Fall nach einer wirklich großartigen Möglichkeit, die Art von Fehlern zu beseitigen, von denen ich weiß, dass sie sich bei Mixins einschleichen können, wo es sehr einfach ist, Fehler einzuführen, wie Sie erwähnt haben, wenn der Bereich zusammengeführt wird und all diese Dinge.
Drew: Ich denke immer, dass eine große Überlegung bei der Entscheidung, auf einem Framework aufzubauen, seine API-Stabilität im Laufe der Zeit ist. Vielleicht ist Stabilität nicht das richtige Wort, aber ich denke, viele von uns wurden gestochen, indem sie auf einem Framework aufbauen, das dann einer großen Überarbeitung unterzogen wird und uns Apps zurücklässt, die entweder eine massive Investition für die Migration erfordern oder am Ende einfach gebunden sind auf eine alte Version eines Frameworks, das dann nicht mehr unterstützt wird. Es ist eine schreckliche Situation, in der man sich befindet. Wie viel Schlaf werde ich verlieren, wenn ich ein großes Projekt von Vue 2 auf Vue 3 verschiebe?
Natalia: Zunächst einmal ist die API-Oberfläche zu 90 % dieselbe wie zuvor. Wir hatten nicht so viele veraltete Dinge oder veraltete Filter, die durch veraltete Event Hubs ersetzt werden können. Wenn Sie einen EventEmitter verwenden möchten, müssen Sie auch einen ansichtsbasierten durch eine externe Bibliothek ersetzen. Das sind große Veränderungen, aber wo wir gerade von Migration sprechen… Lassen Sie mich klarstellen, dass ich gerade wirklich hin und her gerissen bin, weil ich einerseits Mitglied des Vue JS Core Teams bin. Auf der anderen Seite bin ich ein Staff Engineer in dem großen Projekt, das Vue verwendet. Wenn Sie gerade dabei sind, mit der Migration zu beginnen, würde ich dies nicht empfehlen. Erstens ist das Ökosystem nicht freigegeben, ich meine, wenn wir über Core-Bibliotheken wie Pure Router, PUX, Vue CLI sprechen, diese sind in guter Verfassung, aber sie sind immer noch Release-Kandidaten, keine Releases. Und wenn wir über andere Ökosysteme sprechen, wie etwa Nicht-Kernbibliotheken, UI-Komponentenbibliotheken, vielleicht einige Formularvalidierungsbibliotheken, sie sind meistens nicht bereit für Vue 3. Und wenn Sie ein großes Projekt haben, müssen Sie so viele Abhängigkeiten haben Pflege. Das wäre also eine komplizierte Sache.
Natalia: Was sind Optionen? Sie haben ein großes Projekt und möchten all diese Vorteile der Composition API nutzen. Wie erreicht man das? Zunächst planen wir die Veröffentlichung eines LTS-Builds von Vue 2.0, Vue 2.7. Dazu gehören viele Verfallswarnungen, sodass Sie sehen können, was veraltet sein wird, wie Sie es umgestalten können, um es nicht mit Vue 3 zu beschädigen. Sie werden also technisch immer noch Vue 2 verwenden, aber Sie werden Vue 3 vorbereiten sowieso, weil Sie alle Warnungen haben.
Natalia: Zweitens werden wir ein Migrationstool verwenden, das es einfach ausführen kann und als Codemod funktioniert und Dinge, die sich auf Vue 2 beziehen, durch Vue 3-Alternativen ersetzt. Natürlich sind keine Codemods perfekt. Unser Ziel ist es, zuallererst, wann immer möglich, Ersetzungen vorzunehmen, aber auch Warnungen anzuzeigen, wenn die Abwertung nicht einfach gehandhabt werden kann. Codemod wird in der Lage sein, eine Sache zu erkennen und eine Warnung auszulösen, aber sie nicht selbst zu ersetzen. Das ist wie ein großer Plan, und in dem Moment, in dem Vue 2.7 veröffentlicht wird, und ich denke, im Moment ist ihre voraussichtliche Ankunftszeit Dezember, wenn ich mich richtig erinnere, müsste ich die Roadmap überprüfen, aber ich denke, es ist Dezember.
Natalia: Das Ökosystem wird auch mehr oder weniger bereit sein. Wenn Sie ein großes Projekt mit Vue 2.0 haben, warten Sie einfach etwas länger, bis Core stabilisiert ist, denn selbst wenn Sie eine perfekte Bibliothek erstellen, braucht es noch einige Zeit, um sich zu stabilisieren, weil die Leute anfangen, dies zu verwenden, die Leute anfangen, Fehler zu melden. Wenn Sie es für ein Haustierprojekt verwenden und Fehler melden möchten, können Sie dies gerne tun. Und danach wird es einen reibungslosen Weg geben, zu Vue 3 zu migrieren.
Drew: Das von Ihnen erwähnte Migrationstool klingt also recht interessant. Ist das im Grunde ein statisches Analysetool, das Ihren Code durchsucht und…
Natalia: Ja, ja, ja, es ist ein Code oder ein Werkzeug. Im Moment ist es nur sehr begrenzt verfügbar. Es ist als Plug-in von Vue CLI verfügbar. Wenn Sie ein Vue-CLI-basiertes Projekt haben, können Sie ein Vue-Upgrade ausführen und sehen, wie das Tool funktioniert. Es ist noch nicht in der Form, die wir uns wünschen. Leider arbeite ich nicht an einem Projekt, das auf Vue CLI basiert. Ich müsste abwarten und prüfen, was los ist, aber zum Beispiel GitHub, wir haben bereits ein paar Schritte unternommen, auch ohne Migrationstool, um uns vorzubereiten, weil wir wissen, was veraltet ist. Es ist tatsächlich in der Vue 3-Dokumentation angegeben.
Natalia: Es gibt einen Migrationsleitfaden. Sie können alle Breaking Changes und Dinge sehen, die veraltet sind, und Sie können bereits an einem Teil davon arbeiten, sogar auf der Vue 2.0-Codebasis. Zum Beispiel haben wir in Vue 2.6 die Syntax für Slots geändert. Die Syntax für Scope-Slots wurde verworfen, aber nicht verweigert, sie existiert noch. Es gibt eine Warnung, aber Sie können es ausführen. Und natürlich kümmert sich bei einer sieben Jahre alten Codebasis niemand darum, die gesamte veraltete Syntax zu ersetzen, wenn sie nur funktioniert. Es gibt keine Warnung in der Produktion. Spielautomaten funktionieren. In der Entwicklung wie: „Oh, ich sehe eine Warnung in der Konsole. Vielleicht 20 davon, gut. Es ist gelb, nicht rot. Es ist mir egal".
Natalia: Du weißt, dass es jedem passiert. Wir haben ein riesiges Epos geschaffen, um daran zu arbeiten. Finden Sie alle aktuellen Sätze alter Syntax. Wir bemühen uns, unsere EventEmitter zu ersetzen, wieder sieben Jahre altes Projekt, beurteilen Sie uns nicht. Wir haben EventEmitter. GitLab arbeitete an EventHubs. Wir haben Vue-basierten Spaß durch externe Bibliotheken ersetzt. Ich würde empfehlen, dasselbe zu tun. Gehen Sie den Migrationsleitfaden durch und prüfen Sie, was bereits ersetzt werden kann und welche Änderungen Sie bereits vornehmen können, um sich darauf vorzubereiten und mit der Arbeit daran zu beginnen.
Drew: Mit dem aktuellen Stand des Migrationstools ist es eine gute Möglichkeit, die Gewässer mit Ihrer Codebasis zu testen. Einfach laufen lassen und gucken, was es schon anzeigt, ob es okay aussieht oder ob es große Dinge gibt oder ist es dafür noch zu unreif? Ist es besser, bis Dezember zu warten, wenn es tatsächlich in der Lage sein könnte, die Dinge zu reparieren?
Natalia: Wenn ich ein großes Projekt hätte, würde ich es nicht empfehlen. Wenn Sie ein kleines schlechtes Projekt oder vielleicht ein persönliches Projekt haben, aber es ist nicht so groß, würde ich empfehlen, es auszuführen und Probleme zu überprüfen, wie auch immer Sie haben, denn für zwei mittelgroße Projekte habe ich es ausgeführt. Ich denke, ein oder zwei Probleme. Ich kann nicht sagen, dass es unreif ist. Es ist schon in einem guten Zustand. Aber für große Projekte wiederum ist es ein Vermächtnis, es ist ein exotisches Zeug. Mach das nicht in der Produktion, Leute.
Natalia: Auch wenn Sie mit dem Gerüst Ihres Projekts spielen möchten, Vue CLI unterstützt derzeit zwei Modi. Sie können ein Vue 2-Projekt erstellen, Sie können ein Vue 3-Projekt erstellen. Und auf jeden Fall zumindest ausprobieren. Das ist auch für uns ein guter Weg, denn während Sie spielen, entdecken Sie Fehler, Sie melden Fehler, wir versuchen, sie zu beheben und so weiter.
Drew: In den Dokumenten und auf der Entwicklungs-Roadmap sehe ich die Erwähnung eines Migrations-Builds. Ist das etwas anderes als das, worüber wir gesprochen haben, oder ist es das, worüber wir sprechen?
Natalia: Nein, nein, es ist dasselbe. Es ist das gleiche und es sollte fertig sein, aber wenn Sie eine Migration planen, ist der Hauptpfad vorerst, einfach Dokumente zu lesen und zu befolgen, was dort gesagt wird, weil wir uns definitiv bemühen, wann immer wir kein Migrationstool haben, das Dokumentationsteam ging voran und erstellte eine detaillierte Anleitung, was die Änderung ist, warum sie vorgenommen wurde und was hier eigentlich ein Ersatz ist.
Drew: Ja, in der Dokumentation ist ein ziemlich umfassender Migrationsleitfaden als Teil der Vue 3-Dokumentation und er erwähnt eine Menge Änderungen, die migriert werden müssen. Ich denke, einige davon werden sich nicht auf jedes Projekt auswirken. Viele von ihnen waren im Wesentlichen Grenzfälle für viele Leute. Ist das fair?
Natalia: Ja, ein guter Teil davon zum Beispiel Filter, definitiv ein Grenzfall, denn selbst bei GitLab mit zum dritten Mal sieben Jahre alter Codebasis und einer großen. Wir hatten ein oder zwei Vorkommen von Filtern und sie wurden nicht mehr verwendet. Es war gut, dass wir nach ihnen gesucht und sie vollständig entfernt haben, denn wie „Oh, unbenutzter Code“ und noch einmal, wen interessiert es, dass er einfach existiert.
Natalia: Ich würde sagen, dass die Modelländerungen die absoluten Breaking Changes sind. Schauen Sie sich das an, denn jedes einzelne Projekt, das ich kenne, enthält mit Sicherheit mindestens ein Vue-Modell. Dies sollte überprüft und möglicherweise auch Attribute geändert werden, da wir derzeit Klasse und Stil, Röhren und Äther einbeziehen. Und wenn Sie jemals mit Vue gearbeitet haben, war es zuvor nicht enthalten. Im Moment ist die Art und Weise, wie Sie Klasse und Stil an untergeordnete Komponenten weitergeben, etwas anders und sie sind definitiv eine Aufmerksamkeit wert.
Drew: Das ist gut zu wissen. Die 3.0-Releases, die mit Vue veröffentlicht werden, ich meine, Sie haben das Ökosystem und alles drumherum erwähnt, Vuex und all diese anderen Teile des Ökosystems, die auf dieses Niveau kommen müssen. Ist das der Grund, warum derzeit die Website, der große „Getting Started“-Button, immer noch alle an Vue 2 geht? Es fühlt sich an, als wäre Vue 3 veröffentlicht worden, aber nicht mit voller Zuversicht. Aber liegt es an diesem Ökosystemproblem, dass es immer noch so ist?
Natalia: Nein, ich glaube, du hast gerade einen Fehler gefunden, lass mich kurz nachsehen. Nein, Erste Schritte zeigt auf Vue 3, es ist in Ordnung. Ich meine, wenn Sie zu vuejs.org gehen, zeigt es auf Version zwei. Dies ist beabsichtigt, weil wir geplant hatten, sie durch eine Subdomain wie Vue 2 zu ersetzen, die noch in Arbeit ist, aber bisher haben wir uns entschieden, vuejs.org dort zu belassen, wo es ist, und Vue 3 zu erstellen, und deshalb gibt es ein Banner auf vuejs. org. Wenn Sie zu irgendeiner Doku-
Drew: Da ist oben ein sehr kleines Banner, ja.
Natalia: Ja, wie klein.
Drew: Ja.
Natalia: Wir sollten es größer machen, denke ich. Größer und mit besserem Farbkontrast. Meine Zugänglichkeitsgefühle bleiben wie „Oh, da gibt es keinen Kontrast“.
Drew: Das sind gute Neuigkeiten. Wenn jemand vielleicht kein großes Projekt startet, aber wenn jemand ein persönliches Projekt startet oder Vue lernen möchte, ist Vue 3 sicherlich der richtige Ort, um anzufangen?
Natalia: Das würde ich sagen. Die Lernkurve ist übrigens nicht so unterschiedlich. Da es eine Absicht des Dokumentationsteams war, die alten Syntaxoptionen zu haben, sollte ich nicht alt sagen, es ist tatsächlich die aktuelle Syntax. Die bekannte Syntax als Standard. Denn wenn Sie die Vue 3-Dokumentation durchgehen, werden Sie mit der Kompositions-API nur in fortgeschrittenen Themen sehen, und der Lernpfad, den Sie mit Vue 3 haben, ähnelt dem, den Sie in Vue 2 hatten. Es ist keine große Sache, mit einem neueren zu beginnen Version, wenn Sie gerade Vue lernen und versuchen, damit zu experimentieren, und ich glaube, es wäre eine bessere Investition, wenn wir über Karriere sprechen. Fangen Sie an, die neuere Version zu lernen, weil sie alle Projekte überholen wird. Irgendwann, vielleicht ein halbes Jahr, ein Jahr, wird es selbst bei großen Projekten eine Migration geben.
Drew: Ich scheine in meiner persönlichen Karriere ein echtes Talent dafür zu haben, auf Plattformen zu kommen, gerade wenn sie sich in einem großen Migrationsprozess befinden. Ich meine sogar so weit zurück, erinnerst du dich, Macromedia Director, so weit zurück und Shockwave, Flash und all diese Sachen. Ich kam dazu, als sie zur Punktsyntax übergingen, und ich musste beides lernen. Und hier bin ich, ich finde mich im letzten Monat wieder, arbeite zum ersten Mal an einem Projekt in Vue, das ein Vue 2-Projekt ist, und lerne, während ich gehe, und freue mich auf all die Dinge, die in Vue 3 kommen. Es ist Sicherlich eine interessante Zeit, um etwas zu lernen, während es migriert, aber es hört sich so an, als wäre es mit Vue nicht allzu schwierig, und sobald das Ökosystem den Kern eingeholt hat, sollten wir an einem guten Ort sein.
Natalia: Oh, Drew, ich möchte nur darauf hinweisen, was Sie über die Einwanderung von Großprojekten gesagt haben. Sie können sich mich so vorstellen, 2018 und ich trete GitLab bei. Ich war kein Mitglied des Kernteams, ich bin im Moment nur ein Mitwirkender.
Natalia: Unmittelbar zur selben Zeit sagt Evan: „Oh, wir werden Vue 3 machen“. Jeder mag „Yeah, cool“. Frühjahr 2019 seid ihr das Kernteam. Ich meine, das ganze GitLab sagt: „Oh, das ist süß. Wir alle haben Migration und wissen Sie, wer dafür verantwortlich ist?“ Und Sie können sich nur vorstellen, wie es passiert, wenn Sie eine Dokumentation für Vue 3 schreiben, alle lesen und Ihr eigenes Unternehmen sagt: „Oh, ich möchte etwas über Vue 3 lernen, ich verstehe Ihre Dokumentation nicht.“ Also sagst du: „Oh, verdammt, das tut so weh“, weil du dort Entwickler und sozusagen hier Technikschreiber bist.
Natalia: Sie sind mittendrin, aber ich muss sagen, dass es auch für Frameworks sehr vorteilhaft ist, weil jedes große Produkt, das mit einem Framework erstellt wurde, ein großartiges, absolut großartiges Schlachtfeld ist, um Fehler zu finden und sie zurück in die Bibliothek zu bringen das Ökosystem. Ich kann sagen, dass Tests und GitLab Open Source sind, Vue Test Utils, ein Testtool für Vue. Ein Team hat unseren Testcode basierend auf Tests verwendet, was sehr sinnvoll ist, richtig. Weil Sie einige Grenzfälle und so weiter finden können. Aber dennoch, wenn ich daran denke, GitLab auf Vue 3 zu migrieren, fühle ich mich persönlich dafür verantwortlich. Ich bin nicht nur mitten in der Migration, ich bin persönlich verantwortlich für jeden einzelnen Fehler, den wir finden werden.
Drew: Wenn ich auf die vorherige Generation von JavaScript-Frameworks zurückblicke, denke ich, dass jQuery damals eines der erfolgreichsten war, und ich denke, es hat an Bedeutung gewonnen, weil es eine extrem gut gestaltete API hatte. Just this concept of taking a CSS selector and using it to query the DOM in your JavaScript was something that jQuery popularized. And I think that really resonated with hardworking developers who didn't need to learn a new way to work with JavaScript. I see Vue almost being I that same sort of camp. I mentioned I was previously working with React and moved to Vue in the last few weeks, and I found that almost everything to be more intuitive in the most genuine sense, as in I can look at something unfamiliar and pretty much understand what it's doing. And if I need to do something I've not done before I can sort of guess at how it would be implemented and usually I'm right or close to it.
Drew: Is the API of Vue something that the Core Team think about very closely or has it just turned out well almost as a happy accident because of the personalities involved?
Natalia: I think, at the times of Vue 2 we had a concept. It's changed slightly but we had a concept that was called Documentation Driven Design. And it's a really great concept because if something is really hard to explain, really hard to get and really hard to write down, maybe the API is wrong there. Maybe something is not developed as it should be because non-intuitive solutions, something that is like very cryptic, and you need to put a lot of work to explain, usually is not right. The API was shaped the way that is the easiest to explain and that's why it's intuitive. If it's easy to explain, people probably will get it on themselves. That's why the older directives like v-if and v-for look very familiar for any JavaScript developer. You don't need to explain what v-if is doing because it's clear, right.
Drew: Das ist es wirklich.
Natalia: It's kind of insulting and same with v-else. V-if, v-else-if, v-else and that's it. And we intuitively built v-for with syntax that looks like for loop in JavaScript and same for the biggest part of the API. I think the main intention since Vue 1.x and I think Evan also stated this in his docs was to create something that you have pleasure to work with as a tool. It's all about developer experience as well and I think this is what attracted me in Vue back in time as well. I started with Vue when it was already in beta for version 2. I didn't work that much with Vue .1. I think were not that many people familiar with Vue from the first version but I was like, “It's so nice to use”. I'm just building the same stuff and it's just been a pleasure. I don't need to think about the tool, I'm thinking about what I'm going to build. And tool is not preventing me from doing this.
Natalia: And again, I need to state this next one will be totally personal opinion, not as a Vue Core Team member. I've been working with Angular from version two to version six on a commercial project and it's a great framework. There are many different terms, it has lots of abstractions, the dependency injection is amazing, TypeScript support is absolutely incredible but I constantly had the feel I am building a wall with huge heavy bricks. And I need to just make an effort to move every single brick. I mean, the wall is amazing. Bricks are still heavy and it's just hard being a developer. And after this, working with Vue is like, “Oh, it's just like a walk in the park”.
Drew: There can be a danger with software that when it's so well designed, it makes everything feel really easy, that it sort of gets branded as a toy, as not being as powerful as the things that are really complex. Do you think that's a risk with Vue, do you think it might be regarded as less serious as some of the other reactive frameworks simply because it's better designed?
Natalia: Oh, it was. It was for this reason and for a few more reasons as well. And honestly, for a good amount of time, I think I had this question, every single conference I'd been speaking at, “Would you recommend Vue for big sized project, for enterprise project, for like serious project.” And every single time I was like, “Yes, you can use it for small project, it's easy to scaffold something, you can use it for the big size project and honestly if we speak about enterprise size project, framework is the least of the issues you need to solve.
Natalia: You can take any framework on the market, be it old one, be it Amber, be it whatever else, be it Angular One and create a good and stable architecture. You can take any of the newest framework, like latest release Vue 3, Svelte, latest React and build absolutely, incredibly awful stuff. It depends on how build it and how your team is working on this, whatever you have there, how you planned all the architectural decisions because I think, none of the framework, maybe Angular a bit, is dictating an architecture. Angular kind of does this thing rest of them are like, “You're free. Build it.” And yes, also I think the issue with Vue, not an issue, but issue in minds of people and especially in minds of company management was it's not backed by a big company.
Natalia: You have an Angular and there is Google standing behind Angular. There is React and there is Facebook supporting React. There is Vue and who is the small Chinese guy, again this is like a stigma, there is a framework of one guy, what if Evan You is hit by a bus? There was an article, “What if Evan You is hit by a bus”, I swear on dev.to. I'm like, “What are they so scared” and big companies are probably like, “What if they drop support, what if they decide, maybe even he decides, if we speak about Evan, what if he decides he does not want to work on this.” And as we can see over years it's good and stable and it's developing and it's not an issue and honestly, I think when framework is completely open sourced and built with a team of people that are not engaged, that are not subjective, that are not under one big company it's actually better for the framework.
Natalia: Last year we introduced the RFC process. It's actually just a request for comments. We have an idea, we drop it, people come there and people argue there and if we create an RFC for anything, this means that it's not decided, it's not set in stone. We just have an idea and we want to hear what community thinks. I believe it's great because Vue is shaped by developers community. This is not just loud words. No, this is not a production slogan, by the community for the community, I remember we used this but it's true. It's actually shaped by community. It's not shaped for the needs of a certain company. Even for big companies, even for companies that are sponsoring Vue. They're not shaping the framework and I believe this is great.
Drew: It's quite telling when you mentioned the list of active Core Team members is 20ish people and they're all listed on the site and next to everyone it says what thy work on in the project and also where they work professionally. And just looking down the list of where people work professionally, I mean you're at GitLab and there are other people who are just independent consultants and it's not like 18 of the 20 people work at Big Corp. Everybody is just contributing from all over the place which, as you say, is a real point of strength.
Natalia: Yeah.
Drew: That there is no one big body controlling it that could, for their own business purposes, just say, “We're changing direction, we're not going to do this anymore” and pull away all that support and leave the project in a mess. It is just lots of individuals contributing and doing their best to make something good, which I think is a really strong foundation for something as important as a framework that people are building on top of.
Drew: You know I've spent the first half of this year learning React and then changing jobs and now learning Vue. Personally it feels to me like a breath of fresh air. And I really want to commend the work that you and your colleagues are doing on that. For those who are wanting to find out more about Vue, the 3.0 release or just generally about Vue, you can go to vuejs.org currently the version three specific version as we mentioned is linked to the little banner at the top. Maybe by the time you're listening to this, the site will have changed and will just be Vue, but that's also where you find the docs and in the docs is that really good migration guide that we mentioned. I've been learning all about Vue 3.0, what have you been learning about lately, Natalia?
Natalia: I've been learning about Apollo Client version three. It's funny, because if you look at versions and I've been watching both of them, they are going completely the same way. Apollo Client was 2.6 and Vue was 2.6. And Apollo promised a release for a year and they were delaying and delaying it. It was for a long time in beta then release candidate. Same was for Vue, we announced a release and then we were delaying it again and again and moved to beta a bit late and then moved to release candidate. And they released not the same time but not with a big time difference. Apollo I think was released in Summer, beginning of Summer.
Natalia: And we use Apollo as well. I use it professionally and now I kind of try to build something with Vue 3 and Apollo 3, which is not an easy task because Apollo did a good number of changes. Again, we're adjusting them at work but, for example, removing local resolvers, is like, “What do I do now? What do I do with my local queries?” If you're curious about Apollo Client version three definitely give it a try. It's interesting to see how it's evolving.
Drew: I'm definitely going to give that a try. I've used Apollo on a couple of projects and it's really great to see that pushing ahead as well. If you as a listener would like to hear more from Natalia, you can follow her on Twitter where she is N_Tepluhina and you can find collections of her articles and videos of her public speaking events, much of which is about Vue on her website, nataliatepluhina.com
Drew: Thanks for joining us today, Natalia. Do you have any parting words for us?
Natalia: Not really, but thank you for having me, it was a lot of fun to speak there.