Last week, I pushed a big update to the Lean Web Club that removed all JavaScript dependencies.
While most of the platform was server-rendered HTML stuff, some things required JavaScript, including…
- The login form
- The password update form
- The buttons to mark items as complete or bookmark them
- The list of completed and bookmarked items
Since I've been raving about how awesome HTML Web Components are, I wanted to use them to their full potential on a big project.
The entire Lean Web Club site now works without JS, with the exception of the PW reset feature (I'll be fixing that soon) and the Stripe integration, which unfortunately requires JS on their end.
Every interaction on the site is now a <form> element that submits to the server with a full page reload by default.
I created just a few small Web Components that, when JS loads, progressively enhance the default behavior to use Ajax and skip the page refresh.
The whole site is now faster, more resilient, and frankly easier for me to maintain and reason about.
As an example, the Bookmark button used to look like this…
<div data-bookmark="buttons"></div>I had a separate JavaScript file that would inject the button HTML into that empty element, listen for click events, and make a fetch() call.
Now, the server-rendered HTML looks like this…
<fave-completed> <form class="input-inline no-margin-bottom" action="https://leanwebclub.com/api/favorites" method="POST"> <input type="hidden" name="id" value=""> <input type="hidden" name="do" value=""> <button>Bookmark</button> </form> </fave-completed>When the JavaScript becomes available, the <fave-completed> Web Component makes a fetch() request in the background and updates the UI.
What I love about this setup as a developer is that I can much more easily see what's happening with this element just from the HTML alone. And because I don't have to render HTML, my Web Component is much more reusable than the previous JS was, and less than half the size.
And for the people who use my site, the get interactive HTML nearly instantly, and can still use all of the site features even if JS fails entirely.
Tomorrow, I'll be talking about how I use PHP Islands to create pockets of dynamic content in a mostly static application.
I can help you ship faster, reduce costs, and simplify development. Get unlimited JavaScript consulting for a simple fixed monthly price.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] No JavaScript, No Problem"