1. 17

  2. 5

    Found this mentioned by @haxor in the “What are you working on this week?” thread. I found it an interesting read.

    One thing that I’m not quite sure about is @haxor’s interpretation of PPK. He suggests that PPK could have meant:

    1. Do not use client-side templating at all. Render all data server-side as HTML for the initial page view.
    2. Do not send an AJAX request back to the server after loading the shell of your app (a style that plagues GWT apps like AdWords and Twitter’s old UI). Instead, you should provide the initial view data server-side in the first page HTML (i.e., as a JSON blob) and render it with JavaScript immediately after load.

    My guess is that PPK actually meant a third option: The full HTML for the page (including “live data”) should be rendered on the server. The “live data” can be updated by JavaScript afterwards as needed.

    1. 1

      I agree. I think that’s equivalent to #1 for the purpose of this test.

      1. 1

        How do you fit a view cache such as Varnish into the mix?

        1. 1

          If the JSON data is in the HTML page, then Varnish can cache that too. The CSS and JS can be separate resources (also in varnish) or inlined. It’s the same old techniques, it’s just that the rendering is done client side.

          1. 1

            I think my point was, if the data is user specific, then this breaks caching. So sure, you can (and should) still server-side render most of the content, but you will need to fall back on XHR to get user specific content outside of caching, and depending on the nature of your application you may have a lot of user specific content. You can server side render a lot of that as well, via PJAX, but you will still need to make those requests.

            1. 1

              You can easily VARY on a user-specific-key, the issue is just that unless the fragment is used very often by the user, your cache is cold most of the time.

      2. 1

        The headline’s a bit misleading - the big experimental result is that client-side templating is not generally wrong; in fact, under the author’s test conditions, for large layouts it’s better.

        1. 1

          Well.. the author also used pretty much the bare minimum of JS in his examples, with the JS inlined in the html page as well as the data, which is of course fine if that is what you want to test.

          For an ‘in the wild’ example I would assume some JS framework would be used, which would need to be fetched (or not, depending on if it is present in local cache via some public cdn), parsed, and loaded as well. It would be interesting to see how that impacts the tested load times.

          I would also be interested in the comparison of client side energy impact by the two methods.

          EDIT: Some references to overall page loading with heavy js is in the referenced site that the author referred to.