CODEWITHSUNDEEP
javascripthtmlmodel-view-controllernode.js
Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276296

node.js website/app templating design

Short Version:

Templating done completely with serving one html file and loading page-specific data using ajax/sockets, with node, what sort of performance should I expect? design-wise good or bad?

Long Version

I'm currently in the process of learning to code better node. I'm a long time javascript fan and I'm currently trying to figure out good/bad practices in node.js

I'm thinking about templating, I'm struggling with how to seperate what I'm presenting from what I'm storing. I'm reading a lot of MVC articles and I really want to seperate the view logic without having messy code.

My Question is:

Let's say I have a website, it contains several files represent 'screens' the users see, let's say in this basic example the users should be able to see: Index, About, Contact, Portfolio.

Now I need these pages to load dynamically, meaning I don't want to have to update the template for each of these files every time but they all look very similar.

Since node is completely based on async operations - how good/bad would it be to just deliver the same .html page for all of them, and then load all the data from the server based on which page I'm on using AJAX / web sockets ?

(naively, loop through all the sections with name='view' and fetch content by id or something similar)

This, I feel would provide async loading of the page, and completely decouple the site layout from the rest of the site. This feels very node to me, no blocking, everything async. I'm looking for opinions from experienced developers regarding the subject.

Also, any tips related to building a site using node.js are appreciated. I come from a PHP background and I really want to avoid stuff similar to webmatrix when designing.

Upvotes: 4

Views: 531

Answers (2)

Julian
Julian

Reputation: 2835

A couple of pitfalls with this sort of "single page site":

SEO: This content will be difficult for a spider to index. It's more applicable for walled-off content, such as a user's email.

Navigation: Preserving browser behavior users are used to is possible, but you have to think about it explicitly - how will bookmarking work? How about the back button?

You might be better off delivering pages in the traditional way (no reason you can't render your templates in node on the back-end). Then optimize your client code and cache system so that the second page loads quickly - it shouldn't need to re-fetch the .css or .js.

Upvotes: 2

SMathew
SMathew

Reputation: 4003

The simple concept of this is that you have a few layout templates, and some partials. You would load these templates as if they were JS files (they are when compiled). You can set the compiled templates to a global object somewhere.. App.templates.portfolio = JST["templates/portfolio"]. Do this once for your application. These templates can be cached anywhere -- the browser's localStorage, reverse proxy etc.

When a user clicks on "portfolio" your server sends back JSON, and you compile the "portfolio" template in the browser using the data returned from the server.

https://github.com/sstephenson/eco/ is very good for this purpose. There are many others equally good or even better. It's all personal preference. Jade is my favorite.

Most MVC frameworks include one of these.

If you have a simple page based site, then Node may not the the best option. I am sure you already know this.

Upvotes: 1

Related Questions