Cuando todos comienzan a familiarizarse con React o Vue, como con los dos frameworks más populares para frontend, por supuesto, todos usamos los comandos mágicos
npm install, npm build . Y solo después de ese papá 'público' desplegamos "donde sea necesario".
Pero hay otra forma no estándar (yo diría que es
pervertida ), que muchos desarrolladores principiantes de front-end ni siquiera conocen, ya que "crecieron" en npm install / build.
Pero, ¿qué sucede si no necesita compilar, sino simplemente insertar el código js en html?
Espere a escupirme en la cara y arrojar piedras con la inscripción 'Me encanta el nodo' ... Ciertamente sabemos que sin ensamblar perderemos pruebas unitarias, velocidad y cómo lidiar con la importación de componentes y una jerarquía de archivos, y en general algún tipo de código de espagueti resultará ...
Entonces, ¿por qué usted (y nosotros) lo necesita y cómo funciona?
El otro día, llegó un pedido de nuestro "negocio" para agregar funcionalidad a su sistema BPM / ERP, que es esencialmente una Redmine fuertemente modificada. Todo este milagro se ha hecho durante mucho tiempo y está girando en un servidor VPS con un montón de microservicios auxiliares para leer datos de producción, máquinas, etc. No puedes tocar el sistema operativo ...
Redmine: escrito en Ruby on Rails, y genera todo el frente en el servidor. Toda la interacción frontal en los complementos agregados allí fue a través de jquery. Ahora RoR ha aprendido a trabajar con webpack y puedes atornillar "npm humano", pero esto está en las últimas versiones, y tenemos los antiguos Ruby y Centos 6 en los que no hay una versión más reciente de Ruby o rails. No tengo ganas de recopilar de las fuentes y palear todo por el simple hecho de agregar varias formas reactivas, por lo que comenzamos a buscar una manera de agregar React o Vue a la plantilla de la página Rails como JS normal sin npm y ensamblados.
Y rápidamente encontrado, y para ambos.
Vue sin Vue npm
Con Vue, todo resultó ser muy simple. El inicio de los componentes se ve, por supuesto, "extraño", pero generalmente legible y "grabable".
Un ejemplo de una página simple en Vue con un componente:
<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>
Archivos descargados por el navegador: 371 Kb, tiempo: 590 msIncluso puede importar componentes Vue en el formato regular .vue usando
http-vue-loader y no generar código de espagueti. Me sorprendió mucho que solo se necesita un vue de las dependencias, lo cual es una buena noticia.
Reaccionar sin reaccionar npm
Con React, todo es un poco más complicado pero no mucho. Para que JSX funcione, debe importar babel. Para trabajar con DOM, necesita react-dom. Sin lo anterior, reaccionar no funcionará normalmente. En lugar de una importación, debe hacer tres.
Un ejemplo de una página simple en React con un componente:
<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>
Archivos descargados por el navegador: 542 Kb, tiempo: 589 msAquí, a diferencia de Vue, no necesita escribir la plantilla del componente como una cadena, escribimos todo de la manera habitual, lo cual es bastante conveniente y no causa ninguna molestia.
¿Y a quién elegimos?
Si toma el tamaño de las importaciones js descargadas por el navegador, el ganador es Vue. Pero esto es solo a primera vista. Como no teníamos muchos componentes, hicimos la tarea en ambos. Y fue más conveniente escribir en React: casi no hay diferencia al escribir con el ensamblado, y la diferencia en las importaciones no es muy significativa.
¿Pero qué hay de Preact?
Preact es la versión "mini" de react, que es un poco más rápido y pesa solo 3 KB. Tan pronto como escuché sobre nuestra tarea, lo primero que recordé fue preactivo. Abrir la documentación no fue una sorpresa agradable: Reaccionar rea Prever.
Preact no tiene JSX, la ortografía de los componentes es muy diferente de React. Aprender a escribir en la "forma exacta" para nuestra mini-tarea es muy redundante y "costoso".
Esta es una muleta! Golpealo con ellos
Sabemos que esto es una muleta. Pero a veces hay que inventar soluciones basadas en las tareas. En una situación normal de desarrollo frontend, el uso de marcos en esta realización es una muleta terrible y ciertamente no se recomienda en absoluto.