Ich habe versucht, von React.js zu Vue.js zu wechseln

Einführung

Vor ein paar Jahren war ich, wie viele andere auch, von der Einführung von Hooks und Funktionskomponenten der React.js-Frontend-Bibliothek „gehypt“. Sie boten eine völlig neue Art der Entwicklung, indem sie viel weniger Code schrieben als mit der Components-Klasse. Ich war wirklich süchtig, und zwar für eine ganze Weile.

Heute musste ich mich für das Vue.js-Framework entscheiden, um die Anforderungen eines brandneuen Kundenprojekts zu erfüllen. Und als ich am Ende dieses Projekts angelangt war, sagte ich mir, dass dies die Gelegenheit sei, Ihnen als neuem Benutzer dieses Frameworks Feedback zu geben!

Hat dieser Kompetenzzuwachs dem Bekanntheitsgrad von Vue.js gerecht?
Ist es heute besser, ein Frontend in Vue zu entwickeln als in React?

Das werden wir sehen!

Projektstart

Kesselplatte

Wer sagt, dass man ein Projekt starten will, sagt, dass man nach einem guten Standardmodell suchen muss, um uns Stunden oder sogar Tage mühsamer Konfiguration zu ersparen!
Ohne lange suchen zu müssen, erfüllt der Befehl npm create vue@latest weitgehend meine Anforderungen:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Die Typescript-Sprache wird bereits unterstützt, ein Routing-System und ein Store werden angeboten und es gibt sogar Platz für Unit- und End-to-End-Tests!

Standardmäßig ist der Vite-Bundler installiert. Was mir nicht missfallen soll!? Tatsächlich sind die Builds schnell und in den meisten Fällen funktioniert Hot Module Replacement (HMR) gut.

Ein wenig npm run dev, um den lokalen Dev-Server zu starten, und schon! Es läuft bereits im Browser!

Und für die Produktion? Geben Sie einfach den Befehl npm run build ein und das Projekt wird nach Überprüfung der Eingaben als statische Dateien in ein dist-Verzeichnis exportiert (sofern Typescript aktiviert wurde):

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Projektarchitektur

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

Auf der architektonischen Seite des Projekts finden wir insbesondere:

• die Datei index.html mit dem Tag
  auf dem unsere gesamte Vue-Anwendung aufgepfropft ist;
• die main.ts, mit der sukzessiven Erstellung der App-Komponente, des Routers und des Stores:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• reine .ts-Dateien, um das Routing und den Store zu verwalten;
• einige Konfigurations- und Testdateien;
• ... und natürlich die *.vue-Dateien, unterschieden in Komponenten (die eher generischen und wiederverwendbaren Elementen entsprechen) und Ansichten (die eher hohen Ebenen entsprechen). Seiten)

Kurz gesagt, die Dateiarchitektur ist ziemlich einfach und der von React relativ ähnlich, auch wenn im Boilerplate viele Optionen aktiviert sind.
Bisher gibt es von React nichts wirklich Neues. Dann treten erhebliche Unterschiede auf!

Architektur einer Vue-Datei

Hier ist ein Codeausschnitt, der von der offiziellen Website inspiriert wurde. Es ändert lediglich die Farbe des Textes, wenn darauf geklickt wird, und zeigt gegebenenfalls den Satz „Der Text oben ist grün“ an, stellt jedoch eine typische Architektur von *.vue-Dateien dar:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Beachten Sie die Bindung von Ereignissen mit @click, die bedingte Anzeige mit v-if und die Bindung in CSS mit v-bind().

Der Code ist in drei sehr unterschiedliche Teile unterteilt:

• Skript: der Steuercode;
• Vorlage: die HTML-Struktur;
• Stil: das CSS-Stylesheet.

Und diese drei Teile vermischen sich nie ?.
Dies hat mehrere Vorteile, die ich während meiner Erfahrung im Kundenprojekt persönlich erfahren habe:

• Die HTML-Struktur ist klar, fest und in einem sehr deklarativen Stil – alles ist da, sogar die bedingt angezeigten Tags;
• Der Logikteil ist gut vom Anzeigeteil getrennt;
• Sie können reines CSS an Ort und Stelle schreiben, direkt mit der Komponente verknüpft und ohne die Installation von Bibliotheken von Drittanbietern;
• Trotz der Trennung des Stils können Sie weiterhin Variablen in das CSS einfügen.

Mit dem Scoped-Tag im