12 comments

[ 3.0 ms ] story [ 43.4 ms ] thread
I am new to NodeJS, but this seems like a pretty useful tool - I plan to check it out.
Are there any examples of using this as the renderer for an Express application?
Posting for the author of Bifocals:

I'm not very familiar with express, but I just looked at the template system to see what I can do.

I don't think you would get a ton of benefit out of this library with express as is.

An express website would get the most benefit out of this library if they had a system so that the route your http server picked could also manually call routes which would add additional content to the page.

For example, something like the following would allow bifocals to work its magic.

    app.get(/^\/user\/(\d+)$/, function (req, res) {
        res.render('user.html', {user: req.params[0]});
    });

    app.get(/^\/home$/, function(req, res){
        app.perform_request('/user/1234', res.child('content',  'user_widget.html');
        res.render('home.html');
    });
If I accessed /user/1234 in my browser, I would see a user's profile page. If I accessed /home in my browser, I would see the home page and a user widget containing user 1234's data.

Both times you see a user, they have executed the same route function, but you can change the templates and inject them into other templates asynchronously. You can do this unlimited times within one route, and to an unlimited depth (depending on your system resources of course)

Bifocals also offers some of it's own features, multiple rendering systems, http header+status code handling, and more.

I don't get it. Is the library for progressively loading html content? So that you can use multiple threads to handle one request and therefore get higher performance? From the examples given, it is hard to see why regular template rendering wouldn't work just as well.
Posting for the author of Bifocals:

It's definitely not the easiest library to explain.

This does not explicitly use threads, but it will take advantage of any asynchronous systems you want to use.

http://bifocalsjs.com/#why-do-i-need-this-library is a more concrete example that might shed some light on the issue.

This allows you to run two database queries in parallel, and render immediately when the longest of the two queries is complete.

Most standard template systems have one large pool of data they provide to a template. You have to locate this data before you render a template, even if it is used by a partial.

Most partial systems simply combine two templates into a bigger template, that takes this large pool of data.

What bifocals does is give each partial it's own, isolated pool of data and render them separately and asynchronously from each other. This allows you to delay each partials rendering until it is ready, without waiting for the other partials to be ready.

Each function that creates Bifocals objects then can be isolated from the rest, with one sole responsibility. Render this template.

Your object might have parent objects, it might have children. Your function doesn't care, it just pumps data into a Bifocals object and marks it as ready. Bifocals then tracks your whole hierarchy, and sends it to the user when every last section is ready.

Hey all, I'm having issues replying to comments so I've been emailing jasonmoo to get everything lined up properly.

Hope I can answer any questions you have.

Thanks, Aaron

Mixing tabs and spaces. :S

(Otherwise pretty cool)

Ugh where the hell does that happen?

My linter usually yells at me, I'll dig around and fix those up.

Seems very interesting, I'll surely give it a try in my next personal project. Small suggestion to the author: Please add syntax highlighting in the example.. it makes a huge difference when reading code online! Thanks
I messed with a couple of highlighters and they all had issues highlighting everything correctly.

I might turn them all into gists, but I am going to talk with the rainbow.js author before I do.

Hopefully this will be fixed soon!

Since you're using Github pages, just use Markdown fenced code blocks, e.g.

    ```javascript
    function() { .. }
    ```