Believe In The Web

I grew up marveling at the web. From the first moments of exploring websites with AOL and dial-up, to building my own websites and forums in the early 2000s.

Those experiences drove me to learn how to code and fuel my love for JavaScript. It has fueled my career and growth.

Nothing matches the thrill of seeing my code come to life on the browser, and the satisfaction of sharing it with others with relative ease.

The web has always been more than just a collection of pages and links. It has been a platform for creativity, innovation, and collaboration. It empowers anyone to express themselves, learn new skills, and connect with others. A platform that is open, accessible, and democratic.

The Way of the World Wide Web

The web was created with a vision of being a universal information space. The designed was for flexiblity, adaptablity, and above all else: resilience. Upon that we built standards that ensure interoperability, compatibility, and security. All with the principles that promote decentralization, neutrality, and transparency.

As our friend Din Djarin says: "This is The Way."

The web has evolved over time, but it has never lost The Way. It has enabled countless innovations, from e-commerce to social media, from online education to telemedicine, from gaming to art. The web has transformed every aspect of our lives, from how we communicate to how we work, from how we learn to how we play.

Seek Minimalism

As the web has grown in complexity and diversity, so has the challenge of developing for it. Web developers deal with multiple browsers, devices, frameworks, libraries, and tools. We must balance performance, usability, accessibility, and security.

In this context, minimalism can be a powerful approach. It's not just making things simple or plain, but about making them essential and elegant. It's about focusing on what matters most, and eliminating what doesn’t. Through pursuing minimalism, we tend to find the optimal solution for the problem at hand.

One way to apply minimalism to web development is to use server-rendered web apps.

Please don't recoil... Hear me out.

Server-rendered web apps generate HTML on the server-side and send it to the browser as a response. This gives them several advantages over client-rendered web apps. They are by far faster to load and render. They don’t require downloading or executing large JS bundles. And typically, they do not suffer from latency or network issues.

We don't have to build an API and a front end separately. Fullstack engineers rejoice.

This makes them easier to maintain and debug. There's no depenency on complex state management or data synchronization. There's almost zero compatibility issues with different browsers or devices.

Maybe not as important, but still a benefit: server-rendered web pages are more accessible and SEO-friendly. They don’t rely on JS for functionality or content. They won't run into problems with indexing or crawling by search engines or bots.

Sprinkle JS

The harder step for most is using as little JS on the front-end as possible. JS pays my bills, but I often warn against its sorcery. Despite its strength, it also can also become a source of problems.

Too much JS can affect performance and user experience negatively. It increases loading time and memory consumption. Sometimes it brings about seemingly random jankiness or unresponsiveness. There's also how it can pose security and privacy risks . There can be malicious code hidden isnide libraries that can access sensitive data. Nefarious folks can also use it to track or manipulate user activity or information.

Then there's the random side effects. Don't mention those.

Now a days I advise using JS sparingly and responsibly on the front-end. This follows the principal of Progressive Enhancement, which moves the web forward without leaving anyone behind. This means providing a basic functionality and content for all users using HTML and CSS only, and then adding JS as an optional layer for enhancing the user experience.

The Dream Is Obtainable

There are libraries like HTMX and templating engines that let us dynamically build webpages and serve little JS. HTMX allows us to access AJAX, CSS Transitions, WebSockets and Server Sent Events using HTML attributes.

Combining HTMX and server rendered pages, we can create web apps that feel like single-page applications without the overhead of a front-end framework. We write HTML templates on the server-side, and use HTMX to add interactivity and dynamism on the browser-side. Also, we can use HTMX to make partial updates to the DOM without reloading the page, to add transitions and animations, and to communicate with the server using Server-Sent Events and Web Sockets.

Here's how we use HTMX to load a new page when a user clicks on a link, without reloading the page:

<a href="/about" hx-get="/about" hx-swap="outerHTML">About</a>

Here's how we submit a form and update a section of the page with the response, without reloading the page:

<form hx-post="/submit" hx-swap="innerHTML" hx-target="#result">
  <input type="text" name="name" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>
<div id="result"></div>

Here's how we use HTMX to add a fade-in effect when a new element is added to the page:

<div hx-trigger="load" hx-swap="afterbegin" hx-get="/new-element" hx-swap-oob="true" class="fade-in"></div>

I recommend Pug/Jade for a templating engines because it falls in line with minimalism. I use it to write HTML templates in a more concise and readable way:

doctype html
html(lang="en")
  head
    title My Web App
    script(src="/htmx.min.js")
  body
    h1 My Web App
    p Welcome to my web app!
    a(href="/about" hx-get="/about" hx-swap="outerHTML") About
    form(hx-post="/submit" hx-swap="innerHTML" hx-target="#result")
      input(type="text" name="name" placeholder="Enter your name")
      button(type="submit") Submit
    div#result
    div(hx-trigger="load" hx-swap="afterbegin" hx-get="/new-element" hx-swap-oob="true" class="fade-in")

My point is simple. With just a few simple tools we can create web apps that are fast, elegant, and error-free. We can leverage the power of the web as a platform, without sacrificing performance, usability, or accessibility.

It's Up To Us

The web is an amazing platform that offers endless possibilities for web developers. However, it also poses many challenges and complexities that require careful consideration and planning. By adopting a minimalist approach to web development, web developers create web apps that are fast, simple, and elegant. All the while following best practices and the standards of the web community.

Comments

[Anwar]

I am on this moment on my tech journey where I share what you explained. I think the web is the final destination, and I also think shipping the least JS is the way. SSR web apps are just so much more easy, reliable, and less browser-compatibility issues prone. I also feel this is the right bet thanks to more and more APIs ship in favor of SSR, like the view transition API and PWAs. I have a great time working on predzo.com, with solid reliable techs, not following every hot trends and having to refractor my app every 6 months or so 😅 just focusing on the user need!