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.
TOC
- Stack-choosing pain
- Switching a social media
- A JS guy
- HTML/CSS/Vue propaganda on Twitter
- MacBook and Screencast lessons
- Bootstrapping
- Keyboard Sounder App
- Conclusion
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.
Finally, I told to myself:
Stop!
From now, I will stick to React.
Just because it is most popular.
At that time I didn't use npmtrends.com, but the same picture appeared after reading different articles and Quora discussions.
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:
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:
keys.map(keyButton => <Key {...keyButton} />)
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:
document.querySelector('#parent').appendChild(childElement)
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) OpenSource.guide 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.
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.
Bootstrapping
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:
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:
index.html
index.js
App.js
LangSwitcher.js
Keyboard.js
Key.js
index.html
<head>
<script src="vue.global.3.2.31.js"></script>
</head>
<body>
<main id="vue-app"></main>
<script src="index.js" type="module"></script>
</body>
index.js
window.addEventListener('load', () => {
Vue.createApp(RootVueComponent).mount('#vue-app')
})
App.js, LangSwitcher.js, Keyboard.js, Key.js -- they are all Vue components and have the same structure:
const template =
/*html*/
`<div>
some content with vue template elements
like v-if, v-bind, v-for
</div>`
export default {
template,
data() {...},
props: {...},
methods: {...},
computed: {...},
components: {...},
}
And it is a miracle! -- when you open served index.html, all things works together well, without any additional steps.
Conclusion
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.
-
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. ↩
-
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 (17)
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.querySelectoranddata-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.
It is not rambling. Cool comment )))
Yeah, I remember when I changed code in Notepad++ directly trough ftp to WordPress code )))
From CDN or without a Bundler:
"In-browser template compilation:
vue.global.jsis the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.vue.runtime.global.jscontains 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 .
unpkg.com/browse/vue@3.2.31/dist/:
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.
Thank you. It is very useful info in addition to the article.
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.
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.
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
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.
Sorry I didnt elaborate more.
This topic can be separate into 3 questions
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.
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.
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
I tried to use this approach, and wrote about it. And find it ugly :)
React in class or web component you mean.
Love to see how Vue devs react to web component
to be honest Vue is also a framework, not a library
petite-vue is quite nice too, to add a bit of interactivity. 👌🏻
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
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
Does your web app need a front-end framework ?
دعاء لرجوع الحبيب وحرق قلبه
hello and good morning