CODEWITHSUNDEEP
javascriptbackbone.jsrequirejsboilerplate
Vishwanath
Vishwanath

Reputation: 6004

Backbone-RequireJs boilerplate for component based large web-projects

We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects. Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.

---resources
 |---custom-components
   |---mycomponent
     |---js
       |---views
       |---models
       |---collections
     |---css
     |---templates
     |---mycomponent.js
   |---mycomponent2
     |---js
       |---views
       |---models
       |---collections
     |---css
     |---templates
     |---mycomponent2.js
 |---libraries
   |---backbone
   |---underscore
   |---jquery
   |---jquery-ui
 |---jqueryplugins
   |---jcarouselite
 |---thirdpartyplugins
 |---page-js
   |---mypage.js
   |---mypage2.js
  1. resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
  2. libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
  3. page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
  4. Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.

Custom components will be asked by main-js residing in page-js.

Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?

Upvotes: 3

Views: 906

Answers (2)

Hasith
Hasith

Reputation: 1767

Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.

  1. Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.

  2. I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)

  3. Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html

Upvotes: 1

Sepehr
Sepehr

Reputation: 2111

About the directory structure

As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.

Here is the cake's awesome MVC directory structure:

enter image description here

Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.

About the cleaning up techniques

Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.

For many years, programmers use module = null to free up memory from un-used codes.

Take a look at these also:

Hope it helps and good luck on designing your app ;D

Upvotes: 2

Related Questions