Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone
backbone.js

backbone.js

coffeescript

coffeescript

laravel

laravel

Recently I had to work on Backbone.js and Coffeescript and initially I didn’t see clear advantage of using it. mainly the use of coffeescript, but after few weeks spending with coffeescript and backbone.js I found it really easy and quick to implement single page web applications. I also 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 also including as many features, concepts so that I could have good understanding of these technologies.Once I completed it, I thought of writing a new tutorial in parallel with another implementation of similar application again from scratch,  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.

A sip of Coffee with Laravel and Backbone - Book

I will try to explain everything in simple steps and also including setting up things. 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 3.

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 then how to configure it.

4. Download and install twitter bootstrap for UI (I always like to see nice UI even during development stage 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 the database

6. Implement REST services 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 while being flexible enough to grow your project with multiple pages.

8. Creating folder structure for coffeescripts and js output files then 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

Since steps 7 to 12 are not pure discrete steps, we cannot complete one step before moving to another so these steps will be revisited 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

Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone