The triple-q methodology for Single Page Application ("SPA") websites is described in detail here.
Triple-q is a methodology rather than a vast library or framework for SPA websites, whereby HTML components are stored as strings but constructed using JSON within each string. A single JavaScript function, renderElements(), accepts this string and renders the HTML into the browser and DOM tree.
Given the potential requirement to also incorporate data, possibly returned by a fetch() or other API/database call to a server, it is assumed such data will be returned in a JSON-encoded two-dimensional indexed array (as would be the case from a relational database call) and that this data would be passed to a second JavaScript function, mergeDataAndRender(), that replaces each qqqX (where X is the integer value of the array index) with the appropriate data before passing the resulting string to the renderElements() function.
The triple-q methodology was devised by Steve Smith in late 2020. At the time, he had been asked to build the Aventec cloud-based system and it was clear from the initial outline specification that the system should all run within a single page as only a limited number of elements needed to change with each user interaction.
Steve had limited experience of JavaScript at the time and, based on numerous sources of advice, was minded to continue developing his knowledge of that language, rather than start learning a front-end framework such as Angular or React. However, he was also aware from working on a previous system that creating HTML elements, setting attributes and then inserting them into the DOM was a particularly cumbersome process and a better way should be possible.
After a short amount of trial and error, Steve came up the the two functions referred to in the Summary.
Frameworks are great for getting the job done and the substantial libraries available saves many developers from ‘reinventing the wheel’. However, they do have disadvantages in the amount of space and time. For instance, when you run create-react-app, you’ll probably find it downloads over 40,000 files and takes up 400Mb of space in your development environment. You’ll also need to get to grips with JSX and other features of React to build a working website.
The triple-q methodology is just using simple JavaScript and takes up no real space. There’s no ‘virtual DOM’, so everything runs really fast. In the Aventec system there are just over 300 HTML components consisting of around 5,000 HTML elements all stored as strings in a single file that’s less than 1Mb in size, so quickly downloads to the browser as soon as the user logs into the application.
The use of indexed rather than associative arrays or true JSON files means it not designed to work with objects. It has really been designed around knowing that your going to get a relational dataset back from an SQL query.
It’s early days so there are no specific tools yet for building the strings in an editor such as VS Code. Rather, it’s easier to build the JSON and then remove all the newlines and embed into a string.
The aim will be to add some examples to this page and also make code available for download from GitHub.
It’s also not being claimed here that the methodology is original or that others have not followed similar methodologies elsewhere.
Thanks for reading!