Dec 15, 2020
By: Freddy Montes
Let’s start by dissecting the word framework.
An application framework is an abstraction layer based on a programming language where developers can build application-specific software by adding user-written code.
Frameworks work as the schematics and blueprints of the software product you plan to build. They tell you what you need to use to assemble a product that fits your needs.
Frameworks give developers a standardized way to build applications; they also provide a universal software environment where they can reuse components, accelerating and improving the building time.
Software frameworks don’t usually do all the work on their own. They include support programs, libraries, toolsets, and APIs that enable developers to build software in a specific way.
- Give you everything you need to create a web app
- Provide users with templates to build common parts of your web apps
- Represent a way to create components including routing, data fetching, forms, and static pages
Frameworks and libraries are routinely confused, but they’re not the same. A framework offers a structure that organizes the parts of your digital experience.
For example, you can insert a JQuery snippet into your code and have that part of your website or app perform a function; such as autocomplete a text box or animate a part of the website.
These are some of the main differences between frameworks and libraries:
- Frameworks, unlike libraries, have inversion control, which means that the flow of control, or the way the program follows the instructions, isn’t dictated by the developer but by the framework.
- Users can extend frameworks by developing or integrating specialized user code that provides that specific functionality. Libraries can be integrated with, but not extended.
- Frameworks can’t be modified. They can be extended, but you can’t change the code, whereas libraries can be modified to suit the needs of the developers.
However, these two concepts often get confused because frameworks implement part of their functionalities with libraries. But as a rule of thumb, frameworks are usually more complex and give users rules on how to do things whereas libraries provide standard functionalities and UI components to build digital experiences.
Since we can’t talk thoroughly about each framework in this guide, we will focus on the three we mentioned at the beginning because they are the most common and used frameworks today. Let’s take a look:
- Great for SEO
- Automatic code splitting
- Simplified data fetching
- Page-based, client-side routing
- Webpack-based developer environment
Created in 2016, Nuxt.js is advertised as a meta-framework for universal applications. Nuxt.js is based on Vue and abstracts client-side code distribution, simplifying and flexibilizing application development. Also, Nuxt.js is extremely lightweight and developers get plenty of features without bloating the app’s files.
- Create universal, server o client-side rendered apps
- Easy to use stater templates
- Robust project structure by default
- Simplified server auto-updated
- Big user ecosystem
Introduced by Google in 2016 (don't get confused with AngularJS). Angular focuses on helping developers build mobile and desktop web apps; however, the tool has changed from its inception.
- Ready to be used as an out-of-the-box, standalone solution
- Built using Typescript, it keeps code clear and accessible
- Simplified debugging
- Enables the creation of components, services, and modules
- Users can use Angular Material, a collection of templates to build UI components
The core principle of Jamstack are:
- Pre-rendering: The whole frontend is build into static HTML pages during build time
- Decoupling: Clear separation between content API and presentation layer
The thing that makes Jamstack unique is that it represents a new ecosystem of tools created and put together to streamline and democratize web development.
Since there are many players in the field, choosing the right one can be time-consuming. That’s why you need to analyze and get your technical expectations and documentation ready before implementing a new framework. Without this due diligence, chances are you might not understand your requirements and end up using a framework that simply won’t work for the idea you have in mind.
Here are a few questions to ask yourself and your team that will guide you through your decision:
What are the features you have in mind?
- Are you going for open-source or proprietary frameworks?
- Do you require community support?
- How reusable is the code you create with your framework?
- Can you switch to a different one if the one you pick doesn’t work?
- What kind of digital experiences are you looking to build?
We have isolated some specific use cases for each of the frameworks we’ve covered.
- Use Angular if you are developing a large app and need a stable platform to support it.
- Use Next.js if you are building websites where SEO is a priority
- Use Nuxt.js if you are developing single page applications