Configuring Backbone.Model Properties With Less Code

My previous post demonstrated the use of

Object.defineProperty

to programmatically add a list of properties to an ES6 class, such as a Backbone.Model subclass, reducing the amount of boilerplate code necessary. The example in that post added simple getters and setters, but it’s possible to go further for Backbone.Model properties, also configuring in a single data structure functionality like:

  • Options for properties, such as disabled setters
  • Default values for properties
  • Mappings for parsing date strings and model relationships

This technique uses a common base class from which all other model classes descend. The model subclasses (e.g. a user model) provide a list of property definitions, which centralize various aspects of those properties. The base class has configuration methods which iterate over the property definition objects.

In the particular examples below, the base configuration methods handle attribute to property name mapping, default values, and server data parsing, but this technique can be applied to other configurable property-related tasks, such as marking some properties blacklisted or viewable only by admins.
(more…)

View-based Popups in Marionette

photo by https://www.flickr.com/photos/tammets/

Recently, I had need of a popup in a Marionette application. No problem, jQuery UI has you covered for dialogs, right? Except they’re ugly and a bit of a pain to make not ugly, and don’t really fit into the Backbone/Marionette idiom. We didn’t necessarily want a dialog box, either.

A quick Google for “Marionette modal popup” yields a number of hits, but most of them rely on Bootstrap for its modal method, which we weren’t using. Sounds like a good reason to reinvent the wheel!

First, what did we need it to do?

  • Show a popup with the option of being modal
  • Let that popup be skinnable as desired, easily
  • Be able to anchor it to an element in the DOM
  • If non-modal, allow click-off to dismiss

With that in hand, we start by working with the fact that the popup will not be shown in a Marionette Region, so there’s no view which can show the popup as a child. That has a few implications: (more…)

Websockets for Backbone

Backbone + Websockets

Backbone’s had some of its thunder stolen lately by trendier frameworks like Meteor and Angular; for good reason, in most cases, as without the prosthetic functionality offered by the likes of Marionette, Backbone’s view handling (amongst a few other lacks and warts) is really just ‘roughed in’.

But the fact that a framework like marionette can be built on top of Backbone is a testament to Backbone’s flexibility – after all, as the name suggests, Backbone is really just the ‘skeleton’ of your app, and it’s willing to be fit into place however you need it to be.

For instance: Backbone’s default persistance method is via jQuery’s ajax – make a request to the server using one of the standard HTTP methods to persists changes to models in a collection to the server-side db. Works great, but maybe you need something faster/better/stronger/etc.

Like, say, WebSockets.

(more…)

Representing Marionette.js Views with State

You want to create a simple login page for your new website, all written to be dynamic using Backbone.js and Marionette.js. To accomplish this, you listen for the login button to be pressed and then use jQuery to disable the form controls and display a loading message. An invalid login message comes back, so you reenable the form, highlight the incorrect fields, display a message, etc. The user presses login again… uh oh, you forgot to add code that removes the highlighted fields and hides the error message div.

Login dialog with username and password inputted. An error message is displayed informing the user that the username and/or password are incorrect. The password field has been focused and highlighted for the user.

Your view logic is starting to become tedious and you never know if you’ve covered all the possible paths through your user interface. However, there may be a solution to make your view more organized and predictable: states. (more…)