first_page

A Return to Progressive Enhancement with LitHtml and 11ty (@eleven_ty)

Who is old enough to remember what progressive enhancement is? This term is a relic from the Web 1.0 days, ending about 16 years ago. Web 1.0 will forever be marginalized by the billions made from Web 2.0 and beyond. Post-Web-1.0 is about loading a near-infinite, continuous surface of high-performance, data-collecting engagement, starting with the Single Page Application (SPA) and, perhaps, ending with dog-shaped IOT. Thinking of the Web as discrete documents is not welcome in this brave new world.

From where I am standing, Web 1.0 was about documents in particular and identifiable resources (RESTful indicators) in general. Web 1.0 was also about open standards. Web 1.0 thinking survives here and there in what we call the Jamstack, another brave new world led by Mathias Biilmann and Christian Bach of Netlify. Mathias is a fluent speaker of Ruby so, for those of us grunting with Javascript (and the eventual, horrible truth of C++), we may find ourselves attracted to Zach Leatherman’s eleventy. (Zach, by the way, is on the Netlify team.)

For those of us who like to say, “What the hell are you talking about!,”—or just “Wha?” for short, I think Raymond Camden’s introduction to eleventy, embedded in his “Highlight: Adding Location Services to Your JAMStack [06/18 @ 7PM PT]” Twitch talk, is an excellent way to place a move to eleventy in particular and Jamstack in general in a compelling, coherent context. Raymond did not stop using Vue.js when he got into the Jamstack; like me, he just added eleventy to his toolbox. I am not “abandoning” my investments in Angular, I am just adding the ability to respect the document as well as the SPA.

I assume the following diagram makes all of this ‘adding’ easier to understand:

progressive enhancement in 2020

Unicode content as markup. At the bottom of this diagram, I am starting with ‘Unicode content as markup’ which, for the purposes of this article, is just another way of saying static HTML documents—documents that can be generated by eleventy. Then, we proceed upward eventually along two paths. One path leads to Angular (the SPA) and the other has several levels of enhancement, leading to another Google technology called LitHtml which finally can lead right into Angular. The SPA path assumes your static HTML is a container for hosting and the other path assumes your static HTML is just a document.

The diagram is showing you that the left path is essentially all-in on SPA while the right path has far more granular levels of expressive power. This right path only makes sense when you are thinking about enhancing discrete documents (or other resources). Most of us Web developers show our respect for discrete documents when we build our Blog (because most of us cannot become a Jedi unless we build our own Blog site). For me, the ideas behind the diagram above were put into practice when I built my eleventy-based Blog.

Material Design. The next level of enhancement progress is the use of CSS technology which my practice confines to Material Design, another Google effort began in 2014.

ECMAScript 6 or later. ECMAScript 2015 or ES6 brings us modules via the import keyword. This “good part” of Javascript is an essential building block that I would have found difficult to live without in a post-jQuery Javascript world.

Light-DOM manipulation with RxJS and LitHtml. The ‘Light-DOM’ is just the DOM—and, for over a decade, jQuery, a masterpiece of John Resig, was the undisputed leader of DOM manipulation. It could only be unseated from its position of prominence by advances in W3C standards, implemented by the leading browser technology. These technological advances lead me to RxJS, starring ex-Angular-team member Ben Lesh, and LitHtml, a Polymer project starring Justin Fagnani of Google.

RxJS (which happens to be a core component of Angular) wraps the XMLHttpRequest (XHR) API and the Fetch API under a reactive layer, featuring the Observable.

LitHtml takes advantage of Javascript template literals, specifically tagged templates. It allows us to move beyond the need for, say, Moustache.js and transition into browser standards. In SPA terms, LitHtml is here to take care of one-way data-binding.

LitElement and Shadow-DOM manipulation. LitElement represents our transition into the the realm of the Shadow DOM populated with the Web Component. It may be important to highlight these points:

The promise here is that Angular can be considered a destination for Web Components. And, with Angular elements, an Angular SPA can be ‘reduced’ to a Web Component. It should now be considered quite ignorant to regard the static HTML files generated by eleventy as being hopelessly separated from the SPA application. We see here that there are progressive levels of expression, providing a new kind of user experience that was not easily possible before 2018.

Related Resources

@BryanWilhite