Tuesday, October 5th, 2010

jQuery Data Binding, Templates, and Mobile: John Resig at FOWA

Category: JavaScript, jQuery

>Here’s a live blog from jQuery creator John Resig’s talk at FOWA, where he’s giving us an update on the new toys from the jQuery team.

Data Link

jQuery already supports a data API:

javascript
< view plain text >
  1. $("div").data("test", 5);
  2. $("div").data("test")===5;
  3. $("div").removeData();

This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks – when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.

The new data linking plugin, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:

javascript
< view plain text >
  1. var user = new User();
  2. $("form").link(user, {
  3.   firstName: "first-name",
  4.   lastName: "last-name",
  5. });

Whenever “first-name” or “last-name” elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.

More info on GitHub.

Templating

Templating has become a big deal in Javascript, and there’s now an official jQuery templating plugin, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his original Micro-Templating library was considered at one point, but the new templating is more refined.

javascript
< view plain text >
  1. $("#test").append("<li><em>${name}</em></li>", "john");

Pre-compiling template strings is possible too:

javascript
< view plain text >
  1. var data = { firstName: "John" };
  2. $("#item").tmp(data).appendTo("ul");
  3. <script id="item" type="text/html">
  4.   <li>$(firstName}</li>
  5. </script>

The most interesting feature is that elements retain the data that made them – you can ask an element “what data did you come from”?

javascript
< view plain text >
  1. var lastTemplateItem = $(".movieName:last").tmplItem();
  2. var movie = lastTemplateItem.data;
  3. var htmlNodes = lastTemplateItem.nodes;

John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM “is everywhere” and you should be okay with storing your data against it.

More info on GitHub.

jQuery Mobile

jQuery Mobile, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (he shows this stat of 10% growth in the past 12 months), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)

With most mobile browsers, there’s a big problem: You can’t do fixed positioning – John says it’s just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn’t work right – the subtle UI issues it causes are very noticeable.

Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.

There are toolbars available – user clicks to show and hide them, and it works nicely because it supports native scrolling. While you’re scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began).

Developers can detect the various touch events:

taphold
tap
swipeleft
swiperight
swipe

Web Roundup

John finishes off with some highlights on the web in general:

Posted by Michael Mahemoff at 10:35 am
19 Comments

++++-
4.4 rating from 16 votes

19 Comments »

Comments feed TrackBack URI

You have some missing quotes in the second sample and too much encoding on the fourth one.

Comment by BertrandLeRoy — October 5, 2010

Fixed, thanks.

Comment by Michael Mahemoff — October 5, 2010

PURE is a *much* better templating system, which works with jQuery out of the box.

http://beebole.com/pure/

Comment by nataxia — October 5, 2010

Hello
in second Templating example
$(firstName} mb it should be ${firstName} ?

Comment by Flcn — October 5, 2010

I use the tmpl plugin for a few weeks now, it’s really great and usefull in a lot of situations.
IMHO, the advantage over PURE is that a designer can understand/change the template, it’s easier to read.

Comment by Guillaume86 — October 5, 2010

I agree 100% with nataxia.
I really think this solution is just another double-bracket engine. Pure has a fast learning curve since you just rely on plain HTML, is lightweight and just make sense.
Really not a good candidate to be included in the jQuery core :-(.

Comment by rlopes — October 5, 2010

The template expression syntax appears to the the same as the JSP EL expression syntax.

That means that these templates might not be useable inline in JSPs unless there is a way to change the expression syntax. :(

Comment by waltr — October 5, 2010

@guillaume86, PURE is precisely about clean HTML and CSS selectors. Designers know well both of them already and don’t have to learn a new templating language that mixes up with their markup. Thank you nataxia and rlopes for the comment!

Comment by Tchvil — October 6, 2010

The examples I’ve seen of PURE’s syntax hint at directives needing to know what the actual html looks like :(
.
I would want the ability of the templates to be developed independently from the js. That would be pure IMO.
.
I definately want a templating solution that’s library agnostic and maybe even one that’s serverside implementations too :)

Comment by rasmusfl0e — October 6, 2010

I can see a lot of use cases for data linking plugin. It looks like an elegant solution. As for templating, I dislike engines that let you embed logic (in effect, creating JSP-look alikes) inside templates. Over time, these engines will suffer from the same disadvantages of JSPs – developers tend to write a lot of logic in the templates so they become less and less reusable. I am with others on PURE engine in this regard. Lately, I have used Mustache.js (http://github.com/janl/mustache.js), which is claimed to be logic-less templating engine. Although the double curly brackets are an eyesore, I really liked its simplicity and clear separation of template, data and logic. It works well with jQuery. I have used the same with env.js on Rhino, so my pages can now be rendered on server side :-)

Comment by ragjunk — October 6, 2010

@rasmusfl0e – You need to know where to put the data in the template. There must be links somewhere. The double-bracket engines mix them inside the HTML. PURE separates them using CSS selectors.

Comment by Tchvil — October 6, 2010

@Tchvil: I’m well aware of that :)
.
The reliance on CSS selectors is the only thing that keeps me from giving PURE a proper whirl.

Comment by rasmusfl0e — October 6, 2010

@rasmusfl0e Tchvil is quite right. Indeed, PURE’s syntax is much more jQuery like than this new plugin. I’m almost embarassed for jQuery that it is being proposed.

Comment by nataxia — October 6, 2010

@nataxia: Oh, I’m not refuting anything Tchvil says :)
.
I only had a niggle with using CSS selectors (yes, I’m being picky) – that’s a design choice. And that choice does match jQuery’s DOM toolkit nature nicely. But at the end of the day I’m just looking for a library agnostic solution :)

Comment by rasmusfl0e — October 7, 2010

@rasmusfl0e, PURE can work alone in modern browsers or mobiles.
Or as a plugin of the common JS libs when a selector engine is missing(dojo, DomAssistant, jQuery,Mootools, Prototype, Sizzle and Sly).

And it can be used server side too with a JS server like node.js+jsdom, rhino or Jaxer

Comment by Tchvil — October 7, 2010

@Tchvil: Oh, sorry – I didn’t mean to imply otherwise :)

Comment by rasmusfl0e — October 7, 2010

Another templating library in javascirpt is jTemplate.
http://jtemplates.tpython.com/

Features:
- 100% in JavaScript
- Work with Ajax and/or JSON
- Allow to use JavaScript code in templates
- Work with jQuery
- Allow to build cascading templates
- Allow to define parameters in templates
- Live Refresh! – automatic update content from server
- Free to commercial or non-commercial use!

Comment by Jiddu — October 11, 2010

@Tchvil: I don’t think we know the same designers if you say they can/want understand Pure syntax as easily as you tell (as easily as a “double bracket” style templating engine at least) :)

Comment by Guillaume86 — October 12, 2010

Awesome talk and thanks for the write-up, i was just looking for the links to the demos.

ACES

Comment by sidonaldson — November 10, 2010

Leave a comment

You must be logged in to post a comment.