A Fullstack Backbone generator for Yeoman that provides a functional boilerplate Backbone app out of the box. You also get access to a number of sub-generators which can be used to easily create individual models, views, collections and so on.
- The Good Part: Backbone help you module your javascript code.Good for maintain and readable. Multi-SASS lib. MVC both front end and back end.
- The bad Part: More code for the module and MVC and test. Only support IE9+.
Optional RequireJS (AMD) support has recently been added as a prompt when using the generator on new projects.
Features:
-
- Front End,you can choose RequireJS or not.
-
- UI lib support,Sass(Compass):Materialize,Foundation5,Bootstrap.
-
grunt build
,support offline Manifest.
-
grunt upload
,support compress and publish package.(But you need development your own CMS server).
-
- Browser Support(It's also limited by the UI lib your choose):IE9+,FireFox4+,Safari5+,Chrome7+;
-
- Mockjs(app/scripts/mock_inject.js),hijack your ajax in develop environment.Split FE&BE.
Base on:
Install: npm install -g yo grunt bower generator-fullstack-backbone
Make a new directory and cd
into it:
mkdir my-new-project && cd $_
Run yo fullstack-backbone
, optionally passing an app name:
yo fullstack-backbone [app-name]
Run yo fullstack-backbone:all portal
,portal is the name of your new action:
yo fullstack-backbone:all [action]
Run grunt serve
,start your backbone fullstack trip(The server start need redis and mongoDB).
grunt serve
Available generators:
- fullstack-backbone:model
- fullstack-backbone:view
- fullstack-backbone:collection
- fullstack-backbone:all
yo fullstack-backbone # generates your application base and build workflow
yo fullstack-backbone:all blog
grunt serve
After these commands,your blog base code will be generated.But you still need do some work to make it show on the screen.
-
- Open app/scripts/routes/all.js.
-
- Add your blog view in the backbone routes.
-
- Add href to this routes.eg:
http://localhost/index.html#blog
- Add href to this routes.eg:
Also checkout this NetTuts write-up for a guide to building Backbone.js apps using this generator.
sequelize
mysql ORM for nodejs,you can define your table like OOP in 'server/sqldb/yourClass.model.js' and use it like:
var models = require('../sqldb');
models.User.findAll({}).then(function(users) {
res.render('index', {
title: 'Express',
users: users
});
});
-
--skip-install
Skips the automatic execution of
bower
andnpm
after scaffolding has finished.By default this value is false.
If you use strict mode in your app and JST templates the default grunt-jst implementation will cause your app to error out as the templates will be precompiled using a 'with' statement.
This can be addressed by changing the jst grunt task as follows:
jst: {
compile: {
options:
{
templateSettings:
{
variable: 'data'
}
},
files: {
'.tmp/scripts/templates.js': ['<%= yeoman.app %>/scripts/templates/*.ejs']
}
}
},
A result of this change is that your template variable definitions must also be updated from <%= templateVariable %>
to <%= data.templateVariable %>
. More information on this can be found in the Underscore documentation.
app(for browser side files):
bower_components:bower depends libs。
images:put your images here。
scripts(backbone MVC & libs):
collections:backbone collections。
helpers:backbone helpers。
models:backbone models。
routes:backbone routes。
templates:backbone templates。
vendor:common libs。
views:backbone views。
dist:build folder。
node_modules:nodejs depends libs。
server(for express server side files):
api:RESTful controller
config:express server config
models:OOP DB models
routes:RESTful routes
app.js:express server start scripts
helper.js:commonJS for server common helper
test(test files)。
.bowerrc:bower config。
.editorconfig:IDE common config。
.gitattributes:Git attributes config。
.jshintrc:jshint javascript coding style。
.yo-rc.json:yoman generator config。
bower.json:bower config。
config.rb:ruby config for compass。
gruntfile.js: grunt config for grunt running scripts。
package.json:nodejs config。
pm2.json:for pm2 maintain your project on server.
karma.conf.js: karma test config.
When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
When submitting a new feature, add tests that cover the feature.