Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>All the frameworks mentioned only work client-side. That being side, they are worth a look as they are a piece of the puzzle that you are facing.</p> <p>Your design goals are exactly what I am trying to achieve with my current project. What I am attempting to do at the moment is:</p> <p><strong>Client-Side</strong></p> <p>Using Backbone + (some templating engine here)</p> <p><strong>Server-Side</strong></p> <p>Renders the first set of html, as well as renders some JSON data that Backbone can pick up and work with (for example, current page that was loaded, max pages etc.)</p> <p><strong>Example</strong></p> <p>Client loads: <a href="http://mysite.com/blog/archive/5" rel="nofollow">http://mysite.com/blog/archive/5</a></p> <p>Server renders: </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; var data = { page:5 // Rendered by Server, maxPages: 10 }; $(function(){ // Hook up all Backbone stuff, and hook into interaction events }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Content --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>This solves Design Points 2 and 3: your server loads the initial state of your web application, and the user can navigate client-side from there. </p> <p>With design point 1: On the client-side, everything is fine. However, for server-side you require a js engine to render your templates as it is. LinkedIn mentions this in their article: </p> <blockquote> <ul> <li><strong>Server side support:</strong> if you have a client that can't execute JavaScript, such as a search engine crawler, a page must be rendered server side. Once written, the same dust.js template can be rendered not only in the browser, but also on the server using <a href="http://nodejs.org/" rel="nofollow">node.js</a> or <a href="http://www.mozilla.org/rhino/" rel="nofollow">Rhino</a>.</li> </ul> </blockquote> <p>So you're stuck with 2 options: </p> <ul> <li>use a templating engine with either node.js or Rhino, or</li> <li>find a templating engine with support in other tech stacks.</li> </ul> <p>Funnily enough, thanks to the post above, I realised that <a href="http://mustache.github.com/" rel="nofollow">Mustache</a>, which have libraries available for most common stacks, fulfils this need perfectly, so I will start having a look at integrating it with my project. (Not sure if there are any libraries available for Handlebars.js) This should allow us to write Mustache.js templates for both server and client side, and have them render html on either ends with the same templates. </p> <p>EDIT: Should not that a "server-side" solution does not necessarily need to be in your language/stack of choice. For example, just because you're using Dust.js mean you HAVE to code your entire application in Node.JS. It may be possible to get by executing your compilation scripts via a shell command instead.</p> <p>EDIT: turns out that Mustache does not seem to have a "precompilation" solution, meaning that templates need to be rendered directly into the page for client-side rendering (thus no caching), which isn't 100% ideal.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload