Lorsque tout le monde commence à se familiariser avec React ou Vue, comme avec les deux frameworks les plus populaires pour le frontend, bien sûr, nous utilisons tous les commandes magiques
npm install, npm build . Et seulement après ce papa «public», nous déployons «lorsque cela est nécessaire».
Mais il existe un autre moyen (je dirais que c'est
perverti ) non standard, que de nombreux développeurs débutants ne connaissent même pas, car ils "ont grandi" lors de l'installation / construction de npm.
Mais que se passe-t-il si vous n'avez pas besoin de construire, mais insérez simplement du code js en html?
Attendez de me cracher au visage et de jeter des pierres avec l'inscription `` J'aime le nœud '' ... Nous savons certainement que sans assemblage, nous perdrons les tests unitaires, la vitesse et la façon de gérer l'importation de composants, et une hiérarchie de fichiers, et généralement une sorte de code spaghetti ça va finir ...
Alors pourquoi en avez-vous (et nous) besoin et comment cela fonctionne-t-il?
L'autre jour, une commande est venue d'une «entreprise» pour ajouter des fonctionnalités à leur système BPM / ERP, qui est essentiellement une Redmine hautement modifiée. Tout ce miracle a été fait depuis longtemps et tourne sur un serveur VPS avec un tas de microservices d'assistance pour lire les données de production, les machines et ainsi de suite. Vous ne pouvez pas toucher le système d'exploitation ...
Redmine - écrit en Ruby on Rails, et génère tout le front sur le serveur. Toutes les interactions frontales dans les plugins ajoutées ont été effectuées via jquery. Maintenant, RoR a appris à travailler avec webpack et vous pouvez visser "human npm", mais c'est dans les dernières versions, et nous avons d'anciens Ruby et Centos 6 sur lesquels il n'y a pas de dernière version de Ruby ou de rails. Je n'ai pas envie de collecter à partir des sources et de tout pelleter dans le but d'ajouter plusieurs formulaires réactifs, nous avons donc commencé à chercher un moyen d'ajouter React ou Vue au modèle de page Rails, tout comme JS normal sans npm ni assemblages.
Et rapidement trouvé, et pour les deux.
Vue sans Vue npm
Avec Vue, tout s'est avéré très simple. Le lancement des composants semble bien sûr «étrange», mais généralement lisible et «inscriptible».
Un exemple de page simple sur Vue avec un composant:
<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>
Fichiers téléchargés par le navigateur: 371 Kb, temps: 590 msVous pouvez même importer des composants Vue au format .vue normal en utilisant
http-vue-loader et ne pas générer de code spaghetti. J'ai été très surpris qu'une seule vue soit nécessaire à partir des dépendances, ce qui est une bonne nouvelle.
Réagir sans réagir npm
Avec React, tout est un peu plus compliqué mais pas beaucoup. Pour que JSX fonctionne, vous devez importer babel. Pour travailler avec le DOM, vous avez besoin de react-dom. Sans ce qui précède, react ne fonctionnera pas normalement. Au lieu d'une importation, vous devez en faire trois.
Un exemple de page simple sur React avec un composant:
<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>
Fichiers téléchargés par le navigateur: 542 Kb, temps: 589 msIci, contrairement à Vue, vous n'avez pas besoin d'écrire le modèle de composant sous forme de chaîne, nous écrivons tout comme d'habitude, ce qui est assez pratique et ne cause aucun inconfort.
Et qui avons-nous choisi?
Si vous prenez la taille des importations js téléchargées par le navigateur, le gagnant est Vue. Mais ce n'est qu'à première vue. Comme nous n'avions pas beaucoup de composants, nous avons fait la tâche sur les deux. Et il était plus pratique d'écrire dans React: il n'y a presque pas de différence lors de l'écriture avec l'assemblage, et la différence dans les importations n'est pas très importante.
Mais qu'en est-il de Preact?
Preact est la version «mini» de react, qui est légèrement plus rapide et ne pèse que 3 Ko. Dès que j'ai entendu parler de notre tâche, la première chose dont je me suis souvenu a été de réagir. L'ouverture de la documentation n'a pas été une agréable surprise: React ≠ Preact.
Preact n'a pas JSX, l'orthographe des composants est très différente de React. Apprendre à écrire de la manière «pré-active» pour notre mini-tâche est très redondant et «coûteux».
Ceci est une béquille! Frappez-le avec eux
Nous savons que c'est une béquille. Mais parfois, il faut inventer de telles solutions en fonction des tâches. Dans une situation normale de développement frontal, l'utilisation de frameworks dans ce mode de réalisation est une béquille terrible et certainement pas recommandée du tout.