Friday, July 20, 2012

JayData–The cross-platform HTML5 data-management library for JavaScript

Last week, I wanted to call an oData service from my HTML5 metro app. First I was planning to use datajs until I discovered JayData which offers similar functionality to datajs and much more!
image
What’s JayData?
JayData is a standards-based, cross-platform Javascript library and a set of practices to access and manipulate data from various online and offline sources.
JayData provides JavaScript Language Query (JSLQ) as a tool to query local (in-browser and mobile) and remote data sources with a simple, unified query syntax: JavaScript itself. Much like Microsoft .NET developers can utilize LINQ to perform operations on data from different databases.
The aim of JayData library is to give a similar level of abstraction with the help of the $data.Expressions API and the JavaScript language itself.
JayData is cross-platform (runs on HTML5 desktop and mobile browsers, can be hosted in PhoneGap environment on iPhone, iPad and Android) and cross-layer as it works on client-side and server-side (Node.JS).
It provides support for
  • WebSQL
  • SQLite
  • IndexedDB
  • OData
  • Facebook
  • YQL
How to start using it(in ASP.NET)?
  • Create a new web application
  • Add the JayData nuget package.
  • A command line utility is copied into the web folder. With that you can create a JayData client context from any oData metadata document.
  • C:\NorthWindSample>JaySvcUtil.exe -m http://services.odata.org/Northwind/Northwind.svc/$metadata
    –n northwind -o northwind.js


  • A northwind.js file is generated.
  • Include this file into your web page together with jaydata.js and jQuery.
  • Now you can write some Javascript that uses this northwind odata service:
  •  
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="/scripts/JayData.js"></script>
        <script type="text/javascript" src="northwind.js"></script>
        <script>
            var nwcontext = new northwind.NorthwindEntities({
                name: 'oData',
                oDataServiceHost: 'http://services.odata.org/Northwind/Northwind.svc'
            });
    
            function createItemLI(name, id, css) {
                var li = $('<li></li>').append(name).addClass(css).data('id', id);
                return li;
            }
    
            $(function () {
                nwcontext.Categories.toArray(function (categories) {
                    categories.forEach(function (category) {
                        $('#categories').append(
                            createItemLI(category.Category_Name, category.Category_ID, 'category'));
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="categories">
        </ul>
    </body>
     
  • That’s all!

No comments: