The Most Important Lesson From HTMX

Summary

The script discusses the common practice of building complex client-side applications that require excessive API calls and client-side logic, resulting in poor performance and security issues. It advocates moving back to server-side rendering using frameworks like Intercooler.js or HTMX, allowing developers to build expressive and secure apps without API churn. The core argument is that trusted server-side code avoids the security pitfalls of putting too much logic in the hands of the untrusted client.

Takeaways

• 😟 API churn from constantly changing UIs is a major pain point
• 😀 Increasing client-side expressiveness can reduce API churn
• 😨 But more expressive client-side APIs increase security risks
• 😟 Building robust security for expressive APIs is extremely hard
• 😊 Server-side rendering avoids client-side security issues
• 👍 Server-side code is trusted so you can give devs more power
• 🤯 HTMX lets you render HTML on the server to avoid client issues
• 🔒 Server-side rendering reduces the need for complex security
• 😃 HTMX and Next.js enable simpler full-stack applications
• ✅ Server-side solutions simplify development and improve security

Q & A

What is API churn and why is it a problem?

API churn refers to the constant tweaking and modifying of API endpoints to support changing UI needs. This leads to a chaotic situation with lots of ad hoc APIs that need to be updated frequently.

How can increasing client-side expressiveness help with API churn?

By increasing the expressive power of API endpoints through solutions like GraphQL, frontend developers have more control over how data is returned. This means the API can remain stable as UI needs change.

What is the main security concern with client-side expressive APIs?

Putting powerful and expressive APIs in the browser makes them accessible to potentially hostile users, not just front-end developers. So exhaustive access control needs to be implemented.

Why can giving front-end developers server-side rendering capabilities help?

On the server-side, code is trusted so developers can be given flexible data access without security concerns. Solutions like Intercooler allow server-side HTML rendering.

What is the core trade-off discussed in the article?

The article discusses the trade-off between API churn and security complexity. Increasing client-side expressiveness solves API churn but causes security issues.

What does HATEOAS stand for?

HATEOAS stands for 'Hypermedia as the Engine of Application State'. It's an architectural approach where HTML responses define the client-side application state.

How can server-side solutions like Intercooler help?

Solutions like Intercooler allow server-side rendering logic while avoiding client-side complexity. This provides flexibility without security issues.

What are the benefits of using HTMX?

HTMX allows server-side HTML rendering while keeping modern, interactive UIs. It avoids the need for complex client-side code and security models.

How do server components compare to GraphQL?

Server components render HTML on the server like GraphQL returns data. But server components avoid GraphQL's client-side security issues by running logic on the trusted server.

Why does the author recommend moving more logic to the server?

Server-side logic avoids client-side complexity, security issues, and chaos. It makes applications easier to build while empowering front-end capabilities.