Developers strive for responsive web applications to provide the best user experience. Users expect pages to load quickly, even when data sources are slow or operations are computationally intensive. Traditionally, this is achieved by initially loading the page with basic styles and quick-loading data, then updating the page asynchronously as slower data becomes available.
Challenges with JavaScript Solutions
Updating the page asynchronously typically involves JavaScript, which introduces complexity.
Single Page Applications (SPAs)
SPAs, built with frameworks like React, are common for asynchronous updates. They allow for rich user interactions but are complex to build and maintain. SPAs require separate development for frontend and backend, leading to communication challenges and intra-team dependencies.
Server-Side Rendered React
Frameworks like Remix and Next.js use HTTP streaming bodies to render HTML incrementally. They simplify some aspects compared to SPAs but still require JavaScript for both backend and frontend, which may not be ideal for all teams.
Lightweight Frontend Libraries
Libraries like HTMX and Turbo enable HTTP calls and DOM updates using HTML attributes, adding interactivity without custom JavaScript. They are simpler but have limited interactivity and are difficult to test compared to JavaScript solutions.
Alternatives to JavaScript
With the development of the Declarative Shadow DOM and streaming HTTP bodies, developers can now update a page asynchronously without JavaScript. These techniques can be applied in server-side rendered apps to increase responsiveness while keeping complexity low.
Declarative Shadow DOM
The Declarative Shadow DOM allows parts of the web page to be encapsulated and managed independently, reducing the need for JavaScript.
HTTP Streaming
HTTP streaming sends updates from the server as they become available, rather than waiting for all data to load. This approach is effective in environments with unpredictable data fetching times.
While JavaScript solutions like SPAs, server-side rendered React, and lightweight frontend libraries offer flexibility and rich interactivity, they introduce complexity. The Declarative Shadow DOM and HTTP streaming provide simpler alternatives for asynchronous updates in server-side rendered apps, enhancing responsiveness without adding complexity.
A Different Approach: Declarative Shadow DOM and Streaming HTML
Declarative Shadow DOM
The template and slot features introduced by Shadow DOM add reusable templates to HTML. Until recently, the only way to use the Shadow DOM was through the attachShadow JavaScript function. Modern browsers now support the Declarative Shadow DOM, which allows developers to construct a shadow root directly in HTML.
Here’s an example of a shadow root declared directly in HTML. The template element contains a slot tag populated by the element with the slot attribute:
Hello world
The browser renders this as follows:
#shadow-root
Hello world
Adding Streaming
Templates facilitate asynchronous page loading by populating an element in one place with content from an element in another. Suppose we’re building an app where retrieving a user’s email address is a slow operation, and we define our markup as follows:
This allows us to render the entire page with data that loads quickly before we render the user’s email. Using HTTP streaming, we’d first send everything before the <h1 slot="heading"> tag to the browser so the browser would render a partial view of the page:
#shadow-root
Loading
Once we retrieve the user’s email, we send it on the stream and close the connection, so the user sees the rest of the page’s content:
#shadow-root
Welcome, user@example.com!
Styling the Shadow DOM
The shadow DOM encapsulates its own styles. This means that elements rendered in the shadow DOM are not affected by global CSS styles, and styles applied in a given shadow root do not affect elements outside the shadow root.
To apply global styles within the shadow DOM, duplicate the global styles in each shadow root using a link tag that references the same files as in the head:
Loading
Welcome, user@example.com!
data := make(chan []string)
go func() {
data <- provider.FetchAll()
}()
_ = websupport.Render(w, Resources, "index", model{Message: deferrable.New(w, data)})
In the background, we wait for the message and send it to a channel when ready. The channel is wrapped in a deferrable object (which we’ll discuss next) before it’s passed to the template’s model.
Deferrable
The deferrable struct accepts a writer and a channel as properties. Once GetOne is called, the deferrable flushes the writer (using http.ResponseController as discussed above) before waiting for a result from the channel and returning it.
type Deferrable[T any] struct {
writer http.ResponseWriter
channel chan T
}
func (d Deferrable[T]) GetOne() T {
d.flush()
return <-d.channel
}
func (d Deferrable[T]) flush() {
_ = http.NewResponseController(d.writer).Flush()
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus
The flush allows the template to be rendered before waiting for the slow message, meaning the user can view content while waiting for the message.
Streamed Template
As discussed above, the template declaratively creates a shadow root and includes the global styles. The slot contains placeholder content, which is rendered until the slot is targeted later. We call GetOne so the writer is flushed before the slow message is sent to the user.
Once the message is received, GetOne returns, and the rest of the template, including the slot content, is rendered for the user.
Wait for it...
{{ $items := .Message.GetOne }}
Success!
{{range $item := $items}}
- {{$item}}
{{end}}
And that’s it! The rest of the application consists of standard Go server boilerplate, but if you’re interested, check out the source code.
Conclusion
This article shows a practical example of how to use the Shadow DOM, template slots, and streaming response bodies to build a responsive application without JavaScript. The next time you want to add a bit of responsiveness to an application, consider using this approach before moving to a heavier JavaScript-based solution. It gives developers the simplicity, testability, and maintainability of a server-side rendered application while providing a better user experience.
Experts in development, customization, release and production support of mobile and desktop applications and games. Offering a well-balanced blend of technology skills, domain knowledge, hands-on experience, effective methodology, and passion for IT.
