Dynamic content without JavaScript

What if I tell you that you can fetch/create dynamic content coming from a server in your browser (like AJAX does) without any line of JavaScript? Doubtful? Allow me to convince you otherwise…

A quick example first

You might have noticed the list of users arrives in chunks, each chunk being a user name. This example doesn’t use Ajax, Web-Sockets or Server-Sent events or any JavaScript. But instead takes advantage of chunked transfer encoding. You will find that example on my github.

Chunked transfer encoding

Chunked transfer encoding was a mechanism introduced a long time ago with HTTP 1.1 which allows for data packet (or chunk) to be sent to the receiver, in our case the browser. How cool is that? Basically it means you can send chunks of data to the browser as soon as they are available and the HTTP connection won’t close until the final chunk is received.

Here comes streams

How can we send chunks of data to the browser? The answer is streams.

send to the browser chunk of data as soon as they are available

If you’d like to learn more about streams, I recommend these excellent articles by James Halliday and Max Ogden. To summarize, streams allow you to asynchronously read or write chunks of data immediately as they are received.

Using nodejs, streams are really straightforward and many of the native modules provided by node actually inherit or implement streams. For example, you can create web servers that return streams instead of buffering the entire content of a page into memory:

And this is the key! We can send chunks of data to the browser as soon as they are available using streams.

In the code above, we send a name to the browser every second and inform the browser to close the HTTP connection after 4 seconds once we have sent all of the users names. Run the following code and let the magic happen! The module HTTP lets you use chunk transfer encoding through streams.

Sequential rendering

While sending data in chunks, the browser will always render elements in order. For example, the browser won’t receive what comes after the list of users until we have sent all the names (after 4 seconds).

This is a problem! Static content should be rendered right away…

CSS Flexbox comes to rescue

Remember the amazing GIF at the beginning of this article? The HTML code to render such a page would logically be something like:

As the chunks of data are sent in order, the footer would appear only after a few seconds. This is a poor user experience and ideally we want to be able to send all static content right away and not make the user wait.

Using flexbox, we can render the footer before the list of users (still displaying the footer at the bottom of the page). Here is the code:

Voila! Although I would like to finish the article on this note, I will point out some of the benefits of using chunked transfer encoding with streams:

  • SEO friendly (server side rendering)
  • reusability
  • less front end mess
  • critical rendering path?

Cheers :)