Progressive Enhancement ("RedactJS")

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

As part of exploration into #305 and conversations during our recently weekly meetings, it seems like there was something we might have overlooked along the way on this project, and that we designed it SPA first, rather than SSG first. (IMO)

I would like to open this issue to evaluate how efficiently we are shipping / bundling the output of Greenwood. I would like to see if there are ways the minimum bundle size could be mitigated even further. A website shouldn't really need all this fancy SPA magic, at least not by default and in the final bundle.

import { html, LitElement } from 'lit-element';
import { connectRouter } from 'lit-redux-router';
import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
import thunk from 'redux-thunk';

// eslint-disable-next-line no-underscore-dangle
const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;

const store = createStore((state) => state,
  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))
);

As much as possible a Greenwood site by default should work without all the JS needed to render the site, and otherwise make it fall back gracefully. JavaScript should be seen as a progressive enhancement opted-into by the user.

It should be interest to note that if you disable the index.js bundle from loading on the main site, which is 528 KB (granted about half of that is due to #305 ) the whole site still works except for the fading in / out text on the home page and the shelf sub menu clicks. At least the shelf would probably still work if using native click handler and HTMLElement.... Just some food for thought 🍖 🤔 💭

Details

We should have at least two modes

• SSG - should be purely static by default. We have this currently but it is tightly coupled to Hybrid mode in that parts of it can’t work without JavaScript. This however is due to our usage of lit and LitElement for the shelf, so of course lit should be bundled. What if we just used HTMLElement for our core templates?
• Hybrid (SSG + SPA) - If JavaScript is required / used by the user, we should then bundle that opted-in JavaScript and at least ship it using async / defer.

Vite it a good examples of a project aiming for similar goals
https://twitter.com/youyuxi/status/1265680831625998342

Also this quote I found from somewhere, which I can confirm...

[thescientist13]

Should create issue for additional enhancements like:

• inlining (critical) CSS into inline <style> tags
• inlining JS into inline <script> tags
• future tracking - intelligent tracking

[thescientist13]

Looking to re-incorporate this as part if #355 because now that we are starting from scratch, we should figure out how to use progressive enhancements (via plugins) to see how we can accomplish this. Should figure out how to enable:

1. default - ships your code as is
2. strict mode (via configuration)
3. support a spa option as a plugin
4. resolve components are over rendering #348 and inline script not working with strict optimization during development #413

Additional thoughts from #418

• Smaller / lighter router?
• rollup dynamic input vars
• puppeteer optional when using SPA?

Should create issues for additional enhancements like:

• prefetch / preload / defer / etc
• <link> modulepreload
• inlining (critical) CSS into inline <style> tags
• inlining JS into inline <script> tags
• intelligent asset copying?