Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JavaScript, OData, JayData

See how web services is the past and the successor is JavaScript/JSON
by

Peter Zentai

on 21 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JavaScript, OData, JayData

Our story will be centered around
OData,

JavaScript
and
JayData
and how these could serve as the bases of most hybrid/HTML5/Line of business mobile applications.

At the end of the day we boldly will state and with examples prove that OData could
revolutionize
the
AJAX paradigm
, and be the ultimate successor for proprietary AJAX APIs.
WCF Data Services
JaySvcUtil.exe - static context
JaySvcUtil.js - dynamic context

////////////////////////////////////////////////////////////////////////////////////////
////// Autogenerated by JaySvcUtil.exe http://JayData.org for more info /////////
////// oData v2 /////////
////////////////////////////////////////////////////////////////////////////////////////

(function(global, $data, undefined) {




function registerEdmTypes() {

function Edm_Boolean() { };
$data.Container.registerType('Edm.Boolean', Edm_Boolean);
$data.Container.mapType(Edm_Boolean, $data.Boolean);

function Edm_Binary() { };
$data.Container.registerType('Edm.Binary', Edm_Binary);
$data.Container.mapType(Edm_Binary, $data.Blob);

function Edm_DateTime() { };
$data.Container.registerType('Edm.DateTime', Edm_DateTime);
$data.Container.mapType(Edm_DateTime, $data.Date);

function Edm_DateTimeOffset() { };
$data.Container.registerType('Edm.DateTimeOffset', Edm_DateTimeOffset);
$data.Container.mapType(Edm_DateTimeOffset, $data.Integer);

function Edm_Time() { };
$data.Container.registerType('Edm.Time', Edm_Time);
$data.Container.mapType(Edm_Time, $data.Integer);

function Edm_Decimal() { };
$data.Container.registerType('Edm.Decimal', Edm_Decimal);
$data.Container.mapType(Edm_Decimal, $data.Number);

function Edm_Single() { };
$data.Container.registerType('Edm.Single', Edm_Single);
$data.Container.mapType(Edm_Single, $data.Number);

function Edm_Double() { };
$data.Container.registerType('Edm.Double', Edm_Double);
$data.Container.mapType(Edm_Double, $data.Number);

function Edm_Guid() { };
$data.Container.registerType('Edm.Guid', Edm_Guid);
$data.Container.mapType(Edm_Guid, $data.String);

function Edm_Int16() { };
$data.Container.registerType('Edm.Int16', Edm_Int16);
$data.Container.mapType(Edm_Int16, $data.Integer);

function Edm_Int32() { };
$data.Container.registerType('Edm.Int32', Edm_Int32);
$data.Container.mapType(Edm_Int32, $data.Integer);

function Edm_Int64() { };
$data.Container.registerType('Edm.Int64', Edm_Int64);
$data.Container.mapType(Edm_Int64, $data.Integer);

function Edm_Byte() { };
$data.Container.registerType('Edm.Byte', Edm_Byte);
$data.Container.mapType(Edm_Byte, $data.Integer);

function Edm_String() { };
$data.Container.registerType('Edm.String', Edm_String);
$data.Container.mapType(Edm_String, $data.String);

};
registerEdmTypes();
$data.Entity.extend('NorthwindModel.Category', {
'Category_ID': { key:true,type:'Edm.Int32',nullable:false,computed:true },
'Category_Name': { type:'Edm.String',nullable:false,required:true,maxLength:15 },
'Description': { type:'Edm.String',nullable:true,maxLength:Number.POSITIVE_INFINITY },
'Picture': { type:'Edm.Binary',nullable:true,maxLength:Number.POSITIVE_INFINITY },
'Products': { type:'Array',elementType:'NorthwindModel.Product',inverseProperty:'Category' }
});
$data.Entity.extend('NorthwindModel.Customer', {
'Customer_ID': { key:true,type:'Edm.String',nullable:false,required:true,maxLength:5 },
'Company_Name': { type:'Edm.String',nullable:false,required:true,maxLength:40 },
'Contact_Name': { type:'Edm.String',nullable:true,maxLength:30 },
'Contact_Title': { type:'Edm.String',nullable:true,maxLength:30 },
'Address': { type:'Edm.String',nullable:true,maxLength:60 },
'City': { type:'Edm.String',nullable:true,maxLength:15 },
'Region': { type:'Edm.String',nullable:true,maxLength:15 },
'Postal_Code': { type:'Edm.String',nullable:true,maxLength:10 },
'Country': { type:'Edm.String',nullable:true,maxLength:15 },
'Phone': { type:'Edm.String',nullable:true,maxLength:24 },
'Fax': { type:'Edm.String',nullable:true,maxLength:24 },
'Orders': { type:'Array',elementType:'NorthwindModel.Order',inverseProperty:'Customer' }
});
$data.Entity.extend('NorthwindModel.Employee', {
'Employee_ID': { key:true,type:'Edm.Int32',nullable:false,computed:true },
'Last_Name': { type:'Edm.String',nullable:false,required:true,maxLength:20 },
'First_Name': { type:'Edm.String',nullable:false,required:true,maxLength:10 },
'Title': { type:'Edm.String',nullable:true,maxLength:30 },
'Birth_Date': { type:'Edm.DateTime',nullable:true },
'Hire_Date': { type:'Edm.DateTime',nullable:true },
'Address': { type:'Edm.String',nullable:true,maxLength:60 },
'City': { type:'Edm.String',nullable:true,maxLength:15 },
'Region': { type:'Edm.String',nullable:true,maxLength:15 },
'Postal_Code': { type:'Edm.String',nullable:true,maxLength:10 },
'Country': { type:'Edm.String',nullable:true,maxLength:15 },
'Home_Phone': { type:'Edm.String',nullable:true,maxLength:24 },
'Extension': { type:'Edm.String',nullable:true,maxLength:4 },
'Photo': { type:'Edm.Binary',nullable:true,maxLength:Number.POSITIVE_INFINITY },
'Notes': { type:'Edm.String',nullable:true,maxLength:Number.POSITIVE_INFINITY },
'Reports_To': { type:'Edm.Int32',nullable:true },
'Orders': { type:'Array',elementType:'NorthwindModel.Order',inverseProperty:'Employee' }
});
$data.Entity.extend('NorthwindModel.Order_Detail', {
'Order_ID': { key:true,type:'Edm.Int32',nullable:false,required:true },
'Product_ID': { key:true,type:'Edm.Int32',nullable:false,required:true },
'Unit_Price': { type:'Edm.Decimal',nullable:false,required:true },
'Quantity': { type:'Edm.Int16',nullable:false,required:true },
'Discount': { type:'Edm.Single',nullable:false,required:true },
'Product': { type:'NorthwindModel.Product',required:true,inverseProperty:'Order_Details' },
'Order': { type:'NorthwindModel.Order',required:true,inverseProperty:'Order_Details' }
});
$data.Entity.extend('NorthwindModel.Order', {
'Order_ID': { key:true,type:'Edm.Int32',nullable:false,required:true },
'Customer_ID': { type:'Edm.String',nullable:false,required:true,maxLength:5 },
'Employee_ID': { type:'Edm.Int32',nullable:true },
'Ship_Name': { type:'Edm.String',nullable:true,maxLength:40 },
'Ship_Address': { type:'Edm.String',nullable:true,maxLength:60 },
'Ship_City': { type:'Edm.String',nullable:true,maxLength:15 },
'Ship_Region': { type:'Edm.String',nullable:true,maxLength:15 },
'Ship_Postal_Code': { type:'Edm.String',nullable:true,maxLength:10 },
'Ship_Country': { type:'Edm.String',nullable:true,maxLength:15 },
'Ship_Via': { type:'Edm.Int32',nullable:true },
'Order_Date': { type:'Edm.DateTime',nullable:true },
'Required_Date': { type:'Edm.DateTime',nullable:true },
'Shipped_Date': { type:'Edm.DateTime',nullable:true },
'Freight': { type:'Edm.Decimal',nullable:true },
'Customer': { type:'NorthwindModel.Customer',required:true,inverseProperty:'Orders' },
'Employee': { type:'NorthwindModel.Employee',inverseProperty:'Orders' },
'Order_Details': { type:'Array',elementType:'NorthwindModel.Order_Detail',inverseProperty:'Order' },
'Shipper': { type:'NorthwindModel.Shipper',inverseProperty:'Orders' }
});
$data.Entity.extend('NorthwindModel.Product', {
'Product_ID': { key:true,type:'Edm.Int32',nullable:false,computed:true },
'Supplier_ID': { type:'Edm.Int32',nullable:true },
'Category_ID': { type:'Edm.Int32',nullable:true },
'Product_Name': { type:'Edm.String',nullable:false,required:true,maxLength:40 },
'English_Name': { type:'Edm.String',nullable:true,maxLength:40 },
'Quantity_Per_Unit': { type:'Edm.String',nullable:true,maxLength:20 },
'Unit_Price': { type:'Edm.Decimal',nullable:true },
'Units_In_Stock': { type:'Edm.Int16',nullable:true },
'Units_On_Order': { type:'Edm.Int16',nullable:true },
'Reorder_Level': { type:'Edm.Int16',nullable:true },
'Discontinued': { type:'Edm.Boolean',nullable:false,required:true },
'Category': { type:'NorthwindModel.Category',inverseProperty:'Products' },
'Order_Details': { type:'Array',elementType:'NorthwindModel.Order_Detail',inverseProperty:'Product' },
'Supplier': { type:'NorthwindModel.Supplier',inverseProperty:'Products' }
});
$data.Entity.extend('NorthwindModel.Shipper', {
'Shipper_ID': { key:true,type:'Edm.Int32',nullable:false,computed:true },
'Company_Name': { type:'Edm.String',nullable:false,required:true,maxLength:40 },
'Orders': { type:'Array',elementType:'NorthwindModel.Order',inverseProperty:'Shipper' }
});
$data.Entity.extend('NorthwindModel.Supplier', {
'Supplier_ID': { key:true,type:'Edm.Int32',nullable:false,computed:true },
'Company_Name': { type:'Edm.String',nullable:false,required:true,maxLength:40 },
'Contact_Name': { type:'Edm.String',nullable:true,maxLength:30 },
'Contact_Title': { type:'Edm.String',nullable:true,maxLength:30 },
'Address': { type:'Edm.String',nullable:true,maxLength:60 },
'City': { type:'Edm.String',nullable:true,maxLength:15 },
'Region': { type:'Edm.String',nullable:true,maxLength:15 },
'Postal_Code': { type:'Edm.String',nullable:true,maxLength:10 },
'Country': { type:'Edm.String',nullable:true,maxLength:15 },
'Phone': { type:'Edm.String',nullable:true,maxLength:24 },
'Fax': { type:'Edm.String',nullable:true,maxLength:24 },
'Products': { type:'Array',elementType:'NorthwindModel.Product',inverseProperty:'Supplier' }
});
$data.EntityContext.extend('NorthWind.NorthwindEntities', {
Categories: { type: $data.EntitySet, elementType: NorthwindModel.Category },
Customers: { type: $data.EntitySet, elementType: NorthwindModel.Customer },
Employees: { type: $data.EntitySet, elementType: NorthwindModel.Employee },
Order_Details: { type: $data.EntitySet, elementType: NorthwindModel.Order_Detail },
Orders: { type: $data.EntitySet, elementType: NorthwindModel.Order },
Products: { type: $data.EntitySet, elementType: NorthwindModel.Product },
Shippers: { type: $data.EntitySet, elementType: NorthwindModel.Shipper },
Suppliers: { type: $data.EntitySet, elementType: NorthwindModel.Supplier }
});

NorthWind.context = new NorthWind.NorthwindEntities( { name:'oData', oDataServiceHost: 'http://localhost:50538/Knockoutjs/Northwind.svc' });


})(window, $data);
C# Classes
SQL Azure

Entities, EntitySets, EntityContexts, Linq Queries and WebMethods
SQL Server
Oracle (?)
Entity Framework
ASP.NET Web API
SharePoint Lists
LightSwitch 2012
OData Endpoint
JSLQ
JavaScript Classes
JayData
JavaScript Client
Environment

Entities, EntitySets, EntityContexts, Metadata, Queries ServiceFunctions
Downloads metadata
generates JavaScript files
JavaScript Crud
UI Library Connectors
OData client in
the browser/mobile
The JavaScript revolution
HTML5/Hybrid Mobile Application
YQL
Facebook
MongoDB
JavaScript
OData consumer on client-side
OData provide server-side
OData consumer on server-side (Node.js)
Different
perspectives of JavaScript
Without any manual $.ajax and JSON.parse
What is JayData
Very similar to EntityFrame and a bit of Data Services just everything is in JavaScript
Destined for

all tiers
and
all devices
Abstraction layer over data sources and protocols
Discoverable metadata (automated UI scenarios, validation)
"Client first" approach
The notion of entities and expressions
Rich set of storage/data providers
So what is wrong with JavaScript then?
Required tools and concepts are still missing
AJAX
Influencers are not enterprise developers
Client-side technology running in browsers
Rarely used (HTML webpages)
Less then 1% of developers use it
Dev env support
92% of top 10.000 websites uses JavaScript
JavaScript = front-end technology
Node.js was created
JavaScript Language Query - Kill AJAX step #1
Query arbitrary data sources with one and only one query syntax: JavaScript
Avoid manually parsing the result (dynamic binders)
Provide projection/shaping support
Provide an environment that is familiar for C# developers
Late XX century
2012
2009
All cloud providers offer Node.js service
25% of DEV jobs require JavaScript skills (UK)
This was 7.5% in 2004
http://www.itjobswatch.co.uk
Cross-platform mobile development technology
PhoneGap, Sencha, etc.
Desktop app development platform: Windows 8
High performance server applications
JavaScript developers (%)
30
OData client in the
Middle Tier (mashups)
NodeJS
The life cycle of the predicates functions:
The OData, the JayData and the JavaScript
This you will find hundreds of times within the same applications
Everyone likes to do this, but why??
Total spaghetti (query syntax, protocol handling, serialization, usage maybe within an onclick even handler)
Data has no metadata never
1) filter predicate in JS function
2) AST nodes created with JSLint
3) Model agnostic JavaScript code expressions
4) Domain specific Entity expressions
5) Several totally different final product: SQL query string, OData $filter + xhr requests or in memory function invokations
context.persons
.filter( function(p) { return p.Age > 42 && p.Gender == 'Male'})
.orderBy(function(p) { return p.FirstName; })
.map(function (p) { return { Name: p.FirstName + ' ' + p.LastName })
.forEach()
"value": "(begin)",
"first": [
{
"value": "function",
"arity": "statement",
"first": [
{
"value": "article"
}
],
"block": [
{
"value": "return",
"arity": "statement",
"first": {
"value": "==",
"arity": "infix",
"first": {
"value": ".",
"arity": "infix",
"first": {
"value": "article"
},
"second": {
"value": "Title"
}
},
"second": {
"value": ".",
"arity": "infix",
"first": {
"value": "this"
},
"second": {
"value": "name"
}
}
}
}
]
}
]
}"
{

"expressionType": "FunctionExpression",
"nodeType": "Function",
"parameters": [
{
"type": "unknown",
"name": "article"
"nodeType": "lambdaParameter",
}
],
"body": {
"expressionType": "SimpleBinaryExpression",
"nodeType": "equal",
"type": "boolean",
"left": {
"expressionType": "PropertyExpression",
"nodeType": "memberAccess",
"expression": {
"expressionType": "ParameterExpression",
"nodeType": "lambdaParameterReference",
"type": "unknown",
"name": "article",
"paramIndex": 0
},
"member": {
"expressionType": "ConstantExpression",
"nodeType": "constant",
"type": "string",
"value": "Title"
}
},
"right": {
"expressionType": "PropertyExpression",
"nodeType": "memberAccess",
"expression": {
"expressionType": "ThisExpression",
"nodeType": "this"
},
"member": {
"expressionType": "ConstantExpression",
"nodeType": "constant",
"type": "string",
"value": "name"
}
},
"operator": "=="
}
}"
{
"expressionType": "SimpleBinaryExpression",
"nodeType": "equal",
"type": "boolean",
"left": {
"expressionType": EntityFieldExpression
"nodeType": entityField",
"expression": {
"expressionType": "EntityExpression",
"nodeType": "Entity",
"type": "unknown",
"name": "article"
},
"member": {
"expressionType": "ConstantExpression",
"nodeType": "constant",
"type": "string",
"value": "Title"
}
},
"right": {
"expressionType": "QueryParameterExpression",
"nodeType": "constant",
"type": "string",
"value": "TomHunks"
}
},
"operator": "=="
}
}"
KnockoutJS
Sencha Touch
Backbone

...
JayData & SAP Netweaver Gateway (OData)
JavaScript service class
- createPerson
- getPersonsByAge
OData Endpoint
OData Client
JavaScript client class
- createPerson
- getPersonsByAge
Client Application
Server Application
WebSQL/sqLite
JavaScript application services hosted in the cloud on EC2 centered around OData as primary API
Launch in 09/12
Targets JavaScript only skills
The customer (developer) can deploy his JavaScript Services based solution pubishing his API with OData
LightSwitch like onscreen data management: the customer builds his schema and the OData endpoint is automatically provisioned
JavaScript API Services
(similar to WebAPI)
Dreams
Your
feedback
Visibility
Cooperation
VS2012 Upshot
Azure
Win 8 Metro
First impression
Who to contact?
Have you tried it?
Blogs
Evangelism
OData projects
JayData Entity Contex
OData Endpoint
OData Client
Client Application
Server Application
JavaScript Data Services
(similar to ASPNET Data Services)
Possible future of JayStack project
Persons
Products
Etc...
JayData Entity Contex
Persons
Products
Etc...
JayStack Product milestones
Concept drafted
Pitch presented
08/2011
Funds raised
JayStack founded
02/2012
OData provider
IndexedDB provider
WebSQL/SQLite Provider
YQL, FBQL Provider
03/2012
JayData prototye ready
04/2012
05/2012
JayData available
1st May 2012
JayStorm available
Sept 2012
Amazon EC2 vs Azure evals
06/2012
JayData highlights - general
A cool JavaScript library to work with typed local and remote data and operations
Eliminates protocol level approach and provides a protocol and data source agnostic experience
Multiple providers
Works in (almost) every device and in every tier
Same semantic on the client and the server
Leverages OData/datajs
2014
?
JayData client hightlights
Provides an OData client environment familiar to C# developers
Geared to work in multiple dev envs (datajs patched)
Supports a number of UI libraries
Provider fallback chain
Sync API*
JayData server highlights
Provides an OData client environment familiar to C# developers
Geared to work in multiple dev envs (datajs patched)
Supports a number of UI libraries
Provider fallback chain
Sync API*
NodeJS is V8 JS engine connected to computer IO
Agile and productive
Event driven
Database drivers
Supports 10K request / sec on an ordinary processor
Creating a simple REST service is a matter of minutes
COOL
Improved VS11
IntelliSense
Samsung SmartTV
POC
07/2012
08/2012
09/2012
10/2012
11/2012
12/2012
Node.JS
support
Knockout.js
support
Sencha Touch
support
Titanium
support
JayService
opensource
JayStudio available
Nov 2012
SharePoint
2010/2013 POC
SAP Gateway
POC
JayData Enterprice
license
OData v3
Win8
POC
Cloud build
for Jay apps
Roadshows
VS2012
templates
I have to say it is quite an elegant solution
 David Sheardown
bit.ly/MZg6Xa

JayData is also an interesting newcomer to the scene
Mark Stafford
bit.ly/OHXk5x

JayData is something that’s better than sliced bread. Luckily it’s already invented
Rainer Wittmann
bit.ly/QFHdIu


JayData Makes Web Phenomenal !
Its amazing .. RIA services but on ASP.NET using auto generated JS context
Mohammad Najeeb Aljaber
bit.ly/Phvjxy

JayData sounds really interesting, and the JSLQ syntax looks really good – a query language that's easy to read is very important
Jens Arps

Bart Wullems
bit.ly/Msvs6C

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!
... OData & Jaydata
kill AJAX :)







The DEV team in heads (11)
2 Architects
4 JavaScript developers
2 Portal developers
1 Designer/Portal builder
2 blogs, forum, support, community managers
Dynamic filtering with Knockout
Win8 Metro app in JavaScript
AJAX Spaghetti
SharePoint 2010/2013 browser HTML5 app
var person = new Demo.Person( { firstName = "Peter" });
var order = new Demo.Order( { amount: 100, product: 10});
person.orders.add(order);
Demo.context.people.add(person);
Demo.context.saveChanges( function() {
alert("New person " + person
.ID
+ " created");
alert("New order " + order
.ID
+ " created");
});
http://jaydata.org/blog/javascript-language-query-jslq-101
Rich Client Experience
Multiple providers
VS2012
Cordova/XCode
Titanium
JavaScript CRUD - Kill AJAX #2
Knockout template
JayData code
Our goal: Two-way data bindig
Mobile Client
Browser Client
NodeJS client
NodeJS service
NodeJS service
MongoDB
Netflix
OData
OData
OData
JayData
Introduction
JayStack Technologies creates tools for JavaScript developers
Founded in 02/2012 with $0.5m
this covers 12 months of operation
JayData 1.0 release 05/2012
5 releases since
Commercial launch in 09/2012
Metro apps
Sharepoint
WebStorm
OK, we can consume OData.
But it is as much fun if not more providing it!
Full transcript