How to choose a practical front-end framework for your following POC?
At Cisco Emerging Technologies & Incubation, engineers are great at building complex systems to support global networks for millions of users. We are solving many problems related to scale, reliability, and security. But sometimes, choosing the proper front-end framework for your next project can be a tedious task.
Today, we have many choices from libraries built and supported by large companies and available in open-source communities. We 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.
Cisco’s Emerging Technologies and Incubation group are 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 process. Competition and Innovation in these areas are enormous, and one needs to be in tune and ahead in order to bring results to a partner and get their feedback.
Now we can define our first criteria from these requirements. It’s how fast we can build a working prototype and give it to our partners to collect feedback. Fortunately, today, many design approaches and frameworks solve these problems. Most known are React, Angular, and VueJS. All of them can easily help you build a solid, well-tested platforms for your application.
A big part of our work in ET&I is to deliver 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 goes with an extensive set of tools helping UX/UI designers to prepare assets for the development team. Therefore, 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.
Visual appearance of an interface is crucial when you are trying to keep partner attention, but if you ever try to build your web page, you know CSS styles can be tricky.
When we are 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 can say they are bored of seeing the same style repeatedly. But fortunately for us, 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 keep in mind branding can vary from department to department. And if you are 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 framework. Supporting your component library easily can 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.
|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|
You can find more information about Cisco libs here (note: most of them are proprietary and available only for Cisco employees):
- Momentum, Momentum GitHub, Momentum Figma
- DNA Center, DNA Center components, Network Visualiser
- UI Kit, OneUI builder, UI Kit React, UI Kit React Gitlab, UI Kit Angular, UI Kit Angular GitHub
After all, each team can decide what works for them best. And in the end, I want to provide some choices we made for one of our early stage ventures. Below you can see 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.