Wenn jeder anfängt, sich mit React oder Vue vertraut zu machen, verwenden wir natürlich alle die magischen Befehle
npm install, npm build . Und erst nach diesem "öffentlichen" Papa setzen wir "wo nötig" ein.
Aber es gibt eine andere (ich würde es als
pervers bezeichnen ) nicht standardmäßige Methode, von der viele Front-End-Anfänger-Entwickler nicht einmal etwas wissen, da sie mit npm install / build "aufgewachsen" sind.
Aber was ist, wenn Sie nicht erstellen müssen, sondern nur js-Code in HTML einfügen?
Warten Sie, bis Sie mir ins Gesicht spucken und Steine mit der Aufschrift "I love node" werfen ... Wir wissen mit Sicherheit, dass wir ohne Assemblierung Unit-Tests, Geschwindigkeit und den Umgang mit dem Import von Komponenten sowie eine Hierarchie von Dateien und im Allgemeinen eine Art Spaghetti-Code verlieren werden es stellt sich heraus ...
Warum brauchen Sie (und wir) es und wie funktioniert es?
Neulich erteilte unser Unternehmen den Auftrag, sein BPM / ERP-System, das im Wesentlichen eine stark modifizierte Redmine ist, um Funktionen zu erweitern. All dieses Wunder wurde lange Zeit getan und dreht sich auf einem VPS-Server mit einer Reihe von Helfer-Microservices zum Lesen von Produktionsdaten, Maschinen und so weiter. Sie können das Betriebssystem nicht berühren ...
Redmine - in Ruby on Rails geschrieben und generiert das gesamte Frontend auf dem Server. Alle Front-End-Interaktionen in den dort hinzugefügten Plugins erfolgten über jquery. Jetzt hat RoR gelernt, mit Webpack zu arbeiten, und Sie können "human npm" anschrauben, aber dies ist in den neuesten Versionen und wir haben alte Ruby und Centos 6, auf denen es keine neueste Version von Ruby oder Rails gibt. Ich möchte nicht alles aus den Quellen sammeln und schaufeln, um mehrere reaktive Formen hinzuzufügen. Deshalb haben wir nach einer Möglichkeit gesucht, der Rails-Seitenvorlage React oder Vue hinzuzufügen, genau wie bei normalem JS ohne npm und Assemblys.
Und schnell gefunden, und für beide.
Vue ohne Vue npm
Mit Vue erwies sich alles als sehr einfach. Das Initiieren der Komponenten sieht natürlich "seltsam" aus, ist aber im Allgemeinen lesbar und "beschreibbar".
Ein Beispiel für eine einfache Seite in Vue mit einer Komponente:
<html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>
Vom Browser heruntergeladene Dateien: 371 Kb, Zeit: 590 msSie können mit
http-vue-loader sogar Vue-Komponenten im regulären .vue-Format importieren und keinen Spaghetti-Code generieren. Ich war sehr überrascht, dass von den Abhängigkeiten nur ein einziger Wert benötigt wird, was eine gute Nachricht ist.
Reagiere ohne Reagiere npm
Mit React ist alles etwas komplizierter, aber nicht viel. Damit JSX funktioniert, müssen Sie babel importieren. Um mit dem DOM arbeiten zu können, müssen Sie reagieren. Ohne das oben Genannte funktioniert die Reaktion nicht normal. Anstelle eines Imports müssen Sie drei durchführen.
Ein Beispiel für eine einfache Seite zu Reagieren mit einer Komponente:
<html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>
Vom Browser heruntergeladene Dateien: 542 Kb, Zeit: 589 msHier müssen Sie im Gegensatz zu Vue die Komponentenvorlage nicht als Zeichenfolge schreiben, sondern schreiben alles wie gewohnt, was sehr praktisch ist und keine Unannehmlichkeiten verursacht.
Und wen haben wir gewählt?
Wenn Sie die Größe der vom Browser heruntergeladenen js-Importe annehmen, ist der Gewinner Vue. Dies ist aber nur auf den ersten Blick. Da wir nicht viele Komponenten hatten, haben wir die Aufgabe auf beiden erledigt. Und es war bequemer, in React zu schreiben: Es gibt fast keinen Unterschied beim Schreiben mit der Baugruppe, und der Unterschied beim Import ist nicht sehr bedeutend.
Aber was ist mit Preact?
Preact ist die "Mini" -Version von
React , die etwas schneller ist und nur 3 KB wiegt. Sobald ich von unserer Aufgabe hörte, erinnerte ich mich zuerst an preact. Das Öffnen der Dokumentation war keine angenehme Überraschung: Reagieren ≠ Preaktieren.
Preact hat kein JSX, die Schreibweise der Komponenten unterscheidet sich stark von der von React. Das Schreibenlernen im "Preact Way" für unsere Mini-Aufgabe ist sehr redundant und "teuer".
Das ist eine Krücke! Schlagen Sie ihn mit ihnen
Wir wissen, dass dies eine Krücke ist. Aber manchmal muss man solche Lösungen basierend auf den Aufgaben erfinden. In einer normalen Frontend-Entwicklungssituation ist die Verwendung von Frameworks in dieser Ausführungsform eine schreckliche Krücke und sicherlich überhaupt nicht zu empfehlen.