Brock Benson - From vuejs to htmx: the good, the bad, and the ugly
Feb 20, 2025
auto_awesome
Brock Benson, creator of Mayples and a seasoned developer, shares his journey of rewriting a VueJS app into HTMX. He discusses the challenges and breakthroughs encountered, such as navigating caching complexities and improving user experience through innovative strategies. Brock emphasizes the importance of business context in development, revealing how understanding user needs influenced his approach. He also compares the frameworks, offering insights on performance, maintainability, and the trade-offs of functionality over aesthetics.
Brock Benson transitioned from VueJS to htmx to enhance user experience and streamline business valuation processes for small enterprises.
The application leverages AI and dynamic document processing to significantly reduce business valuation costs, making them more accessible for small businesses.
Developers encountered challenges in caching and data integrity, utilizing Redis to enhance performance while maintaining accurate, real-time information for users.
htmx offers advantages over traditional JavaScript frameworks by simplifying development and minimizing frontend complexity, resulting in a cleaner and more maintainable architecture.
Deep dives
Introduction to Business Valuation App
The application being developed is compared to TurboTax but focused on business valuations, allowing users to get quotes and facilitate the process online. It aims to streamline documentation and communication by letting clients complete tasks such as signing agreements and filling out questionnaires dynamically based on their input. This dynamic questionnaire adapts the required documents based on user responses, ensuring efficiency while accommodating multiple users, such as accountants, who can upload necessary files directly. By not requiring specific document formats, the app makes it easier for clients, particularly small businesses, to engage in the valuation process.
Addressing Cost Barriers
Many small businesses struggle to afford traditional business valuation services due to high costs, often reaching upwards of $10,000 or more. This app intends to significantly reduce those costs, allowing users to complete the valuation process for around $2,500 with results in a day. The motivation behind building this tool stems from personal experiences of frustrations within previous roles where the valuation process was cumbersome and outdated. By utilizing modern technology and flexible pricing, the goal is to democratize access to business valuations for small enterprises.
Utilizing Advanced Technologies
The application leverages various models and artificial intelligence for document processing and analysis, tapping into a data warehouse enriched with public company data. Different models are employed for specific tasks to ensure accuracy and efficiency, streamlining workflows while maintaining oversight through a well-structured admin interface. The architecture includes asynchronous data processing capabilities, allowing certain tasks to run in the background without interrupting user experiences. This modern stack aims for robustness and efficiency to handle complex evaluations with precision.
Dynamic User Experience
The app is designed with a focus on user experience, allowing for fast and efficient navigation between sections. It incorporates dynamic features that enable immediate feedback based on user input and actions, enhancing interactivity. For instance, uploaded documents and completed sections can update in real-time, providing users with a sense of immediate progress and current data. Such design elements elevate the overall usability of the application, turning the valuation process from a lengthy ordeal into an accessible and timely task.
Challenges and Solutions in Development
Developers faced several challenges, particularly in optimizing caching mechanisms and ensuring data integrity. Caching is crucial for performance, especially when multiple users interact with the same data in real-time, making it challenging to maintain an accurate representation of the information. The use of Redis for group cache keys simplifies the invalidation process when modifications are made, reducing the risk of stale data. This validation strategy helps developers manage complex calculations while maintaining efficiency without compromising user experience.
Reflections on HTMX vs. JavaScript Frameworks
The discussion notably contrasts HTMX with traditional JavaScript frameworks, emphasizing usability and development ease. Developers found HTMX to offer unique advantages, such as minimizing frontend complexity while still rendering responsive and interactive applications. Though JavaScript frameworks can provide visually appealing interfaces, they may lead to fragility due to their higher code complexity and maintenance needs. The conversation highlights an overall preference for a clean slate with minimal dependencies, focusing on robust backend systems.
Plans for Future Development
Looking forward, the development team aims to enhance the application’s capabilities further by integrating newer technologies and features post-launch. The goal is to refine the user interface and improve transitions that create a smoother user experience that mimics single-page applications (SPAs). Anticipating a wide user base, there’s also interest in implementing features to ensure accessibility for first-time users who may need more guidance through the valuation process. Maintaining a focus on user needs will remain paramount as the app evolves and scales.
In this episode I talk to Brock Benson, creator of Mayples, a business valuation SaaS. Last year, Brock made the decision to rewrite his large-scale, Live VueJS production app into an htmx app. During this rebuild, Brock went on a journey into the internals of htmx, built his own extensions, embraced _hyperscript, and pushed against the limits of htmx.
Does it scale? What were the pain points? What tricks did he come up? How does it compare with his earlier Vue version of the same app?
I hope you enjoy this in-depth conversation with premiere htmx application developer Brock Benson.
Remember Everything You Learn from Podcasts
Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.
