#javascript mvc

Yeoman http://wp.me/s4HaFN-yeoman

The web’s scaffolding tool for modern webapps

What’s Yeoman?

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

Meteor http://wp.me/s4HaFN-meteor

A better way to build apps. Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.

Backbone has a very nice Router implementation that makes it easy to map client-side routes to Javascript methods.

Example:

APP.Router = Backbone.Router.extend({ routes: { "new": "newNote", ":id": "editNote", "": "home" }, home: function() { APP.appView.home(); }, newNote: function() { APP.appView.newNote(); }, editNote: function( id ) { APP.appView.editNote( id ); } });

We also have the History object to start listening to routes and to switch from using the old fashioned hashChange event to the HTML5 pushState that is supported in modern browsers.

Example:

// Start the history // using HTML5 push state Backbone.history.start({pushState: true});

With these things at our service enabling client-side routing in our app is easy as breeze right ? Wrong. It’s not that simple because responding to url changes on the client-side is both stateful and stateless.

If the user writes an url in the browser or hits the refresh button it will cause a stateless request to our application and the desired state for the route needs to be built up from scratch.

However, if the user hits the back and forward buttons in our app that change is stateful and the correct state needs to be changed from the previous state that still exists in memory.

The stateful scenario is usually handled by resetting all the Backbone views and then building the desired state from scratch.

This works all dandy but becomes hard for complex applications with many views that needs to be resetted.

Example:

// Close all views view1.close(); view2.close(); view3.close(); // TODO: Finally we can respond to the route

A better solution to this problem is to implement a view manager that we use to register all views that are initialized.

Example:

// initialize and register views var view = new MyView; viewManager.register( view );

We also implement our views with a dispose method that knows how to reset the view, read my last blog post for more information about creating a dispose method.

var MyView = Backbone.View.extend({ dispose: function() { // TODO: Dispose logic here } });

When it comes time to reset the application the view manager calls dispose on all the views and closes them all at once.

// Now we can reset all the views // at once very easily viewManager.reset();

The most straightforward way to remove views in our Backbone.js application is to call the remove method inside our views.

Example:

this.remove();

This does exactly the same as calling this.$el.remove() and removes the view element from the DOM.

You might think at this point that the view is dead, but if this is done without unbinding all events of the view, zombies might wake up from the dead.

Zombies start walking around as the view still exists in memory and is listening to events triggered on models and elements that the view was bound to at initialization.

Zombies are very bad because they break out in strange behaviours that can be hard to track down to the actual problem. To prevent this from happening we need to unbind all events at the same time as the view is removed from the DOM.

First, lets unbind the element events by calling the off method without parameters inside the view, this will unbind all events set on the view.

Example:

this.off();

Second, to unbind all model events call the off method on the models.

Example:

this.model.off( null, null, this );

This time we pass null as a first parameter to unbind all events and the second null parameter because we are not passing any callback function. The third parameter is to make sure that we only unbind model events by this view so we do not affect any other observer to this model.

As a nice convention to expose this behaviour is to create a dispose method inside our views. The end result is the following.

My slides from STHML.js meetup about Javascript MVC & Creating non-blocking user interfaces with Spine.js.

Some useful tips for the generators and helpers in the new 3.2 version of Rails.  http://blog.plataformatec.com.br/2012/01/my-five-favorite-hidden-features-in-rails-3-2/

James Young's opinion on 'matesrates'.  http://www.welcomebrand.co.uk/thoughts/why-i-dont-do-mates-rates-projects/

Another Node.js article. This time discussing the overal workflow.  https://gelnior.wordpress.com/2011/12/27/web-application-development-workflow-with-node-js/

Project Argo turns out to be a nice collection of Wordpress plugins and themes. All about topic-focused websites.  http://contentsmagazine.com/articles/field-report-project-argo/