Code Monkey home page Code Monkey logo

backbone-boilerplates's Introduction

#Backbone Boilerplates

Developers have been reqesting examples of how to integrate Backbone.js with a number of different backend technology stacks. To help with this, you can find many of these integration examples in this repository, with their stacks listed below. There are more to come soon and I'm always happy to consider other stacks not already covered.

Option 1

  • Node.js
  • Express
  • Mongoose
  • MongoDB

Option 2

  • Jade
  • Node.js
  • Express
  • Mongoose
  • MongoDB

Option 3

  • Haml
  • Ruby
  • Sinatra
  • MongoDB

Option 4

  • Grails
  • MongoDB

(thanks to Lauri Piispanen)

Option 5

  • PHP
  • Slim PHP RESTful framework
  • mySQL

(thanks to Joshua Stauter)

Option 6

  • Rails / Rails Asset Pipeline
  • CoffeeScript
  • Rails JSON API

(also thanks to Joshua Stauter)

Option 7

  • Jade
  • Stylus
  • Node.js
  • Express
  • Mongoose
  • MongoDB
  • Socket.io
  • Redis

Redis is used to manage sessions and locks using pub/sub to notify clients of any changes. Socket.io is used to make these notifications as quickly as possible.

(contributed by James O'Reilly)

Option 8

  • Vert.x
  • MongoDB

(contributed by Yuichi Ohneda)

##Instructions

All boilerplates are based on the excellent HTML5 Boilerplate and use a MongoDB backend.

Please ensure you have MongoDB installed and running prior to running any of the boilerplates.

###MongoDB Setup

Once you've downloaded MongoDB, you'll need to complete two steps to get things up and running.

Data directories

MongoDB stores data in the bin/data/db folder but won't actually create this directory for you. Navigate to where you've downloaded and extracted Mongo and run the following from terminal:

sudo mkdir -p /data/db/
sudo chown `id -u` /data/db

Running and connecting to your server

Once this is done, open up two terminal windows.

In the first, cd to your MongoDB bin directory or type in the complete path to it. You'll need to start mongod.

$ ./bin/mongod

Next, in the second terminal, start the mongo shell which will connect up to localhost by default.

$ ./bin/mongo

That's it!.

###Options 1 and 2

The only main difference between Options 1 and 2 is that Option 2 uses Jade (the Node templating engine) whilst Option 1 allows you to use regular HTML for your layouts. Both run on Node.js with Express and Mongoose.

To get either option running:

  • Make sure you have Node.js installed. If not, grab it here
  • Next, fire up a terminal and run the following lines
git clone https://github.com/addyosmani/backbone-boilerplates.git
cd option1
./install.sh
node app.js

Similarly for option2, simply cd into option2 and run node app.js from there.

Next, navigate to one of the following URLs:

Note: The Jade layout files for Option 2 can be found in the /views folder.

Option 3

This option uses Ruby, Sinatra and Haml and requires that you have at minimum Ruby and bundler installed as a prerequsite.

git clone https://github.com/addyosmani/backbone-boilerplates.git
cd option3
bundle install
ruby app.rb

Finally, navigate to http://localhost:4567/todo

Note: The Haml layout files for Option 3 can be found in the /views folder.

##Thanks and future plans

I would like to extend my thanks to Chris Riccomini for his Weapon of Choice project. It served as the inspiration and a partial base for this repo, which I plan on expanding to cover other setups such as Backbone + Socket.io, Backbone + SocketStream and more.

Backbone Boilerplates is a project that was created to stub further examples for my creative-commons book Backbone Fundamentals. The idea is to create further applications for the yet to be written RESTful/backend sections of the book, which have been repeatedly requested on the issue tracker.

If you notice any major issues, please let me know about them and I'll do my best to fix them up right away.

backbone-boilerplates's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.