Here are the Best practices: Frontend Frameworks for your web product

The frontend frameworks used for building the interface is critical. A sluggish UI, inconsistent typefaces, or misplaced buttons. It's hard to pick the 'winner,' but you don't want to have any of them on the web app you're working on.

Thankfully, you can avoid creating bad UI by using the right frontend framework. Read on and find out which is my favorite for frontend development.

What are Frontend Frameworks?

Frontend frameworks refer to the interface scaffolds used for building the interface design.. Meanwhile, rontend refers to the UI of an app. Developers used to write all the codes manually in order to create the elements, behaviors, and exchange data with the backend.

Frontend frameworks simplify the task by having pre-written codes for you to build on. It serves as a foundation that contains commonly-used elements such as the grid, pre-defined typography, and website components like buttons, scroll bars, and side panels.

It spares you from reinventing the wheel for every project.

Check out our guide on how to hire web developers.

Market share of UI frameworks

There are more than a handful of UI frameworks available, but 3 of them are highly favored amongst the developer community.

Leading the pack is React frontend framework, which has an average of 7 million weekly downloads. It surpasses Vue.js and Angular by a significant gap as the runner ups chalked up 1.5 million and 500 thousand weekly downloads on average.

React

React was developed by Facebook, in its attempt to create a high performance and efficient UI. It’s based on JavaScript and allows users to create web UI with dynamic HTML components. Once the components are designed, React will render them accordingly based on the latest data.

In React, components are built to encapsulate the state they are in. This enables the components to pass rich data around and does not require the Document Object Model (DOM) to handle the state.

Facebook released the first version of React in 2013. A couple of years later, React Native was introduced for mobile applications.

With React, the rendering logic is tightly coupled with other UI logic. Frontend framework allows a seamless performance of events handling, state transition, and preparation of display data. This is a deviation from conventional practice where markup and logic are kept in separate files.

While the practice of having both markup and Javascript on the same file is frowned-upon, doing so with React provides clarity on the view.

The simplicity of React has seen the framework used by some of the largest companies, including Twitter, Pinterest, Netflix, and Udemy.

Pros of React

React uses virtual DOM, which is an extraction of the actual DOM for rendering the UI. It is more efficient, as the components take lesser time to show up on the screen.
As the components in Reacts are encapsulated, they can be used independently without any limitations.
React is modeled around functional programming defined by immutable data, pure functions, and declarative style. Therefore codes created with React are easy to test, main, and reuse.
As the most popular framework, React boasts a large global community. It also means you’ll have a great option of open-source packages to work with.
React is proactive in upgrading and releasing newer versions of the framework. You’ll get timely bug-fixes and improvisations.
With React you can implement different rendering techniques such as client-side rendering(CSR), server-side rendering(SSR) or even static file generation

Cons of React

If you’re new to React, the concept of mixing templating with logic (JSX) can be confusing in the beginning.
There’s too much focus on the core library. Concerns like routing and global state management are delegated to companion libraries. The responsibility of how to develop with the various libraries falls greatly on developers.
As the project grows, you might lose the “flow and data components”. The fact that React documentation is often incomplete, no thanks to its rapid growth, further aggravates the matter.

When to use React

React is the ideal front-end framework for building a web application that expects high interaction and frequently-changing states. Its unique approach of using the Virtual DOM means the web app could respond to users input quickly and dynamically render the UI.

If you’re building a web application with little time to spare, you’ll also find React the right solution. Its reusable components prove to help cut down the development time.

Vue.js

Vue.js fronteend framework may lack recognizable names in terms of adopters, but it’s still a highly popular framework amongst developers. The framework was created in 2014 by Evan You. It is simple and versatile, allowing developers to tackle dynamic processes without the need for additional libraries.

Like React, Vue.js is based on a virtual DOM. Besides that, it is lightweight and supports two-way data binding. Being a small-size framework also helps in increasing the performance of the frontend.

Pros of Vue.js

Vue.js has extensive and concise documentation, which helps you learn the framework as a newbie.
It uses virtual DOM, which improves rendering efficiency.
Vue.js is highly integrable. Smaller Vue.js components can be integrated seamlessly into existing infrastructure without any adverse effect.
It offers reactive and composable view components.
Templates created from Vue.js are in HTML format. It’s a plus point for developers who are familiar with HTML.
The entire framework's size is only 18 kB, making Vue.js incredibly lightweight and improving UX performance.

Cons of Vue.js

Vue.js community is relatively small as it lacks in popularity. Therefore, getting peer support is rather difficult.
Most discussions on Vue.js are conducted in Chinese as the framework is highly popular amongst Chinese companies. The language barrier makes communication difficult for developers elsewhere.
The lack of experienced developers, community support, and component stability issues makes it risky to use Vue.js in large projects.

When to use Vue.js

Vue.js is great for creating a simple one-page application. It has a shallow learning curve where developers can quickly learn the ropes around the framework. However, it is not meant for complicated projects yet, as getting an expert in Vue.js is not easy.

Angular

Angular, which is created based on TypeScript, is a comprehensive frontend framework by Google. It was released in 2016 and is built with the object-oriented programming approach. The framework features two-way data binding, which works well in developing web and mobile apps.

To date, Angular is one of the most comprehensive frontend frameworks ever, as developers can tackle complicated tasks within the framework itself. There’s no need for additional libraries in developing complex UI/UX.

Pros of Angular

App logic and the UI layer is decoupled with Angular’s Model-View-Controller architecture. It also supports the separation of concerns.
You can bypass the default DOM-rendering of the template by intercepting the rendering calls. For example, the renderer can be configured to change the UI dynamically.
Angular has strong support for building and handling dynamic forms. Templates can be used to create new forms based on a dynamically-changing data model.
The RxJS library is installed along with Angular. It is a library that supports reactive programming with observable streams to handle asynchronous code easily.
The Services and Dependency Injection in Angular allow components to be easily reused, tested, and maintained. The feature helps larger projects as dependencies can be called from external sources, rather than created within the class.
Angular’s ahead-of-time compilation results in faster load time and increased security. In this process, the JavaScript code is created during the build phase instead of after browser downloads.

Cons of Angular

Some people may have difficulty understanding the multilayer architecture of Angular, and this can affect debugging on the frontend framework. Debugging a sizeable Angular-based app can be an excruciating process.
Web applications created with Angular have limited SEO options, which can be hard to reach by search engine crawlers.
Developers who are familiar with JavaScript will find Angular relatively difficult compared to React and Vue.
Angular uses Typescript instead of the more common JavaScript.

When to use Angular

Angular is the go-to web frontend framework when creating a large enterprise website or a large-scale project with complex infrastructure. It’s also suitable for projects involving progressive web applications (PWA).

Why do we use React

React frontend framework is undoubtedly our favorite frontend framework. Here are why we love it:

We’re able to use React across projects of different complexities. It works in creating an MVP, Startup, Enterprise App, and E-commerce solution.
React gives us the pace to build simple and scalable solutions. Working with React has always been a pleasurable experience.
Our developers no longer need to build components from scratch. React’s vast numbers of libraries and tools drastically reduce development time.
We get to create awe-inspiring UI for our product by using open-source React components like Ant Design and Material AI.
React is arguably the most popular front-end framework. We don’t have to worry about maintenance and customization, as it has a vibrant community of developers. It’s a different story if we’re using Vue.js or Angular.
It’s easier to find a React developer for our team compared with other frameworks.

‍

We’ve successfully developed a few projects with React, and here are two notable ones.

Apprvl

Apprvl is an app created for photographers to simplify client approvals of their images. Photographers can upload their works through the app and get comments by sharing the generated links with their clients.

Our Solution

We start by building the main functional parts on the web app to test the hypotheses with real users. Based on the feedback, we make appropriate changes to the parts.

Then, we proceed with building a scalable backend architecture and kickstart the web app development.

We completed the full cycle development of apprvl based on the MVP.

Results

Using React, we’re able to deliver an MPV that meets all the requirements. It’s delivered with minimum bugs throughout the development cycle and scalable for future development.

Plai

Plai is a free performance measurement tool that helps to grow, coordinate, and engage a remote team.

Our solution

We started the project with the discovery stage to identify the actual problems and needs of startup owners.

Based on the feedback, we use React to create the web app. It allows us to develop the MVP very quickly.

Once the MVP was tested and validated, our team proceeds with developing the full app.

Result

The MVP is delivered with the highest quality and satisfy every requirement. Today, the web app continues to grow as we’re adding in more valuable features.

Summary

When you can’t waste too much time building components for the web app,everage the convenience and efficiency of frontend frameworks.

There isn’t a one-size-fits-all frontend framework. If you’re building a simple app and have very little time to spare, go for React or Vue.js. Choose Angular only if you’re building a complex web solution because the pain in debugging the app is real.

If you’re in doubt, I’ll be happy to guide you with the best option. Drop me an email here.

FAQ

What are Frontend Frameworks?

Frontend frameworks are ready app structures for building frontend. Essentially, frameworks are the compilation of boilerplate code, directories, and designs used by most applications. Frontend frameworks help to structure the interface of an application.

What are UI frameworks?

UI frameworks are open-source customizable frameworks covering the typical code, design, structure used by most applications. UI frameworks help to build multi-device applications without profound technical knowledge.

When should I use frontend frameworks?

Here are 3 cases when you should use frontend frameworks:

You need to make sure that the code is easy and clean;
You need to build the app structure so that you could reuse its elements for new pages;
When you need the UI updates, follow the data updates.