This is somewhat continuation of an Angular.JS templates related article.
I am not so keen of keeping two codebases for the same purpose, but I am experimenting with a new approach, where server renders the simple document using the same data, including the web-app script and serves the same data in AJAX requests of the provided web-app.
Typical example would any big newspaper website with tons of articles. But as most of the readers, you followed the link to an article from some feed, or search results page. But instead of loading just the article you are interested in the first-place, the whole navigation tree, related articles, side-bars, comments, fonts, CSS needs to be loaded to use the web page. It’s insane bloat from the I-just-want-to-read-the-article perspective.
How about this:
- Render just the requested document (article) without the unrelated stuff (like sidebars, related articles, comments, etc.)
- Load data, templates, CSS using AJAX and build the full-site lazily on the client
It’s not so hard to render readable representation of the article on the server. Just let go the urge to serve fancy website on the server. Let the client do the heavy lifting.
The server-side code base for the webpage would be so simple you might not need to maintain it at all. All the focus would go to the web-app website version itself.
Rendered parts of webpage could be only the:
- resource requested
The web-app, the interactivity gets (maybe) loaded later depending on browser features/capabilities, speed of network, [name your own conditions].
- Rendering just the core data, just the resource, is easy. Rendering such document could be template-less, or could use only the native PHP templating =$post->title?>, which is sufficient to render data.
- It goes well with the mobile-first approach.
- Less HTML means less CSS, means there’s no need for hacking CSS. There’s even less CSS needed to render such simplified document. Authoring and maintaining such CSS should be easier than creating above-the-fold CSS.
GETrequests dynamic. (Caching can be handled by Varnish or other dedicated solutions.)
- Most of the extras (web-app, “under-the-fold CSS”, etc.) can be lazy-loaded later which leads to faster page load/render times, the Angular.JS could be lazy-loaded too.
- Using the “no-js” conditional class the simplified content can be hidden/changed/re-styled after loading the web-app.
- Helps to pass the page-weight under 14kb of compressed code.
From the point where the web-app is loaded, the content can be loaded using AJAX in lighter form than HTML, without reloading the frame.
Let me know what do you think.