Streaming Templates in node and the browser

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

I'm currently building a simple web app and I needed a simple templating engine that can stream dynamically generated responses to the network. It's hard to build sites that are fast. One known pattern for building sites that render quickly is to ensure that the browser gets the HTML as quickly as possible. Yet, many of the tools (middleware and templating engines) that developers use to build sites wait for the response from the server application to be completely created before they are put on to the wire and send to the client. Streaming template engines are important because they don't wait until the entire response is ready before sending the data on, but they are also able to wait for gathered data (say from a database request) before proceeding with the rest of the response. <figure><video src="https://paul.kinlan.me/videos/2020-06-12-streaming-templates-in-node-and-the-browser-0.mp4" alt="Streaming templating in action" controls></video></figure> It feels like there are scant few streaming templating engines in Node. There are fewer that work in Node, in the Browser and in a service worker. I came across the awesome <a href="https://www.npmjs.com/package/flora-tmpl">flora-tmpl</a> project. It's a streaming templating engine that uses template literals <code>html`Hello ${world}`;</code> to make it easy to author streaming templates, and if you just need them for Node JS, then you should totally use it. The project I am building needs to work in Node, the Browser and a Service Worker (I am running my app in both Node and the SW) and whilst it would have been possible to browserify the library, it makes it a lot larger than I need it to be. I know enough about <code>ReadableStreams</code> in the browser to damage, so I wanted to see if I could port <code>flora-tmpl</code> to use the WhatWG streams API... <a href="https://www.npmjs.com/package/whatwg-flora-tmpl">whatwg-flora-tmpl</a> (I might have to change the name, it's not affiliated with the whatwg or flora really) is a small library that does pretty much everything <code>flora</code> does, but using the WhatWG Streams API in the browser (and a polyfill in Node). The template literal function takes your, well, template and returns a <code>ReadableStream</code>, the template function will then push string literals on the stream, and when it needs to evaluate a variable, it will do that and then enqueue that on to the stream too. This means, for example that you can generate responses in a service worker fetch event like: <code>new Response(tmpl`Hello ${world}`)</code>; It's not just basic values that can be evaluated (such as strings, numbers and arrays), it can also evaluate <code>ReadableStreams</code>, which means you stream templates in your template. The demo for the video at the start of this article is below (you wouldn't do this in real life, it's just to show the templating engine can also embed readable streams which means it can embed the templating engine and stream that response too) <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-JavaScript" data-lang="JavaScript">import tmpl from '../lib/index.js'; import streams from "web-streams-polyfill"; const read = (stream) => { const reader = stream.getReader(); const decoder = new TextDecoder(); return reader.read().then(function process(result) { if (result.done) { return; } console.log(decoder.decode(result.value)); return reader.read().then(process); }); }; const encoder = new TextEncoder(); const title = 'Awesome'; tmpl`<html> <head> <title>${title}</title> </head> <body> ${new streams.ReadableStream({ start(controller) { let counter = 0; const interval = setInterval(async () => { controller.enqueue(encoder.encode(`${counter++}`)); if (counter >= 10) { controller.close(); clearInterval(interval); } }, 1000); } })} </body>`.then(read); </code></pre></div>A better (albeit a lot more complex) example is the one I am using in my project. <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-JavaScript" data-lang="JavaScript">const head = (data, bodyTemplate) => template`<!DOCTYPE html> <html> <head> <title>Baby Logger</title> <script src="https://paul.kinlan.me/client.js" type="module" defer></script> <link rel="stylesheet" href="https://paul.kinlan.me/styles/main.css"> <link rel="manifest" href="https://paul.kinlan.me/manifest.json"> <meta name="viewport" content="width=device-width"> </head> <body> ${bodyTemplate} </body> </html>`; const body = (data, items) => template`<header> <h1>Baby Log</h1> <div><a href="https://paul.kinlan.me/">All</a>, <a href="https://paul.kinlan.me/feeds">Feeds</a>, <a href="https://paul.kinlan.me/sleeps">Sleeps</a>, <a href="https://paul.kinlan.me/poops">Poops</a>, <a href="https://paul.kinlan.me/wees">Wees</a></div> </header> <main> <header> <h2>${data.header}</h2> </header> <section> ${items} </section> </main> <footer> Add<a href="https://paul.kinlan.me/feeds/new" title="Add a feed">?</a><a href="https://paul.kinlan.me/sleeps/new" title="Add a Sleep">?</a><a href="https://paul.kinlan.me/poops/new" title="Add a Poop">?</a><a href="https://paul.kinlan.me/wees/new" title="Add a Wee">⛲️</a> </footer>`; const aggregate = (data) => { // Do a lot of work in IndexedDB and other data munging } new Response(template`${head(data, body(data, template`${aggregate(data)}`) )}`); </code></pre></div>We have many templates, <code>head</code> generates the skeleton of the HTML, <code>body</code> is the content of the page based on the output of <code>aggregate</code>. The latter of those functions does a lot of asynchronous work which takes some time, however the response can start rendering pretty much straight away because the <code>head</code> and <code>body</code> functions mostly output text. I think it's pretty neat, and hopefully I can write up a lot more about the architecture of the app I am building that uses this across the Server, Client and Service Worker. Finally, a big shout out to <a href="https://twitter.com/matthewcp">Matthew Phillips</a> who wrote the awesome original version of <a href="https://github.com/matthewp/flora">flora-tmpl</a>.

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

Print Share Comment Cite Upload Translate Updates

APA

Paul Kinlan | Sciencx (2020-06-12T23:32:44+00:00) Streaming Templates in node and the browser. Retrieved from https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/

MLA

" » Streaming Templates in node and the browser." Paul Kinlan | Sciencx - Friday June 12, 2020, https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/

HARVARD

Paul Kinlan | Sciencx Friday June 12, 2020 » Streaming Templates in node and the browser., viewed ,<https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/>

VANCOUVER

Paul Kinlan | Sciencx - » Streaming Templates in node and the browser. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/

CHICAGO

" » Streaming Templates in node and the browser." Paul Kinlan | Sciencx - Accessed . https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/

IEEE

" » Streaming Templates in node and the browser." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/. [Accessed: ]

rf:citation

» Streaming Templates in node and the browser | Paul Kinlan | Sciencx | https://www.scien.cx/2020/06/12/streaming-templates-in-node-and-the-browser/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts