Binder.js: Two-way databinding

Just started to work on a small JavaScript two-way databinding library for modern browsers (IE9+).
I know that there is a lot of DOM-based databinding frameworks out there and I encourage you to use them!

Why?

  1. I wanted to learn more about DOM Level 3, ES5 and ES-Harmony
  2. I needed a databinding library, that only did databinding and not forced me to use a certain (MV*) design pattern
  3. I want to write my templates as valid HTML (not in a script-tag)
  4. I needed a small simple two-way databinding library for my own projects

Goals

  1. Simple and easy to use
  2. Small in size (currently ~5.5KB minified and gzipped)
  3. No dependencies (other than a polyfill for Object.observe)

Basic usage


More advanced usage
Fetch github repositories from a user:

More examples at the project website: binderjs.com
Code at github: https://github.com/nekman/Binder.js

For now, this is just a proof of concept, that I will continue to develop and use for my own small projects. But of course, I appreciate any feedback and/or criticism :)

Object.observe

Soon we should be able to use Object.observe which can be used to observe JavaScript-object changes.

From ecmascript.org:

Object.observe allows for the direct observation of changes to ECMAScript objects. It allows an observer to receive a time-ordered sequence of change records which describe the set of changes which took place to the set of observed objects.

This feature can be tested in Google Chrome Canary where it is enabled by default. Also note that the current version of Google Chrome is M34, so this will be available in very a near feature (probably in M35) :)

Usage:

var person = { shoeSize: 43, name: 'nekman' };

Object.observe(person, function(changes) {
  var change = changes[0];
  console.log('Changed property "%s" from %s to %s.', 
      change.name, 
      change.oldValue,
      change.object[change.name]
  ); 
});

// change a object property...
person.shoeSize = 44;

Object.observe will make frameworks like Polymer/EmberJS/AngularJS a lot faster because they no longer need to do their own “dirty checking” to detect changes for their two-way-databinding.

Until Object.observe is fully supported, the following polyfills can be used instead:

https://github.com/Polymer/observe-js
https://github.com/KapIT/observe-shim
https://github.com/jdarling/Object.observe
https://github.com/melanke/Watch.JS (not Object.observe but similar).

More about Object.observe:

http://addyosmani.com/blog/the-future-of-data-binding-is-object-observe/
http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/

Reading Google Spreedsheet with Backbone.js

Google has (almost) a API for everything. If you have a spreedsheet on Google Drive, you could publish a sheet to the web by selecting:File / Publish to web

Google Spreedsheet
Then, you can get your spreedsheet as JSON by using the document key:

https://spreadsheets.google.com/feeds/cells/<key>/od6/public/basic?alt=json

I needed to display a spreedsheet from Google Drive, that also updated it self by using ajax-polling. Wrote some JS (Backbone.js) to handle the data fetching and rendering.

Currently, I translate some values to swedish:

  • 0 = Ej klar (Not complete)
  • 1 = Klar (Completed)
  • 2 = Pågår (Doing)

Libraries used

Code
https://github.com/nekman/gdrive-example

Demo
Published a demo to my public Dropbox folder:

dl.dropboxusercontent.com/u/705811/gdrive/index.html#0AmAJdMx-TkItdFZPV2QzYk5LYzRDVXMxSEVxMG9iYmc/Todo list/5000

http://dl.dropboxusercontent.com/u/705811/gdrive/index.html#<DOCUMENT_KEY>/<Optional title>/<Optional polltime in ms>

Summary
Backbone.js suited very well for this use case. Backbone.js is a library, not a framework. Therefore, you can change a lot and do as you want with your code. Next time I’ll build something using Backbone.js I think I’m going to look into an existing framework (e.g Backbone.Marionette), to see if that makes development more rapid/faster…Otherwise, I’ll check on AngularJS.

Presentation om jQuery

Höll i veckan en presentation om jQuery för Jönköping Developer Dojo.
Agendan var (ungefär):

  • Introduktion till jQuery
  • Förklara hur jQuery fungerar
  • Visa delar av jQuerys API
  • Visa några patterns
  • Visa några anti-patterns

Presentationen gick bra! Fick ungefär sagt det jag ville (inga uppenbara missar och inte några “blackouts”). Eftersom det var en ganska bred publik som bestod både av frontendutvecklare (som kan jQuery bättre än mig) och backendutvecklare som knappt vet vad jQuery är…Var det en utmaning att hålla rätt nivå. Kunde väl tryckt lite mer på att jQuery är ett bibliotek och att man i många lägen behöver tänka över vilket pattern man vill jobba med. Eller, använda något av de befintliga MV*-ramverken.

Försökte köra en så “kod-driven” presentation som möjligt. Körde därför presentationen direkt i webbläsaren. Använde Reveal.js och Highlight.js med contenteditable-block som kunde redigeras och exekveras direkt. I större exempel kördes koden direkt från Chrome DevTools. Fungerade väldigt bra. Skönt att slippa “tabba” mellan webbläsare och editor.

Presentationen går att kika på här: jdd.azurewebsites.net
och koden finns här: github.com/nekman/JDD-jQuery.

PS: För er som inte lyssnade. Är inte 100% seriös på slide #31 ;)