CODEWITHSUNDEEP
javascriptmongodbbackbone.jsexpressmean-stack
bormansquirrel
bormansquirrel

Reputation: 95

Backbone.js MEAN Stack equivalent

I know a couple of projects out there like mean.io or meanjs, or even yeoman generators where all the necessary boilerplate stuff when you are going to develop under MEAN stack it's done for you.

The truth is that MEAN stack has been closely coupled with Angular.js and there is no project that do the same with Backbone.js and I'm very surprised with that, I believe it is a very common stack the combination of Mongodb, Express, Backbone and friends like Require.js or Marionette.js.

I've been poking around with that, trying to mix backbone and express yeoman generators, building a skeleton from other people projects but I still keep thinking there has to be a better approach to do that.

I would appreciate it to you guys sharing your experience to figure out what I am missing here.

So the question is: Which are the common practices and tips do you use for starting a full stack "MEBN" (Mongodb, Express and Backbone) project from scratch?

Thanks to all of you!!

Upvotes: 5

Views: 2262

Answers (2)

Christian Cruz
Christian Cruz

Reputation: 668

You can use this MEBN

I think Angular is better than Backbone, personally I use mean.io, but...

Good points

Backbone can be integrated with many third-party template engines, the default choice is Underscore templates. Since Underscore is a Backbone dependency and you already have it on your page, you can easily take advantage of its templating engine without adding any additional dependencies for your application. On the downside, the templating engine of Underscore is very basic and you usually have to throw javascript into the mix, as you can see in our example:

Backbone is lightweight, fast and has a small memory footprint. The learning curve is very linear, and there are only a few simple concepts to grasp (Models/Collections, Views, Routes). It has great documentation, the code is simple and heavily documented, and there is even an annotated version of the code which explains how it works in detail. You can actually go over the entire source code of the framework and get familiar with it in less than an hour.

Being so small and basic, Backbone can be a good foundation to build your own framework upon. Some examples of 3rd party frameworks based on Backbone are Aura, Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, Vertebrae. With Angular and Ember you usually have to live with the choices made by the authors of the frameworks, which may or may not suit your project needs and personal style. Angular 2.0 promises to change it, by comprising small independent modules, so you will be able to pick and mix. We are yet to see if they will be able to deliver this.

Pain Points

Backbone does not provide structure. It rather provides some basic tools you can use to create structure, leaving it up to the developer to decide how to structure his application, and there are also many blanks to fill. Things such as memory management have to be carefully considered. The lack of view lifecycle management makes route/state changes prone to memory leaks unless you take care of cleaning up everything yourself.

While it is true that many of the functions not provided by Backbone itself could be filled by third-party plugins, this also means that there are many choices to be made when creating an application, as many functions have several alternative plugins. For example, nested models can be provided by Backbone.DocumentModel, BackBone.NestedTypes, Backbone.Schema, Backbone-Nested, backbone-nestify, just to name a few. Deciding which one is the best for your project requires research, which in turn takes time — and one of the main purposes of framework is to save you time.

Backbone lacks support for two-way data binding, meaning you will have to write a lot of boilerplate to update the view whenever your model changes, and to update your model whenever the view changes. See the example given above, showing how two-way in Angular.js data binding reduces boilerplate.

Views in Backbone manipulate the DOM directly, making them really hard to unit-test, more fragile and less reusable. The common practice is to look up DOM elements using CSS selectors, so changing a CSS class name, adding a new element with the same class name or even wrapping some DOM tree inside another element can break your CSS selectors and render your app usable.

Upvotes: 0

CharlieBrown
CharlieBrown

Reputation: 4163

Wouldn't it be MEBN? :D

You may have a look at Backbone Boilerplate (BBB): https://github.com/backbone-boilerplate/backbone-boilerplate

It uses node to serve the local application, so there you have a start. ;)

Basically you could also grab a MEAN example, strip Angular out and mix Backbone in. The server (Nodejs) part will be the same (controllers, REST API, JSON format for data exchange), but you'll use Backbone Models and Collections to interact with the API, and Views for UI.

Upvotes: 2

Related Questions