Discover Top Posts Tagged with #javascript mvc

Yeoman

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.

View On WordPress

#angulajs #javascript mvc

Meteor

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.

View On WordPress

#javascript mvc #meteor

When writing a Web application from scratch, it’s easy to feel like we can get by simply by relying on a DOM manipulation library (like jQuery) and a handful of utility plugins. The problem with this is that it doesn’t take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications.

#javascript #javascript mvc #backbone.js #ember.js #spine #dojo

Backbone.js - Routing made simple

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();

This is great because now we have abstracted this behavior and it can be handled in one call on the view manager. This also requires a very simple logic that already is available in this repository on Github.

#javascript #javascript mvc #backbone.js

Backbone.js - Send zombies to heaven

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.

dispose: function() { // same as this.$el.remove(); this.remove(); // unbind events that are // set on this view this.off(); // remove all models bindings // made by this view this.model.off( null, null, this ); }

#javascript #javascript mvc #backbone.js

Backbone JS is great way of separating and making maintainable the soup of your JavaScript code. In this tutorial JavaScript Playground explore the basics of creating a Backbone based application and teach us some neat techniques for structuring js code.

#backbone #javascript #javascript mvc

Spine.js & creating non-blocking user interfaces

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

http://www.slideshare.net/hjortureh/spine-js-creating-non-blocking-user-interfaces

#Javascript #Javascript MVC #MVC #Backbone.js #Spine.js

The trendy javascript MVCs got reviewed by Gordon Hempton. http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

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/

Bonus: http://www.cio.com/article/698485/ - 10 New Open Source Projects You May Not Know About

#javascript mvc #rails 3.2 #rails tips #matesrates #nodejs #project argo #wordpress #open source

Backbone.js - Routing made simple

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

Example:

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});

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();

#javascript #javascript mvc #backbone.js

#javascript mvc

Trending Tags

Recently Viewed Tags

#javascript mvc