A Return to Progressive Enhancement with LitHtml and
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.
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:
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
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.
- LitElement is just a base class of the Web Component, quite far from a framework
- the Shadow DOM is not a virtual DOM; React documentation, for example, makes a significant effort to distinguish the React Component from the Web Component
- it is a relatively useful oversimplification to compare the Shadow DOM to a special kind of
- for those of us that were introduced to
CUSTOM_ELEMENTS_SCHEMAwhen working with Karma-Jasmine in Angular, it has another use that allows us to re-use standard Web Components in Angular
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.
- “What Is the Difference Between Shadow DOM and Virtual DOM?”
- “Lit Element rendering strategies explained”
- “Angular 9 Web Components: Custom Elements & Shadow DOM”
- “9 Web Components UI Libraries You Should Know in 2020”
- “Web Components will replace your frontend framework”