4

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.

Improve this question
3
  • I think you should look into gor.js project. It uses Ember.js (MVC) on node Commented Jul 5, 2012 at 20:18
  • I've seen Railway.js and plenty of other mvc frameworks. I'm mainly looking for suggestions regarding node design itself and not existing frameworks. I'd rather understand the mvc pattern well myself before I use a library someone else wrote for it. Thanks Commented Jul 5, 2012 at 20:19
  • A couple of pitfalls with what you outline (which is what I know of as a "single page site") akin to gmail: SEO is the biggest one - this content will be difficult for a spider to index. It's more applicable for walled-off content, such as a user's email. Also preserving the navigation users are used to is possible, but you have to think about it explicitly - how will bookmarking work? How about the back button? Commented Jul 5, 2012 at 20:57

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

SEO is definitely something to consider. This approach is very good for Web apps, but not meant for content driven sites. Navigation can be preserved using the new History api, no matter what the entry point is, the app will be able to load the required resources and render. But I agree, it's not easy, and all these things have to be taken into account during the design/architecture on the application.
Thanks for the answer, I didn't even think about SEO.
1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.