Recently I had to work on Backbone.js and Coffeescript and initially I didn’t see clear advantage of using it. mainly coffeescript, but after few weeks spending with coffeescript and backbone.js I found it really easy and quick to implement single page web applications. Also I found Laravel as a very clear PHP framework with lot of features. So in order to improve my knowledge on both Laravel and Backbone+Coffeescript I thought of writing small application but including as many features concepts so that I can have good understanding of these technologies.
Once I complete it I thought of writing new tutorial in parallel with another implementation of similar application again from the beginning, as I don’t see many tutorials covering both back end and UI at the same time. Moreover even if there are great Backbone tutorials, not many done using Coffeescript.
I will try to explain everything in simple steps and also including setting up things. So roughly I could break down the topics as follows
Note: I’m new to Laravel, Backbone.js, Coffeescript : so if you find something not correct or better way of doing it please point out.
1. Setting up your environment
I will be using Ubuntu and will assume you have Apache2, PHP and MySql is installed and if not you can find plenty of resources explaining how to install and setup these three.
2. Configure your project environment
I will explain how to setup development environment to host new application and the project. ex: Virtual host setup and testing browser with development domain
3. Download and install Laravel and configure it.
4. Download and install twitter bootstrap for UI (I always like to see nice UI even at development time which create good feeling about what you do, also you will learn some UI tricks every time you doing so)
5. Implement simple data model and generate database
6. Implement REST service for your data model and configure routes in Laravel
7. Implement blade templates in proper structure so that it will emit CSS, JS and content properly as well as flexible enough to grow your project with different pages.
8. Creating folder structure for coffeescripts and js output files and include them in php views
9. Building backbone base models, collections, views which can be used in implementing other models, collections and views with basic functionality.
10. Building Backbone models, collections, views to handle CRUD operations for the domain model we implemented in server side.
11. Building HTML templates for backbone views
12. Integrating and backbone models, views, templates to complete UI
As steps 7-12 are not pure discrete steps, we cannot complete one step before moving to another so these steps will be touched whenever needed in order to provide better understanding of how each relate with the rest.
Also note that I will not be discussing basic concepts in each of these frameworks, libraries, instead I will explain whatever required to build simple end-to-end web application. I think it will help you more than just explaining the concepts and theory.
Posts of this series
Laravel, Backbone.js + Coffeescript Tutorial Part I – Introduction
Laravel, Backbone.js + Coffeescript Tutorial Part II – Setup
Laravel, Backbone.js + Coffeescript Tutorial Part III – Install Laravel
Laravel, Backbone.js + Coffeescript Tutorial Part IV – Database
Laravel, Backbone.js + Coffeescript Tutorial Part V – Data model
Laravel, Backbone.js + Coffeescript Tutorial Part VI – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VII – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VIII – Views
Laravel, Backbone.js + Coffeescript Tutorial Part IX – Coffeescript
Laravel, Backbone.js + Coffeescript Tutorial Part X – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XI – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XII – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XIII – Backbone
Source available at https://github.com/technet/laravel-backbone-coffee.git
Once I complete it I thought of writing new tutorial in parallel with another implementation of similar application again from the beginning, as I don’t see many tutorials covering both back end and UI at the same time. Moreover even if there are great Backbone tutorials, not many done using Coffeescript.
I will try to explain everything in simple steps and also including setting up things. So roughly I could break down the topics as follows
Note: I’m new to Laravel, Backbone.js, Coffeescript : so if you find something not correct or better way of doing it please point out.
1. Setting up your environment
I will be using Ubuntu and will assume you have Apache2, PHP and MySql is installed and if not you can find plenty of resources explaining how to install and setup these three.
2. Configure your project environment
I will explain how to setup development environment to host new application and the project. ex: Virtual host setup and testing browser with development domain
3. Download and install Laravel and configure it.
4. Download and install twitter bootstrap for UI (I always like to see nice UI even at development time which create good feeling about what you do, also you will learn some UI tricks every time you doing so)
5. Implement simple data model and generate database
6. Implement REST service for your data model and configure routes in Laravel
7. Implement blade templates in proper structure so that it will emit CSS, JS and content properly as well as flexible enough to grow your project with different pages.
8. Creating folder structure for coffeescripts and js output files and include them in php views
9. Building backbone base models, collections, views which can be used in implementing other models, collections and views with basic functionality.
10. Building Backbone models, collections, views to handle CRUD operations for the domain model we implemented in server side.
11. Building HTML templates for backbone views
12. Integrating and backbone models, views, templates to complete UI
As steps 7-12 are not pure discrete steps, we cannot complete one step before moving to another so these steps will be touched whenever needed in order to provide better understanding of how each relate with the rest.
Also note that I will not be discussing basic concepts in each of these frameworks, libraries, instead I will explain whatever required to build simple end-to-end web application. I think it will help you more than just explaining the concepts and theory.
Posts of this series
Laravel, Backbone.js + Coffeescript Tutorial Part I – Introduction
Laravel, Backbone.js + Coffeescript Tutorial Part II – Setup
Laravel, Backbone.js + Coffeescript Tutorial Part III – Install Laravel
Laravel, Backbone.js + Coffeescript Tutorial Part IV – Database
Laravel, Backbone.js + Coffeescript Tutorial Part V – Data model
Laravel, Backbone.js + Coffeescript Tutorial Part VI – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VII – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VIII – Views
Laravel, Backbone.js + Coffeescript Tutorial Part IX – Coffeescript
Laravel, Backbone.js + Coffeescript Tutorial Part X – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XI – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XII – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XIII – Backbone
Source available at https://github.com/technet/laravel-backbone-coffee.git
Awesome!
ReplyDeleteThanks
ReplyDeleteHey
ReplyDeleteI have created a form and trying to validate the form, it is being validated correctly but when the validation is wrong then it is getting error
Object of class Laravel\Messages could not be converted to string
To show error on validation fails, I am using the following code
$validation = Validator::make(Input::all(), $rules);
if ($validation->fails())
{
return $validation->errors;
}