DEV Community

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

Posted on • Updated on


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

Disclaimer: this is not a pure tech article, with detailed manual. It is a story about: decision-making problem, thinking logic, and random life events influencing us. Anyway, you'll find all necessary tech info too.


Stack-choosing pain

At the beginning of my professional developer way (summer 2017), I was close to madness of the choice of frameworks. I was working on my first full-stack project with Meteor/Blaze, just because I found a cool tutorial about it on Youtube and moved through it.

Soon I understood that blaze is outdated or just not popular. And every day during a month I was reading comparisons like: "Angular vs React vs Vue".

One of mine experienced dev friends said: "React is an ugly garbage, Vue is elegant". Another one said: "Vue is a toy for hipsters. It isn't used widely. React is cool". Switching focus between react/vue pros and cons was poisoning my mind 1.
Buridan's donkey: Vue or React

Finally, I told to myself:

From now, I will stick to React.
Just because it is most popular.

At that time I didn't use, but the same picture appeared after reading different articles and Quora discussions. Vue vs React

And I stuck to it tightly until the end of 2021 2.

There are so many things to learn even/especially when you use only 1 frontend framework: bots, backend frameworks, mobile apps, cloud services… I always kept in mind the pain of choosing a frontend framework and in 3 years I never thought to change it. Until once, when I realized, that I didn't use HTML/CSS for that 3 years. So I made a simple HTML/CSS layout of screen keyboard for my 2 y.o. son:

keyboard part

And tried to flavor it with some interactivity -- animation of pressed button and playing audio with its name. Also, I needed a way to display all keys in a loop, what I could do with React in 1 line: => <Key {...keyButton} />)
Enter fullscreen mode Exit fullscreen mode

My first attempt was with vanilla JS, but direct manipulations on DOM (templates, shadow DOM) looked overwhelmed, annoying, and ugly. It makes me cry looking at code like:

Enter fullscreen mode Exit fullscreen mode

So, I needed something modern, but still simple. And I found the article: Vue JS App Without Build. I tried it and it worked. I fell in love with this approach. I was surprised, that we can use a modern framework in modular/component way without any installation, bundling, build. Of course, for small funny hobby projects.

There is also an interesting story how I took a step away from React/JSX/JSS to HTML/CSS/JS. It was not a quick decision, but a long process…

Switching a social media

At the end of 2020 I disabled my accounts on Facebook and Instagram because I spent a lot of time there. The next year was productive and by the way I learned Open Source deeply. I even translated the whole site (with a lot of content) into my country language. There I met lots of quotations from the Twitter, like it was a main network for programmers. But I didn't use it before. So autumn 2021 I started my English Twitter.

A JS guy

To avoid wasting of time, I subscribed only topics related to my work: JavaScript, NodeJS, NextJS, MongoDB, React, Material-UI, Ionic, React-Native, TypeScript, NestJS, TypeORM. Have you noticed in this list the absence of words: HTML, CSS? It is because I was JS-oriented dev as described in: "The Great Divide: Two front-end developers are sitting at a bar. They have nothing to talk about".

For 3 years before I worked only with NodeJS, React, Material-UI, React-Native, RN-Elements, so I never went outside:

  • JSX -- instead of HTML
  • JSS -- instead of CSS

HTML/CSS/Vue propaganda on Twitter

Despite my preferences, HTML/CSS persistently appeared in my news feed every day. I have a guess how that happened.

When beautiful ladies start learning "TECH", they begin from HTML/CSS. And guess, who succeed in social media getting most likes and love from His Highness The Algorithm? -- Beautiful ladies. In #techTwitter there are so many lonely guys, giving thousands of likes and retweets for girls.

cute girl twit: I learned h1 tag

After a couple of months on Twitter I feel ashamed, that I haven't done anything in plain HTML/CSS for years. So, I dramatically didn't have common topics to talk to tech girls.

Also, I remembered one guy tweet, that Vue is more like a way to organize vanilla JS code amongst HTML/CSS. Regularly I met loving tweets about Vue from its community. And I began thinking of it.

MacBook and Screencast lessons

At the end of 2021 I bought a MacBook and tried it to record coding lessons. I wanted to experience the entire process:

  • to choose an interesting yet simple project
  • to record screencast while coding
  • to voice over
  • to edit video

to feel in shoes of tech edu celebrities like Brad Traversy or Maximilian Schwarzmüller -- how they make such a great content? But I was thinking towards very beginners, who may find it difficult to get why we use a terminal or bundler.


I thought: it will be good to keep things as simple as possible and avoid:

  • installation
  • bundling
  • build

because for a newbie these steps are distracting and frustrating. And honestly, all these things that happen in a magic black window (terminal) with bash commands is not a software design or coding. It is file manipulations and tooling. So, I wanted to separate these concepts -- to take care of newbies.

Also, Vue is a great choice when you want to practice HTML/CSS. There is a saying:

Use Vue if you want JS in your HTML
Use React if you want HTML in your JS

Keyboard Sounder App

So, that's what I've done with a such stack:

keyboard learning app animation

I am planning to record a detailed video tutorial on how to code this app from the scratch, because I find the app to be the perfect teaching example for many reasons. In the meantime, I'll write briefly the most important thing about the file structure:

Enter fullscreen mode Exit fullscreen mode


  <script src=""></script>
  <main id="vue-app"></main>
  <script src="index.js" type="module"></script>
Enter fullscreen mode Exit fullscreen mode


window.addEventListener('load', () => {
Enter fullscreen mode Exit fullscreen mode

App.js, LangSwitcher.js, Keyboard.js, Key.js -- they are all Vue components and have the same structure:

const template = 
    some content with vue template elements 
    like v-if, v-bind, v-for

export default {
  data() {...},
  props: {...},  
  methods: {...}, 
  computed: {...}, 
  components: {...}, 
Enter fullscreen mode Exit fullscreen mode

And it is a miracle! -- when you open served index.html, all things works together well, without any additional steps.


I love this vue without build stack -- because it isn't a stack, but a pure HTML/CSS/JS with one imported script in the head of index.html.

  1. Someone can say, that switching between frameworks/tools is easy. Yes it is, when you are already skilled. But when you are a newbie, it is better to stick to one tool you know well, it will release the energy to move forward learning key concepts without being distracting by tools.  

  2. There is an interesting story about Richard Feynman's painful choice between Cornell and Caltech Universities in the book "Surely You're Joking, Mr. Feynman" in the chapter "An Offer You Must Refuse". 

Top comments (18)

drsensor profile image
Fahmi Akbar Wildana • 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.

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 )))

peerreynders profile image

From CDN or without a Bundler:

"In-browser template compilation:

  • is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.
  • 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.

  • 632 kB
  • 429 kB
  • 128 kB
  • 83.4 kB

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.

apayrus profile image
Rustam Apay

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

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.

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.

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

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.

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
    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

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

mikevv profile image

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

mikevv profile image

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

abbasc52 profile image
Abbas Cyclewala

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

kissu profile image
Konstantin BIFERT

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

auroramoen profile image

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

testeralok profile image

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.