At Outshift, engineers are great at building complex systems to support global networks for millions of users. We solve all sorts of problems related to scale, reliability, and security. But sometimes, choosing the proper front-end framework for your next project can be a tedious task. 

How to choose the best front end framework for new projects

Today, we have many choices from libraries built and supported by large companies and available in open-source communities. To choose the best front end framework, we first need to define comparative metrics and benchmark them correctly. 

Based on these benchmarks, we can make the right choice that will fit the needs of our team. Outshift, formerly Cisco’s Emerging Technologies and Incubation group, is in charge of the subsequent Bold Bets ideas for Cisco and the industry. We achieve this by putting ideas through rapid ideation, validation, and incubation processes. Competition and Innovation in these areas are enormous, and one needs to be in tune and ahead to bring results to a partner and get their feedback. 

Once we’ve used those variables to define our first criteria, our next priority is to build a working prototype. With a prototype in hand, we’re ready to bring something to our partners for feedback. Fortunately, modern design approaches and frameworks can help. The most-known frameworks are React, Angular, and VueJS. All of them can easily help you build a solid, well-tested platform for your application. 

A big part of our work at Outshift is delivering the best user experience for our partners. We even have a dedicated UX team helping our engineers visualize their ideas and make wireframes that are ready to implement. Modern UX comes with an extensive set of tools helping UX/UI designers to prepare assets for the development team. We need to consider the needs of the UX team, and our framework should also support UX/UI development tools such as Figma, Miro, Adobe XD, or Sketch. 

The visual appearance of an interface is crucial when you are trying to keep a partner's attention, but if you ever try to build your web page, you know CSS styles can be tricky.  

Building a prototype of the application with a well-tested front end framework

When building our prototype, we don’t want to spend too much time figuring out the responsiveness and accessibility of our application. We want a well-tested framework to start fast. That task Twitter was solving when they introduced the first version of Bootstrap. 

A couple of years ago, almost everyone used Bootstrap to build something that could work in different screen resolutions and browsers. Today Bootstrap is overused, and some people even say they are bored of repeatedly seeing the same style. Fortunately, many new libraries have been developed since then to solve the same problem, and we will compare some of them below. 

Cisco is a large company, and we have our component libraries for a product such as Webex, Intersight, DNA Center, and others. They are all trying to follow Cisco enterprise branding patterns, but you need to remember that branding can vary from department to department. If you're not sure where your POC will land, maybe you should hold on to choosing one of them. 

Some of them are open-sourced, and some of them are not. It would be best if you also considered who is supporting this front end framework. Supporting your component library can easily become a full-time job. And you want to spend this time on your business logic instead of building a new framework. Alright, we have some criteria and candidates. Let’s make our comparison table.

Front end frameworks: A comparison table

Below is a detailed Front End architectural diagram with a list of essential libraries for the venture. As you can see, it's a React/Redux Toolkit base app that uses Elastic UI framework as a component library. We made this choice based on some criteria:

• We needed a modern component library with Figma assets to make simple assets transfers between UI/UX team and Front End engineers.
• We tried to use an open-source solution instead of the Cisco proprietary library to leverage community help to support it and get new features faster.
• This venture needs to represent data in different ways, such as graphs and tables, but it doesn't have to be real-time, like chat or video streaming. So we decided to use a SPA solution with no sockets that reloads data per rerender or on-demand.

All frameworks and libraries mentioned in this blog post are also linked to their source code so that you can dig deeper into the details. 

If you want more ways to choose the best front end framework for your next project, we recommend reading Qwik vs. Next.js: Which framework is right for your next web project?

Happy coding!