A framework is a set of tools that you can use when building or modifying your web application. They might include support for creating services, resources, and APIs.
Every year new frameworks appear, providing coders with intriguing options.
But I can build all of these things from scratch, you might be thinking to yourself.
That is certainly the case, but what makes frameworks so helpful is that they standardize the development process and automate a lot of work that you would otherwise have to do manually (eg, identity and session management and interacting with databases). Furthermore, a lot of frameworks promote concepts like reusable code, which make apps easier to build and maintain.
With that said, which framework is right for you? In this article, we will take a look at how to pick a framework that meets your needs, as well as some of the more popular options in use today.
Assumptions
Because this article focuses on web applications, we’re assuming that your basic technology stack consists of frequently used client-side languages like CSS, HTML, and JavaScript.
In addition, you’ll likely need data storage in the form of a relational database (e.g., MySQL or PostgreSQL) or a non-relational database (e.g., MongoDB).
Finally, you’ll need the infrastructure to get your website or application online; to that end, you’ll need to work with a website hosting company that supports the tools and technologies that you’re using.
How to Choose the Framework
Before we discuss specific frameworks, let’s take a look at some of the criteria you should keep in mind when choosing a framework.
Type of Web Application
The most important thing to keep in mind when choosing a framework is the type of web application you’re building. Different websites have different needs, and once you determine what you want to build, you can narrow down the frameworks available based on the features they offer.
For example, someone building a static website that displays information like operating hours, contact information, and a few images would need something significantly different from someone who wants a full website with an accompanying online store.
You should consider the performance requirements of your web app. For example, a static website is less resource-intensive than a website set up to serve streaming video, galleries of high-resolution images, or an e-commerce store with lots of traffic.
The latter type of site requires options that help handle the needs of resource-intensive sites with abilities like caching and optimization.
Security
No framework is perfectly secure, but larger, more established frameworks are likely to be able to respond to threats better, even if they are also bigger targets.
Framework Status
There are paid frameworks available, but many are free and open source. The upside of open source framewworks is obviously cost. Many individuals and small businesses have small budgets for software development. The downside, however, is that you might not get things like customer support and guaranteed bug fixes and updates.
Before you adopt a framework, do some research into its community. Is it well-supported by a large number of users? Is there sufficient documentation to help you if you get stuck? Are there other users who might be able to answer questions if necessary?
Popular Web Development Frameworks
Bootstrap
Twitter’s Bootstrap front-end framework is designed to help you build responsive, mobile-first web projects with ease. You’ll get CSS and JavaScript templates for things like buttons, forms, navigation, typography, and other components that contribute to your user interface. It is well-documented, easy-to-use, and a good start for any beginner who wants to improve their front-end.
Angular
Angular is a web app framework from Google that utilizes the MVC architectural design pattern for software development. It allows you to write less code and “clean” code. This is due to the framework’s “separation of concerns” (e.g., the Model is separate from the View). The framework automatically generates the code needed to synchronize the different layers.
React.js
React.js is a front-end framework created by Facebook and used to build UI components, typically for single-page or mobile applications. Unlike other options (such as Angular), React.js focuses only on the view layer and allows developers to create large apps that can change and update without full page reloads.
Express.js
Express is a web framework specifically for Node.js (or server-side JavaScript) — some say that Express.js should be the server framework of choice for Node.js apps. Express is useful for those who want to simplify the process of creating web apps and APIs with minimal redundancy in their Node.js codebase.
jQuery
jQuery is more of a library than a framework, and its purpose is to make it easier for you to implement JavaScript features on your website. jQuery makes it easier for you to manipulate your HTML and CSS, handle events, make API calls, and more.
Meteor
If you’re building your web app using pure JavaScript, Meteor is something that may interest you. Its integrated JavaScript stack facilitates rapid prototyping and produces cross-platform code for web, mobile, and native apps.
Other Useful Tools
The following two tools aren’t, strictly speaking, frameworks. But, adding them to your technology stack can be helpful during the development and maintenance cycles.
Sass
Sass (or syntactically awesome style sheets) is a preprocessor scripting language that is compiled down into CSS. With Sass, you get tools, such as variables, nesting, and inheritance, that help make your CSS style sheets easier to write and maintain.
As CSS sheets grow, they become harder and harder to maintain, and Sass is designed to help manage this complexity. Because Sass files compile down to CSS, it is compatible with most technology stacks.
TypeScript
TypeScript is a programming language. More specifically, it’s a superset of JavaScript That means that all of the features of JavaScript are present in TypeScript. You can think of it as a layer on top of JavaScript that helps you write cleaner code. Like Sass, which compiles down to CSS, TypeScript compiles down to JavaScript.
Wrapping Up
The best framework for your web application depends on what you’re trying to build. Different apps do different things. There is an abundance of options on the market that can speed up your software development cycle and make it easier for you to maintain your code.
You can certainly build your apps without frameworks; but why write everything by hand when there are tools to help you get from Point A to Point B faster and with fewer mistakes?
Katie Horne is a software engineer and technical writer.
