Why did Machbase Neo switch its front-end framework from Vue.js to React?
Machbase Neo(Time Series Database) Front-end Framework
● About Frontend Framework
● Three Years of Vue.js Journey: Reflections and Lessons Learned
● New Endeavors for Machbase Neo
● Switching from Vue.js to React in Machbase Neo 8.0!
About Frontend Framework
Designing and developing the web-based front-end portion in today’s software landscape is undoubtedly challenging and intricate. However, it stands as one of the most crucial aspects, encompassing user interfaces that directly engage users. For this reason, the choice of framework for developing user interfaces within a particular company’s development organization is a complex outcome of various factors. These factors include diverse knowledge backgrounds, distinct requirements, cultural and individual characteristics, as well as the company’s philosophy.
As a result, selecting a framework as the foundation for creating user interfaces involves intricate decision-making. This decision takes into account a multitude of considerations, with outcomes that are shaped by the interplay of these complexities. While it’s possible to choose a specific framework without any specific reason, such decisions are often rooted in careful evaluation and alignment with the organization’s goals and needs.
Three Years of Vue.js Journey: Reflections and Lessons Learned
The Machbase development team has been using Vue.js as the primary framework for the front-end over the past three years. This Vue.js framework has served as a core foundation for the user interface of our cloud product, known as CEMS, which is based on edge computing. Throughout the design and implementation process, the framework has been instrumental in meeting various visual requirements of users. Most of our front-end developers have learned and become familiar with Vue.js, using it to satisfy a diverse array of visual demands. (https://www.cems.ai)
However, over the past year, as we developed a new database product called Machbase Neo, doubts have arisen about whether Vue.js, which we adopted, remains the optimal choice.
New Endeavors for Machbase Neo
First, let me provide a description of Machbase Neo (https://neo.machbase.com). This product is a time-series database solution, but it goes beyond traditional boundaries by embracing an All-In-One concept that aligns with future technological trends. Machbase Neo aims to streamline the entire data management process for users. This includes not only data storage and retrieval, but also data collection, transformation, and integration. The product is designed to significantly reduce the costs associated with installing and managing various auxiliary processes through built-in servers like MQTT, SSH, HTTP, and gRPC.
Notably, Machbase Neo stands out as an open-source solution, allowing anyone to access and understand its structure and operational principles. At its core, the product incorporates the world’s fastest TPC benchmark ranking, with Machbase TSDB as the backbone, delivering exceptional performance and efficiency.
(https://github.com/machbase/neo-server)
In essence, to empower customers utilizing Neo, we employ the Vue.js front-end framework to enable them to create various charts and perform all tasks within a web-based environment without the need for separate visualization tools.
However, as development progressed, the drawbacks of Vue.js became more pronounced. Let’s outline the pros and cons of this framework.
Pros of Vue.js:
1. Easy Learning Curve: Vue.js offers a gentle learning curve, making it accessible to developers with varying skill levels.
2. Flexible and Versatile: Vue.js provides a flexible structure, allowing developers to integrate it into existing projects or use specific parts of the framework as needed.
3. Reactive Data Binding: The framework’s reactive data binding simplifies the process of synchronizing data between the model and the view.
4. Component-Based Architecture: Vue.js promotes a component-based approach, facilitating modular development and reusability.
Cons of Vue.js:
1. Less Mature Ecosystem: Compared to frameworks like React, Vue.js has a smaller ecosystem of libraries and tools, potentially limiting options for advanced functionality.
2. Limited Corporate Backing: Vue.js has less corporate support compared to React or Angular, which might impact long-term sustainability and updates.
3. Performance Challenges: As applications scale, Vue.js can face performance issues, especially when handling complex and deeply nested components.
4. Smaller Community: The smaller user community of Vue.js might lead to slower issue resolution and fewer resources for troubleshooting.
Despite its benefits, the increasing prominence of these drawbacks has led us to reconsider Vue.js as the best fit for our evolving needs in the development of Machbase Neo’s front-end.
Absolutely, particularly as development progressed, we realized that drawbacks 1 and 3 have been increasingly impacting development time and costs. The need to introduce new features often led to situations where we couldn’t rely on existing components and had to develop new ones. This further added to the complexity and resource requirements of the project.
Furthermore, as functionality grew, we began to sense a qualitative decline in the web-based UI performance. It’s important to acknowledge that this perception could vary among users, but it raised concerns about the ability to maintain a smooth and responsive user experience as more features were incorporated.
Certainly, let’s take a look at the pros and cons of React, which you’ve been considering as an alternative:
Pros of React:
1. Active Development Community: React benefits from a highly active development community, offering a wide array of library choices to address different needs.
2. Efficient Virtual DOM: React’s clean and efficient virtual DOM structure contributes to faster rendering speeds.
3. Rapid Improvement and Iteration: React sees frequent updates and improvements, leading to enhanced features and performance over time.
Cons of React:
1. Higher Learning Curve: React has a relatively steeper learning curve compared to Vue.
2. Complexity due to Architecture: Some complex coding scenarios can arise due to React’s architecture, which might pose challenges during specific unit development tasks.
3. Continuous Learning Required: Ongoing architectural enhancements and structural changes demand continuous learning to keep up with best practices.
As mentioned in the drawbacks, while React may require a longer learning curve and present higher difficulty, once familiarity is established, the availability of a wide range of libraries (as mentioned in the first advantage) can significantly reduce development time and subsequently lower costs. Notably, the potential for significant performance improvements, as highlighted in the second advantage, became a compelling factor during testing, indicating that switching to React might yield faster response times by several folds.
Switching from Vue.js to React in Machbase Neo 8.0!
After conducting an internal technology survey, a substantial redevelopment of the UI was undertaken to adopt React following the decision. This effort, while not overly time-consuming, took approximately 1 to 2 months to complete. Although the external appearance of the UI underwent significant changes, the core functionality remains largely unchanged.
What improvements have been achieved in React?
Here’s a list of improvements experienced directly by developers through React, though using it feels like the response performance has improved by more than 2 to 3 times compared to before. It’s like going from driving a sedan at 50 miles per hour to driving a Lamborghini at 200 miles per hour.
- Performance Boost: First and foremost, there’s a noticeable improvement in rendering speed, primarily due to well-optimized Virtual DOM (VD) handling.
- Reduced Development Time: As the project size increases, the development time invested is more efficient compared to Vue.js.
- Robust Community: The abundance of resources in the development community makes it efficient to find solutions when issues arise.
- Flexibility: Higher code autonomy allows developers to write shorter and more concise code based on their skills.
- Component Reusability: Developing reusable components through the use of hooks is efficient and effective.
- Development Simplicity: The method-based approach of React simplifies lifecycles, making development smoother.
Please note that the direct comparison of driving a sedan and a Lamborghini is used metaphorically to describe the difference in experience before and after adopting React.
Conclusion
The content provided reflects the subjective perspective of the Machbase Neo development team. Different development organizations may hold varying opinions, and the strengths and weaknesses of each framework can differ based on their use cases. For this reason, we strongly advise not to take this document as absolute truth but to conduct your own development, testing, and draw your own conclusions.
Regardless, the Machbase Neo team is highly satisfied with the current situation, where development speed has increased, and most importantly, response times have become more pleasant. We hope that these experiences may prove helpful to other communities. With that, we conclude.
Thank you.
🧭Homepage 🚀Machbase Neo📍Github🗣️️LinkedIn 🎬Youtube
Machbase stands as the world’s fastest timeseries database, offering an ideal solution for diverse environments. Whether it’s edge devices with limited resources or clusters processing massive amounts of data, Machbase excels in scalability to meet the demands of any scenario.
