Tuesday, June 11, 2013

Welcome to jsviews.com - the documentation and download site for JsViews, JsRender and JsObservable

This blog brings two pieces of news:

The jsviews.com website
The first is in the title: There is a now a new jsviews.com  website, which provides documentation, samples, downloads, and more, for JsViews, JsRender and JsObservable.

JsRender is now officially beta
And the second is that the JsRender bits (which have been "beta candidate" for a while) have today moved to being officially labelled "beta".  

The context
In fact both JsRender and JsViews have effectively been at beta quality for some time. The plan of course is to move to V1.0 as soon as is appropriate, and in fact the current code is already very close to the targeted V1.0 version, in that the code quality is high, and the feature coverage very complete. 

So what has been missing? Well the the most important missing piece was full API documentation, and the decision was not to label a library as being an official beta release until that API documentation for that library was available. But to achieve that meant not only writing the documentation content, but also providing the website to view and navigate through that documentation. And also the plan was to provide integrated live working samples completely within the flow of the documentation - and that too needed to be designed and implemented.

So jsviews.com is that website, and it is in fact itself an example of a single-page app built entirely using JsViews and JsRender, illustrating the power of those libraries for creating dynamic interactive single-page apps. If you are interested, you can see the code for the site here. (It actually includes a hidden feature which allows it to switch into editable mode, with wiki-style content creation, so it is more sophisticated than may meet the eye in normal read-only mode).

JsRender now has detailed (and interactive) API documentation
Here it is: jsviews.com/#jsrapi. More topics will be added in the coming period (along with. later on, tutorials, and "deep-dive" topics). But already the topics give complete coverage of the primary scenarios of JsRender.

And JsViews?
JsViews API documentation will be next, and as soon as it is ready, the official beta for JsViews will be declared. (So in fact the JsViews beta version will probably be almost identical to current JsViews bits). 

JsRender and JsViews V1.0
Version V1.0 should follow not too long after, since the number of triaged issues currently planned to be addressed for V1.0 is small - and could even be reduced slightly if necessary. V1.1 planned features have also already been largely determined - and V1.1 is not intended to be major release in terms of new features.   

Integrated samples within the documentation:
Now, just to give a flavor of the features of the new documentation, here is an example of a sample - taken from the end of this documentation topic:

The sample is live. You can click on Try it and change anything you want: - the template, the data, or the code. For example if you change each of the places I have circled in red - 

- and then hit Run Code, you will get something like this:

Now if you switch to the Full Code tab, you can copy the contents of that tab, and drop them into a simple HTML page. 

Run the page and you have a fully working sample of your own modified version of the original - which you can continue to experiment with from there...

I am looking forward to completing the documentation, and hope it will help you to discover and appreciated the possibilities of JsRender and JsViews!

Tuesday, March 6, 2012

Approaching Beta: What's changing in JsRender and JsViews

Major update to  JsRender and JsViews
In previous posts and elsewhere, I had set the goal of reaching beta for JsRender at the end of February. A major update has just been committed to GitHub for both JsRender and JsViews, which is effectively a beta candidate for JsRender.

This update brings a large number of API changes, new features, and improvements, to both JsRender and JsViews. It follows quite a period of apparent silence on GitHub (as far as commits are concerned), which left some folks with the impression that the project may have become inactive. The truth is quite the 
opposite. JsRender and JsViews are (in my view!) alive and well and growing apace...

So why the silence? In working on the new bits, I had to address the fact that the beta API design I was aiming for would be breaking for many users. Not a big deal usually for alpha software, but in the case of JsRender and JsViews there has been quite a lot of adoption already, so I wanted to avoid causing too much pain with a series of breaking commits. I decided to work on a single breaking update intended to provide a one-step transition to a beta candidate for JsRender (or at least a candidate for a stable beta API), and also introduce much of the future stable beta API for JsViews.

That update has taken a long time to complete, since it is a major rewrite not only of JsRender but also JsViews... The new bits for JsRender have been nearly ready for quite a while now, but the integration between JsViews and JsRender meant also moving JsViews a long way towards its future beta version. That way current users of JsViews can also port their apps to the new JsRender.

What's changed?
This post provides a guide through the changes, and is primarily intended to help existing users of JsViews or JsRender to move to the new version.

It can also be helpful to first-time adopters, but bear in mind that this is still not quite the official beta, so documentation is limited. I hope to provide more documentation (or update this post) as we move to the official beta for JsRender (fairly soon) and JsViews (probably end of April or early May...). In the meantime, take a look too at all the live samples and the corresponding code for JsViews and JsRender.

JsRender: principal changes
  • {{: ...}} and {{> ...}} tags: The basic tag for outputting data values, {{=some.data.path}}, is now {{:some.data.path}}, and supports converter functions, and almost any javascript expression, as in {{myConverter:someExpression}}.
    It is 
    not HTML-encoded by default.
    To HTML-encode, use the tag 
  • Block tags and inline tags: The syntax for block/inline tags is now similar to HTML element syntax in the use of the '/' character:
    • A block tag is written {{myBlockTag ...}} ... {{/myBlocktag}}.
    • A non-block (self-closing, or inline) tag is written {{myInlineTag/}}.
    • A block tag can become an inline tag if it references a template as content:
      {{myBlockTag ... tmpl="myNamedTemplate" /}}.
  • {{#each}} tag is now {{for}}: There was some confusion around the {{each ...}} tag, in that the name suggested that it only worked as an iterator over an array as in {{#each myArray}}...{{/each}}. In fact it worked also against singleton data objects, and this is made more intuitive by renaming it to {{for ...}}. This means you can write {{for myArray}}...{{/for}}, but for other scenarios you might also write  {{for myObject}}...{{/for}}, which will render against myObject as current data item (data context) for the nested content.
  • Expressions within template tags: JsRender template tags now support almost any JavaScript expression (and also allow parens, to any depth).
    For example, you can write:  {{if  price > 3 && price < (maxPrice - 10)}}Special deal{{/if}}.
    However, unlike with jQuery Templates, the expressions are evaluated within a parsing and execution context which precludes accessing global variables or running any code which arbitrarily assigns or modifies data or state. Only template data properties/methods and registered helper functions/parameters can be accessed. 
  • View properties syntax: To access view properties, such as parent, the syntax is now #parent.
  • $itemNumber is now #index: There is now a zero-based index, identical to the index on view objects when using JsViews. This change is thanks to expression support which has made getting a 1-based index very easy, as in: {{:#index + 1}}.
  • Helper functions: There is now a single concept of a helper function, which can be provided either via the options parameter in the $.render (or the $.link method, if using JsViews), or by registering using the $.views.helpers() API call.
    In either case, a registered helper function myHelper(...) will be accessed within the template using a simpler syntax than before: ~myHelper(...), rather than $ctx.myHelper(...). 
    or example, you can write {{:~myFullNameHelper(firstName, lastName)}}.
  • Template parameters: In addition to helper functions, template parameters can be passed in with options or registered using $.views.helpers() - and then accessed by the same template syntax as helper functions, as in {{:~myParameter}}
  • Aliasing variables for use in nested contexts: If you want to access the data in a parent context, you can now provide a variable (accessed like a template parameter) which will be available within nested context. For example: {{for lineItems ~orderTitle=orderInfo.title}}...{{:~orderTitle}}...{{/for}}
  • Registration APIs: Registering of helper functions, converter functions and custom tags each use an equivalent API pattern: $.views.helpers()$.views.converters()$.views.tags().
  • Registering/compiling templates: This uses a similar API, $.templates(), which also allows defining template properties and resources (below).
  • "Intellisense-friendly" APIs for rendering:  New APIs are provided which are convenient for intellisense. For example, you can now write: $.render.detailsTmpl( person ); 
  • Template resources and settings: Registering templates now supports specifying individual settings for the template, and registering resources such as helpers, converters, other templates, etc. so that they are available only in the context of the registered template, and are not exposed globally to other templates.
  • Layout templates: A template may have a setting: layout: true. This will make it render just once, independently of whether the data supplied is an array, null, undefined, false, or any other data value. A {{for}} tag within the template will then render against the data in the normal way.
  • Debug setting: If a compiled template has the setting debug: true, a debugger; statement will be inserted at the beginning of the compiled template function. This makes debugging declarative templates easier.  
  • Unit tests:  JsRender now includes unit tests.
JsViews: principal changes
  • Views: Previously, both JsRender and JsViews had a concept of a view hierarchy, but the two were distinct. Now a single view hierarchy is created during rendering of templates (and nested templates) and the same view hierarchy is maintained (but augmented with additional methods or properties) during data linking by JsViews. 
  • Declarative data binding: data-fromdata-getfrom and data-to are now consolidated into a single data binding attribute: data-link. This provides for more concise and simpler data binding declarations that support both one-way and two-way binding. See the samples for different use-cases, including binding to multiple target attributes on the same HTML element.
  • Data binding expressions: Data binding expressions are evaluated according to the same contextual and parsing rules as template tag expressions. They can access exactly the same user-registered helper functions, template parameters, or converter functions that are available to template tag expressions - whether registered using $.views.helpers, or passed in with the options parameter in a render() call. In addition, helper functions and template parameters can be passed in with the options parameter of any link() call.
  • Automatic dependency detection :  In data binding expressions it is no longer necessary to put square brackets in paths to specify data-binding dependencies.
    <input data-getfrom="shipping.address[street]" data-to=" shipping.address[street] " /> is now written:
    <input data-link="shipping.address.street" />
    This opens the way to supporting [] syntax for array or property accessors.
  • "Intellisense-friendly" APIs for linking:  As with JsRender, JsViews now provides new APIs which are convenient for intellisense, such as:  $.link.movieTmpl( "#movieList", movies );
  • Disabling linking when rendering a template: If JsViews is loaded, rendered template were previously automatically data-linked. It is now possible to set link: false on a template, or as an option in the render call, or as a tag property: {{for link=false}}, to switch off data linking within a rendered template.
    This is useful, for example, if you want to include template tags within attribute markup, and suppress JsViews HTML comment annotations that were automatically inserted for data-linking purposes.
Missing, or not yet available features
  • Programmatic data linking: Programmatic data link APIs such as addLink have been removed. (They will probably return in modified form for JsViews beta)
  • Unit tests:  JsViews is not so close to beta as JsRender, and does not yet include unit tests. They will be added before it reaches beta.  
Performance and code size
In spite of the many new features, total minified code size for JsViews plus JsRender is similar to the previous update, and performance is slightly better. A performance test page is provided.

Specific examples of porting to the current design
The samples available at github.com/BorisMoore/jsrender (live here) and at github.com/BorisMoore/jsviews (live here) have been changed where necessary to work with current API calls and declarative syntax. In some cases there are new features available which would have provided a more elegant approach to the scenario shown, but the samples have generally been changed in a minimalistic way, to illustrate how to port to the new version. (More samples showing new features will be added at a later point, along with other documentation).

And from here?
The plan is to wait for some feedback or bug reports on this new update, before deciding whether to label this version of JsRender as the official beta. Once it has become beta, I hope to progressively add additional documentation.

In the meantime I will continue to work on moving JsViews towards beta. This may still take a while, since there are some significant changes and improvements in the pipeline. My hope is that it will be available late April or early May... 

Wednesday, October 12, 2011

jQuery Templates and JsViews: The Roadmap

Update: JsRender is now close to beta, and JsViews has many new features which also bring it closer to beta.
See Approaching Beta: What's changing in JsRender and JsViews for details on the latest changes.

From jQuery Templates to JsViews
This post provides some details and some context on the relationship between jQuery Templates, JsRender and JsViews, and provides information about the current roadmap.

History of jQuery Templates
jQuery Templates started out in March 2010, and went through a series of steps:
  • March 2010: John Resig posted a prototype
  • from May 2010 onwards: I worked on a fork of John's prototype (as did many others)
  • October 2010: My fork was pulled into the jQuery Templates repo, and it was decided to make this a jQuery Official Plugin:  (along with the Globalization and Data Link plugins, created primarily by Dave Reed, also at Microsoft). 
  • October 2010 - April 2011: I continued to iterate on the code on jquery/jquery-tmpl - taking it to Beta1 then working towards Beta2.
  • April 2011: The jQuery Project decided to change the status of official plugins. From that point the version of jQuery Templates at jquery/jquery-tmpl was owned by the jQuery UI team. I collaborated with jQuery UI on moving templates forward. 
  • April 2011 onwards: jQuery UI decided to put  jquery/jquery-tmpl  on hold - and asked me not to continue with fixes and updates under that repository. The plan was first to establish their templating requirements, and from there move on to determining what template engine they would use.
Meanwhile: JsRender and JsViews
At the same time (April 2011) I was working on an updated approach to jQuery Templates: JsRender and JsViews. JsRender uses pure string-based rendering without any DOM (or even jQuery) dependency, and JsViews integrates JsRender templates with data linking, to provide data-driven templated views.  I gave a preview of this work at the April 2011 jQuery Conference.

The jQuery UI team asked me to continue that ongoing development in my own repository rather than under the jQuery project. Meantime we collaborated on establishing design and feature requirements for templates in jQuery UI.

More recently jQuery UI decided that they did not want to use the jQuery Template syntax for their future templating engine, and instead opted for a logicless syntax (or as I prefer to say, codeless - since there would still be {{each}} and {{if}} tags) similar to Mustache and Handlebars. This led me to develop a version of JsRender using that style of markup. The result is the JsRender template engine that I showed at the October jQuery Conference, which is considerably faster that jQuery Templates, and remains very flexible thanks to the ease and power of creating custom tags and helpers (which include some features not found in Handlebars or Mustache - such as chaining of tags, intermixing of named and positional parameters, postfixed encoding syntax etc.)

Personally I had mixed feelings about the new codeless syntax. One big concern was that it will require porting of existing jQuery Template apps to the new syntax, and in the case where the templates include a lot of inline JavaScript expressions, it will mean either creating new custom tags, or falling back on the 'opt-in' {{*... }} tag for inline code.

But on the positive side, it provides better separation of presentation and behavior, and includes some other new features and improvements that provide considerable advantages, including the ease of creating custom tags, and the improved performance. So finally I am pretty excited by the new approach and what it brings...

Moving forwards with JsViews and JsRender
Currently JsViews and JsRender include a number of samples which can provide the basis for using them already for front-end development. Although there is not yet any documentation as such, and there has been no publicity (until now), they are nevertheless already being used at the prototype level by some important sites (notably by Hotmail - who are about to go into production using JsViews). That said, I anticipate some changes in JsViews, so it may be better to wait a bit longer before doing too much development using the JsViews platform. JsRender on the other hand is I think getting close to a stable Beta-release API.

Templates in jQuery UI 
As far as jQuery UI is concerned, the current expectation is that jQuery UI will use JsRender templates, or at least use JsRender as the starting point for jQuery UI templates. No  decision has been made yet on whether jQuery UI will use JsViews for data linking and binding.

Roadmap summary:
  • jQuery templates: Will remain at Beta1, and be superseded by JsRender templates, and JsViews.
  • JsRender: Soon move to Beta – then on to V1
    jQueryUI plan to use JsRender. (TBD whether it will migrate to jQuery project in GitHub...)
  • JsViews: Move to Beta (after JsRender) and then on to V1 …
    May also be used by jQueryUI

Monday, October 10, 2011

JsViews presentation at jQuery Conference, Boston

Six months in stealth mode...
My last blog entry was six months ago, and concerned my jQuery Conference presentation in April 2011. Since then, no blog entries, but lots of activity on moving  jQuery Templates forwards to the "next generation". It has been somewhat 'stealth mode' - since I wanted to stabilize the design and the code before drawing too much attention to it. That work has been progressing very well, and has now reached the point where I will gradually  bring it out from 'under wraps'.

jQuery Conference Presentation
The first step in that process just happened - another jQuery Conference presentation: I just returned from presenting on "JsViews: Next-generation jQuery Templates and Data Link" at the October 2011 jQuery Conference in Boston.

Here are the conference links:
The presentation was very well received, and created some buzz on Twitter, as illustrated by these tweets:
  • thinksaydo Think Say Do, LLC: super excited about github.com/BorisMoore/jsr… and github.com/BorisMoore/jsv… being part of jQuery's future
  • rascalking David Bonner: looking forward to playing with jsrender/jsviews. feels really comfortable, coming from a django background. #jqcon
  • chinmaybijwe Chinmay Bijwe#jqcon : JSViews and JSRender look great! Want to try soon.
  • vinbrown2 Vin Brown: seems any previously stated (by me) similarity between jsViews and xslt were overstated. this is oozing coolness. #jqcon
  • weisjohn john weis: coming from the Django template world, JsRender and JsViews are the      hotness! #jqcon
  • abackstrom Adam Backstrom: Super easy to add new template tags to jsViews. Tags can be      used in conditional template logic (if/else). #jqcon
  • abackstrom Adam Backstrom: Progressive enhancement in jsViews: render on the server, later apply a view to the DOM, get a view that is now observing for changes #jqcon
  • shooley Shawn Hooley: Excited about jsViews! Slick solution for dynamic rendering. #jqcon
  • addy_osmani Addy Osmani: Interesting next progression that's come out of the jQuery templatesproject: jsRender (no DOM/jQ dependence) -github.com/BorisMoore/jsr…
  • clayalouise clayalouise: Love the design for JsViews! I've been looking for a better than knockoutjs #jqcon
  • monkeysort Derek Meyer: Great talk by Boris Moore on the jQuery Templates replacementJsViews. Could have used a longer time slot for a public launch. #jqcon
  • ScottRHuff Scott Huff: Exciting and thought provoking talk from Boris Moore on JsViews #jqcon
  • _jeffrose Jeff Rose: Wish Boris Moore's presentation on JsViews was longer. Looks very impressive. #jqcon
One aspect that triggered a lot of excitement and questions was progressive enhancement, using the same JsRender template on the server as on the client, and then activating the content in the client by calling $.link().  (See this demo)

And now...
From this point I'll be working towards a documented Beta release - not too far away. More of that in an upcoming post on  "jQuery Templates and JsViews: The Roadmap".

Thursday, April 21, 2011

jQuery Bay Area Conference - presentation, meetings and movements

I just got back from speaking at this jQuery Conference Bay Area Conference last weekend, so this is a quick blog to provide some links.

This was the official jQuery Conference, which is held twice a year. So all the key members of the jQuery team and community were there.
  • 29 presentations over two days
  •  About 500 participants
  • Other presenters included John Resig, Yehuda Katz, Paul Irish, and others who you can see here
My Presentation
I spoke about “Harnessing jQuery Templates and Data Link, to build dynamic data-driven browser apps”.
The presentation was in three sections:
  • Discussion of App Scenarios for data and templates in the client, and example demo app
  • Templates today: walkthrough of all the main features
  • Templates ‘tomorrow’: preview of current work on really fast responsive interactive client-side views, integrating jQuery Templates and Data Linking. (Demo)
The slides are here

Meetings and movements
I had some great meetings and discussions with other developers and open-source community members. Definitely declarative binding of templated views to observable data is ‘in the air’, and there is clearly a huge interest in related scenarios and patterns like client-side MVVM or MVC. We were already doing much of this in Microsoft AJAX Preview 6 with observable objects and arrays and declarative bindings in templates, but it was not known to many. My hope is that the current JsViews integration of data link and templating we are working on will break new ground in this area, but this time within a simpler leaner approach, and in synergy with jQuery. People are looking for fast lightweight declarative frameworks of this kind. 

Update: I have published the demo pages above on GitHub as live pages, and have updated the links above to point to the new pages.

The new content is as follows:

Monday, February 14, 2011

In the Pipeline

Things have been busy, and I have been way less active on this blog than I intended.

But there's a good side to that: there are some important updates and improvements in the pipeline, and that's what's been keeping me busy...

I have been working in three main areas:

  • A Beta2 release of jQuery Templates, which is planned for April.

    This should address a number of issues and requests that have been expressed. One new feature planned for Beta2 is an API to render a template against data, straight to an HTML string, without any dependency on an HTML DOM. This can then be used for direct insertion as innerHTML, and will also enable easy use of jQuery Templates for rendering on the server, as well as improved performance of jQuery Templates when used in the browser for read-only scenarios.

    At the same time all the power of jQuery Templates will still be there, for those that choose to render templates with the full DOM activation phase included, as at present.

    In the case of server rendering, the idea is that the DOM activation can still happen in the browser, against server-rendered HTML. So progressive enhancement scenarios should be relatively easy to achieve...

  • A Beta2 release of jQuery Data Link, also planned for April.

    This involves significant changes to the current Data Link implementation, with much broader scenario coverage than at present. I hope to push my present code for this new version to a Beta2 branch of jQuery Data Link soon, for those who are curious about the ongoing design.

  • Finally, I have been working on a new script loader: JsDefer.

    You can find the current code for JsDefer here https://github.com/BorisMoore/JsDefer. This script loader shares a number of features with a script loader which we had released a long way back within the Microsoft AJAX platform (see http://aspnet.codeplex.com/releases/view/34488).

    It comes in two versions - a jQuery plugin, and another version that does not require jQuery to be loaded in the page.

    As well as providing some of the features we had in our Microsoft AJAX script loader, JsDefer also takes advantage of the concept of a "Deferred" object, to facilitate working with asynchronous processes (in particular, of course, the process of dynamically fetching a script and loading it into the page). The recent jQuery 1.5 release uses Deferred objects in the context of AJAX requests, so JsDefer is designed to work 'hand in glove' with jQuery 1.5 AJAX requests, among other scenarios. 

I plan to publish a blog post on JsDefer very soon, with an initial dive into how it works and the scenarios it addresses.

Monday, October 4, 2010

jQuery Templates is now an Official jQuery Plugin

Update - October 2011: Please see recent post: "jQuery Templates and JsViews: The Roadmap" for current information on the jQuery Templates roadmap.

Joint announcements were made today by jQuery and Microsoft that jQuery has decided to make the jQuery Templates, Data Link, and Globalization plugins 'Official jQuery Plugins'.

See the following blog announcements for more details:
Of course I am very pleased by this news, which is the result of some active collaboration with members of the jQuery team.

What this means:

A new home for the plugins...

First thing it means, of course, is that the repositories where those plugins live have now moved to a new home. The code that was at GitHub under the http://github.com/nje/ project has been moved to the following repositories under the jQuery project:
The above projects constitute Beta releases of the plugins.

The previous repositories under the http://github.com/nje/ project may continue to exist, but if they do then it will be for exploratory work which may or may not find its way back into the official plugins in a later update.

New documentation on the jQuery API site...

Another very important consequence of this announcement is that from now on, documentation for the jQuery Templates plugin and for the jQuery Data Link plugin will be available on the jQuery API site at http://api.jquery.com.

From today, new documentation is available there, which is much more complete than the previous Wiki provided on our repository.
One goal I have with this blog entry is to give you an idea of how the new documentation for jQuery Templates is organized, and to provide a convenient set of links to the various topics. Each topic concerns either a method from the plugin API, or a template tag that you can use within your template markup to obtain some of the rich features that this plugin provides.

API documentation topics:

Template tag documentation topics:

I hope this new documentation will help you to take advantage of some of the rich features of jQuery Templates.

For extra help I'm expecting soon to provide some more blog entries that continue the series Introducing jQuery Templates...