Published on 00/00/0000
Last updated on 00/00/0000
Published on 00/00/0000
Last updated on 00/00/0000
Share
INSIGHTS
5 min read
Published on 01/12/2022
Last updated on 06/18/2024
How to choose the best front-end framework for your following POC?
Share
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
| Name | React | Angular | VueJS | Figma | Sketch | Adobe | Owner | License | Popularity |
|---|---|---|---|---|---|---|---|---|---|
| Bootstrap | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | MIT | 146k GitHub Stars | |
| Material UI | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | MIT | 64k GitHub Stars | |
| Semantic UI | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | NA | MIT | 49k GitHub Stars |
| Ant | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Alibaba | MIT | 66k GitHub Stars |
| Base Web | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | Uber | MIT | 7k GitHub Stars |
| Elastic UI | ✅ | ❌ | ❌ | ✅ | ✅ | ❌ | Elastic | Apache | 3k GitHub Stars |
| Momentum | ✅ | ⚠️ | ⚠️ | ✅ | ❌ | ❌ | Cisco | MIT | 85 GitHub Stars |
| DNA Center | ✅ | ⚠️ | ❌ | ⚠️ | ❌ | ❌ | Cisco | NA | NA |
| UI Kit | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | Cisco | NA | NA |
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!
Subscribe to
the Shift!
Get emerging insights on innovative technology straight to your inbox.
