Triggering a Client Cache Refresh

More and more web sites are using a single page style architecture.  This means there is a bunch of static resources (aka assets) including:

• JS 
• CSS
• HTML templates
• Images
• ...

all residing in the client's browser.  For performance reasons, the static content is usually cached. And like all caches, eventually the data gets stale and the cache must be refreshed.  One excellent technique for achieving this in the web tier is Cache busting (see: here and here).
However, even using this excellent pattern there still needs to be some sort of trigger to indicate that things have gone out of date.  Some options:

HTML5 Sockets

In this case a server can send a request to any client to say go and get the new stuff.

Comet style polling

The Client consistently polls the server in the background asking if there is a new version available. When the server says there is, the client is triggered to start cache busting.

Both of these are good approaches but in some edge cases may not be available:

1. Architecture may not allow HTML5 sockets - might be some secure banking web site that just doesn't like it.
2. The Comet style polling might be too intensive and may just leave open edge cases where a critical update is needed but the polling thread is waiting to get fired. 

Client refresh notification pattern

Recently, on a project neither of the above approaches were available, so I needed something else which I shall now detail.  The solution was based on some existing concepts already in the architecture (which are useful for other things) and some new ones that needed to be introduced:

1. The UI always knows the current version it is on.  This was already burnt into the UI as part of the build process.
2. Every UI was already sending up the version it is on in a custom header. It was doing this for every request.  Note: this is very useful as it can make diagnosing problems easier. Someone seeing weird problems, nice to be able see their are on a old version straight away.

The following new concepts were then introduced:

1. The server would now always store the latest client version it has received.  This is easy to do and again handy thing to have anyway.
2. The server would then always add a custom header to every response to indicate the latest client version it has received.  Again, useful thing to have for anyone doing a bit of debugging with firebug or chrome web tools
3. Some simple logic would then be in the client, so that when it saw a different version in response to the one it sent up, it knows there's a later version out there and that's the trigger to start cache busting!   This should be done in central place for example an Angular filter (if you are using Angular)
4. Then as part of every release, just hit the server with latest client in the smoke testing. 
5. As soon as any other client makes a request, it will be told that there is a later client version out there and it should start cache busting.

So the clients effectively tell each other about the latest version but without ever talking to each other it's all via the server.  It's like the mediator pattern. But it's still probably confusing. So let's take a look at a diagram.

With respect to diagram above: 

• UI 1 has a later version (for example 1.5.1) of static assets than UI 2  (for example 1.5.0)
• Server thinks the latest version static assets is 1.5.0
• UI 1 then makes a request to the server and sends up the version of static assets it has e.g. 1.5.1
• Server sees 1.5.1 is newer than 1.5.0 and then updates its latest client version variable to 1.5.1
• UI 2 makes a request to the server and sends up the version of static assets it has which is 1.5.0
• Server sends response to UI 2 with a response header saying that the latest client version is 1.5.1
• UI 2 checks and sees that the response header client version is different to the version sent up and then starts busting the cache

Before the observant amongst you start saying this will never work in a real enterprise environment as you never have just one server (as in one JVM) you have several - true.  But then you just store the latest client version in a distributed cache (e.g. Infinispan) that they can all access. 

Note: In this example I am using two web clients and one back end server.  But note the exact same pattern could be used for back end micro-services that communicate with each other.  Basically anything where there is a range of distributed clients (they don't have to be web browsers) and caching of static resources is required this could be used. 

Until the next time, take care of yourselves. 

Book Review: Even Faster Websites (Steve Souders)

Author Steve Souders (Head Performance Engineer at Google, previously Chief Performance at Yahoo) grew to fame with the YSlow Firefox plugin - a super little gizmo which gave web developers all sorts of ideas for how to speed up their web sites. The book 'High Performance Web Sites: Essential Knowledge for Front-End Engineers book' elaborated on everything the YSlow plugin was telling you. That book effectively serves a forerunner to 'Even Faster Web Sites'. In fact there is an assumption the reader has already read it, is already familiar with all the points it made and is now prepared to dig deeper.  Anyone with an interest in performance is in for a treat with this little gem.



I thought 'Even Faster Web Sites' detailed many clever techiques to boost performance. Amongst some of my favourites:

Steve Sounders

• Create a <script> element and set its src attribute to a JavaScript file you want to download asychronously.
• Use the script onload's event - which will only be called when the script has finished downloading - to avoid race conditions.
• Succint explainations on how deep scope chains in JavaScript can degrade performance
• Tips on when to use if statements, switch statements and arrays for flow control.
• A good overview of the Comet Architectural approach and how it can be achieved.
• Domain sharding tips: split based on resource type e.g put CSS and images on one domain, everything else on another domain.

There are also timely reminders, including:

• That IFrames make it easy for the UserAgent to print part of a page and are a mechanism to split part of your document giving it independent characteristics.
• IFrames are more expensive to download.
• That a browser's busy indicator stops once the Window.onLoad event is fired.
• Some browsers have limits on how long the JavaScript engine can run
• Web proxies and security software can mangle the Accept-Encoding header of request so that they speed up their screening of the response from the web server in a process Souders refers to as Turle Tapping.
• Browsers enforce their maximum connections per server rule based on the hostname in the URL not the IP address it resolves to.
• That CSS selectors work in a "rightmost first" fashion.

It is a super book. Not just to get ideas to boost web performance but because it helps deepen architectural understanding of the web. There are many important parts in the Web tier: all the different resource types, sychronous / asychronous processing, the various ways blocking can happen, a very sophisticated object model, a funny old language by the name of JavaScript and of course the endless list of quirks from different browsers. There was a time when everything revolved around the database but now a deep understanding web is probably more important. This book most definetly helps deepen understanding of the Web Tier.

HTML5 F.A.Q.

HTML5 has been generating a lot of excitement in the web community as of late. It advances HTML so much that Steve Jobs commented in April 2010 it will render Adobe Flash unnecessary!  This was somewhat sensational considering the ubiquity of Flash.  For example, Flash is the technology used by the very popular site youtube  to display every single one of their videos in users' browsers.  There are many who think that if youtube move to HTML5 it could really be bye bye Flash (for example the popular Lockergnome).  This is something I find difficult to disagree with.
 
Now, I've just finished reading the excellent 'HTML5 Up and Running' by Mark Pilgrim and I put together a list of F.A.Q. about HTML5 which I hope gives you a good feel about what HTML5 brings to the table.

Enjoy :-)

HTML5 General
How do I declare my page to be HTML5?

Simply start it with: <!DOCTYPE html>

Give some examples where HTML5 tries to standardise things?

• The <nav> element is used for navigation. Before developers would use their own CSS classes to style html lists to get the effect of tabs and navigation lists.
• HTML5 introduces elements such as <footer>,<header> .  Before developers would write their own custom CSS classes for headers and footers. These CSS classes would have their own naming which could vary from developer to developer.

Browser Support
Is it possible for browsers to support some html 5 features and not others?
Yes.  Firefox 3.0+, Safari 3.0+, Chrome 3.0+ all support canvas. However, if you want geolocation well then it's Firefox 3.5+, Safari 5.0+, Chrome 5.0+.

What is the best way for your page to detect what html 5 features are supported?
Use the modernizr javascript library. It's brilliant.  Not only can it very easily confirm if features such as canvas, video, webworker are supported it can also detect more advanced things such as exactly which video formats (ogg, h264) are supported

Canvas

What is a canvas?
A canvas is rectangle which can be defined for your web page.  There are a range of simple APIs which can be used to draw on the canvas.  They are from the very simple to the very sophisticated - which can be used for animations and even games such as Mutant Zombie Monsters by Bill Scott

Can I have more than one Canvas on the same page?
Yes.  And give each canvas its own id and you can access it like any other element.

How do I get Canvas support for IE7, IE8?
Download the ExplorerCanvas Javascript library (http://code.google.com/explorercanvas/)

Data Storage
Name some differences between HTML5 data storage and cookies?

• Cookies don't store any information. They are just pointers to information that the client can send to the server.
• With Cookies the data being stored is server side. HTML5 data storage is client side.
• Storage mechanism are going to be more sophisticated server side. HTML5 client side data storage will have limitations.

Form Autofocus
What's the big deal with autofocus in HTML5?

• Now defining which part of the page gets default focus is easy
• All form controls can have the attribute autofocus
• Because autofocus can now be done in a standardised way, (i.e. no need for complex javascript) it's easier for a browser to provide the option to disable it.

Geolocation
What kind of location information do I get with Geolocation?
The location information that you can get is basically any of the properties of the position object. These are pretty self explanatory and include:

• coords.latitude
• coords.longitude
• coords.altitude
• coords.accuracy
• coords.altitudeAccuracy
• coords.heading
• coords.speed
• timestamp

Does the browser always have to ask the user before any calls can be made to geolocation APIs?
Yes.

Input Types
Give some examples of the new input types supported in HTML 5?
Search boxes, Spin Boxes, Sliders, Color Pickers, Telephone numbers, Web Addresses, Email Addresses, Calendar date pickers, Months, Weeks, Times.

Placeholder text
Does HTML5 include support for placeholder text and what is it?
Placeholder text is default text in an input field used to prompt the user what they need to write.
And Yes its supported.

Video
So all I need to do to show a video on my page is use the <video> element?
Well no. You need to ensure the web page supports:

• the containing format (e.g. mpeg - 4, ogg, WebM, Audio Video Interleave)
• the video codec format (e.g. H.264, Theora, VP8)
• the audio codec format used in the video (e.g. mp3, vorbis)
  

There is no single combination of container and codecs that works in all browsers.
The <video> element makes it easy to define a preference and fallback formats.

How do I include controls (play, stop, etc.) for my video?
Just include the controls flag. e.g. <video src="myvideo.webm" width="100" height="50" controls></video>

Web Worker 

What is a web worker?
A web worker is a way of running javascript in the background on a separate thread.
You can spawn multiple web worker threads.

Give an example of when you would use a web worker?

If you had to do some number crunching or background I/O and didn't want to block out the user.

Anything else...
Name some other HTML5 features you haven't even covered here?

Microdata, offline and caching features, the <article> element which allows developer more control over headers, svg support and presumably many more...

References

1. Excellent online ref for HTML 5 http://diveintohtml5.org/
2. The brilliant modernizr library which lets you check what html 5 support you have http://www.modernizr.com/
3. Great demos of HTML5 canvas http://www.canvasdemos.com/
4. Great HTML5 demos and tutorials http://www.html5rocks.com/en/tutorials/workers/basics/
5. The WHATWG community http://www.whatwg.org/
6. More HTML5 demos http://html5demos.com/