brain.code

Knockback-Inspector for Backbone.Models and Backbone.Collections

Wed, 30 May 2012 02:10:00 -0400

It has been a while since I last posted, but I have some news!

After releasing Knockback 0.15.1, I wanted to show how easy it is to generate and render Backbone.Model and Backbone.Collection graphs…just the sort of thing you need to render relationships when you use Backbone-Relational.

So after creating an inspector library and accompanying tutorial, I would like to announce Knockback-Inspector 0.1.0.

What it allows you to do is embed a tree view in your application to inspect and edit JSON data that you store in your models and collection…think of it as a light debugger. Here is an example of what it can do:

Download Knockback-Inspector now (Right-click, and use “Save As”):

Development: knockback-inspector.js
Production: knockback-inspector.min.js

Enjoy!

Response to UI Technology Paradigm Shift by Paul Hammant

Mon, 23 Jan 2012 16:00:23 -0500

Before writing his post, Paul and I briefly spoke about the “state of union” given the proliferation of MVC/MVVM client-side micro frameworks. He raises some important points in his post posting and it is a good read to complement this MVC frameworks comparison table.

When we spoke, Paul quite rightly raised the key risk today being that the number of frameworks is likely to continue to grow and each one may end up taking the best features from the others while reimplementing them in their own way causing further fragmentation.

What this means to me is that:

we will end up with a too many frameworks with brilliant pieces and also not so brilliant pieces, but we will be forced to take the good with the bad rather than just take the good (if you’ve looked at Sproutcore 1.x, you know we are all fortunate that Yehuda Katz was involved with Ember/Sproutcore 2.0)
programmers will need to jump from framework to framework whenever they change projects that have chosen yet another, slightly different MVC/MVVM framework until things consolidate. As each framework grows, their communities will need to devote more time to not only help programmers up the learning curve, but also to explain common solutions and best practices given their specific framework (Knockout is amazing at this by the way!)

I believe we need to step back a little further and look at what is going on and what we need.

What’s going on? Well, innovation obviously! We are in the middle of a (client side) Javascript and Coffeescript Renaissance and we’re lucky enough to be standing on the shoulders of giants while applying new techniques to make even more interactive client side applications (and HTML5/CSS3 isn’t so bad either!).

But what do we need? I believe we need to have the flexibly to pick and choose. Some personal examples:

Backbone’s Models and Collections are really quick and intuitive to learn, but their View (or partial-Controller) implementation is quite limited. Combining Backbone with Knockout into Knockback allowed me to iterate quickly and make beautiful, dynamic Views (easily using multiple Backbone models per View) with a templating engine that I was comfortable with.
jQuery Mobile’s default approach is a page per screen so they implement history and screen transitions as part of their framework. I originally chose JQM hoping that their Themeroller would be great for a designer, but each new release required me to disable more of their code to quickly get a single page app working again

So how do we pick and choose? I like Rails 3 modularity and believe it should be used for inspiration. Do we need modules like Active Resource, Action Contoller, Rack middleware-compliance, etc? Do we use CommonJS/RequireJS/AMD, a nano-framework framework like Mixin, or just use conventions?

Maybe we just need to agree on the components for a good client side app and allow for different configurable distributions like Brunch?

I believe development teams should be able to make choices like between Pathjs or Backbone Routers for history/routing, eco or Mustache for templates, Backbone or Spline models, Backbone Views or a binding library like Knockout, Sprockets or Brunch for asset packaging, Less or SCSS or CSS for stylesheets, etc.

And if something better comes along, taking a modular approach now should make it easier to replace a single component and its touch-points rather than being forced into an “all of nothing” decision down the line (which is almost never a good thing!).

Best of all, rather than make a huge upfront MVC framework decision you can incrementally and iteratively choose the best available modules for whatever will make your client side application standout and be incredible!

To put my money where my mouth is…I would welcome a larger community like from Backbone to reverse-takeover Knockback and make it into a standard (but separate!) Backbone Model adapter library for different binding libraries like Angular, Batman, or something new (but not in the Backbone Model/Collection core).

Alternatively, split Backbone into 3 modules: 1) Routing (Routers/History), 2) ORM (Models/Collections), and 3) Controller (View). Then, request proposals from the community for a replacement for the Controller (View) module (or even consider deprecating it) because with all of the recent innovations in the MVC space, there are already much better ways to do it.

…

Tear down these walls!

…

Knockback website is live!

Tue, 06 Dec 2011 06:55:37 -0500

Knockback is starting to take off so it was about time to have a proper website and here it is: http://kmalakoff.github.com/knockback/

There is a great comparison table to explain how Backbone, Knockout, and Knockback shine together as a complete MVVM solution. A big thank you to Pier Paolo Ramon for all his hard work to make this site so informative and slick!

Also, be sure to check out the documentation:

And the demos:

Download Knockback.js now (Right-click, and use “Save As”):

Development: knockback.js
Production: knockback.min.js

Knockback.js works with both Knockout1.2.1 and Knockout1.3

Enjoy!

Kevin

Knockback Todos Demo

Sat, 19 Nov 2011 15:44:00 -0500

I’ve put together a demo of Knockback using the obligatory todo app…with a twist!

I didn’t want to do just a simple technical display of coolness, but something a little more real world. Until we get a proper Knockback website up and running, check out the github page and the three demos:

Todos Classic - a minimal version of the todo
Todos - a version that shows off the power of Knockback: live changes synchronized across views, localization from day one, dynamic list sorting, etc
Todos Mockup - this is where I started with the concept. It isn’t interactive, but is a good resource for understanding the architecture of a Knockback app without having to get into any framework implementation details.

Try it live: http://kmalakoff.github.com/knockback-todos

You can find this example and more here: https://github.com/kmalakoff/knockback and here: https://github.com/kmalakoff/knockback-todos

Download Knockback.js now (Right-click, and use “Save As”):

Development: knockback.js
Production: knockback.min.js

Knockback.js works with both Knockout1.2.1 and Knockout1.3

Backbone.ModelRef: A small library for lazy Backbone models

Wed, 02 Nov 2011 06:37:00 -0400

OK. This is a little smaller of a library than usual, but still useful!

I’ve made a small Backbone.ModelRef class which stores a collection and model id, and notifies you when it is loaded and unloaded using bindable Backbone.Events: ‘loaded’ and ‘unloaded’.

Example: A view with states depending on the model being loaded or not

  class MyView extends Backbone.View
    constructor: (@model_ref) ->
      super; _.bindAll(this, 'render', 'renderWaiting')
      @model_ref.bind('loaded', @render); @model_ref.bind('unloaded', @renderWaiting)
      if @model_ref.isLoaded() then @render() else @renderWaiting()

    render: -> @is_waiting = false
    renderWaiting: -> @is_waiting = true

  collection = new MyCollection()
  view = new MyView(new Backbone.ModelRef(collection, 'dog'))
  # view is now rendering in waiting state

  collection.add(collection.parse([{id: 'dog'}]))
  # view is now rendering in loaded state

  collection.reset()
  # view is now rendering in waiting state

Personal Use: I use this often because my web site my have a URL like “{host}/models/2” and if you refresh the page, the model isn’t loaded yet (and it may never load if the model has been deleted). Rather than waiting or writing some custom code for each view, I have two states for my model views with loading messages while waiting and timeouts for when the load fails (using “Mixin.Timeouts” from: Mixin.js).

Also, Backbone.ModelRef is supported by Knockback.js (Knockback.js and this blog post) so if you like, you can set default values in fields while you wait.

You can find this example and more here: https://github.com/kmalakoff/backbone-modelref

Download now (Right-click, and use “Save As”):

Development: backbone-modelref.js
Production: backbone-modelref.min.js

Knockback.js: You got your Knockout in my Backbone

Wed, 02 Nov 2011 06:12:00 -0400

I’m really excited about releasing this. Knockback.js provides Backbone model and collection bindings for Knockout.

This means you can now put different views of the same models on your web page and they can automatically update…one or two way, and localization is a breeze. Take a look at this jsFiddle: http://jsfiddle.net/kmalakoff/QSkpv/ and you can see:

it dynamically localizes all the labels and event the text inputs
it dynamically sorts the model views based on the sortedIndex function
all changes in a model are updated in real time using Knockout bindings

Example: A simple model attributes binding

  The view model:

    ContactViewModel = (model) ->
      kb.observables(model, {
        name:     {key:'name'}
        email:    {key:'email', write: true, default: 'your.name@yourplace.com'}
        date:     {key:'date', write: true, localizer: LongDateLocalizer}
      }, this)

  The HTML:

    <label>Name: </label><input data-bind="value: name" />
    <label>Email: </label><input data-bind="value: email" />
    <label>Birthdate: </label><input data-bind="value: date" />

  And...engage:

    view_model = new ContactViewModel(collection.get('some_id'))
    ko.applyBindings(view_model)

You can find this example and more here: https://github.com/kmalakoff/knockback

Download now (Right-click, and use “Save As”):

Development: knockback.js
Production: knockback.min.js

Knockback.js works with both Knockout1.2.1 and Knockout1.3

Mixin.js: Example for writing your own mixins

Tue, 11 Oct 2011 11:41:00 -0400

I realized that all the mixin examples were about how to use existing mixins…not write your own! There are a couple of things to know.

First, you use Mixin.registerMixin with an object providing your mixin name, the object to mixin, and optionally an initialize and/or destroy method. For example: Mixin.registerMixin({mixin_name: ‘MyMixin’, mixin_object: {myFunction: ->}})

Second, you can create and access instance data per mixed in instance using a dual-purpose function Mixin.instanceData. Set the data with Mixin.instanceData(instance, ‘MyMixin’, SOMETHING) and get the data with Mixin.instanceData(instance, ‘MyMixin’).

Example: Create Your Own Mixin

# define a new mixin for a superstar with fans
Mixin.registerMixin({
  mixin_name: 'Superstar'

  initialize: ->
    # create instance data with an array of fans
    Mixin.instanceData(this, 'Superstar', {fans: []})

  mixin_object: {
    addFan: (fan) ->
      # get the instance data, and add the fan to the fans array
      Mixin.instanceData(this, 'Superstar').fans.push(fan)
      return this # allow chaining
    getFans: ->
      return Mixin.instanceData(this, 'Superstar').fans
  }
})

# make rockstar1 a superstar
class Rockstar
rockstar1 = new Rockstar()
Mixin.in(rockstar1, 'Superstar')

# create new fans of rockstar1
class Fan
fan1 = new Fan(); fan2 = new Fan()
rockstar1.addFan(fan1).addFan(fan2)

# fan1 now becomes a superstar and rockstar1 loses his status
Mixin.in(fan1, 'Superstar'); Mixin.out(rockstar1, 'Superstar')

# now everyone becomes a fan of fan1 (even rockstar1!)
fan1.addFan(fan2).addFan(rockstar1)

# cleanup after the new 'Superstar' (he doesn't do anything for himself anymore)
Mixin.out(fan1)

You can find this example and more here: https://github.com/kmalakoff/examples-kmalakoff

If you try out Mixin.js, please share your stories and your mixins!

Download now (Right-click, and use “Save As”):

Development: Mixin.js
Production: Mixin.min.js

Underscore-Awesomer: _.parseJSON for CouchDB model

Mon, 10 Oct 2011 06:37:00 -0400

This is an example showing a recent modification to _.parseJSON. Besides introducing a convention for serializing plain-old-JSON (POJ) into live instances, what I wanted to do was 1) introduce some flexibility into which field is used to look up the parseJSON methods, and 2) provide a way to not pollute the global namespace with your parseJSON methods.

# set up for CouchDB 'type' convention 
_.PARSE_JSON_TYPE_FIELD = 'type'
# make a Constructors namespace known to Underscore
root = this; root.Constructors||root.Constructors={}
_.PARSE_JSON_CONSTRUCTOR_ROOTS.push(root.Constructors)

class SomeModel
  constructor: (@key, @value) ->
  toJSON = -> return { type:'some_model', key:this.key, value:this.value }
  @parseJSON = (json) ->
    throw new Error('unexpected type') if (json.type!='some_model')
    return new SomeModel(json.key, json.value)
root.Constructors.some_model = SomeModel # add constructor to Constructors namespace

# assume this comes back from the server
json = {type:'some_model', key:'abcdef', value: {x:1, y:2, z:3} }

# deserialize - _.parseJSON finds 'root.Constructors.some_model'
some_model_instance = _.parseJSON(json)

Personal uses: Using my Backbone-Articulation.js library (Backbone-Articulation.js), I now automatically serialize the JSON from the server into instances inside my model attributes on the client. It means I am able to combine data with functionality on the client behind-the-scenes and just start interacting with the attributes directly.

You can find this example and more here: https://github.com/kmalakoff/examples-kmalakoff

Enjoy!

Download now (Right-click, and use “Save As”):

Development: Underscore-Awesomer.js
Production: Underscore-Awesomer.min.js

Or check out the project here: https://github.com/kmalakoff/underscore-awesomer

Background.js: Multiple array iteration example

Mon, 10 Oct 2011 05:53:00 -0400

I realized that there weren’t any Background.js examples on the blog. That’s changing today!

queue = new Background.JobQueue(10) # create a queue that processes each 10 milliseconds
iterator = null  # declare the iterator here so it is available in the init and run loop
test_array1 = [3,7,11]; test_array2 = [3,5]; test_array3 = [13,3,23]
iteration_count = 0; result = 0

queue.push(
  (->
    # set up the iterator for the arrays in batches of 3
    iterator = new Background.ArrayIterator_xN([test_array1,test_array2,test_array3],3)
  ),
  (->
    iteration_count++
    return iterator.nextByItems((items)-> result += items[0]*items[1]*items[2])
  )
)

This example shows how you can iterate over the combinations of items in any number of arrays in equal-sized steps and when the job is done, it comes off the queue and if there is one, the next job runs (Note: you could just as easily use a Background.JobList and run multiple jobs in parallel if sequential processing isn’t important to you).

Personal uses: I used something similar to apply identical filters to a collection of models and then rendered the results in batches in a second job that was executed after the filtering job was complete. Also, any time a new filter arrived I used JobContainer.clear() to immediately clear the previous jobs and to start again rather than queuing more jobs since the original jobs were now out-of-date.

You can find this example and more here: https://github.com/kmalakoff/examples-kmalakoff

Enjoy!

Download now (Right-click, and use “Save As”):

Development: Background.js
Production: Background.min.js

Or check out the project here: https://github.com/kmalakoff/background

Mixin.js - Subscriptions example

Mon, 10 Oct 2011 02:37:26 -0400

I’ve tried to come up with a simple example demonstrating the Mixin.Subscriptions mixin and also the dynamic nature of mixins. Hopefully this hits the nail on the head!

class DynamicBroadcasterListener
  constructor: ->
    Mixin.in(this, ['RefCount', => Mixin.out(this)])
    @sent = []; @unsent = []; @received = [];

  sendUpdate: ->
    args = Array.prototype.slice.call(arguments)
    if Mixin.hasMixin(this, 'Observable') and @hasSubscription('update')
      @notifySubscribers.apply(this, ['update'].concat(args))
      @sent.push(args)
    else
      @unsent.push(args)

  receiveUpdate: ->
    @received.push(Array.prototype.slice.call(arguments))

# create two dynamic/flexible instances and then make one Observable and the other both
dynamic1 = new DynamicBroadcasterListener()
Mixin.in(dynamic1, 'Observable', 'update')
dynamic2 = new DynamicBroadcasterListener()
Mixin.in(dynamic2, 'ObservableSubscriber')
dynamic1.addSubscriber(dynamic2, 'update', dynamic2.receiveUpdate)

# broadcast something and then unmix Observability, send something else (which is unsent)
dynamic1.sendUpdate('Hello')
Mixin.out(dynamic1, 'Observable') # remove Observable and clear all subscribers
dynamic1.sendUpdate('Insane') # not mixed in so will be unsent

# remix, reconfigure and send something new
Mixin.in(dynamic1, 'Observable', 'update')
dynamic1.sendUpdate('Strange and Crazy') # no one subscribed but still sent
dynamic1.addSubscriber(dynamic2, 'update', dynamic2.receiveUpdate)
dynamic1.sendUpdate('World!')

You can find this example and more here: https://github.com/kmalakoff/examples-kmalakoff

If you try out Mixin.js, please share your stories and your mixins!

Download now (Right-click, and use “Save As”):

Development: Mixin.js
Production: Mixin.min.js

Mixin.js: View with model loading timeout

Thu, 06 Oct 2011 10:06:00 -0400

I’m still excited about finally releasing Mixin.js yesterday…and hope other people find it as exciting as me!

I’ve started a repository with examples from my various project (https://github.com/kmalakoff/examples-kmalakoff) and added the following first example for Mixin.js.

class ViewWithModelLoadingTimeout
  constructor: ->
    Mixin.in(this, ['RefCount', => Mixin.out(this)], 'AutoMemory', 'Timeouts')
    @id = _.uniqueId('model_view')
    @el = $("<div id='#{@id}' class='model_loading'></div>").appendTo($('body'))[0]
    @autoWrappedProperty('el', 'remove')
    @addTimeout('Waiting for Model', (=>@render(false)), 20)

  render: (successful_load) ->
    $(@el).remove()
    if successful_load
      @el = $("<div id='#{@id}' class='model_loaded'></div>").appendTo($('body'))[0]
    else
      @el = $("<div id='#{@id}' class='model_failed'></div>").appendTo($('body'))[0]

  callbackModelLoaded: ->
    @killTimeout('Waiting for Model'); @render(true)

# create a view and send tell is that it's model was loaded
view_successful_loading = new ViewWithModelLoadingTimeout()
view_successful_loading.callbackModelLoaded()

# create a view and let the timer get called triggering it to move into a failed state
view_failed_loading = new ViewWithModelLoadingTimeout()

# LATER...
# cleanup - elements removed, timers killed
view_successful_loading.release()
view_failed_loading.release()

If you try out Mixin.js, please share your stories and your mixins!

Download now (Right-click, and use “Save As”):

Development: Mixin.js
Production: Mixin.min.js

Or check out the project here: https://github.com/kmalakoff/mixin and look at the tests folder for many more examples!

Backbone-articulation with localized string example

Wed, 05 Oct 2011 08:48:00 -0400

As Jeremy recommended, I’ve listed Backbone-Articulation on the Backbone Wiki. To prepare for some questions (maybe!), I’ve prepared an example:

ENV.LOCALIZED_STRINGS =
  1: 'bonjour'
  2: 'mes'
  3: 'amis'

class LocalizedString
  constructor: (@id) ->
    @string = if (@id!=undefined) and ENV.LOCALIZED_STRINGS and ENV.LOCALIZED_STRINGS.hasOwnProperty(@id) then ENV.LOCALIZED_STRINGS[@id] else 'undefined'

  toJSON: -> return if (@id!=undefined) then {_type:'LocalizedString', id: @id} else null

  @parseJSON: (json) ->
    throw new Error("LocalizedString.parseJSON: unrecognized json") if json._type!='LocalizedString'
    return new LocalizedString(json.id)

# create some models with attributes that need to be serailized and deserialized
model1_1 = new Backbone.Model({id:1, string: new LocalizedString(1)})
model1_2 = new Backbone.Model({id:2, array: [new LocalizedString(1), new LocalizedString(2), new LocalizedString(3)]})
model1_3 = new Backbone.Model({id:3, object: {hello: new LocalizedString(1), my: new LocalizedString(2), friend: new LocalizedString(3)}})

# put them into collection1, serialize collection1, deserialize the json into collection2
collection1 = new Backbone.Collection([model1_1, model1_2, model1_3])
json = collection1.toJSON()

# now imagine the next time the collection is fetched...collection2 is deserialized with the localized strings
collection2 = new Backbone.Collection(); collection2.add(collection2.parse(json))

You can find this example and more (eventually) here: https://github.com/kmalakoff/examples-kmalakoff

Enjoy!

Mixin.js: the Javascript nano-framework

Tue, 04 Oct 2011 14:04:00 -0400

A few months ago, I was using Backbone.Views and many views (or categories of views) had slightly different needs. For example, if one view needed a timeout to check if model failed to load, did all of my views need the timeout functionality.

I was faced with a fundamental architecture decision. Should I keep pushing functionality higher in my Backbone.View hierarchy to expose the functionality and cause bloat super class bloat, or was there a better way?

I think I found a better way…mixins!

I started with just mixing in simple Javascript objects, but as I kept developing the idea, I realized that sometimes I needed initialization or cleanup code, and I needed to know which instances had been initialized with which mixins, etc. Plus, it was getting really exciting to try to push my code to the DRYest state possible….

After a few months, I’ve developed quite a sophisticated solution and I think it is mature enough to share publicly so i spent a few days packaging it, writing tests, etc. I just had to release it because it is so fun and flexible to use!

Here’s a taster:

class StatusBar
  constructor: -> Mixin.in('Subscriber')
  updateProgress: (progress) -> # update bar
  workerDone: -> # clear bar

class HardWorker 
  constructor: ->
    Mixin.in(['Observable', 'progress_update'], 'AutoMemory', 'Backbone.Events')
    @list = new Background.List(100); @autoProperty('list', 'destroy')
    @list.append(null, (=>doWork()))
  doWork: ->
    # do something
    @notifySubscribers('progress_update', progress)

status_bar = app.getStatusBar()
worker = new HardWorker()
worker.addSubscriber(status_bar, 'progress_update', status_bar.updateProgress, 
	{destroy:status_bar.workerDone})

# later use a Backbone.Event to kill the worker and and the status bar 
# is notified (workerDone) and the background list (BGList) is cleaned up
worker.trigger('destroy')

I’ll write more examples over the coming days and weeks. Enjoy!

Download now (Right-click, and use “Save As”):

Development: Mixin.js
Production: Mixin.min.js

Or check out the project here: https://github.com/kmalakoff/mixin

Introducing Backbone.Articulation!

Mon, 26 Sep 2011 05:17:00 -0400

Have you ever wished that you can control the lifecycle or serialization/deserialization of your Backbone.Model attributes? Well, now you can!

Backbone.Articulation complies with various attribute lifecycle conventions of your attributes:

clone() and destroy()
retain() and release()
new() only and using Javascript’s garbage collection
plain old JSON (with no custom serialization)

And if you want custom serialization/deserialization, just add toJSON() instance method and parseJSON class or factory method to your classes.

Please note the difference between toJSON and parseJSON: toJSON will be found on your instance whereas parseJSON will be found in the global namespace (just like Javascript’s Date.parse()).

All of this is achieved using underscore enhancements…(http://braincode.tumblr.com/post/10682303919/addawesomefeatures).

Download now (Right-click, and use “Save As”):

Development: Backbone-Articulation.js

Production: Background-Articulation.min.js

Or check out the project here: https://github.com/kmalakoff/backbone-articulation

Enjoy!

Until the dependent changes have been merged into and released with the 
 main projects, please use my modified versions of:

- Underscore.js https://github.com/kmalakoff/underscore

- Backbone.js (https://github.com/kmalakoff/backbone

_.addAwesomeFeatures()

Mon, 26 Sep 2011 05:06:00 -0400

As you can see from the title, I’m quite excited (!) by a few things I’ve taken from my personal project and have repackaged, tested, and sent a pull request to the main DocumentCloud/underscore repository.

Highlights:

1) Keypaths (_.hasKeypath, _.keypath, _.keypathValueOwner) - rather than just using simple keys to reference properties, you can use keypaths (dot-delimited strings or arrays of strings) to traverse you object.

Examples:

_.keypath({hello: {world: ‘!’} }, ‘hello.world’); // returns ‘!’
_.keypathValueOwner({hello: {world: ‘!’} }, ‘hello.world’); // returns hello

2) Type Conversions (_.resolveConstructor, _.toType) - _.toType introduces a convention of _.to{SomeType} and complies with underscore’s _.is{SomeType} convention if the constructor name or instanceof don’t find a match. Useful it you wrap a class inside another.

Examples:

var constructor = _.resolveConstructor(‘SomeNamespace.SomeClass’), instance = new constructor();
var actual_date = _.toType(wrapped_date, ‘Date’);

3) Removal (_.remove) - provides many variants on how to remove something from an array or object collection.

Examples:

var removed = _.remove([2,4,2], 2); _.isEqual(removed, 2);
var removed = _.remove({bob: 1, fred: 3, george: 5}, [‘bob’, ‘george’]); _.isEqual(removed, [1,5]);

4) JSON serialization (_.toJSON, _.parseJSON) - provides a convention for serializing and deserializing class instances (with a configurable _type property).

Examples:

var plain_old_json = _.toJSON(some_instance), some_instance_copy = _.parseJSON(plain_old_json);
var namespaced_instance = _.parseJSON({_type: ‘SomeNamepace.SomeClass’, prop1: 1, prop2: 2});

5) Object Lifecycle (_.own, _.disown) - handles individual objects, arrays, and object properties that comply with some lifecycle conventions:

clone() and destroy()
retain() and release()
clone() and Javascript memory management
plain old JSON

Examples:

var an_object = new Object(); var owned_copy_object = _.own(an_object); _.disown(an_object);
var an_array = [new Object(), ‘hello’, new Object()]; var owned_copy_array = _.own(an_array); _.disown(an_array);
var an_object = {one: new Object(), two: new Object(), three: ‘there’}; var owned_copy_object = _.own(an_object, {properties:true}); _.disown(an_object);

6) Compare for the rest of us (_.compare) - wraps built in compare with self-evident return types (_.COMPARE_EQUAL, _.COMPARE_ASCENDING, _.COMPARE_DESCENDING) and allows objects to provide custom compare methods.

Examples:

if (_.compare(‘x’, ‘y’) === _.COMPARE_ASCENDING) return ‘y’
if (_.compare(‘こんにちは’, ‘さようなら’, ‘localeCompare’) === _.COMPARE_ASCENDING) return ‘さようなら’;
if (_.compare(custom_compare_instance, ‘a string’) === _.COMPARE_ASCENDING) return custom_compare_instance;

7) Super helpers (_.getSuperFunction/_.superCall/_.superApply) - useful if you don’t know what the super class will be ahead of time:

local_backbone_collection_mixin { _add: function(model) { if (!model.id) model.id = model.cid;); _.superApply(this, ‘_add’, arguments); } };

And more: _.cloneToDepth, _pluck with remove, _.findIndex, _.functionExists/_.callIfExists, and _.getValue with default if missing.

Hopefully, these will get integrated into the main branch, but if not, you can find an add-on pack at: https://github.com/kmalakoff/underscore-awesomer.

Download now (Right-click, and use “Save As”):

Development: Underscore-Awesomer.js
Production: Underscore-Awesomer.min.js

Enjoy!

Background.js now with multi-dimensional arrays!

Sun, 18 Sep 2011 08:37:00 -0400

I had a need for combining arrays on a background thread and after a bit of thought, I came up with a simple way to iterate over any number of arrays in fixed sized batches.

For example, you may want to apply the same list of filters to some models and then based on the results, so some more heavy processing. Take a look at this gist for a code snippet.

Enjoy!

Download now (Right-click, and use “Save As”):

Development: Background.js
Production: Background.min.js

Or check out the project here: https://github.com/kmalakoff/background

Background.js

Sat, 27 Aug 2011 04:05:00 -0400

I’ve been writing a single page CoffeeScript web app and needed to put some processing on a background thread so my GUI would remain responsive.

I found some articles referring to a good JavaScript WorkerQueue library so I gave it a shot.

After playing with it, I realized that I needed some extra functionality:

1) set up and clean up before and after the worker is run

2) the ability to destroy the worker queue (to support a single page app)

3) Array iterator helpers to keep the code DRY

If you are interested in theses capabilities in an easy to use background queue and list library, download now (Right-click, and use “Save As”):

Development: Background.js
Production: Background.min.js

Or check out the project here: https://github.com/kmalakoff/background

Enjoy!

git flow release finish first_missing_piece_android

Sun, 26 Jun 2011 10:41:00 -0400

I was able to port the Objective-C CouchMover to Java for the android version!

The interface is basically the same so it should be familiar:

PasswordAuthentication credential = new PasswordAuthentication("admin", 
   "admin".toCharArray());
credential = null; // NO USER/PASSWORD ON ANDROID
CouchMover couchMover = new CouchMover(serverURL, credential, "mycouchapp_db");
    
couchMover.loadDocumentFromAssetManager(getAssets(), "_design/mycouchapp", 
   "mycouchapp.json", "mycouchapp.version");
couchMover.loadDocumentFromAssetManager(getAssets(), "mydata", 
   "mydata.json", "mydata.version");

couchMover.gotoAppPage("_design/mycouchapp", appView, "index.html");

I also wrote a small helper CouchStarter that encapsulates the installation process for Couchbase. I’m not planning on maintaining it for production purposes, but it should be useful for getting up and running quickly.

You can find the code, samples, and a README here: https://github.com/kmalakoff/phonegap-couchbase-xplatform

Note: it works reasonably well, but I believe due to the refactoring of the Couchbase android version, the underlying couchlib-android library has a few limitations (it should work on Android SDK 2.1, 2.2 and 2.3 although I only tested on Android 2.3.1 and 2.3.3, and view generation seems to cause an exception in Couchbase). Once it works flawlessly, I’ll update this post.

Enjoy!

git flow release finish first_missing_piece

Sun, 19 Jun 2011 14:41:00 -0400

Today, I published what I solution to the first missing piece:

Allow for offline CouchApp loading since you cannot assume there will be a connection to download a CouchApp

that I hope others will find useful and efficient to use in their day-to-day development workflow.

Workflow

To end up with a nicely packaged couchapp, views, and application seed data, you need to decide what workflow you want to follow during development, testing, release, etc. I chose the following process:

use source files for everything. I originally tried to edit views in futon, but besides not having source files that could be checked into version control, after the first edit, the web formatting made it difficult to maintain.
develop and debug on my laptop to take advantage of a full suite of browser developer tools. If you want to get a feel for how difficult directly testing in phonegap can be, take a look at the following post: http://www.phonegap.com/2011/05/18/debugging-phonegap-javascript.
run on a mobile simulator or hardware periodically after testing on laptop/PC. This should catch device-specific problems and differences after the general problems have been fixed in a more productive laptop/PC development environment.

In order to achieve this result, I am using the following development workflow:

use soca on my local filesystem to have source files for everything including the couchapp, views, and application seed data.
use ‘soca autopush’ to propagate any local changes into a couch development server. Note: I added a new flag to soca’s config.js file so until the main branch picks it up (fingers crossed), you will need to use my copy in GitHub.
use ‘couchpack database_url destination_file —auto’ to watch for and pack all changes into my iOS project’s Resources directory. I wrote the couchpack and couchwatcher gems for this purpose.
build and run in XCode
use an Objective-C class called ‘CouchMover’ to check packed version files for changes at runtime and to upload on app launch. I released this class in the phonegap-couchbase-xplatform GitHub repository.

Note: currently, this workflow has only been tested on the Mac OSX platform and does not yet have sample code for an android version. Volunteers are welcome!

Setup details

Install: soca

For now, you’ll need to get a local copy from GitHub and to build/install a local copy:

sudo gem uninstall soca
git clone git@github.com:kmalakoff/soca.git
cd soca
sudo rake install

Install: couchpack

sudo gem install couchpack

Usage - Laptop/PC

I recommend you download the cross-platform demo project at: https://github.com/kmalakoff/phonegap-couchbase-xplatform. It demonstrates the workflow and you won’t be slowed down with setting up a PhoneGap/Couchbase project from scratch.

In the demo project, you will find a file called couch_automate.rb. It demonstrates how you can launch all of the soca and couchpack watching with one command ‘ruby couch_automate.rb’. Here’s the meaningful parts:

exec 'cd soca/mycouchapp; soca autopush'
exec 'cd phonegap-couchbase-ios/phonegap-couchbase-ios/Resources; 
   couchpack document http://localhost:5984/mycouchapp_db/_design/mycouchapp 
      mycouchapp --auto'

The first line starts watching the soca project and pushes changes into the couchdb document; the second line starts watching the couchdb document and packs any changes into the iOS Xcode project Resources directory.

Usage - Objective-C

When you receive the CouchbaseDelegate’s method callback couchbaseDidStart you can use the CouchMover class to check for version changes in your packed Resources and if there are changes, upload them to the iOS Couchbase CouchDB using the following:

NSURLCredential *credential = [NSURLCredential credentialWithUser:@"admin" 
  password:@"admin" persistence:NSURLCredentialPersistenceForSession];
CouchMover* couchMover = [[CouchMover alloc] init:serverURL 
  serverCredential:credential databaseName:@"mycouchapp_db"];
[couchMover loadDocumentFromBundle:[NSBundle mainBundle] 
  documentName:@"_design/mycouchapp" 
  documentBundlePath:@"mycouchapp.json" 
  versionBundlePath:@"mycouchapp.version"];
[couchMover gotoAppPage:@"_design/mycouchapp" webView:self.webView 
  page:@"index.html"];
[couchMover release];

The CouchMover class is flexible enough to upload documents which can be packaged couchapps, views, or application seed data to any database (just call ‘[couchMover setDatabaseName:@”yourdatadatabasename”]’ to switch databases) and can be used without the bundles if you prefer (just call ‘[couchMover loadDocument:documentName version:version getAppAsJSONDataBlock:yourblock_returningNSData]’)

Gotchas

There are many and I’ll maintain this list based on your feedback:

To get the sample running on actual hardware, you’ll need to register the app with Apple using these PhoneGap instructions: http://wiki.phonegap.com/w/page/39991939/Getting-Started-with-PhoneGap-iOS-using-Xcode-4-(Template-Version
After you pack your couchdb documents for the first time, you need to drag them into your XCode project’s Resources directory.
In order to not have your PhoneApp switch to the local Safari app when you call [webView stringByEvaluatingJavaScriptFromString:couchappApgeURL], you need to add localhost to the ExternalHosts key in your PhoneGap.plist. Select your PhoneGap.plist in the “Supporting Files” directory, and add the following 2 items as separate entries: 127.0.0.1 and 0.0.0.0.
The CouchMover Objective-C class current has dependencies on TouchFoundation’s classes on NSData asBase64EncodedString. If you aren’t linking with TouchFoundation, include the files that you find in the sample project’s Vendor/TouchFoundation_MinimalExtraction in your project.

Done! Well, if only reality were that simple… I’m happy to update this post and answer your questions as you are confronted with real-world problems in getting this to work.

Good luck!

Kevin

open.("source")

Sun, 19 Jun 2011 14:23:00 -0400

A colleague at work (thank you Stephane!) recommended that I consider Couchbase-iOS (https://github.com/couchbaselabs/iOS-Couchbase) for my mobile project.

Before choosing RhoSync as my syncing solution a few months ago, I spent weeks investigating options for a syncable offline database solution for cross-platform mobile applications - RhoSync seemed to be the only show in town. With Couchbase-iOS, I have to admit that I was a bit hesitant because it is still in beta and there were some obviously missing pieces, but after doing some research into CouchDB, it became clear that it wasn’t a matter of “if” Couchbase takes off, but “when”. So I decided to jump in and help to open source community build some of those missing pieces!

To address some of the missing pieces, I drafted a list of currently missing pieces:

Allow for offline CouchApp loading since you cannot assume there will be a connection to download a CouchApp.
Provide a standard way for users to to authorized locally and to create an account on a remote server.
Provide best practice samples for organizing and syncing local and remote databases. For example: using local databases like “appdata_db” with server databases like “myusername/appdata_db” and making sure authentication and authorization is secure.
Allow for users to trigger synchronizations from their mobile device while handling B. and C.
Cross-platform project creation in as simple and trouble free way as possible.

Also, I created a demonstration project (https://github.com/kmalakoff/phonegap-couchbase-xplatform) on GitHub that I hope will demonstrate solutions to these and more design problems.

Enjoy!

Kevin