- Регистрация
- 1 Мар 2015
- Сообщения
- 11,730
- Баллы
- 155
Prologue
As a software developer primarily focused on Java for backend systems, I occasionally enjoy developing simple web apps to stay up-to-date with frontend technologies. A few years ago, I developed a web app to display results from rope climbing competitions. To my surprise, it's still in use today. Back then, I had grand plans to enhance it with more features, but life had other plans, and the project gathered dust for several years.
The app was built using Angular 9, and to streamline development, I used PrimeNG as the component library. When I recently decided to update it, I was taken aback by the challenges of upgrading to Angular 19. Some dependencies, including the component library, were no longer compatible.
Honestly, this was frustrating. With a full-time job, family responsibilities, and other hobbies, I didn't want to spend my limited free time updating side projects every six months just to keep up with Angular's updates.
So, I faced a choice: invest time in updating the project or explore something new and exciting. I chose the latter and decided to use a tech stack that has gained popularity recently—Go for the backend, and HTMX, Alpine.js, and Tailwind CSS for the frontend.
Why I chose Go as Java developer
Firstly, I love learning new things. I don't expect my side projects to make me rich; I see them as opportunities to have fun and learn something new. Additionally, I don't want to spend much on hosting, and since Java with Spring Boot has significant memory demands, I sought a lightweight alternative that I could host on my VPS with 1 GB RAM—including a database and Traefik for handling certificates.
In this article, I want to motivate you to try out this stack. It brought me a lot of joy, and I'd like to pass on a few insights.
Setting goals
My primary goal was to rewrite an existing web application from Angular + Spring Boot into Go + HTMX. Beyond that, I set several other objectives.
Backend Goals
What I liked about Go
Java has a stable and robust ecosystem, and it will take time for Go to reach a similar level. However, Go brings a refreshing perspective. I tried to use as few dependencies as possible to maximize performance and minimize overhead.
I particularly liked the following:
Choosing the Frontend-Stack
For my small projects, I value simplicity. Although I'm confident writing TypeScript in the Angular framework, I sought less overhead. I considered using plain JavaScript to avoid dependencies and breaking changes in Angular and related libraries. However, this would have introduced complexity elsewhere, requiring more code to handle basic tasks. I ended up with three minimal libraries that offer a relatively stable API with amazing additional value.
HTMX
When I first read about HTMX, it immediately piqued my interest. This tiny library challenges the common pattern of splitting frontend and backend development into two independent applications, which has become the standard in recent years. It reminded me of the good old days of full-stack development with JSP.
HTMX extends standard HTML with additional attributes to handle asynchronous calls to the backend, retrieving data to be displayed. Unlike JSON, HTMX works directly with the DOM, requiring the backend service to return the entire HTML, which is then automatically added to the DOM. Key features of HTMX include:
With HTMX, I easily implemented:
One of my goals was to write as little JavaScript as possible. Alpine.js complements HTMX perfectly, adding reactivity to the frontend without writing a single line of JavaScript.
With Alpine.js, I easily implemented:
Tailwind CSS makes writing custom CSS obsolete. It offers predefined classes and an intuitive system that's easy to use. Plus, Tailwind is fully customizable, allowing you to extend and adapt styles and colors to your needs.
Moreover, Tailwind's stability regarding backward compatibility is commendable. The framework's developers prioritize maintaining a stable API, ensuring that updates don't break existing styles. This stability is crucial for long-term projects, as it minimizes the time spent on maintenance and allows developers to focus on adding new features rather than fixing broken styles. With Tailwind, you can confidently build and scale your projects, knowing that your styling foundation is robust and future-proof.
Summary
In conclusion, transitioning my web app from Angular and Spring Boot to Go, HTMX, Alpine.js, and Tailwind CSS was a rewarding experience that offered numerous benefits. This new stack not only enhanced my productivity but also provided a stable and efficient foundation for future development. Go's simplicity and performance, combined with the intuitive frontend solutions offered by HTMX and Alpine.js, made the development process enjoyable and less cumbersome. While there are challenges, such as the limited reusability of components in larger projects, the overall advantages of this stack make it a compelling choice for both personal and professional projects.
As a software developer primarily focused on Java for backend systems, I occasionally enjoy developing simple web apps to stay up-to-date with frontend technologies. A few years ago, I developed a web app to display results from rope climbing competitions. To my surprise, it's still in use today. Back then, I had grand plans to enhance it with more features, but life had other plans, and the project gathered dust for several years.
The app was built using Angular 9, and to streamline development, I used PrimeNG as the component library. When I recently decided to update it, I was taken aback by the challenges of upgrading to Angular 19. Some dependencies, including the component library, were no longer compatible.
Honestly, this was frustrating. With a full-time job, family responsibilities, and other hobbies, I didn't want to spend my limited free time updating side projects every six months just to keep up with Angular's updates.
So, I faced a choice: invest time in updating the project or explore something new and exciting. I chose the latter and decided to use a tech stack that has gained popularity recently—Go for the backend, and HTMX, Alpine.js, and Tailwind CSS for the frontend.
Why I chose Go as Java developer
Firstly, I love learning new things. I don't expect my side projects to make me rich; I see them as opportunities to have fun and learn something new. Additionally, I don't want to spend much on hosting, and since Java with Spring Boot has significant memory demands, I sought a lightweight alternative that I could host on my VPS with 1 GB RAM—including a database and Traefik for handling certificates.
In this article, I want to motivate you to try out this stack. It brought me a lot of joy, and I'd like to pass on a few insights.
Setting goals
My primary goal was to rewrite an existing web application from Angular + Spring Boot into Go + HTMX. Beyond that, I set several other objectives.
Backend Goals
- Learn Something New - I work with Java daily, so redoing this project in Java didn't make sense. I wanted a trending language with staying power. Go, introduced in 2007, has proven its market position.
- KISS principle - Make the application easy to maintain in the coming years.
- Low-memory footprint - Keep hosting costs low.
- Avoid Dependency Hell - Managing dependencies can be challenging, especially in the frontend ecosystem, where libraries frequently release new versions with less emphasis on backward compatibility.
- Find a Stable Stack - I want to spend less time maintaining the project while keeping it up-to-date.
- Write Less JavaScript - Reduce complexity by writing less JavaScript for my side projects.
- Write Less CSS - As a backend developer, I often feel overwhelmed by the amount of CSS in projects. I wanted to avoid the hassle of managing extensive CSS files.
What I liked about Go
Java has a stable and robust ecosystem, and it will take time for Go to reach a similar level. However, Go brings a refreshing perspective. I tried to use as few dependencies as possible to maximize performance and minimize overhead.
I particularly liked the following:
- Slqc - A great library for generating code from plain SQL, focused on performance and utilization. I personally like this much more then ORM frameworks, where the control over generated SQL and its performance is only limited.
- Quick Startup - Go apps start quickly compared to bloated Spring Boot applications, making hot deployments unnecessary.
- Low Memory Footprint - As someone who values fun over profit with side projects, keeping hosting costs low is crucial.
- Multiple Return Values - A feature I've often missed in Java. While some might argue it goes against OOP principles, it saves a lot of code.
- Exception Handling - Go's error handling is different and took some getting used to.
- Stack Traces - Java's stack traces are more informative.
- Excelize - A dependency for reading Excel files, similar to Apache POI. While easier to use than POI, it lacks some of POI's robustness and features.
Choosing the Frontend-Stack
For my small projects, I value simplicity. Although I'm confident writing TypeScript in the Angular framework, I sought less overhead. I considered using plain JavaScript to avoid dependencies and breaking changes in Angular and related libraries. However, this would have introduced complexity elsewhere, requiring more code to handle basic tasks. I ended up with three minimal libraries that offer a relatively stable API with amazing additional value.
HTMX
When I first read about HTMX, it immediately piqued my interest. This tiny library challenges the common pattern of splitting frontend and backend development into two independent applications, which has become the standard in recent years. It reminded me of the good old days of full-stack development with JSP.
HTMX extends standard HTML with additional attributes to handle asynchronous calls to the backend, retrieving data to be displayed. Unlike JSON, HTMX works directly with the DOM, requiring the backend service to return the entire HTML, which is then automatically added to the DOM. Key features of HTMX include:
- AJAX Requests: Easily fetch data from the server and update the page without a full reload.
- Partial Page Updates: Dynamically update specific parts of a webpage.
- Event Handling: Manage user interactions like clicks, hovers, and form submissions.
With HTMX, I easily implemented:
- Loading Spinner - The hx-indicator attribute controls the display of a loading indicator with literally no additional code.
- Pushing URL State - When a partial page update should also update the URL state, the attribute "hx-push-url" does the job.
- Partial Update of Pages - Switching between menu items or triggering actions renders data in any defined area on the page.
One of my goals was to write as little JavaScript as possible. Alpine.js complements HTMX perfectly, adding reactivity to the frontend without writing a single line of JavaScript.
With Alpine.js, I easily implemented:
- Custom Dropdown Component - Without a component library, I had to implement my own custom dropdown. Surprisingly, this was easy using a few attributes to control the state and handle events.
- Confirmation pop-ups - Showing or hiding elements on the page couldn't be easier with Alpine.js.
- Menus with highlighted selected items - Highlighting the currently selected menu item is a local state that must be managed within the application. Alpine.js excels at handling such tasks.
Tailwind CSS makes writing custom CSS obsolete. It offers predefined classes and an intuitive system that's easy to use. Plus, Tailwind is fully customizable, allowing you to extend and adapt styles and colors to your needs.
Moreover, Tailwind's stability regarding backward compatibility is commendable. The framework's developers prioritize maintaining a stable API, ensuring that updates don't break existing styles. This stability is crucial for long-term projects, as it minimizes the time spent on maintenance and allows developers to focus on adding new features rather than fixing broken styles. With Tailwind, you can confidently build and scale your projects, knowing that your styling foundation is robust and future-proof.
Summary
In conclusion, transitioning my web app from Angular and Spring Boot to Go, HTMX, Alpine.js, and Tailwind CSS was a rewarding experience that offered numerous benefits. This new stack not only enhanced my productivity but also provided a stable and efficient foundation for future development. Go's simplicity and performance, combined with the intuitive frontend solutions offered by HTMX and Alpine.js, made the development process enjoyable and less cumbersome. While there are challenges, such as the limited reusability of components in larger projects, the overall advantages of this stack make it a compelling choice for both personal and professional projects.