Tech Preview: Edgestash - Making the mobile web faster

This summer Varnish Software decided to do something very ambitious. We decided to make the web a faster place. Now that statement may leave you scratching your head. Doesn't Varnish Cache already exist and hasn't it already made the web a lot faster?

Straight From The Lab: Introducing Edgestash

So what is Edgestash and how does it make the web, particularly the mobile web, a faster place? A typical modern website is assembled in the browser using JavaScript, content, templates, and JSON data. In this scenario, most of this content being assembled in the browser is already being stored and delivered from cache, but with little effect. So what if Varnish Plus were able to do that page assembly using the bits and pieces already stored in its cache? In particular, take a web page, assemble it using JSON and content from different sources, and deliver all of that in a single composed response.

Currently browser-based page assembly requires downloading and executing a JavaScript framework (Angular, React, Ember, Vue, etc.) and then executing custom code, which then downloads more data and then that kicks off the actual page assembly. Page assembly can be a lengthy and time-consuming process of updating and manipulating content via the DOM. This can then trigger page reflows and repaints (reflows and repaints are not a good mobile experience, as an ever-growing, long-suffering army of mobile web users can attest). This whole process can take anywhere from a few seconds to tens of seconds on a typical mobile browser, even with HTTP/2. 

Edgestash can take that process down to tens of milliseconds, which in some cases is a 100x speed-up.

A Framework Built For Performance

How is it possible to see such a large performance gain with Edgestash?

First, Edgestash is a pure templating language. It does not have to execute any JavaScript code to assemble a page. This templating language has its roots in Mustache, but has (and can be) extended to more expressive syntaxes like you see with Angular, Ember, Handlebars, et al.

Second, because the templates and associated JSON data are fetched from a backend and stored into cache, Edgestash can exploit this and compile both into a highly optimized byte code and store that into cache as well. So when it comes time to do the actual page assembly and delivery, it simply executes the byte code. The resulting assembly time is targeted to be under a single millisecond (compile times are also targeted to be sub-millisecond). Every time that same template is used or that same JSON is searched, Edgestash reaps the benefits of that compilation step.

Finally, all of this technology is built on the extremely high-performance core of Varnish Cache. Edgestash plays very well with VCL and any kind of custom logic required for a given website. Also, given Varnish Cache's strategic position at the edge of your data center or network, latencies will always be at a minimum. Not only does this give you the fastest possible page response and load times, fetching all those bits and pieces to assemble the page will be done on high-speed internet backbones. You also get the added bonus of not having you expose API data services directly to the browser. Edgestash can even be used to compose an API from other APIs.

Edgestash Example

Given the following Edgestash template (a simple Mustache example):

Z{#name}}
  Welcome Z{name}}! Member since Z{join_date}}.
Z{/name}}
Z{^name}}
  Welcome Guest! <a href="/signup">Signup</a>
Z{/name}}

The response will vary depending on the JSON used. For example, with this JSON:

{
  "name":"Chris Bar",
  "join_date": 2013
}

You will get the following response:

Welcome Chris Bar! Member since 2013.

If the JSON resulted in a 404, you will see this:

Welcome Guest! Signup

The point here is that a lot of the logic that is being used to assemble pages in the browser can be migrated to the edge (server-side). Because of the high-performance nature of Edgestash and its position between your backend and your user's browser, you can think of Edgestash as content rendering on the wire. It seamlessly happens on the network. Client-side logic and page assembly can still exist, but when complemented with this kind of edge-side rendering, it becomes much more manageable and high performance, especially on mobile.

Access To Edgestash

Edgestash is currently beta on Varnish Plus only. If you would like to learn more or give it a spin, please contact us for a free no-risk trial. Also, did you know that AWS-based Varnish Plus Cloud pricing starts at $0.20 USD an hour?