Github
Linkedin
Have you wondered why, in this day and age, when we have access to the latest technologies and solutions, IT projects still fail? Don't you think that we complicate our lives and work in many cases instead of simplifying it? Sometimes less is more, especially in the world of frontend! Read on to learn what an AHA stack is and how to do frontend more simply.
Regarding front-end work, I’ve seen it all during my amazing technological adventure like a cat’s sock journey through the Wroclaw market. HTML and sending requests to the server via xhttp, templates like Handlebars, jQuery. I also worked with Magento where the frontend was as simple as the road to nowhere. There I learned about Knockout.js or MVVM frawework and declarative binding. Next, it’s downhill from there: EmberJS, AngularJS, and eventually React and Vue.
Evolution of the frontend
I look at these frameworks and approaches to frontend and think that frontend has moved very far from its roots and purpose over the years. I always thought of frontend as that there is a web page; something is displayed on it, and the user can read something or click something.
More technically speaking, the frontend is HTML/CSS + dynamic interactions and communication with the server. The server renders the code, and the user sees the page. Meanwhile, the frontend has moved in the direction that it’s all done in the browser using JavaScript and pages that should be lightweight are mega-heavy.
Of course, an SPA-type solution has its uses for more complicated cases like banking applications, while using powerful frameworks to render a simple website or even a store is perhaps formed over substance. Or is this whole IT thing not about doing something but about doing it?
I don’t know; while I am enthusiastic about technology and conscious decisions and simplifying instead of complicating so, I was very happy when I saw something like the AHA stack was created. This is a perfect example of this approach, with you doing less and getting more. Simpler and faster. Its philosophy is based on the idea that the frontend should be primarily for communicating with the server and presenting content to the user, and the core of the whole stack is - surprise: HTML!
AHA! So can it be simpler?
AHA Stack is ideal for frontend developers who love React/JSX, but also want more simplicity in their lives, generating HTML on the server side and minimizing the amount of JavaScript on the client side.
AHA Stack is based on the core technologies of the Internet: HTTP, HTML, CSS, JavaScript, web servers and browsers, DOM, browser events, forms, FormData, XHR, fetch(), Request, Response, and cookies. These milestones of Internet technology have been stable and unchanged for years.
AHA Stack adds some cool things that improve the web application development experience. Instead of reinventing the wheel, it uses well-known and fundamental technologies, but adds something extra to meet modern user standards.
AHA! But how does it work?
Our hero, AHA Stack, introduces a library that efficiently manages HTTP connections. Imagine a TODO app where you add an item to a task list, and the list refreshes without reloading the entire page. The same when deleting a task. Sound familiar? Yes, that’s the whole idea of single-page applications (SPA)!
This library allows you to send any HTTP method (POST, GET, DELETE, PUT, PATCH) to the server and serve HTML pages through the web server. Interestingly, there is no place for JavaScript frameworks - the server does it all, old-school style!
But of course, when we need more application features, you add a “sprinkle of JavaScript interactivity.” You use JavaScript or a library to help manage that interactivity.
AHA Stack adds two tools to the Web Platform: ease of client-server communication and adding client-side interactivity. This allows us to escape the complexities of SPA frameworks and build better, more maintainable applications, faster.
And what are these tools? Well, “AHA” is a set of Astro, htmx, Alpine.js. As you can see, AHA is not only an expression of surprise but also an acronym for tools that will make creating web applications as easy as ABC!
Summary
In today’s column, we looked at how AHA Stack is changing the game’s rules in the frontend world. Instead of hijacking complicated, spa-heavy solutions, AHA proposes a return to its roots - simplicity and efficiency.
Remember, sometimes the key to success is to simplify! Isn’t looking at your projects from a new perspective a great incentive? AHA Stack is more than a technology - it’s a philosophy that can change how you think about frontend. Give it a try and you may discover your own “AHA moment”!
Sources
https://ahastack.dev/aha/1-stack-overview/
https://ahastack.dev/concepts/how-we-got-here/