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

Python

Buefy

Flask

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!

“My number one concern was around quality, but the output speaks for itself. It’s more like a real partnership. It’s been almost two years, and you could’ve switched your engineer to another project with better profit, and it’d be best for you, but you didn’t!”

Natan Yellin

•

CEO, Robusta

View All Reviews

Video Interview

Link copied!

Natan

CEO, Robusta Dev

Site: https://home.robusta.dev/

Vue.js

TypeScript

Jest

Chart.js

Interview insights

How and why did you choose Lengin?

I was somewhat opposed to the idea at the beginning, to be honest. My first instinct was to build our front-end team entirely here in Israel and not go with outsourcing. However, my co-founder Arik worked with some outsourced developers from Ukraine at a previous company and had a very good experience.

We interviewed a bunch of people, and Yuriy stacked out. He’s exceptionally talented. And after interviewing him, we knew right away he would be a fantastic hire. It worked out very well.

Describe Lendin’s developer as an employee.

Yuriy is phenomenal. He is very communicative and available around the clock. Not all employees are so committed. He’s always there to help out with whatever is necessary and whenever necessary, even on weekends. He’s been really fantastic and extremely responsible.

Why did you choose Yuri, a contractor, as a front-end tech lead?

He seems like the right person for the right role. He’s fantastic: he has the technical skills, leadership, and maturity to do that role. He was the best fit. It’d have been weird to take anyone else but not the most experienced front-end developer on the team, who is also running some of the management aspects as well.

What concerts did you have before collaborating with Lengin?

My number one concern was around quality.

I think there’s a false impression about trade-off quality when you outsource. For us, it’s been a way to get better quality talent than we would have been able to get if we had actually hired locally.

That’s been really important because we were a growing startup, and we needed top talent quickly. Вut hiring locally can be a very lengthy process. It’s an obvious fact that there are great talents all over the world. And if you’re looking for top talent in your own geography, then by definition, you are limiting your access to the talent.

Also, one of the advantages is that you can find someone who has a shorter onboarding time. That’s just a natural consequence of expanding your talent pool.

Did you have any trust issues towards remote work?

You have to find the right people who are committed and responsible even when you’re working remotely. You should trust them even if they aren’t in the same office with you and you’re not looking over their shoulder.

For me, the question is simple. Is someone consistently getting things done? Can I give someone a task, and it happens within a reasonable timeframe or faster, and we don’t have to chase after them? If it is so, I’m not tracking what you’re doing on a daily basis. It doesn’t interest me. The output speaks for itself. You can’t manage your remote team if there’s no trust.

What have you learned from working with Lengin?

Bring a designer early enough and find someone who really owns a front-end. Early on, start to bring in dedicated people, and people can really do phenomenal work. And I would absolutely recommend Lengin!

It’s more like a real partnership. It’s been almost two years, and you could’ve switched your engineer to another project with better profit, and it’d be best for you, but you didn’t! Instead, you offer your employees professional development, bonuses, and work that is interesting to them.

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.

Sales Manager at Lengin