YiiBackboneBoilerplate – Project Setup for your Yii+BackboneJS applications

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 onBackbone.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!

3 comments

  1. Tibor   •  

    Hi great extension and project structure , looks extremly promissing but as it’s structure is based on event driven programming it changes from a classic Yii way of working
    Maybe 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
    Could you drive me through a whole url process as an example base
    Thanks
    Tibor

  2. Antonio Ramirez   •     Author

    Hi Tibor,

    So sorry for leaving you guys without a proper explanation… the problem is that I do not have much time nowadays… But a wiki for YiiBoilerplate and YiiBackboneBoilerplate should be in place. I try to have some time at the weekend and write it for you guys.

    Thanks for your comments

    Regards

  3. xavierbabu   •  

    Hi Ramirez,

    This is a great extension. Do you guide me in handling multilingal using this extension. We do have a good extension for Yii but any thoughts and using it in HTML templates using Backbonejs.

    Thanks

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>