Rapid server side full stack web development with ViewComponents and htmx by Thomas Schuehly

Introduction

The speaker introduces himself and his topic, and discusses the concept of engineering in software development.

• Thomas Trudy is a 22-year-old software developer who loves building things with Kotlin and Springwood.

• He presents two libraries for rapid server-side full-stack web development with few components in htmx.

• The speaker draws upon the insights of Dave Farley, an expert in continuous delivery, to discuss the concept of engineering in software development.

• Farley believes that modern software engineering needs to focus on managing complexity and creating better software faster.

Modern Web Application Development

The speaker discusses the challenges of modern web application development and how JavaScript frameworks were developed to manage complexity.

• Modern web applications are increasingly complex and sophisticated, which can lead to accidental complexity due to the nature of solutions.

• JavaScript frameworks were developed to manage front-end development complexity and improve user experience.

• React is currently the most used JavaScript framework for building web front ends, with 82% of developers using it according to a survey by State of JS Server 2020.

Engineering Approach in Software Development

The speaker discusses what engineering means in software development and how it should affect us when building modern web applications.

• Engineering is simply the stuff that works; it's practical, pragmatic, efficient, and focused on managing complexity.

• If an engineering approach doesn't help us create better software faster, it is wrong and doesn't qualify as engineering.

• We need to reduce complexity for our modern web applications that are not inherent in business challenges but accidental due to solution nature.

Questioning Status Quo

The speaker talks about how some members of the JavaScript community have started questioning the way most modern web applications are built.

• After years of relative stability, many in the JavaScript community are beginning to question the status quo on server Astro remix and Extras among others.

• The speaker suggests that we should try to reduce complexity for our modern web applications that are not inherent in business challenges but accidental due to solution nature.

Single Page Applications vs Multi-Page Applications

In this section, the speaker discusses the benefits and drawbacks of single-page applications (SPAs) compared to multi-page applications (MPAs).

SPAs vs MPAs

• Tomac Right's blog post highlights that there is a sweet spot for using React in moderate, lifty interactive interfaces, complex forms that require immediate feedback, and UIs that need to move around instantly.

• The ThoughtWorks technology team concludes that many websites will benefit from the simplicity of server-side logic. They argue that single-page applications are an architectural choice that should be made after proper trade-off analysis.

• MPAs power most of the web today by shipping HTML directly to the client without any overhead. Controllers fetch data from databases into models, which are then passed into template engines as model and view to render HTML returned to the browser.

Returning Interactivity to Server-Side Rendered Web Pages

In this section, the speaker discusses how we can return interactivity to server-side rendered web pages.

Hypermedia as Engine of Application State

• To return interactivity to server-side rendered web pages, we need to focus on hypermedia essential to even over-engineered JavaScript pages.

• Hypermedia is defined by Fielding as "the presence of application control information embedded within or the layer above the presentation of information."

• Hypermedia decouples clients and servers at a network level and enables us to evolve them independently. It also provides possible interactions that clients can do, such as anchor tags or hyperlinks.

• Decoupling an application level between the template and our data was JSON.

Introduction

In this section, the speaker introduces the topic of server-side rendering and discusses its benefits.

Benefits of Server-Side Rendering

• Server-side rendering provides faster initial load times, better SEO, and improved accessibility for users with slow internet connections or devices.

• It also allows developers to use a simpler approach to web development by removing two data representation layers between clients and data.

[t=0:10:18] Hypermedia and Spring MVC

In this section, the speaker discusses how hypermedia enables back-end developers to create features by themselves. They also explain how Spring uses the Model-View-Controller (MVC) pattern for server-side rendering.

Hypermedia and Back-end Development

• Hypermedia enables back-end developers to create features entirely by themselves.

• Spring can fill HTML with data from a database when delivering it to users.

Spring MVC Pattern

• The controller in the MVC pattern receives requests and changes the model.

• Thymeleaf is a simple template engine that renders dynamic data in HTML.

• JTE is another template engine that allows Java expressions inside HTML.

• Components make UI reusable and structured, which is why popular JavaScript frameworks use them.

[t=0:14:28] Solving Issues with Spring View Component Library

In this section, the speaker explains how using an MVC approach can lead to tightly coupled controllers and views. They introduce the Spring View Component Library as a solution.

Issues with MVC Approach

• Controllers have intricate knowledge of variables needed in templates, leading to tight coupling between controllers and views.

• Changing a variable requires changing it in every template that uses it, making maintenance difficult.

Introducing Spring View Component Library

• The library creates components as spring-managed beans that enable dependency injection of services.

• A random method returns a view context that makes data available to templates.

• The JTE-specific JTE view context creates a "hello world" property and gets data from an example service.

[t=0:13:37] Components in Spring

In this section, the speaker discusses how components make UI reusable and structured. They introduce the Spring View Component Library as a solution.

Benefits of Components

• Components make UI reusable and structured.

• GitHub built their own view component library for server-rendered parts of github.com.

Spring View Component Library

• The library solves issues with tightly coupled controllers and views in MVC approach.

• A random method returns a view context that makes data available to templates.

• The JTE-specific JTE view context creates a "hello world" property and gets data from an example service.

Separation of Concerns

In this section, the speaker discusses how to display components and navigate to a certain route. They explain how the Homeview component.render method is called in the controller method, which creates a clear separation of concerns between routing and data fetching.

Displaying Components

• To display components when navigating to a certain route, call the Homeview component.render method in the controller method.

• This creates a clear separation of concerns between routing and data fetching.

• Nesting components makes them reusable. Pass the view context as a parameter to the view component that render method creates in our template.

Types of Components

• The Homeview component fetches data itself but is less reusable because its data source is fixed.

• Parameter rust view components do not fetch data but instead rely on parent components to pass it. These can be reused everywhere in an app and create typesafe templates for commonly used UI patterns.

Cohesion with Spring View Component

In this section, the speaker discusses cohesion issues with MVC and how Spring View Component can help solve them.

Cohesion Issues with MVC

• With MVC, templates need to live in Resources directory while controllers live in Kotlin directory. This creates low cohesion and adds cognitive load when evolving front-end.

Benefits of Spring View Component

• Spring View Component enables cohesive code structure as templates live in same package as data provider. It allows for completely feature-based package structures.

• The speaker shows an example of how a slideshow feature is split in the Resources directory and in the web controller package with view components nicely packaged together in a bundle.

HTML as a Hypermedia

In this section, the speaker discusses why we moved away from hypermedia model to JavaScript dystopia and introduces htmx library.

Evolution of HTML

• HTML did not evolve as a hypermedia. It only has two hypermedia controls - anchor tag and form element.

• The form element was introduced in HTML to RC in 1995, making transaction possible for the first time. However, it remains unchanged since then.

Introduction to htmx Library

• Htmx library completes HTML as a hypermedia and competes against giant JavaScript ecosystem fueled by big tech.

• Htmx enables us to use modern browser features without ever leaving our HTML. It adds many more possibilities directly within the language.

Understanding htmx

In this section, the speaker explains how htmx works and its benefits.

Anchor Element

• The anchor element tells the browser that when clicked, it makes an HTTP get request to the slash block endpoint. The response is then loaded into the browser window.

Benefits of htmx

• Htmx allows any element, not just anchors and forms, to create HTTP requests. Any event can trigger requests and any HTTP verb can be used.

• Htmx extends and generalizes the core idea of HTML as a hypertext, making it easier to create full-stack applications.

Hypermedia Driven Applications

In this section, the speaker talks about how hypermedia enables creating user experience patterns that are commonly known with single-page applications. The speaker also explains how HDMX makes requests and swaps HTML into the DOM.

Advantages and Disadvantages of Hypermedia-Driven Applications

• Upper media-driven applications are good for UI that is mostly text and images.

• Use cases where a JavaScript-centric approach makes more sense include high degree of sub-millisecond interactivity.

• Benefits of hypermedia-driven applications include out-of-the-box first-page render performance, search engine optimization, and better optimized software.

Simplifying Web Development Approach

In this section, the speaker talks about how team structure can change if web development approach is radically simplified. The speaker also shares an example of a company that transitioned from a Django plus React application to Django plus HDMX application.

Changing Team Structure

• When context was using React, they had a hard split between back-end and front-end developers.

• After transitioning to HDMX, the entire team became full-stack developers except for the JavaScript developer who didn't have a job anymore.

• Each team member is more effective and able to contribute more value.

Integrating Spring View Component with HDMX

In this section, the speaker talks about integrating Spring View Component with HDMX. The speaker shares an example of creating an analytics service that measures the render time of each view component using aspect-oriented programming support of Spring.

Creating Analytics Chart View Component

• The analytics chart view component auto-wires the analytics service.

• We get all components by name from our analytics service as a component label list and then reference each component by name in our HTML.

Creating Dashboard View Component

• We loop over the list with the th each attribute and set the button text with the th text attribute.

• With the th hx-get attribute, we create GET requests to our slash line chart component endpoint.

• We add the HX Target attribute to specify what HTML should be swapped.

Creating a Component Controller

In this section, the speaker explains how to create a component controller that autobinds the analytics chart view component as it is just a Spring Bean. They also show how to create a gap mapping/line shot component and add a request parameter name.

Autobinding Analytics Chart View Component

• Create a component controller that autobinds the analytics chart view component as it is just a Spring Bean.

• The example implemented shows the fully interactive application without any page refreshes.

• The user can click on a button and the data updates automatically. It also works across page reloads so new data points are visible.

Creating Gap Mapping/Line Shot Component

• Create gap mapping/line shot component and add request parameter name.

• No further bullet points available for this section.

Leveraging Spring View Component

In this section, the speaker explains how to leverage Spring View components to create highly cohesive and loosely coupled features. They demonstrate an example of enabling users to save person information to their database using PersonFormViewComponent.

Saving Person Information with PersonFormViewComponent

• Enable users to save person information using PersonFormViewComponent.

• Define form in HTML and add H export attribute where we put the person put as variable.

• Reuse API config of app with person put and output mapping. Use person from dto as method parameter so if we change form or dto, controller doesn't care because it doesn't own class.

• Save person with person service using person from dto.convertPerson method.

• Return test view component.render method to show message to users when they save person. Message displays for two seconds.

Improving Interactivity with Constraint Code on Demand

In this section, the speaker explains how to improve interactivity of hypermedia-driven applications with optional constraint code on demand of the REST architecture style. They demonstrate an example of embedding JavaScript right inside components to enable client-side interaction.

Embedding JavaScript in Components

• Improve interactivity of hypermedia-driven applications with optional constraint code on demand of the REST architecture style.

• Embed JavaScript right inside components to enable client-side interaction.

• Show message with th text attribute and enable users with an onclick function to hide the message faster.

Using Alpine.js Library for Client-Side Interactivity

In this section, the speaker explains how to use Alpine.js library for client-side interactivity. They demonstrate an example of using Alpine.js and u components for creating a reusable tab view component that can be used anywhere across an app for switching content client-side.

Creating Reusable Tab View Component

• Use Alpine.js library for client-side interactivity.

• Use Alpine.js and u components for creating a reusable tab view component that can be used anywhere across an app for switching content client-side.

• List tabs as parameter that maps then in our view context we list these tabs to list header list and content list we show in another it shows power of view components as we can define API of component in our class typesafe.

• No further bullet points available for this section.

Setting up Authentication and Authorization with Superbase

In this section, the speaker discusses how to set up authentication and authorization using Superbase.

Using Superbase for Authentication

• The speaker introduces Superbase as an open-source Firebase alternative that offers two features: a hosted Postgres database and a hosted auth server.

• After including the Superbase starter, we can configure our security in the application.yaml file.

• Superbase uses JWT as an authentication method, which is sent to our API user endpoint using htmx.ajax method.

• We can easily create email registration forms by adding hx-post attribute to our API user/register endpoint.

Enabling Other Auth Providers

• We can enable other auth providers like Google by redirecting users to their login page.

Role-Based Authorization

• The starter exposes endpoints so we can set the roles of our users and create a role management system.

• We can use curl requests or auto-wire the Superbase service directly to set or elevate user roles.

Logging in with Wrong Credentials

In this section, the speaker demonstrates how to log in with wrong credentials on a demo application and provides information about the GitHub repository where the code for the demo lives.

Logging in with Wrong Credentials

• The speaker shows how to log in with wrong credentials on a demo application.

• The top of the screen displays the demo application created for the talk, while at the bottom is a link to the GitHub repository where the code for this demo lives.

Contributing and Connecting

In this section, the speaker encourages viewers to contribute and connect by providing feedback, using their library, and discussing use cases.

Contributing and Connecting

• The speaker invites viewers to contribute and connect by providing feedback on their library.

• Viewers can find all links to their repos and GitHub at tissue.a.

• The speaker encourages viewers to try using their library, provide feedback on any issues they encounter, and discuss use cases via Zoom.

Enabling Standard HTMX

In this section, the speaker discusses enabling standard HTMX.

Enabling Standard HTMX

• The speaker talks about enabling standard HTMX.

• They mention using API config with a controller method to save a person and edge export mapping in our form.