"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 into three different categories -- frontend, backend, and CSS or user interface frameworks. But even once you know what frameworks are, which one should you learn or use and why? This post will discuss what a framework is, what frameworks are out there, and how to make decisions about what kind of framework you should use for your projects!
What are Frameworks
If we look at a couple different web applications we can see that there are a lot of duplicated features. Many have user authentication, pages that render, they connect to databases, they have profiles you can look at, they all have stylized feeds of information etc. If I wanted to, I could write all of that logic myself every time I want to build a new application; however, there are also a lot of tools available which can do that for us instead.
In addition, a lot of the time when we build applications we want to format our code in certain ways that help us become more efficient and help other developers understand our code. Web frameworks help us achieve structure in our applications, and they give us additional features we can add to them without too much extra work. Frameworks give us a place to start so that we can focus on features rather than configuration details.
Code is read many more times than it is written, and it is so important when you are working with other developers that they know where the code for certain tasks is being written so they can use it in their own code. The frameworks also have conventions for how the code is written and structured, which standardize how the developers write their code.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
from Awwwards.
Under the hood, frameworks are just code libraries (i.e. other people's code), and the popular ones are open source! So you can look at your library's code online!
Backend vs Frontend
The frontend of a web application is the part you see and interact with. It consists of the web design and the interaction of the site. In terms of programming languages, this is almost always comprised of the CSS, HTML, and JavaScript of the page.
The backend consists of the server, the database, and the code that interacts with them. This also consists of the code that gives dynamic data to the frontend of the site. This can be handled in most programming languages. The ones we will discuss primarily today are Python, Ruby, and Node JavaScript but there are countless others.
User Interface Frameworks
User interface frameworks help create stylized and professional looking web applications. Most include some sort of grid system so that you align elements, they have color schemes so that is handled for you, and they stylize your HTML components using CSS so that they look clean and professional. These are within the frontend domain; however, normally when we refer to frontend frameworks we are talking about JavaScript frameworks.
Some user interface frameworks include:
-
Bootstrap
- Very well known and built by Twitter
- Easy to learn and looks professional
- Can be easy to spot "Bootstrap Sites"
- Can be difficult to customize components
-
Materialize
- Clean looking
- A bit more "fun" than Bootstrap
- Lots of styling and color options
- Follows Google's Material style guide
-
Foundation
- Lots of examples
- Professional looking
-
Semantic UI
- Lots built-in
- Built-in themes so it's customizable
-
Grommet
- Has a huge focus on accessibility
- Looks really clean
- Not as used as some of the others
- Made for React JS (another framework we will look at later)
Choosing a UI Framework
Choosing a User Interface framework mostly comes down to personal preference in appearance and the goals of the site. The different styles may appeal to different industries or may convey a different message to users.
Frontend Frameworks
Frontend frameworks are, in most cases, written in JavaScript and are for organizing the functionality, interactivity of your website. Some of these include:
-
Vue
- Easy to learn
- Very fast
- All tools associated with it are packaged well
- Takes parts from Angular and React and optimizes them
- less widely adopted than some others
- Flexible -- you can use it in multiple ways
-
AngularJS
- Built by Google
- Well supported
- Huge number of features
- Improves application scalability
- Difficult to debug
- Large learning curve
-
Angular 2+
- Built by Google
- Well supported
- Encourages reusability
- Improves application scalability
- Large learning curve
-
React
- Built by Facebook
- Bundles frontend code into components
- Organizes code and data to make code more reusable
- Large learning curve
-
Ember
- Gives a large amount of functionality out of the box
- Opinionated (you have to use its formatting)
- Steep learning curve
Choosing a Frontend Frameworks
The world of frontend frameworks is evolving especially fast, it seems like a new frontend framework is on the rise every few months. Learn what makes sense to you, and don't worry too much about what the "hottest" one at the moment is.
Some people argue that React and Vue are libraries instead of frameworks, but a lot of people consider them frameworks, so I included them!
Backend Frameworks
Backend frameworks are a lot more varied. They are written in a variety of programming languages and have a wide variety of features. Below, like the above list, is a very incomplete list of some of the frameworks out there for writing application backends.
-
Spring MVC
- Java (more difficult language to learn)
- Very fast
- Less opinionated
-
Django
- Python (easier language to learn)
- Happy medium between being very opinionated and less structured
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
- Can be difficult to integrate a fancy front-end.
- Python's data handling is amazing
-
Flask
- Python (easier language to learn)
- Less opinionated and more customizable than Django
- Gives you less out of the box (you have to build more)
-
Ruby on Rails
- Ruby (easier language to learn)
- Very opinionated
- Has great tools like scaffolding so you can build things fast
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
- The asset pipeline helps with front-end development
- Ruby takes longer to run programs than some other programming languages
-
Meteor
- JavaScript (easier language to learn)
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
- Integrates very well with modern front-ends
-
Express
- JavaScript (easier language to learn)
- Very customizable
- Very lightweight
- Less built-in features
- Node is very fast
Choosing a Backend Framework
Usually, you choose a backend framework based on the programming language it is written in. Also, take into account what features you want to add -- if you want authentication (or user login) for your website, for example, writing it in Django where authentication is built in will be a lot easier than writing it in Flask where you would need an additional service.
Learn More
If you want to use or learn a framework, here are a bunch of applications built with different ones, so you can evaluate which one makes the most sense to you. There are a lot more frameworks out there of various sizes and popularities, but this article gives a brief overview of some of the popular ones out there and where to get started. There is no right answer on what to learn first! There are pros and cons to everything, so weigh what is most important to you and go from there. Frameworks are super helpful and make writing code a lot quicker in most cases, but having a strong programming foundation before that is also super important -- so make sure you know the language your framework is written in well first. Frameworks are super helpful for writing websites because they enforce a structure that other developers in the framework understand, and they give you common functionality so you don't have to reinvent the wheel!
Where to start learning...
- Django Girls Tutorial - I learned my first framework through their online tutorial!
- Code Academy
- TodoMVC
- CodeNewbie Podcast
- How fast are different programming languages?
And if you need an idea for an application...
And if you want to read more of my articles on Frameworks
- How I Built an API with Mux, Go, PostgreSQL, and GORM - Mux is a backend framework for the Go programming language!
- Functional Programming in JavaScript with Hyperapp - Hyperapp is a brand new frontend framework that I really enjoy!
- Learning Angular 5 as a React and Vue Developer - Angular is a very popular frontend framework for writing large applications!
Stay in touch!
If you liked this article, check out my full blog or subscribe to my Friday weekly wrap up!
Top comments (20)
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.
Vue, Vue-Router and Vuex is killer.
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.
IMHO absolute beginners should not start out by using frameworks
And if you're expert enough, you can make things without using frameworks.
Depending on the use case, that would mean to "reinvent the wheel", which is often recommend to avoid.
I'm a beginner and I don't know any framework as of now. I'm currently learning backend, then I want to build projects without frameworks.
But in the future I would most likely learn one. I think we can get a feeling when we should do that.
So are you avoiding frameworks and you're not considering them for a project in your toolbox even if they'd be a good fit?
Reinventing the wheel is often very beneficial - especially for new developers. You will learn a lot about wheels, and might even gain insights on how to make better wheels.
I don't actively avoid things, but often the best way to play with new ideas is just with plain JS. As an idea or project grows you will get a feel for whether using external libraries or frameworks would be beneficial.
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.
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)
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.
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!
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 😄