Front-End Development at Robusta

Lengin Developers Boosting Robusta’s Front-End Capabilities

Robusta has developed its own SaaS product designed to assist DevOps in managing and monitoring Kubernetes alerts. This open-source platform streamlines automated monitoring, alerting, and troubleshooting.

They sought Vue.js expertise to augment their in-house development team. Initially unsure about hiring an external developer due to their experienced and friendly in-house team, the demand for specialized skills, and the urgency to onboard a new specialist eventually led them to choose Lengin.

Technologies Used on Robusta

Flask

Python

Buefy

TypeScript

Vue.js

Jest

Chart.js

Python: Known for its simplicity, it was a good choice for building server-side applications.
Flask: Lightweight and flexible – chosen as a web framework for Python to build web services and APIs.
Supabase: Offers real-time functionality and an open-source alternative to services like Firebase, which was used for database management.
Double Key Encryption (DKE): Ensured that data is encrypted with two separate keys, providing an additional layer of protection.
Vue.js: Known for its reactivity and ease of use in building dynamic user interfaces was selected for frontend development.
TypeScript: Used with Vue.js to add static typing to JavaScript and helped catch type-related errors early in development.
Buefy: Provided pre-designed Vue.js components for a consistent and visually appealing UI.
SWRV (Stale-while-revalidate data fetching for Vue): Provided a caching mechanism to improve performance by serving stale data while fetching updated data in the background.
Chart.js: Offers a variety of chart types for displaying data – was used to create data visualizations and charts.
Jest: Used for testing the front-end.
SASS: Extended CSS with features like variables, mixins, and nested selectors for more efficient and maintainable styling.
Vega: Offers a declarative language for creating interactive, customizable visualizations, and was used for advanced data visualizations.

About Our Client

Robusta is an exceptional company that truly embodies the spirit of “living and breathing open source, Prometheus, and Kubernetes.” They boast a tightly-knit team driven by a singular mission: assisting DevOps professionals in tackling the intricate challenges frequently encountered in complex projects.

When we joined Robusta, the product team was much smaller than it is today. The functionality was rapidly evolving, and we had to swiftly adapt to the changing landscape, enhancing the application’s usability and front-end performance. The application heavily relied on the front end to manage a significant portion of critical business logic.

What Robusta’s App is All About?

Describing the full functionality in a single portfolio is a challenging task. However, when our initial front-end developer, Yuriy, joined the project, the application had already been running for nine months. Comparing its current state, after 1.5 years, it bears no resemblance to its earlier version.

As previously mentioned, Robusta caters to DevOps needs, serving as an all-in-one Kubernetes solution for monitoring and managing. It empowers you to gain insights into your cluster’s real-time performance:

Identify reliability and cost-related issues.
Access ready-to-use dashboards and alerts.
Dive deep into Kubernetes resources.

The Vital Role of Front-End Development

While this application serves the high-tech needs of DevOps, it boasts a user-friendly interface deliberately avoiding complex vocabulary. We aimed to ensure accessibility and ease of users with a small experience in Kubernetes. Notice that all functions are grouped conveniently, enabling swift navigation across the app.

Front-end development played a pivotal role in this application, handling a big part of the business logic. Through a web-socket connection, the app processes unfold as follows: the client sets up Robusta on their Kubernetes cluster, and the UI sends a request to the relay, which then communicates with the cluster. The cluster responds to the relay, which in turn relays the response back to the UI.

Cluster Comparison – The Initial Challenge

Firstly, it’s essential to highlight the underlying technology stack of our application, which comprises Vue.js, the Composition API plugin, Typescript, and Buefy for streamlined UI components.

Upon joining Robusta, our developers were tasked with a significant project – creating a function to display and compare two or more clusters: those that are in production and on development.

Troubleshooting

To view YAML files, we initially implemented a syntax highlighting library. However, we later realized the need to provide the ability to copy, download, and perform standard searches with result navigation. To achieve this, we created a separate component where you can open these YAML files.

We also encountered performance issues such as stutters when displaying drop-down menus and tables on heavy clusters, which hosted over 30 thousand running applications. The efficient solution was to implement virtualization.

Kubernetes Resource Integration

Our subsequent milestone involved the seamless integration of Kubernetes resources into Robusta. With this enhancement, users could monitor all live applications within a cluster and concise alerts for any application encountering issues. Also, users can restart the app directly from the UI.
The key details available included:

Application Name
Cluster and Namespace
Status and Version
Firing Alerts
Pods
VRAM and CPU usage

Results and Impact

With the Robusta team, we’ve created a reliable, bug-free application capable of processing a large number of live applications. It’s a valuable tool for DevOps.

When we started on this project, there were no commercial clients. Now, it’s being used by many companies and IT professionals, and we’re still actively working on its development together.

Interviewing Yuriy, the first developer to join the Robusta team, he admitted that the project’s logic seemed quite complex, and he wasn’t sure if he could handle it. However, looking back, we’re proud of Yuriy because he not only succeeded in development but was also promoted to the position of tech lead at Robusta a few months ago.

You can find more details about our development journey, tech leading, and other interesting aspects of this project in the second part of this portfolio!

HOW TO START COLLABORATION

Contact us

Tell us about your project

Thank you for contacting us!

We are already processing your request and will contact you within a day. Meanwhile, check out our Blog about software development, business, and insights.

What’s next?

1 step

Our manager or tech specialist will contact you within one business day.

2 step

We get to know you, your project, and the development requirements you have.

3 step

We offer you the best-fit developers who can join your project in no time.

Oksana Сhemarenko Sales Manager at Lengin