GithubHelp home page GithubHelp logo

michelangelo13 / backbone-aura Goto Github PK

View Code? Open in Web Editor NEW

This project forked from aurajs/aura

1.0 2.0 0.0 241 KB

Backbone.js integrated with AMD modules as well as the mediator & facade patterns

Home Page: http://addyosmani.com

backbone-aura's Introduction

##Backbone-Aura

This repo demonstrates an (event-driven) Todo application using 2/3 of the concepts I discuss in my talks on large-scale JavaScript application development. This is the first time I've attempted to apply some of these concepts to Backbone.js, so the implementation may still require a few tweaks (and most likely does). That said, it uses:

  • The mediator pattern for centralized Pub/Sub
  • Facade pattern for security/permissions
  • RequireJS
  • AMD modules (great for modular development)
  • Backbone.js & Underscore.js for MVC structure
  • jQuery 1.7
  • Templating via jQuery.tmpl (although this can be switched out for any other templating solution)

Summary

The application is broken down into AMD modules that contain distinct pieces of functionality (eg. views, models, collections, app-level modules). The views publish events of interest to the rest of the application and modules can then subscribe to these event notifications.

All subscriptions go through a facade (or sandbox). What this does is check against the subscriber name and the 'channel/notifcation' it's attempting to subscribe to - if a subscriber doesn't have permissions to do this (something established through permissions.js), the subscription isn't allowed through. The rest of the application is however able to continue functioning.

For demonstration, see the permissions manager (permissions.js). By changing say, permissions -> renderDone -> todoCounter to be false, you can completely disable that component from displaying counts (because it isn't allowed to subscribe to that event). The rest of the Todo app can still however be used without issue. Nifty, eh?

Folders

The most important part of this application can be found in the app/scripts/backbone/todo directory. This contains the AMD formatted models, views and collections needed. It also contains the mediator (mediator.js) providing pub/sub and a modules.js file containing subscribers consuming events broadcast (published) from the views.

app/scripts/util contains a set of helpers for module loading and execution. Note that whilst this demo does use these helpers, this isn't absolutely required for successfully creating Backbone applications using AMD modules. For an alternative approach to this, see [1].

For more information on writing applications using AMD modules see [2]

Based on portions by Ryan Rauh [3]

###References

backbone-aura's People

Contributors

addyosmani avatar eliperelman avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.