fff: framework free front-end

gistfile1.md

Project Outline

Core Concepts

• why?(aka "do one thing well" / Unix Philosophy)
• npm (creating a package/consuming a package) / modular.js
• browserify
• modular CSS (using SASS or Less)
• application structure
• build tools
• do you need jQuery? (I still like jQuery, but it'd be interesting to map out the ways you can use small modules to implement only the features you need)
  • You might not need jQuery
  • Weaning yourself off jQuery
  • npm-dom
• testing

Useful Modules

• Event handling: dom-delegate
• Routing: location-bar or page
• Templating: handlebars (other templating engines would work, but I'm partial to Handelbars)
• Ajax: Super Agent
• dom-ready
• EventEmitter
• attr-bind
• Modular CSS examples

Examples

• todomvc example
• RESTful example (based on Addy Osmani's Your First RESTful Backbone.js App)

useful tools

• requirebin
• Browserify CDN
• Testling &/or Saucelabs

=========================

Application Structure

• single app.js file as entry point
• each widget/feature gets a folder, with something like:
  • template.js
  • index.js
  • render.js/whatev.js

Routing

with location bar:

var LocationBar = require('location-bar'),
  navigation = new LocationBar(), 
  Index = require('./index'),
  About = require('./about')

navigation.match(/^$/, function() {
  changeToView(Index)
})

navigation.match(/^about%/, function() {
  changeToView(About)
})

Resources

• Browserify handbook
• npm and browserify
• js without the frameworks
• Max Ogden: Lebron Stack - It's a Slam Dunk