Hotspot - Create rapid interactive app prototypes

News and announcements Yii-powered Applications
1

Hi Yii’ers,

We just launched an app into the world that we initially built for internal use called Hotspot.

http://hotspot-app.com

It allows you to upload designs of your app, draw hotspot links on them to create an interactive experience, then share with clients and stake holders. Clients can then comment and discuss and share these screens until everyone is happy.

We used Yii in conjunction with Backbone.js. Backbone communicates using a RESTful api, and Yii handles these requests elegantly. Yii and backbone.js is a match made in heaven.

It’s still in beta as we are not actively promoting it yet (bar this) feel free to try it out.

At present this is a hosted system. We aim to release an open source business management app using Yii soon.

2

Good Works

3

Fantastic job guys - I’m very impressed with your application and wish you all the best!

I’ve just made the same decision to go down this path for my project (yii + backbone), so it’s encouraging to see others who have already done it (piclyf.com is another impressive yii app using backbone I believe).

Would be interested to know what you are using for the following:

  • templating, e.g. inbuilt backbone templating, mustache, handlebars

  • client-side unit testing, e.g. jasmine, sinon.js

  • css preprocessors, e.g. less, stylus, sass, haml, compass

  • js preprocessors, e.g. coffeescript

  • loaders, e.g. require.js

  • other frameworks/helpers…

  • noSQL servers, e.g. redis, couchDB, mongoDB (for state management)

Also, how did you go about building the REST API - did you use any particular extension or just write your own?

As I’m sure you appreciate, choosing the right approach and balance between server/client-side can be quite challenging, so any advice or experiences you could share would be very helpful.

Cheers, Rob

4

I am also very intrested to hear some of how you got Yii and Backbone working together.

If you can share some tips and insights about the structure of the application and how they communicate it would be fantastaic! :)

5

Hi Rob,

I’ll try to answer your points and give some more details. Ultimately I think a lot of this comes down to personal taste.

Templating: For templating I found the default system built into underscore (a collection of js functions required for backbone) more than adequate for what I needed.

Client Side Testing: This is easy to answer we dont use any! Just good old fashioned use and abuse.

CSS preprocessors: personally I dont like css pre-processors they are handy and can save time but often generate more css than necessary. Hotspot uses OOCSS and its concepts where possible but does not use any preprocessors.

JS Preprocessors: Nope don’t use any of these. I like plain old javascript, backbone and jQuery

loaders: using backbone actually removed a tonne of jQuery spagetti and organised things really nicely I actually just store the backbone templates using yii partials and include js the normal way.

For me the most exciting part of using backbone and Yii is the fact that it forces you to build a good RESTful API first. The separation of concerns is really nice, the server deals with the data and the client side deals with representing it.

Building a restful controller in yii is quite straight forward you just have to create the correct url mappings. For example in the hotspot app these rules handle 90% of the api calls:


 

    array('/project/api/list', 'pattern'=>'api/<model:\w+>', 'verb'=>'GET'),

    array('/project/api/view', 'pattern'=>'api/<model:\w+>/<id:\w+>', 'verb'=>'GET'), 

    array('/project/api/update', 'pattern'=>'api/<model:\w+>/<id:\w+>', 'verb'=>'PUT'),

    array('/project/api/delete', 'pattern'=>'api/<model:\w+>/<id:\w+>', 'verb'=>'DELETE'),

    array('/project/api/create', 'pattern'=>'api/<model:\w+>', 'verb'=>'POST'),

Then in the "api" controller there is a mapping between the model name used on the URL and the Yii model class. This deals with 90% of what I need. For complex models that need a bit more functionality I actually override the controllers "createAction" function. The override simply looks to see if a method exists for the specific model and calls that instead of the default. For example a PUT request to /api/complexmodel would call actionUpdateComplexmodel() instead of the default actionUpdate.

I hope that helps a little.

6

Helps a lot! Thanks for taking the time to give us an insight into how you’ve gone about things.

Much appreciated, Rob.

7

Love your contribution to the forum! And your project rocks, respect.