gitter-badger/techtonic-webapp

Slightly opinionated boilerplate and workflow for creating web applications

#Techtonic Web App

Slightly opinionated boilerplate and workflow for creating web applications

##Getting Started

• Download and install Node.js and Git
• Clone this repo locally (or just download the zip)

    git clone https://github.com/jhwohlgemuth/techtonic-webapp.git

• Navigate to the root directory

    cd techtonic-webapp

• Install the node modules needed for development

    npm install

• Write some code and run some Grunt tasks
• Enforce code standards

###Take it for a test drive

##Technologies

Task	Tool
dependency loading	RequireJS
models/collections	Backbone.js
views	MarionetteJS
templates	Handlebars.js
task runner	Grunt
transpile CSS	grunt-contrib-less
pre-compile templates	grunt-contrib-handlebars
optimize JS	grunt-contrib-requirejs
test runner	Karma with PhantomJS
test framework	Jasmine and Sinon.JS
code coverage	Istanbul (using Karma)
code quality	JSHint, JSCS, and JSInspect
code metrics	Plato
documentation	JSDocs

##Folder Structure +- app | +- models | +- views | +- controllers | +- modules | +- helpers | +- shims | |- app.js | |- router.js | |- main.js | |- config.js | - index.html +- assets | +- fonts | +- images | +- library | +- templates | +- less | |- reset.less | - style.less +- config | |- .csslintrc | |- .jscsrc | |- .jscsrc-jsdoc | |- .jshintrc | |- default.js | - karma.conf.js +- tasks | |- build.js | |- test.js | - main.js +- tests | +- data | +- jasmine | +- specs | - test-main.js +- vault +- web | |- server.js | - socket.js |- GruntFile.js |- package.json |- app.json - index.js

##Grunt Tasks

• grunt lint
• grunt linting (watch task)
• grunt build (transpile LESS, pre-compile templates and optimize JS into one file)
• grunt test
• grunt testing (watch task)
• grunt cover
• grunt covering (watch task)
• grunt review (watch task)
• grunt quick-review (watch task) [default task]
• grunt inspect (detect copy-pasted and structurally similar code)
• grunt aria (lint HTML files for accessibility)
• grunt docs (generate documentation in ./docs folder)
• grunt plato (generate plato report in ./reports folder)
• Read tasks/main.js for all available tasks

##JSCS Rules (JSHint rules) 

• Disallow Dangling Underscores
• Disallow Empty Blocks
• Disallow Keywords: ("with")
• Disallow Keywords on New Line: ["else"]
• Disallow Mixed Spaces and Tabs
• Disallow Multiple Line Breaks
• Disallow Multiple Line Strings
• Disallow Multiple Variable Declarations
• Disallow Space After Object Keys
• Disallow Space After Prefix Unary Operators ("++", "--", "+", "-", "~", "!")
• Disallow Space Before Postfix Unary Operators: ("++", "--")
• Disallow Spaces in Anonymous Function Expressions
• Disallow Spaces in Function Expressions Before Opening Round Braces
• Disallow Spaces in Named Function Expressions Before Opening Round Braces
• Disallow Spaces Inside Array Brackets
• Disallow Spaces Inside Object Brackets
• Disallow Spaces Inside Parentheses
• Disallow Trailing Commas
• Disallow Trailing Whitespaces
• Disallow Yoda Conditions
• Maximum Line Length (150)
• Require Camel Case or Upper Case Identifiers
• Require Capitalized Constructors
• Require Commas Before Line Breaks
• Require Curly Braces ("else", "for", "while", "do", "try", "catch")
• Require Space After Keywords ("if", "else", "for", "while", "do", "switch", "return", "try", "catch")
• Require Space Before Binary Operators ("+", "-", "/", "*", "=", "==", "===", "!=", "!==")
• Require Space Before Block Statements
• Validate Indentation (4)
• Validate Line Breaks ("CRLF")
• Validate Quote Marks (Use single quotes)

#Alternatives

• See wiki page, Tools for Creating Web Apps

#References & Resources

• See wiki page, References & Resources

#Future

• See Techtonic Trello board