INSIGHTS
6 min read
Published on 01/12/2022
Last updated on 03/21/2024
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.
You can find more information about Cisco libs here (note: most of them are proprietary and available only for Cisco employees):
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 |
- 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
- 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.
Subscribe to
the Shift!
Get emerging insights on emerging technology straight to your inbox.
Unlocking Multi-Cloud Security: Panoptica's Graph-Based Approach
Discover why security teams rely on Panoptica's graph-based technology to navigate and prioritize risks across multi-cloud landscapes, enhancing accuracy and resilience in safeguarding diverse ecosystems.
Subscribe
to
the Shift
!Get on emerging technology straight to your inbox.
emerging insights
The Shift keeps you at the forefront of cloud native modern applications, application security, generative AI, quantum computing, and other groundbreaking innovations that are shaping the future of technology.