Yii 1.1: Ember.js with Yii REST backend,demo application

12 followers

Ember with Yii REST backend,demo application.

A one page web application built with Ember.js and Ember-Data.Uses the default REST Adapter of ember-data as a Persistence Layer and a Yii REST API as a backend.

NOTE

This demo uses an old ember.js and ember-data version.The framework has gone through a lot of API changes since this article was published.This demo will not work with the most recent ember version.

Code

Github Repository

Overview.

This is a very simple Contacts application.You can list,view,edit,create and delete contacts. I have based my demo application on Dan Gebhardt's demo application for Rails. I have added a login screen, AMD with require.js, and connected to a Yii backend REST API written by Antonio Ramirez (slightly modified) for his YiiBackBoneBoilerplate application. The process of putting all this together helped me understand and appreciate Ember.js as a very useful tool for building heavy client side web applications.All the logic is laid out in javascript,with Ember.js framework wiring it all up.The persistence layer is provided by ember-data.js which provides a default REST adapter out of the box.Of course it's possible to override the defaults and code the persistence layer of your choice. With ember.js you can utilize separation of concerns (SoC) in your project, divide the logic into models,views,controllers, use a folder structure that reflects MVC and therefore acquire huge benefit in terms of scaling and maintaining your application in an organized structure.

Setting It Up.

Clone the git repo - git clone git://github.com/drumaddict/ember-yii.git - or download it To install,follow these steps.

  • Hook up your Yii framework path in index.php.(Tested with version 1.1.12.)
  • In config/main and config/console.php fill in your database info.
  • Run the migration in migrations folder.(In console,navigate to protected folder and type yiic migrate and respond to dialog).Or just use the sql dump in data folder.
  • You may need to change the store.adapter.namespace property on app/application.js,the logout url in app/routes/app_router.js,and login url in app/controllers/login_controller.js (sendCredentials function),according to your application root folder path.
  • Use one of the two .htaccess files found in root folder.
  • Navigate to /site/app.The actionApp action in SiteController will render the site/contacts_app.php view without a layout.From there require.js will load the app/main.js file which functions as a bootstrap file for the contacts application.

Best Ember.js Tutorial.

Advice on & Instruction in the Use Of Ember.js. This is an extended ember tutorial that I suggest in order to understand ember thoroughly. It also mentions backbone and how it compares with ember,very useful if you are still overwhelmed and stuck with the choice of a js framework.

Personal View on js framework choice.

I have not investigated every possible js framework out there.I did look into backbone though. I liked the simplicity and good documentation,but it lacks a well defined structure.Ofcourse it is possible to overcome this with additional backbone libraries /dependencies like Backbone Marionette, but to me this is not an attractive idea,as you have to keep all these additions in sync with backbone,as the codebases evolve. Also I am not too keen on having to think about event binding cleanup,and this is something to consider when coding with backbone. Ember on the other hand,features a clear MVC separation of concerns.Binding data to views is automatic,just declare controllers and their associate views, and every time data changes,views update automatically without explicitly writing any code.I have a background in Flex Actionscript Framework and coding js with ember sometimes felt a lot like flex. For your research on js frameworks ,I suggest TODO MVC.Helping You Select an MV* Framework..

RESOURCES.

Total 4 comments

#11082 report it
Giuseppe Santoro at 2012/12/15 04:17am
Thanks

Thanks for this wiki. I'm trying to do the same thing with Dojo Toolkit.

#10369 report it
Haensel at 2012/10/23 08:32am
Thanks!

Thanks for giving us some insights into Ember.js. I thought about using it in a little project of mine and I actually came to the same conclusion regarding the differences between Ember.js and Backbone.js. I've heard people comparing it with Rails/Sinatra (or to stay in the PHP ecosystem - Yii/Slim). It enforces you to do things in a certain way, but I like this approach as it tends to free you from unnecessary boilerplate code

#10366 report it
drumaddict at 2012/10/23 05:46am
@Muller Session

You may have seen a session configuration in config/main.php file,but this session refers to the rest of the website,not the one-page ember application.No state is stored on the server,the login just asks for credentials from the server,the server responds and the client stores the respond in a variable in application_controller (loggedin variable).Of course this may not be best practice, but don't forget this a demo.In addition I think in a REST situation, every request to the server to ask for data should somehow contain authentication in the form of a signature(calculated from credentials),I did not implement this,since -again- this is just a demo for ember.One thing is for sure,no application state is stored on the server,so no stateless principle is violated.

#10365 report it
Müller at 2012/10/23 05:09am
REST?

Sorry if I got it wrong, I just had a quick look in the code, and I'm wondering if you are using the session in the server, which breaks the stateless principle of RESTful web services.

Leave a comment

Please to leave your comment.

Write new article