/Front-end-Architecture-Outline

An outline of the Front-end architecture to be used by a project

Front-end Architecture Outline

The purpose of this outline is to help build an outline of the Front-end architecture to be used by a project.

The goal is not to determine which framework or approach is better, but to define in clear terms how your web app will be constructed.

What's needed

  • Fleshing out of all the various options for each category. I've tried to include a couple of examples on each, but it's by no means complete.
  • Linking to articles and resources for more details on each category.
  • Addition of new categories that are missing.

General

VCS

  • Git
  • Subversion

Code Repository Location

  • GitHub
  • BitBucket

Integration Testing Tool

Testing Tools

  • Sauce Labs

API's for Data

  • [URL's to API's]
  • [Docs on API's]

Build System

  • Grunt

Browser Support

  • IE 7-Latest
  • Chrome Latest

Resources

  • [Link to browser usage information]
  • [Link to caniuse.com

HTML

Templating Library

  • Mustache
  • Handlebars
  • Smarty, etc
  • HAML
  • Jade

Style Guide

CSS

Folder/File Organization

Style Guides

Articles

The List

Naming Conventions

  • SMACSS
  • OOCSS
  • BEM

Unit Testing Tool

Pre-processor

  • Less
  • Sass
  • Stylus

Pattern Library

  • Pure.css
  • Bootstrap

Documentation Tool

Articles

On CSS Documentaiton

JavaScript

Style Guide

Unit Testing Tool

  • Jasmine
  • Mocha
  • YUI Test

Functional Testing tool

  • Karma
  • Yeti

Logging Infrastructure

MV* Framework

Resources

Frameworks

  • Angular
  • Backbone
  • Ember.js
  • Knockout.js
  • YUI3

Other Libraries

  • Modernizr
  • Moment.js

Compiler

  • None
  • CoffeeScript
  • Dart

Documentation Tool

Module Loader

  • Require.js
  • YUI3