Getting your head around Backbone.js

Truth is that I’m still a beginner on this and I’m still learning, but since I have found some resources and did a bit of study, here is what I could gather so far.

To be able to understand fully how backbone.js worked I have decided to do a small compare with CakePHP MVC structure, so I have started an example with the following directory structure:

• app
  • controllers
    • // extend Backbone.Router
  • models
    • // extend Backbone.Model
    • collections
      • // extend Backbone.Collection
  • views
    • // extend Backbone.View
  • libs
    • js
      • jquery files
      • backbone.js
      • underscore.js
      • bootstrap js files -> these weren’t loaded on the main index.php file because of conflict, couldn’t figure out why so far, but I will look into it
    •  css
      • bootstrap css files
    • img
      • bootstrap img files
  • index.php

The index file was a simple file that loaded all required scripts and the only requirement is to load the underscore.js file prior to the backbone.js and, off course, loading your controllers, views, models, collections, after these.

The controllers are called “routers” on backbone js. At some given point they were called controllers, but the naming convention were changed because some confusion. In one of the links that I will paste bellow have more info about this.

The views can work just like the CakePHP views, the only real big difference is that the part that render the “view” is under this view file. In another words, the Backbone.View.extend is both a view and a controller renderer.

The models are a bit bigger concept than CakePHP. The models are split in Models and Collections. To explain this better consider that User is a model and Users is a collection of User, so when you do a Users.get it would return all objects from the User model that is stored.

I have just started to scratch the surface from Backbone.js, so don’t take anything for granted, but here are all links that I’m using at the moment as reference. They are helping me, so they might help you as well:

• Backbone on Github
• Backbone.js tutorials
• Backbone.js for noobs by noobs (a little outdated, but helps understanding)
• Backbone Fundamentals (e-book in progress)
• Backbone Unit Testing
• Underscore.js
• Tutorial for Testing with Backbone JS, Jasmine and Sinon

 

A few weeks after I have 1st written this post I have got an excellent tutorial of how to handle Backbone.js. It is all in Portuguese (Brazil), but with a little Google Translation the tutorial should work perfectly for you.

Here is the link:

http://fernandomantoan.com/javascript/serie-backbone-js-parte-1-introducao/

 

Tip’s and Tricks with HTML5 and CSS3

This is something that you must check out. Got it from a Google+ post from a friend today.

This site has a list of tip’s and tricks with HTML5, CSS3 and Javascript. For me the best one there is the Android logo made with no image, all HTML5 and CSS3.

Check it out: http://thecodeplayer.com/

Working with Google Charts and Visualization API

Julian has just added a post with a good tutorial of how to use the Google Charts and Visualization API.

Check it out: aHref: Working with Google Charts and Visualization API

Advanced Photoshop Techniques that you might not be aware of

Got this from a Tweet of 99Designs. Good tutorial.

Follow the link: http://inspectelement.com/tutorials/advanced-photoshop-techniques-that-you-may-not-be-aware-of/

40+ Best Photoshop Tutorials for creating buttons

Awesome tutorial – @Ronald Bien – with 40 excellent examples to create Photoshop buttons of all kinds:

Follow the link: 40+ Photoshop Tutorials For Creating Buttons

Zend Framework Form Decorators

Decorated Zend Form

This is a great tutorial about using the Zend Framework Form Decorators to construct the form in the way that you want them to be.

It’s a very detailed step by step tutorial and an excellent resource.

Check it out at ZendGeek July post : Zend Form Decorators

Zend Framework Quickstart Review

I have done a ton of work with ZF, but trully haven’t done a full aplication with MVC (as it should be) and today I have finally done the quickstart tutorial from Zend Framework.

It took me more than the half hour said on the tutorial, but that is because I have choosen to create directory by directory and file by file.

The tutorial is very straight forward, but if you follow the tutorial 100% as it should, you will face a couple of walls that you must bypass to continue.

The first big wall is the directory strucutre convention for the files. Check that very closely because if any file is out of place it will throw an error.

The second, and most anoying one, is the database issue. During the tutorial you will be requested to create a database using some scripts and, as you will see, the script does not create the databases specifieds on the ini file and also it does not say to you what are the logical file permissions. After doing some research I have found one good article that answer that all, so if you are facing these problems, check it out (Nabble Article Link).

Note: You must know how to run a PHP script from the command line to use this tutorial. If you are in Linux, just go to the directory requested (for the load.sqlite.php) and type php load.sqlite.php and it should run normally.

After the tutorial is complete you will see the MVC patter working as beautifully as it should, but the tutorial will not answer you all the questions, only will show you how everything works and for that you should use the Zend Framework Reference Guide.

Point is, if you have never worked with the Zend Framework and want to understand how everything works, the tutorial is a great way to start. It will help you to visualize what, where and how it works.

PHP5 DOM and SimpleXML

No matter what kind of application I’m doing, there is always a XML request, insert or something involving XML. I have always used the SimpleXML method for that, for obvious reasons, but sometimes is good to have knowledge of both.

Digging up on the web I found out a IBM article giving an excellent overview of the 2 methods that PHP5 works with and how to make them both work together.

Take your time to read it. It’s worthed: XML for PHP Developers Part 1