Yii 1.1: YiiBackboneBoilerplate - Project Setup for your Yii+BackboneJS applications

25 followers

YiiBackboneBoilerplate

We at Clevertech use this folder structure setup for our own projects when developing BackboneJS applications.

Overview

YiiBackboneBoilerplate, aims to provide Yii Backbone developers with an application folder to ease the startup of their projects. It uses the flexibility of our YiiBoilerplate with a twist for BackboneJS applications.

What is BackboneJS?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

You may be thinking that Yii is too powerful to be used just as a RESTful service. That for this purpose it could be done with NodeJS or any of the other libraries available, but it is the power of Yii and for the sake of application scalability that we decided to use it.

BackboneJS + Yii

We love to work at Clevertech with Yii, in fact, it is one of the biggest assets of our company nowadays. Nevertheless, we are very aware of the new trends, and we had the opportunity to work with BackboneJS. So we decided that it could be good to provide a project startup for our developers, and allow us to get the best out of both worlds.

Backbone Overall Folder Structure

This document will be focused mainly in the folder structure that we set for the Backbone application. Please, read YiiBoilerplate's README for a deeper explanation of the main Yii folder structure setup.

Below the directory structure we are using:

/
backend/
    ...
common/
    ...
console/
    ...
frontend/
    ...
    www/
        app/
            css/
            img/
            js/
                boilerplate/
                collections/
                libs/
                models/
                views/
                app.js
                controller.js
                main.js
                router.js
                vent.js
            templates/
tests/
    ...

Backbone Application Directories

In the js directory, we have:

  • boilerplate: we have created a set of elements for you to create a model, collection, module and/or view. Please, note that the basic application skeleton that we have setup for you is based on Backbone.Marionette, and the views are different from normal Backbone views.
  • collections: this is were we place the Backbone collections for our application.
  • libs: holds the main libraries. We included the ones we thought would be the most useful.
  • models: this is were we place the Backbone models for our application.
  • views: and this is where we place the backbone views.

A special note regarding the templates directory. This folder is normally within the js folder, but we thought that it would be better to separate UI design from the business logic of the javascript files.

The runpostdeploy script

This section is actually extracted from YiiBoilerplate, but it is worth repeating the procedure.

The project has a very handy script that automatically creates the required and folders that are not shared for a Yii application, the runtime and assets folders, extracts the configuration settings specified for a specific environment then copies them to the ****-env.php*** files, and then runs migrations when not on private environments --we believe that migrations should be always run manually by developers on their machines.

To use this, from the application's root folder, simply run:

./runpostdeploy environmentType migrations

  • environmentType (required): can be "any" of the ones you configure on the environments folders (i.e. ./runpostdeploy private to use ****-private.php*** configurations)
  • migrations (optional): could be "migrate"" or "no-migrate".
    • migrate: will run migrations
    • no-migrate: will not run migrations (on private we won't run them anyway)

Final Notes

We would like to inform that this is just a startup boilerplate for your own projects. It is not intended by any means to be used 'AS IS', but rather as a base to scale to more complicated structures.

Neverteless, we have included a couple of goodies that we hope to improve with the help of the community.

Resources and Download

Get the most up to date version from the Github repository!

====

Clevertech
well-built beautifully designed web applications
www.clevertech.biz

Total 5 comments

#14978 report it
tuschkan at 2013/09/25 05:06pm
Need help!!!

I'm using YiiBackboneBoilerplate. I want to populate a model with data like this:

--model--

define([
    'jquery', 
    'underscore', 
    'backbone'
    ], function($, _, Backbone) {

        var EvaluateModel = Backbone.Model.extend({

            urlRoot: 'evaluate/process',
            defaults: {
                title: '',
                state: 1
            }
        });

        return EvaluateModel;
    });

--in my view--

    initialize:function() {
        var result = new Evaluate({id:this.id});
        result.fetch({
            success: function(result, response) {
                JSON.stringify(result.model);
            }
        });
    },

-- Yii action --

public function actionProcess() {
    //I have tryed this
    echo json_encode('test');
    Yii::app()->end();

    //and this
    $this->sendResponse(200, CJSON::encode(array('title' => 'test')));
}

and i'm getting textStatus: parsererror and the result returned from the server contains html of the current page

Besides, the fetch() should send a POST request type according to initial setting in the app.js, but the type is GET

--app.js-- // initialize Http object to make backbone work with POST instead of GET Http.initialize({type:'POST'});

What could be wrong?

#10994 report it
Cherif at 2012/12/09 05:18am
@Uexel

You have to configure the server so it can point to the desired folder, that's if you have the controller in the sever , but if you have mutual hosting service I think you should change this structure.

#10950 report it
Tibor Katelbach at 2012/12/06 02:02am
urls and process explained

Hi great extension , looks extremly promissing but as it's structure is based on event driven programming it changes from a classic Yii way of working I think a little explaining would be usefull for the community to grasp how Yiibackboneboilerplate runs once I'm rolling I'd be glad to make a tutorial , but could someone add sush an explanation ? Thanks

#10170 report it
shaan360 at 2012/10/09 12:39am
need help

I have used this structure for my new project, please can you let me know about the url structure .

right now its like www.domain.com/frontend/www/ and I want it to be www.domain.com and same for backend its www.domain.com/backend/www and I want www.domain.com/backend

thanks

#9973 report it
shaan360 at 2012/09/26 02:49am
great

Just another great work by YII community

Leave a comment

Please to leave your comment.

Write new article