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!====
well-built beautifully designed web applications
www.clevertech.biz
great
Just another great work by YII community
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
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
@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.
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?
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.