rest to javascript for better client-side development
DESCRIPTION
The summary slides for WS-REST 2014 accepted paper: "REST to JavaScript for Better Client-side Development".TRANSCRIPT
Hyunghun Cho, Sukyoung Ryu
INTRODUCTION: The Web-centric Era
■ 『SAMSUNG DigitALL – everyone’s invited』&『Web of Things – everything’s invited』
INTRODUCTION: Web on embedded systems
■ Server enabled devices
■ Client enabled devices
MOTIVATION: Challenges of REST API on embedded system
■ Server side challenge
– design fully RESTful API
– standardized REST API among devices
– API maintainability & product lifecycle
– API quality assurance on various clients
■ Client side challenge
– difficulty to understand API domain
– REST API provide too low-level abstraction
– application maintainability to adapt REST API change
HTTP
HTTP
Internet
REST API
REST API
Web Server Framework
Web Brower Web Runtime
Java PHP JavaScript
JavaScript
…
HTML CSS …
MOTIVATION: Delegate to JavaScript API
■ Server side beneficial
– provides evolvability to fully RESTful API
– leverage standardized REST API
– Node.JS appears to develop server using JavaScript
– API quality assurance to a target client
■ Client side beneficial
– JavaScript APIs are more friendlier to client-side developers than REST APIs
– JavaScript APIs provide high-level abstraction
– wrapper to map REST API to JavaScript API can maintain the REST API change
HTTP
HTTP
Internet
REST API
REST API
Web Server Framework
Web Brower Web Runtime
Java PHP JavaScript
JavaScript
…
HTML CSS …
OUR APPROACH: Design JavaScript API from REST API
■ 5 steps to design
① Collect use cases of a REST API
② Extract states of a client
③ Introduce the entities
④ Add methods to an entity
getRadius() draw()
⑤ Design the method parameters
void draw(
unsigned short x,
unsigned short y,
SuccessCallback scb,
optional ErrorCallback ecb);
WebIDL Specification
CASE STUDY: N-Service API
■ N-Service API enables Multi-Screen Service Development
– allows Smart TV incorporating web platform and nearby mobile devices
■ System Architecture
– Inter-application communication w/ REST API & JavaScript API
Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
CASE STUDY: N-Service API
■ Step #1: Collect use cases of a REST API
Source: http://www.samsungdforum.com/ Guide/ref00003/convergence_app_client totvappcomm.html
Method URI Use case
POST /ws/apps/{appId}/connect Connect to a host application
POST /ws/apps/{appId}/disconnect Disconnect from a host application
GET /ws/apps/{appId}/info Get the information of a host application
POST /ws/apps/{appId}/queue Push a message to a host application or upload a file
GET /ws/apps/{appId}/queue/devices/{deviceId} Pop a message of a specific client device from a host application
POST /ws/apps/{appId}/queue/devices/{deviceId} Push a message to a specific client device
POST /ws/apps/{appId}/queue/groups/{groupId} Push a message to a specific group
GET /ws/apps/{appId}/queue/groups/{groupId} Retrieve group members
POST /ws/apps/{appId}/queue/groups/{groupId}/join
Join a group
POST /ws/apps/{appId}/queue/groups/{groupId}/leave
Leave a group
CASE STUDY: N-Service API
■ Step #2: Extract possible states of a client and the state relationships
CASE STUDY: N-Service API
■ Step #3: Introduce an entity that is responsible for the extracted states and there transitions
NServiceHost NServiceManager
NServiceDevice NServiceDeviceGroup
CASE STUDY: N-Service API
■ Step #4: Add state transitions as methods to the introduced entity
NServiceHost NServiceManager
NServiceDevice NServiceDeviceGroup
connectToNServiceHost()
joinGroup()
sendMessageToHost()
getHostInfo()
disconnect()
sendMessage()
leave()
getMembers()
CASE STUDY: N-Service API
■ Step #5: Make the number of method parameters smaller than the parameter number of the corresponding REST API
[REST API]
POST /ws/app/{appId}/connect HTTP/1.1
SLDeviceID: 12345
VendorID: VendorMe
DeviceName: IE-Client
ProductID: SMARTDev
NServiceManager
connectToNServiceHost()
joinGroup()
sendMessageToHost()
[JavaScript API – synchronous (tentative)]
boolean connectNServiceHost(
DOMString appId,
DOMString slDeviceID,
DOMString deviceName,
DOMString productId
);
[JavaScript API – asynchronous]
[Constructor (NServiceHostInfoInit init)]
interface NServiceHostInfo {
attribute DOMString ipAddress;
attribute unsigned short portNumber;
attribute DOMString appID;
};
void connectNServiceHost(
NServiceHostInfo hostInfo,
NServiceHostConnectSuccessCallback
onsuccess,
optional ErrorCallback? Onerror
);
CASE STUDY: N-Service API
■ The order of JavaScript API calls for /connect operation – NSeviceOwnDeviceInfo interface and corresponding methods are introduced.
CASE STUDY: N-Service API
■ Finally, JavaScript API works seamlessly both host and client side.
– below figure shows the ER diagram between client API & host API
CASE STUDY: N-Service API
■ Web applications using the JavaScript API
– Mash-up with Open API such as YouTube, flicker, ...
– Sources are freely available HERE
[Family Album]
[Puzzle game]
[YouTube Continue Play]
[Draw Together]
CASE STUDY: Lesson learned
■ A security issue using the REST API on CORS-aware browser
– W3C Cross Origin Resource Sharing
■ Usability Enhancement
– Object-oriented JavaScript API is more usable than REST API.
■ Code maintainability
– The client code using JavaScript API is more readable than directly invoking REST API.
■ Better documentation
– JavaScript API provides reasonable document as a REST API’s programming guide.
Feel free to contact me if you have any question [email protected]