CODEWITHSUNDEEP
javascriptnode.jsbackbone.jsdirectorystructure
JesusMurF
JesusMurF

Reputation: 296

Structure application with Backbone.js and Express.js

I've been searching about this topic but I don't find any clear answer about it. I am starting to learn about Backbone apps. And I want to integrate Backbone in my Express.js application. What is the best way to organize the folder structure?

Upvotes: 0

Views: 706

Answers (2)

Qusai Jouda
Qusai Jouda

Reputation: 1058

There is no restrictions or a best way to do it. But I use the functional architecture most of the time and it works pretty well:

I usually use a separate static folder for the client-app like below

app.use("/", express.static(__dirname + "/public"));

The architecture of this folder could be like below:


|- public/
|----- index.html (include the scripts from vendors and app dir, could be as main layout)
|----- vendors/ (here you place the libs like jquery, underscore, backbone ...)
|----- css/ (you css files)
|----- imgs/ (here the images that you use)
|----- nls/ (if you have multi lingual application)
|----- app/
|------- app.js (configure your backbone application)
|------- routes.js 
|------- models/ (here you place your backbone models)
|------- modules/ (functional folders for each feature in you app)
|---------- index/ (each module contain its backbone views and template files)
|---------- signup/
|---------- profile/
  • you can access the files like this "localhost:3000/index.html" is your index file, "localhost:3000/css/whatever.css"
  • if you have big modules and a lot of routes in each, you could put a router file for each feature (signup, profile, ..)
  • if you have common UI widgets you could place them in separate folder as well, for example "app/widgets/SpecialButton"

Upvotes: 0

Jekk
Jekk

Reputation: 598

Backbone.js is more of the frontend. Thus, it could belong to a separate directory.

As for your express app, I would recommend to transform it into a backend API, which helps you with fetching all the data from mongoDB or other backend related transactions. Now, it would look something like

  • yourExpressApi <= backend
  • backboneapp <=frontend

Now the backbone app should contain the directories

js with subdirectories "lib", "views" and "models", with file index.js, which will serve as the entry point for backbone.js. lib directory should contain, underscore, backbone, marionette, bootstrap, jQuery etc etc.

templates, where you place your view templates. Since underscore.js is a dependency for backbone.js and is template driven.

index.html, where you place all the scripts needed. It has to be a ONE PAGE APP.

You may add other directories at will.

Upvotes: 2

Related Questions