Why are there so many JavaScript frameworks?
Hello guys, it's been sometime now that I have been using vanilla HTML/CSS/JS. I wanted to learn some frameworks just to see how all of that works and from what I've told, in real world/jobs, the majority of time, we use frameworks to do things.
My first question is: What do we have so many frameworks from Next.JS to Angular.JS to Vue.JS to React.JS and so on please.
Second is, if I need to learn a framework for JavaScript and also for CSS, are there any recommended frameworks please. (By the way HTML doesn't have any framework on its own? There are terms that I saw like
pug, SASS etc I think, are these related to HTML ?)128 Replies
Obligatory XKCD:
https://imgs.xkcd.com/comics/standards.png
this is the complete answer
😂 yeah, saw that somewhere, the idea is we can't have a general framework that does everything ?
the idea is that dozens hundreds of people tried to make a general framework and failed
because "general" isn't as general as people like to think
As for
pug, it's an HTML template language. Instead of doing the silly < and > with your element names it does away with them and uses other tricks to make it "easier" to write HTML.
SASS is a CSS pre-processor. It allows you to do thing that CSS can't do and then is compiled to CSS. Things like functions, loops, and variables…well, not as cool as the variables we have in CSS now, but they were pretty neat when CSS didn't have them!as for recommendations: if you're learning for a job, check your local listings and see what's popular. There's nothing much else to be said about it. You want to get hired, you learn what the people hiring want you to learn. Skills are pretty transferable though, so if you're good at React, you can learn Svelte or Vue much quicker than it took you to learn React (and not just cause React probably has the worst DX of all of them)
If you're learning for fun, try making a todo app in all of them and pick the one you like the most. Or don't pick any, you don't need a framework at all to make sites.
Personally, I'd recommend Svelte for fun
ah ok but why CSS needs loops etc ? I mean we have javascript for that
Noted, thanks !
Because it's not JS. It's done before the CSS becomes CSS. You write some SASS to output CSS. You don't ship a SCSS file, you have to compile it to CSS first. That's what shipped.
It's like the difference between a static site and a dynmic site. Same content, but the static site is made beforehand and is just ready to load.
yeah I see, without using SASS it would be impossible to do certain things ?
Not impossible, just less easy
For example, SASS used a simple find/replace for variables. You set them in one place and the SASS pre-processor found all instances and replaced them with their value. It made it easier to set, for example, font sizes or colour scheme and easily change them without having to search all the CSS files for where they appeared. But they were static variables—being find/replace—and now we have dynamic variables in CSS.
oh ok
didn't know that
Or for loops, you'd have to hand-write the code yourself instead of letting the computer do it for you. A lot of times it was used for things like making shades of a colour as the numbers are almost the same but slightly different. So instead of having to hand-write the 50 different shades of grey, you write the base colour and let the loop output the other 49
yeah I see, one last thing
I also read about things like "JQuery", what is it?
jQuery is a wonderful piece of history. This could take a bit so grab a soda and chips, kiddos!
Back in the day, there was no easy way to do DOM manipulation with JavaScript. It was inconvienient and each browser had its own way of doing things. It was the wild west! So this one dude was like, "what if there was a library you could import that provided a single way to use JS? So you didn't have to write different code for different browsers!?"
And thus jQuery was born. It provided a single API to interface with the quirks of browser differences and added more functionality on top. Due to its popularity, it was pretty much required back in the 2000s to early teens to write any client side JS. At that point, jQuery was JavaScript!
In the mid teens, however, JS finally started to catch up. Many things that jQuery did became part of the core language, so it's mostly obsolete now. But you'll still see it in the wild as older sites relied heavily on it, and WordPress imports at least 4 different versions to handle dependancies for plug-ins. It's easier to not re-write legacy sites to remove jQuery so you'll see it for years, if not decades, to come.
Thank you for coming to my tedtalk
yeah I see, beside legacy reasons, like if we need to work with a legacy website, their is no point of learning it ? Beside for fun ?
I wouldn't learn it for fun, I'd rather have fun not relying on a 300KB library that imports code I already have
(also, basically jQuery acted like SASS is acting for CSS now. People want features, those get implemented in SASS and used to get implemented into jQuery, and then the spec writers went "Huh, that's a good idea. CSS variables came from SASS, like Beck said. We have
document.querySelector because jQuery let you select DOM elements using a CSS-like syntax)
yeah, and 95% of the use jQuery saw is replaced by const $ = document.querySelector;if you're learning for a job, check your local listings and see what's popular. There's nothing much else to be said about it. You want to get hired, you learn what the people hiring want you to learn.–Jochem
yeah I see, so it's still worth learning JQuery, then ?
Just b/c it's not needed for new sites some people still do b/c that's what they're used to
if you want to be a wordpress dev: Yes. Otherwise, probably no
It's like how all* Node API code starts with
npm i express. Some people just do it even if there's better alternatives
-# *I say "all" but obviously that's an exaggerationYep I see
Lastttt question on CSS frameworks :c.... I noticed people use "tailwind" and "bootstrap". From what I know about bootstrap, it just ships an entire "Website" to us, we just change colours etc? But what about tailwind please
If your job market asks for jQuery experience, learn it. Otherwise there's very little reason to do so
Bootstrap isn't a framework, it's a design library
Technically, Tailwind is, too
-# I think? I cna't remember 😭
ah ok, so we just import designs?
Bootstrap does a lot for you. It has HTML, CSS, and JS to make a site look uniform. It's a collection of layout primitives that you can put together like LEGO blocks to make your site
However, once you've seen a BS site you'll notice it everywhere. It was so popular that the defualt theme was used in so many sites…they all look the same. And boring
tailwind is a collection of utility classes
Tailwind, on the other hand, is what's called "CSS-in-JS". Or "I'm too lazy to learn CSS and will do whatever I can to say it's not a real language"
it's most definitely not a design library. folks do claim it is, but it's agnostic as to actual design (other than how they pick their color shades, maybe)
yeah, I remember, I had a presentation to do to demonstrate a website in class, 90% of students used bootstrap and their website were almost similar, that's why I thought, bootstrap just ships and entire website
the thing about bootstrap is that it is a bit of a pain to customize
One of the things that bootstrap did was give us Grid before CSS had it. There was a lot of JS being used to fake grid with flexbox
yep I see
it made the column-based layouts work with floats, before grid and flex existed
and has since forever cursed us with the 12 column layout
Like jQuery and SASS, it helped to shape what we have now in the base languages. So they're important parts of history…but should stay there 🤣
Yep I see, each one hast their part of history and that thanks to them that we have more modern tools now
12-column layouts in teh web 🤬🤬🤬🤬🤬
That was very insightful, thanks guys, I can now understand the technical terms used a bit more in web dev 😂
960grid is better 🤣
don't make me time you out
🤣
but seriously, making stuff responsive was absolute hell
also keep in mind that a lot of terms around this are used sloppily. React hates being called a framework, but lots of people do call it that. Tailwind is referred to as a design system when it's not. Bootstrap gets a ton of names too
yep true, I often see people discussing about that
😮 mean 😮
by the way, speaking of responsiveness, do frameworks make design responsive by default? Like say we are using vue js for instance
most terms are just muddy from the get-go too
The two hardest things in programming are cache invalidation, naming things, and off-by-one errors.
some help with that, but, that's not always a guarantee
This falls squarly in "naming things"
just because you use bootstrap doesn't mean it will be responsive
Hey, did you know…HTML is responsive all by itself? It's us, the devs, that make it not repsonive
i can make it as unresponsive as a 90's website
<blink> and <marquee>?!??!?you'll need a css polyfill for those nowadays xD
I guess so, by adding padding of 10em, like I did once 🤣
there's no css replacement for
<marquee>, which is why it is still around
even with js, it is a bit of an annoyance to implement itthere's no replacement because it should not be used, it's bad UI, bad UX and shitty a11y
but sometimes, you need it
sometimes
super super rarely
nah, sometimes you want it... that's different
nah
but that's offtopic
Get this, @Faker . I write a website using HTML only. The headings are above the text. The text takes up as much room as the viewport has and then wraps. Images are there, at their native size. I can scroll, select text, right-click on the image to download it. Click on links to visit other pages. 100% responive.
Now, I add some CSS to make it "fancy". The text sizes are all over the place. Overlapping images. Fixed widths on elements so you have horizontal scroll on skinny displays. Unresponsive.
Now I throw some JS for "reactivity". Now you can't right-click that image. Now things are bouncing all over the place. It's a mess. Very not responive.
for example, a music player
yeah I see
With CSS and JS we have the power to make truely horrible monstrosities. It's power. Real power. Use it wisely
and it isn't that hard to make it monstruous
[super easy, barely an inconvinence!]
https://tenor.com/g0kcSN8DIPg.gif
don't under estimate HTML...
HTML is harder to make monsters with, but still possible, yeah
tables 👀
User Inyerface - A worst-practice UI experiment
User Inyerface - A worst-practice UI experiment
[you were so preoccupied with whether or not you could that you didn't stop to think if you should]
https://tenor.com/8a9w.gif
tables ... the one thing that requires browsers to break the standards so they render properly
but best template scaffolding for emails 🤢
I think I only used table when I need to do a small library management layout where we have names, picture etc and I never used one again in HTML 😂
tables are totally valid to use btw, just... for tabular data
yep got it
sorry guys, was just re-reading what was said earlier. So to summarize, bootstrap is just a design library that allows us to use pre-defined elements, like buttons etc. By default it make our website responsive using the 12-grid columns? It's not just about components like button but bootstrap can give us a whole template of a website? That's why we often see "similar" websites?
Tailwind on the other hand is just a library which contain utility classes which can be used directly using inline HTML? Just like with SASS where things are preprocess, here also, the classes are preprocessed before being compiled?
other than bootstrap making your site responsive automatically, yes
hmm I just heard that bootstrap makes our website responsive, but it doesn't do that automatically ? I mean their is where the grid comes into play ? The 12 columns thing ?
you have to make the grid
ah ok, the grid doesn't already exist by default ?
you have to put the elements and say which size they take at which breakpoints
Nothing will make it responsive automatically. You have to put in the work
you just have to set the right classes on the right elements
the css and all the magic is done for you
but it isnt just dumping a <div> and kablam! it is responsive
no
you have to distribute the 12 columns
Can we please expunge the idea of a 12-column layout on mobile? It's dumb and those who use it are dumb
on mobile, i fully agree
on desktop, it can make reasoning a tad easier
There is no guarantee what the width of the viewport, regardless of device
however, a proper grid layout is much better
that is true
The thing is, bootstrap already gives us classes that will automatically resize but we have to implement it the way we want ?
The 12-column layout came from print design, where you knew what the final size of the design was going to be. On the web we only know that it'll be at least 10px wide. That's the only guarentee of output size
it will be easier for you to understand what it does and how you use it if you quickly skim the doc
most things automatically resize in HTML, until you mess with it yourself to make it not resize
except images, those things are just the worst
Hence "most" lol
images, canvas, inputs and iframes have a default size in pixels
yeah, i didnt read the "most" 😦
but it's nice to list some of the things that dont
Replaced elements don't resize
answering the future question before it is asked
and that's easily fixed:
yup
exept when that breaks things
let me rephrase that. Bootstrap just switch columns and rows arrangement based on screen size, that's what creates the "responsiveness" ?
like flexboxes
it also makes things to be sized based on percentages
instead of pixels
yeah I see
Bootstrap comes with classes of CSS properties that create/allow for responsiveness. You could easily do it yourself if you know CSS
like 50% of my actual vw ?
no, 50%
ah ok
it doesn't use vw ?
as far as i know, no
dont think those units were well supported then
yeah I see
It's clearer now, thanks guys !! Will have to learn media queries anyway 😂
they're not scary once you know the basics
Does making a website responsive takes a lot of time ?
depends on how brittle you make your layout
Making it reponsive? No. Fixing broken sites to become responsive? Yes
Yep I see, ty !!
It's super easy to make it right the first time, but a lot of people either don't care or don't know how. Once you know how, you're good to go
(re)follow CRL if you're rusty on repsonsiveness, it really helps make you think about it from the sart
Or they're told "you can do it later" and later never comes
yep, will do that
One thing to keep in mind: if you ever come across a learning resource that says, "here are the breakpoints you should use" just turn around and walk away. There is no such thing as "default" or "correct" breakpoints. Breakpoints are so named because those are the points at which your design breaks. So you add a breakpoint to make it look good again.
yep, it depends on the screen we are "testing"
And a lot of breakpoints can be removed by simply adding a
max to the width
Be the browser's advisor, not it's micro-manager. Give suggestions and let it do it's thingNoted
hmm you mean the channel, right? I think I already follow it, there are guides/challenges that can help me learn it the right way ?
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
the course that Beck linked yeah, not just #conquering-responsive-layout
Ok 💯