background preloader

Structuring (modules, mvc, frameworks)

Facebook Twitter

AngularJS — Superheroic JavaScript MVW Framework. Www.egghead.io. A better way to learn AngularJS - AngularJS Tutorial | Thinkster. Angular Tuts/Study. Backbone.js. Backbone patterns. Building apps with Backbone.js Here, I try to document the good practices that our team has learned along the way building Backbone applications.

This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Table of contents Thanks. Backbone.js Tutorials. Présentation de backbone.js. Backbone.js est un cadre applicatif pour les applications à forte teneur en javascript. Backbone.js peut se définir comme un framework MVC mais pas au sens classique du terme. Ici le C représente des Collections d’objets. Le M et le V désignent respectivement les modèles et les vues. Backbone.js ne possède qu’une dépendance ferme, il s’agit de underscore.js, qui est maintenu par la même équipe.

Le rôle d’underscore.js est de vous apporter tout un tas de méthodes pour vous simplifier la vie (enumerable, binding, template, comparaison…) sans faire 500ko. Généralement jQuery vient compléter la liste des dépendances finales de l’application, car il y a fort à parier que vous aurez à minima besoin de manipuler le DOM. Quand utiliser Backbone.js Backbone.js est un excellent choix pour les applications dites «single page application», c’est à dire une page principale avec un nombre important d’interactions utilisateur. Pour cela Backbone.js possède son propre routeur. Ce que Backbone.js ne fait pas. Integrating Devise with Backbone.js | Josh Huckabee. For the impatient: view the code, or see the demo. Update 30 May 2012: The original version of the application and this article referenced the backbone.modelbinding project by Derick Bailey. Per the readme, that project has been abandoned and I have replaced backbone.modelbinding with the preferred backbone.modelbinder project.

All code and referenced samples below have been updated accordingly. Several weeks ago I set out to create a single page web app leveraging Backbone.js on the front end with Ruby on Rails powering the back end. In the architecture for this application, Rails is essentially just a JSON API. All of the front-end magic happens with Backbone.js and related friends. One of the first things I need on almost all new projects is a way to handle user registration, authentication, and authorization. Arguably, doing this is unnecessary as Devise ships with its own UI implementation. UserRegistration: UserSession: UserPasswordRecovery: Here is the login view: Payne Digital Ltd - Bootbox.js - alert, confirm and flexible dialogs for twitter's bootstrap framework. UPDATE 01/02/2012: Version 2.0.0 of the Bootbox library is out. Whilst this tutorial is still largely accurate and version 1.1.2 will work with the 1.x series of Twitter's Bootstrap framework, you should check out the updated version here.

This article discusses a GitHub repository – feel free to browse the code or follow the project. I’ve been using twitter's bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Version 1.3 introduced some JavaScript plugins to complement the array of stylistic elements it already provided - notably code to invoke dialog boxes, or modals.

Dialogs using Twitter Bootstrap You may be wondering why a few wrapper methods around bootstrap's built-in dialog capabilities are either necessary or desirable. It's important to stress that none of these points are negative, nor are they particularly arduous. Bootbox.js Alerts Alert Callbacks. Require.JS. Usage§ 1 Load JavaScript Files§ 1.1 RequireJS takes a different approach to script loading than traditional <script> tags. While it can also run fast and optimize well, the primary goal is to encourage modular code. As part of that, it encourages using module IDs instead of URLs for script tags. RequireJS loads all code relative to a baseUrl. Or, baseUrl can be set manually via the RequireJS config. RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs. There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it.

Ends in ".js".Starts with a "/".Contains an URL protocol, like "http:" or "https:". In general though, it is best to use the baseUrl and "paths" config to set paths for module IDs. Www/ index.html js/ app/ sub.js lib/ jquery.js canvas.js app.js in index.html: and in app.js: data-main Entry Point§ 1.2 Define a Module§ 1.3.

Organizing your application using Modules (require.js) - Backbone.js Tutorials. Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments. This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy.

Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code. This tutorial will get you started on combining Backbone.js with AMD (Asynchronous Module Definitions). What is AMD? Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server.

This tutorial will use Require.js to implement a modular and organized Backbone.js. I highly recommend using AMD for application development Quick Overview ModularScalableCompiles well(see r.js )Market Adoption( Dojo 1.6 converted fully to AMD ) Why Require.js? Require.js has a great community and it is growing rapidly. Getting started <!