DEV Community

Cover image for How I discovered an ideal stack for mastering HTML and CSS - Vue without build

How I discovered an ideal stack for mastering HTML and CSS - Vue without build

Rustam Apay on August 20, 2022

Disclaimer: this is not a pure tech article, with detailed manual. It is a story about: decision-making problem, thinking logic, and random life ev...
Collapse
 
drsensor profile image
૮༼⚆︿⚆༽つ • Edited

It's always interesting how modern webdev today from newbee perspective. In the early day (if we exclude PHP) junior webdev start from index.html and inline javascript. Then the project grow into multiple javascript and html resembling MVC pattern. The only tool you need are web browser and static webserver (+ CGI).
Now today webdev start from...TypeScript 😅. Also, document.querySelector and data- attribute feel like an alien in the era of JSX and their friends: .vue, .svelte, .etc. Modern webdev cost more RAM compared to early days due to the tooling (linter, dev server, compiler, hot reload that prone to memory leak, etc). Hopefully it didn't end up like mobile dev which require crazy amount of RAM.

Sorry for the rambling 😂
Also check out Alpine.js and petite-vue. Those are more suited for dev with "html first" approach.

Collapse
 
apayrus profile image
Rustam Apay

It is not rambling. Cool comment )))

Yeah, I remember when I changed code in Notepad++ directly trough ftp to WordPress code )))

Collapse
 
peerreynders profile image
peerreynders

From CDN or without a Bundler:

"In-browser template compilation:

  • vue.global.js is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.
  • vue.runtime.global.js contains only the runtime and requires templates to be pre-compiled during a build step. "

So what is going on here is that (repeated) user experience is being traded off for (infrequent) developer convenience .

  • In addition to the runtime, the client also has to download, parse, and execute the template compiler, a step that typically would occur before deployment.
  • Without a bundler there is no tree-shaking to remove unused code.

unpkg.com/browse/vue@3.2.31/dist/:

  • 632 kB vue.global.js
  • 429 kB vue.runtime.global.js
  • 128 kB vue.global.prod.js
  • 83.4 kB vue.runtime.global.prod.js

Don't get me wrong it's a great feature for quick demo's, POC's and prototypes but it's something that should be avoided for "production" solutions because it unnecessarily diminishes the quality of the end product.

Collapse
 
apayrus profile image
Rustam Apay

Thank you. It is very useful info in addition to the article.

Collapse
 
peerreynders profile image
peerreynders • Edited

Frankly these days if you are going to use Vue it makes sense to just go with Vitejs and select the vue or vue ts template.

Evan You is behind both Vue and Vitejs.

Vite also makes TypeScript a lot more bearable because it (esbuild) doesn't type check; if it can make sense of the code, it will transform the source to runnable output (JS). Type checking essentially becomes a linting step (unless you feel compelled to respond to every TS complaint in your code editor).

In my opinion a lot of Andrea Giammarchi's (WebReflection) libraries are a better fit for the "no build" approach (demo) that can later be transitioned to a bundled approach when it actually becomes necessary.

Collapse
 
gustavojordanra profile image
Gustavo Jordan

I found you should learn both, that will give you more options, React is the most popular and is just a library, and Vue is a framework, also has his own pross and it will depend on what your job position or proyect needs. Anyway always learn new things is great! . For my if you use Laravel, you should learn Vue, but is good to know React as is widely used.

Collapse
 
marklai1998 profile image
Mark Lai

It’s weird to compare a library to a framework and say React needs lot of tooling
In fact, you can also use React without build

Collapse
 
apayrus profile image
Rustam Apay • Edited

Is it weird to compare React with Vue? Ok ))
But why there are so many comparisons on the internet? I didn't compare them anyway ))
Also I didn't say that you cannot use React without build, I said that I used it with lots of tooling, and then I used Vue without build.
React doesn't look like native html, even without build. And my goal was to use html/css, not jsx/jss.

Collapse
 
marklai1998 profile image
Mark Lai

Sorry I didnt elaborate more.
This topic can be separate into 3 questions

  1. React with build vs Vue with build
    Syntax and other subjective opinion aside, I totaly agree that react requre more tooling as its nature is a lib not framwork, but its not far from Vue as a framework.
    Now the tooling has been improved a lot, with tools like Vite I can do most of the thing out of the box, the only thing that I really need is react-router, but thats the only one. So calling it "a lot of tooling" is a hot take.

  2. React without build vs Vue without build
    You can definitly use react without build(and without JSX) similar to Vue
    reactjs.org/docs/add-react-to-a-we...
    The main different is with React you will be writing React.createElement class but with Vue you can write it as template string. Then its all about personal personal preference.
    "Use React if you want HTML in your JS" its a total misconception.

  3. Why even Vue without build?
    Even with vue without build you're still writing Vue syntax and using its lifecycle , "Use Vue if you want JS in your HTML" its a total misconception.

My suggestion is web component, the syntax is mostly similar to Vue, but its totally Pure Js
developer.mozilla.org/en-US/docs/W...

I think it give a false impression on "you want js framwork on HTML => use Vue without build" while web component is the true answer

Thread Thread
 
apayrus profile image
Rustam Apay

I tried to use this approach, and wrote about it. And find it ugly :)

Thread Thread
 
marklai1998 profile image
Mark Lai

React in class or web component you mean.
Love to see how Vue devs react to web component

Collapse
 
mikevv profile image
MikeVV

to be honest Vue is also a framework, not a library

Collapse
 
kissu profile image
Konstantin BIFERT

petite-vue is quite nice too, to add a bit of interactivity. 👌🏻

Collapse
 
abbasc52 profile image
Abbas Cyclewala

You can also have a look at lit.dev/
lit is a webcomponent library which focuses on native/vanilla functionality over recreating the wheel and it supports buildless approach as well

Collapse
 
mikevv profile image
MikeVV

there is an alternative to react also without build tools - preactjs.
it is highly compatible with react and good choice to switch to if you already know react

Collapse
 
auroramoen profile image
AuroraMoen

Does your web app need a front-end framework ?
دعاء لرجوع الحبيب وحرق قلبه

Collapse
 
testeralok profile image
TesterAlok