What's the difference between Vue/React Framework vs CSS Framework like bootstrap/tailwind
Hello guys, in the world of web development, there are lots and lots of framework and I was wondering, when people they "Vue" or "React" Framework, does this mean a global collection of HTML/CSS/JS working as one or like "Vue" framework related only to HTML and then, we add our CSS styling ? Like I once heard "use tailwind" for your CSS, I only know the word and from what I've read it's a framework for CSS (Correct me If I'm wrong pls)?
20 Replies
Javascript frameworks are just that: Javascript. You write your own code, usually in a templating language very similar to HTML, then the framework does some magic to turn it into HTML. You generally write your own CSS there too, which gets applied either globally or per component, but in the end is at worst just slightly translated regular CSS
CSS Frameworks are also just that: CSS. They're a collection of classes that are intended to work together. Sometimes they contain a little javascript to make interactions possible that aren't with plain css
oh ok I see, when we use Vue.Js, we still need to have our HTML page where we define our structure or vue creates the element "dynamically"?
vue is a component framework. You have a scaffold HTML page, and then connect Vue to an element in that page. The rest of the page is generally blank, and you fill your page by writing vue components for the various things on your site
React and Svelte and Angular work pretty much the same way
oh ok I see
Thanks !
So basically,
We have our scaffold HTML page.
This is where our code that vue will generate will be inserted, the HTML code.
UI Components framework, like vue etc, we don't need to build things from scratch, like maybe we already have a single command to create a navigation bar?
vue isn't a ui component framework
it's a component framework, but usually a UI component framework means there's a library of pre-existing UI components
there are UI component libraries for Vue and the like that you can use for stuff like that, but at their core, Vue and such give you absolutely nothing out of the box other than the framework itself. You still have to write your code to generate your navbar
the advantage of component frameworks is generally that you can reuse components you've already written on multiple pages, or even multiple times on the same page
if you have a site like bluesky for example, each post is a component that they wrote, and then used a for-each loop to insert into the page multiple times with different content. That post component likely contains other components, like one for the profile picture for example, so that if they ever need a profile pic somewhere else (say, on a profile page) they can just reuse that one
oh ok, component framework is like -> I want to use a button at a specific place, this allows us to use the same button whenever/wherever we want. We only have the structure/html code, we add our own style and logic?
While UI Component framework is like -> I want a button here, give me one that's already pre-build/pre-designed (since it's a framework, it's difficult to modify already existing things)?
components generally let you embed the logic in the component, but that's Complicated™️ and different for different use cases and frameworks, but yes.
Also the modifying thing for UI frameworks depends on the UI framework. Some, it's practically impossible. Others, you have some customization options. Still others just download code for you to modify to your heart's content. Hard to give a general answer
Yep I see, I have a general overview now, thanks !!
Last question, normally, people would use frameworks to build websites, but when might it be mandatory to use pure html/css/javascript? I mean their should be certain things that framework doesn't allows us to do?
generally, you can do pretty much everything with a framework that you can do without
sometimes it's more overhead to use one, or you don't like or don't need the benefits they have
Ok noted, thanks !
the benefit of a framework is that plenty of work is done for you
you mostly focus on writing the logic and output
or, in the case of an ui framework, you just put the pieces together
no need to think about how everything looks and acts and implemeng everything
the disadvantages are that those are opinionated, confine you a lot to the framework way of things, going out of the framework black box is horribly horrible and overhead
a key thing to know what is a framework and what isn't is that a framework will force you to do things a certain way. UI frameworks like Vue, Svelte and React use components, but Meta Frameworks like Nuxt, Sveltkit or Nest use other approches on top of the corresponding UI Framework (Nuxt uses, Vue, Sveltkit uses Svelte, Nest uses React...).
what Jochem called Component Framework are more often refered to as "Component Libraries" or "UI Libraries" because they don't constrain you like Frameworks do (at least not as much, but many blur the line).
For example, both Vue and Svelte will force you to have all the JS, HTML and CSS for a piece of UI in a single file (a component) while React does it differently, and Angular does it in yet another way.
but Component libraries, like Bootstrap Vue (which is just a set of Vue components using bootstrap styles) will just give you the components to use in your application with a greater degree of liberty
Vue/React are for specifying content. They enable conditional styling, but they don't define any styles of their own. Tailwind is for specifying styling and not content. Bootstrap provides a mix of both, but the content it provides is predefined. Vue/React help you to specify content but don't predefine any.
small question, when we use frameworks, say we are using vue and I want to add a particular element in my HTML script, can I use both a mix of the HTML generated by the vue framework and add my own HTML element ?
depends on the framework, but, i would stick to what the framework does
why? because there could be some ✨ magic ✨ behind all of it
for example, the framework could gather a list of scripts you say you need, resolve the dependencies for you and just output all the tags (with the appropriate attributes) for you, in the order you need
for as good or bad wordpress is, it does that dependency resolving for you
if you just stick your html somewhere, you may or may not have the dependencies you need
you can do it, but you definitively shoudn't
I feel like this question is not the one you actually want to ask, do you have an example of what you would want to do ?
hmm this idea just came like that, like, in my head it is: "if I'm using vue.js for example, can I built "custom" animations on my own" ?
hmm what if I want a special type of loading screen animations etc ?
then you make a component for that using the framework's tools
that's the "a framework will force you to do things a certain way" part, if you use Vue or Svelte or React you have to do DOM and CSS stuff in a component
that said, depending on the framework, you can often use the same tools you already use with vanilla JS to do some manipulation
you just have to do it in the component
ah ok I see, I will have to implement all of that works, thanks !