React and Vue without npm and builds
When everyone begins to get acquainted with React or Vue, as with the two most popular frameworks for frontend, of course we all use magic commands
npm install, npm build. And only after that daddy ‘public’ We deploy “where necessary.”
But there is another (I would call it a
perverted ) non-standard way, which many front-end beginner developers do not even know about, since they “grew up” on npm install / build.
But what if you do not need to build, but just insert js code in html?
Wait to spit in my face and throw stones with the inscription ‘I love node’ … We certainly know that without assembly we will lose unit tests, speed, and how to deal with importing components, and a hierarchy of files, and generally some kind of spaghetti code it turns out …
So why do you (and Us) need it and how does it work?
The other day, an order came from our “business” to add functionality to their BPM / ERP system, which is essentially a highly modified Redmine. All this miracle has been done for a long time and is spinning on a VPS server with a bunch of helper microservices for reading production data, machines and so on. You can’t touch the OS …
Redmine – written in Ruby on Rails, and generates the entire front on the server. All the front-end interaction in the plugins added there was through jquery. Now RoR has learned to work with webpack and you can screw on “human npm”, but this is in the latest versions, and we have ancient Ruby and Centos 6 on which there is no latest version of either Ruby or rails. I don’t feel like collecting from the sources and shoveling everything for the sake of adding several reactive forms, so we started looking for a way to add React or Vue to the Rails page template just like regular JS without npm and assemblies.
And quickly found, and for both.
With Vue, everything turned out to be very simple. Initiating the components looks of course “strange”, but generally readable and “writable”.
An example of a simple page on Vue with a component:
Files downloaded by the browser: 371 Kb, time: 590 ms
You can even import Vue components in the usual .vue format using http-vue-loader and not create spaghetti code. I was very surprised that only one vue is needed from the dependencies, which is good news.
With React, everything is a little more complicated but not much. For JSX to work, you need to import babel. To work with the DOM, you need react-dom. Without the above, react will not work normally. Instead of one import, you need to do three.
An example of a simple page on React with a component:
Files downloaded by the browser: 542 Kb, time: 589 ms
Here, unlike Vue, you don’t need to write the component template as a string, we write everything as usual, which is quite convenient and does not cause any discomfort.
And whom did we choose?
If you take the size of js imports downloaded by the browser, the winner is Vue. But this is only at first glance. Since we did not have many components, we did the task on both. And it was more convenient to write in React: there is almost no difference when writing with the assembly, and in the amount of imports the difference is not very significant.
What about Preact?
Preact is the “mini” version of react, which is slightly faster and weighs only 3 KB. As soon as I heard about our task, the first thing I remembered was preact. Opening the documentation was not a pleasant surprise: React ≠ Preact.
Preact does not have JSX, the spelling of components is very different from React. Learning to write in the “preact way” for our mini-task is very redundant and “expensive.”
This is a crutch! Hit him with them
We know this is a crutch. But sometimes you have to invent such solutions based on the tasks. In a normal development situation, frontend the use of frameworks in this embodiment is a terrible crutch and certainly not recommended at all.