What is a Web Framework, and Why Should You use one?

Ali Spittel on July 19, 2018

"Framework" is a word used a lot in relation to code. So, what even is a framework? When we talk about frameworks, those frameworks normally fall... [Read Full]
markdown guide
 

It's true, technically React and Vue are libraries not frameworks. There are so many other pieces that can be added (Vuex, Redux, Vue-Router, React-Router, etc) that they can easily be turned into frameworks.

Personally I like React the best for front-end frameworks although I started with Vue. Many of the concepts are the same so learning one framework can translate general concepts to another. You just need to learn the syntax and how that framework is set up.

 
 

From my knowledge, when you use a framework you are bound to follow some rules, naming conventions, convention over configuration concept. So laravel, django, angular is a framework. They make you bound to follow some rule. Therefore libraries do not make you bound to use their code or structure. Like You include Bootstrap in your project but if you do not use a single line of a bootstrap code in your project its ok. you include jquery but you use sometimes jquery some time raw javascript. it's totally ok. But in the case of a framework, you may follow their rule. So bootstrap, jquery, vue are not framework

 

All the frameworks and libraries are built upon CSS and JAVASCRIPT.

To use just few method or to implement some functionality we need to load whole library.

Why not built all things in just using CSS and Javascript.

 

Because even a whole library is not really big. Let's look at React for example, it's ~100kB (including react-dom). Is that much? We need to compare this size to all elements of a website. Even though Ben has optimised dev.to its CSS still has ~200kB (the page you are currently looking at) and we haven't even taken a look at the size of all the images, yet!

But it gets worse. Since react is a standard library that is being used on many websites, chances are good that react.min.js is already in the browser cache. So it does not need to be transferred another time. But when you write your own library in order to save some bytes, how are the chances that your library is already in your user's browser cache?

And a 3rd point to think about: react is being built by some of the most brilliant developers, top experts who know javascript inside-out. React is heavily optimised. Even though it is 100kB in size it probably renders pages faster than a much smaller competing library or your own code.

Summary: a library that has 1/10 of react's size does not give you 10x performance improvement - instead it might even be slower than react. However you might want to take a look at Preact.

 

This is such a great overview, thanks for the article! I'm definitely going to refer people to this. Frameworks are amazing, but I've seen lots of beginners confused about the boundary between the framework from the language. This should help!

I remember first learning that all Javascript wasn't jQuery and it blew my mind.

 

Thanks very much for this! I'm new to coding so Bootstrap is the only one I'm personally familiar with. I'd heard about lots of the others but I couldn't tell you anything else about them. This has helped put them in context for me and has made me look forward to using them rather than being afraid.

 

Very good summary of web frameworks, I'm personally a large fan of Ember for the front-end side. I'd include some notes about what frameworks have testing included or how easy they make it, since it can be easy to overlook for beginners despite being crucial. Ember has a full testing suit ready to use and is easy to set up with continuous integration, another reason I'm a fan.

Also for "Where to Start Learning," I'd also recommend people check out the Hartl "Ruby on Rails Tutorial." It helped me through much of the learning curve I needed for my job, and lowered the learning curve for similar frameworks (like Ember haha)

 

It'd be nice to have an article on why you shouldn't use a framework - if only for balance :D

 

Wow, that's a quite good summary, Keep it up 😄

 

IMHO absolute beginners should not start out by using frameworks

 

And if you're expert enough, you can make things without using frameworks.

 

True, but beginners should build things themselves first WITHOUT frameworks - gaining understanding about the basics of web development. Using a framework from the start will get you quick and easy results, sure, but you will have no real understanding about how anything works. This is 100% necessary if you intend to be a developer.

I've seen so many 'developers' who have just gone down the route of following tutorials, installing and configuring frameworks & libraries. They can get a site up and running, but once a serious problem occurs, or a change outside the scope of their very limited skill/understanding is asked for by a client, they are totally lost. The next stage for many of these developers is googling for an answer, then copying and pasting 'solutions' from StackExchange that they have no clue about how they work.

This is a terrible way to go about learning how to be a developer. Start with the basics, and build from there. Frameworks are a convenience to be used to prevent you having to do the basic stuff again and again - after you already understand that basic stuff

I completely agree with you. The sad part is that with most frameworks even the intermediate level coders end up using Stack Overflow or Github Issues as a reference with cases they've not encountered before. It's just javascript.

 
 

Cool article. I also follow your personal blog and was wondering how to import your articles from your blog to dev.to?

 

Thanks! I actually normally change them a little bit between sites (formatting and the call to action). Both sites are in Markdown, so I just copy paste over and tweak a little bit!

code of conduct - report abuse