Backbone.js views that uses templates injected from Node.js (Express.js)

Question

Backbone.js views that uses templates injected from Node.js (Express.js)

as far as i have read on internet, if you want to use backbone.js and node.js together, normally you use node.js (express.js particulary) as the back-end API provider (plus other functions, like persistance, etc.), while backbone.js is the engine for the front-end, it means, provides the html templates, views, models, etc.

The backbone projects i have read on internet and github, normally starts with an index.html that directly executes a javascript file that instantiates 'classes' like routing, collections, views, etc. the views in the front-end are the responsible of inyecting the html and css templates and manage the views by itself, like events, etc.

the issue comes when i see some projects like backbone.iobind (https://github.com/logicalparadox/backbone.iobind), that uses a very particular configuration that i really do not understand and how it works.

if you see the source code, the node.js server is the responsible not only of the API, but for inyecting the html templates that are going to be used by Backbone. I have lots of doubts:

who executes the backbone front-end, since there is no "index" that executes the javascript that executes the router, views, collections and history?
how do you sync the template inyected by express.js, and the views at the backbone.js side that are going to use them?
whats the purpose of the backbone.js router class, since you are using node.js router for inyecting stuff?
why you use this architecture, and not other more clean like the one i described at the begining?

thank you very much in advance for your help

node.js
backbone.js
express

Answer 1

after several days researching, and seeing that there is no information about it on internet, i am going to answer my own questions. Hope some editor will correct wrong answers. What i am going to describe is the 'backbone' of a node.js and backbone.js application that inyects the templating from the back-end, and not from the front-end, as the community is evolving right now. why a developer selects one of the two options? according to different variables: security, loading and rendering speed, etc. The process summary:

A. basically, the first step is to configure in express.js the views directory and template engine:

    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');

B. after this, the middleware where we are going to locate all our static resources. When we talk about 'static' resources, we talk about images, javascript, html, css, etc. that will be executed in the front-end:

    app.use(express.static(path.join(__dirname, 'public')));

If express (or connect) finds an index.html inside the /public directory, it will run it. If not, you have to create the routes through express routing system.

C. we are in the case where express.js inyects the HTML from back-end. For that purpose, as i wrote, we need a routing system like:

    app.get('/', require('./views/index').init);

in here, when express.js detects that the user access to the main page '/', it will look for and index.js file located inside /views parent directory (not /public), and will be from here where index.jade will be rendered and inyected to the front-end:

    res.render('index');

D. The index.jade will provide the needed resources. In our case, will provide the CSS needed for this .jade, the libraries (jquery, backbone, etc.), and finally, two elements that will be requiere by backbone.js:

the javascript file that will load the backbone.js front-end. In here, all files will be located in /public directory:
```
 script(src='/views/index.js')
```
the index.jade will also provide the templates needed for backbone.js views:
```
 script(type='text/template', id='login')
```

E. There are several different backbone.js configurations. Normally you start the main app from the front-end router, where all the objects are initialized. But the main idea to sync the index.jade file, templates, and the execution of the javescript views, is to execute the last one after the DOM is loaded. For that reason, the best idea is to use the following jquery sentence:

     $(document).ready(function() {
        app.view = new app.View();
     });

maybe some people will find this summary unnecessary, but for begginers that don't know the difference between having all in the front-end, or mixing HTML node.js back-end + backbone.js front-end, i think will be useful. Above all, how is the structure. And maybe it sounds crazy, but there is no information on internet that explains how to structure it.

best regards

Answer 2

I dont have enough rep points to comment on your answer Michael, so I have to put it here, sorry.

Anyway, would your resulting folder structure look like this :

appname
  |--models
  |  |--appmodel.js
  |--public
  |  |  |--webapp // extjs/backbone files
  |  |  |  |--models
  |  |  |  |--controllers
  |  |  |  |--css
  |  |  |  |--js
  |  |  |  |--img
  |  |  |  |--views
  |  |  |  |  |--appview.ejs
  |  |  |  |  |--extbasedview.ejs
  |--routes
  |  |--router.js
  |--app.js

Which I found here