• Stars
    star
    488
  • Rank 86,916 (Top 2 %)
  • Language
    JavaScript
  • Created over 12 years ago
  • Updated about 11 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Backbone.js stack boilerplates demonstrating integration with Express, Ruby, PHP, Grails and more.

#Backbone Boilerplates

Developers have been requesting 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.

More Repositories

1

critical

Extract & Inline Critical-path CSS in HTML pages
JavaScript
9,959
star
2

backbone-fundamentals

📖 A creative-commons book on Backbone.js for beginners and advanced users alike
JavaScript
9,294
star
3

essential-js-design-patterns

Repo for my 'Learning JavaScript Design Patterns' book
HTML
4,254
star
4

es6-tools

An aggregation of tooling for using ES6 today
3,954
star
5

basket.js

A script and resource loader for caching & loading files with localStorage
JavaScript
3,362
star
6

es6-equivalents-in-es5

WIP - ES6 Equivalents In ES5
2,533
star
7

puppeteer-webperf

Automating Web Performance testing with Puppeteer 🎪
JavaScript
1,775
star
8

a11y

Accessibility audit tooling for the web (beta)
JavaScript
1,705
star
9

tmi

TMI (Too Many Images) - discover your image weight on the web
JavaScript
1,639
star
10

timing.js

Navigation Timing API measurement helpers
JavaScript
1,500
star
11

critical-path-css-tools

Tools to prioritize above-the-fold (critical-path) CSS
1,141
star
12

getUserMedia.js

Shim for getUserMedia(). Uses native implementation for modern browsers and a Flash fallback for everyone else.
JavaScript
908
star
13

critical-path-css-demo

Above-the-fold CSS generation + inlining using Critical & Gulp
ApacheConf
532
star
14

webpack-lighthouse-plugin

A Webpack plugin for Lighthouse
JavaScript
290
star
15

sublime-fixmyjs

SublimeText package for FixMyJS
Python
250
star
16

learning-jsdp

Learning JavaScript Design Patterns: 2nd Edition - The Examples
HTML
240
star
17

predictive-fetching

Improve performance by predictively fetching pages a user is likely to need
238
star
18

storage-on-the-web

🗃 Comparing storage options for the open web in 2016
225
star
19

visibly.js

A cross-browser Page Visibility API shim
JavaScript
221
star
20

sublime-build-systems

Sublime Text build systems
202
star
21

yeoman-examples

A repo of up to date examples using Yeoman
JavaScript
202
star
22

oust

Extract URLs to stylesheets, scripts, links, images or HTML imports from HTML
JavaScript
176
star
23

cssprettifier-bookmarklet

A bookmarklet for prettifying your CSS
JavaScript
174
star
24

polymer-boilerplate

A Polymer.js template for building fast, robust web apps using Web Components
JavaScript
166
star
25

pubsubz

Another Pub/Sub implementation
JavaScript
164
star
26

backbone-mobile-search

A Backbone.js + jQuery Mobile sample app using AMD for separation of modules, Require.js for dependency management + template externalisation and Underscore for templating
JavaScript
154
star
27

prism-js

A Polymer element for syntax highlighting with Prism.js
HTML
149
star
28

starter

A simple, git-clone friendly starting point for personal projects.
JavaScript
145
star
29

memoize.js

A faster JavaScript memoizer
JavaScript
143
star
30

largescale-demo

Scalable JS architecture demo for #jqcon
JavaScript
138
star
31

psi-gulp-sample

Sample Gulp project using PSI
JavaScript
126
star
32

preact-hn

🗞 Preact Hacker News
JavaScript
121
star
33

network-emulation-conditions

Network emulation / throttling conditions (2G, 3G, 4G, Wifi etc) ☎️
JavaScript
108
star
34

bubblesort

Bubble Sort implementation with O(n^2) complexity.
JavaScript
106
star
35

polymer-filters

Polymer filters for formatting values of expressions.
JavaScript
105
star
36

angular1-dribbble-pwa

Angular 1 Dribbble Progressive Web App demo
JavaScript
102
star
37

ember-progressive-webapp

Ember.js Zuperkulblog PWA (built with FastBoot and ember-cli)
JavaScript
97
star
38

memory-mysteries

V8 memory mysteries (sample app)
CSS
84
star
39

smaller-pictures-app

Smaller Pics Progressive Web App
JavaScript
82
star
40

x-instagram

[Deprecated] A Polymer element for querying the Instagram API (Note: not yet updated to Polymer 0.5.x)
JavaScript
76
star
41

x-imager

Responsive images using Imager.js and Polymer
74
star
42

backbonejs-gallery

A Backbone, Underscore and jQuery Templates based image gallery (early early beta)
JavaScript
72
star
43

todomvc-angular-4

Angular 4.x TodoMVC implementation
TypeScript
66
star
44

socketchat

SocketChat - a beginners chat app using SocketStream
CSS
63
star
45

github-watchers-button

An Embeddable GitHub 'Watchers' Button For External Pages
JavaScript
63
star
46

gulp-uncss-task

[Deprecated] Use gulp-uncss instead please.
JavaScript
63
star
47

yt-jukebox

A YouTube Jukebox element built with Polymer & Yeoman
JavaScript
61
star
48

critical-path-angular-demo

Above-the-fold CSS generation + inlining using Critical, Gulp & Angular
JavaScript
60
star
49

native-media-resizing

Draft proposal for browser-level media resizing
59
star
50

catclock

Polymer + Material Timer/Countdown/Countdown app (alpha)
JavaScript
56
star
51

recursive-binarysearch

Recursive Binary Search with O(log N) complexity
JavaScript
56
star
52

selectionsort

Selection sort with O(n^2) time complexity
JavaScript
56
star
53

polymer-grunt-example

Polymer + Grunt
JavaScript
56
star
54

microtemplatez

Another compact micro-templating solution
JavaScript
55
star
55

page-er

A Polymer element for paginating model data
CSS
53
star
56

google-slides

⚡ An offline-enabled Polymer slide-deck
HTML
53
star
57

flickly-wireframe

The jQuery mobile wireframe for Flickly
52
star
58

grunt-uncss-sass-example

An example of using grunt-uncss on a Sass project
JavaScript
52
star
59

sparkle-trail

<sparkle-trail> Polymer element - useful as a pre-loader
CSS
51
star
60

cssdiet

(WIP) - A DevTools extension for multi-page unused CSS auditing
JavaScript
46
star
61

backbone-koans-qunit

Backbone Koans for QUnit
JavaScript
44
star
62

github-client

Angular GitHub client for Firefox OS
JavaScript
44
star
63

a11y-webapp

A11y WebApp built with Polymer (WIP)
JavaScript
44
star
64

video-js

A Polymer element for Video.js
CSS
42
star
65

generator-webapp-uncss

Yeoman generator with grunt-uncss
JavaScript
42
star
66

lottie-animation-demo

Network-aware adaptive loading with Lottie Web
JavaScript
41
star
67

spine.bitly

(Demo app) A Spine.js Bit.ly client for shortening URLs and archiving references to these links offline.
JavaScript
39
star
68

backbone-aura

Backbone Aura
38
star
69

es2015-todomvc-chrome

ES2015 TodoMVC app that works without a transpiler
JavaScript
38
star
70

critical-css-weather-app

Critical-path CSS optimized weather app
JavaScript
37
star
71

polymer-blog

A tutorial app for generator-polymer
JavaScript
33
star
72

generator-boilerplate

A simple Yeoman generator using Git submodules to clone over a boilerplate hosted elsewhere on GitHub
JavaScript
31
star
73

npm-and-polymer-demo

Demo of Polymer + Paper elements working off npm3
HTML
31
star
74

jquery-roundrr

A jQuery plugin for plotting interactive content galleries in a circle form
JavaScript
30
star
75

polymer-localforage

A Polymer element for Mozilla's localForage (async storage via IndexedDB or WebSQL)
HTML
30
star
76

devtools-timeline-model-browser

Browser-friendly helper for parsing DevTools Timeline traces into structured profiling data models
JavaScript
29
star
77

mustache-for-chromeapps

A special build of mustache that works in Chrome Apps under CSP
JavaScript
28
star
78

addyosmani

GitHub README
27
star
79

tmdb-viewer-load-more

Accessibility-friendly version of TMDB Viewer (load-more)
JavaScript
25
star
80

active-route

Active view routing for Polymer extending <template>
CSS
25
star
81

webapp-scaffold

Polymer webapp scaffold element
CSS
25
star
82

typeahead-country

A Polymer element for autocompleting country names
24
star
83

react-interop

React + Polymer + X-Tag interop
JavaScript
24
star
84

vue-cli-todomvc

TodoMVC built using the Vue.js 2.0 CLI 🍰
JavaScript
22
star
85

polymer-browserify-vulcanize

Polymer + Browserify + Vulcanize
JavaScript
22
star
86

es6-starter

A minimal starting point for using ES6 today.
JavaScript
21
star
87

faster-video

A Polymer element for <video> with playback speed controls
JavaScript
21
star
88

js-shapelib

A minimalist JavaScript library for drawing objects around a Circle or Ellipse
JavaScript
19
star
89

element-query

Element queries with Polymer (experimental fork)
CSS
19
star
90

clientside-sample-buildfile

A Client-side ANT Build File Example
19
star
91

parsely

A small utility for parsing URLs of all types.
JavaScript
18
star
92

video-player

A themeable Polymer video element
JavaScript
16
star
93

page-router

Declarative URL routing for Polymer elements.
CSS
16
star
94

polymer-eventemitter

A Polymer event emitter element with support for wildcards, many and once.
JavaScript
15
star
95

lighthouse-reports

Quick module for getting Lighthouse reports in JSON form
JavaScript
15
star
96

generator-es6

An ES6.now project generator for Yeoman.
JavaScript
14
star
97

aura

A scalable, event-driven JavaScript architecture for developing widget-based applications. Works with Backbone.js and other frameworks.
14
star
98

jquery-googleviewer-plugin

A compact Google Viewer plugin
14
star
99

medium-backups

HTML
13
star
100

css3-transition-fallbacks

CSS3 Transition Fallback demos
13
star