1. SOA Development Using Javascript
An alternative approach to web development
Carl Domingue
IBM Certified Solution Developer
carl.domingue@dsixe.com
http://dsixe-wpf.blogspot.com/

2. SOA Development Using Javascript
Typical web application: AJAX requests
Browser HTML fragments from servlet.
Asks servlet for HTML
Data
Servlet Web Service
Invokes WS and creates Business logic and calls
HTML for browser to data repositories
Subsystem

3. SOA Development Using Javascript
Javascript web application: AJAX requests
Browser
Asks servlet for HTML
data directly from web service, manipulate
Invokes web services HTML using javascript.
HTML with templates Data
Servlet Web Service
Creates HTML for Business logic and calls
browser to data repositories
Subsystem

4. SOA Development Using Javascript
Why do it this way?
• Serving HTML from a back end server to a browser is an
antiquated design that predates modern browsers
• Cut out the middle man, more like developing
traditional thick client applications
• Simplify AJAX – dynamic portions of user interface are
built entirely with javascript, not with servlet
• Easier when implementing rich user interface which
requires extensive manipulation of the DOM

5. SOA Development Using Javascript
Why do it this way?
• Improved performance - load distributed on many
clients instead of single server
• Follows SOA approach
• Presentation/UI layer – browser
• Business logic – reusable web services
• Data – database/subsystems
• Short learning curve, most developers know some
javascript
• No need to render the whole page when user action is
requested

6. SOA Development Using Javascript
Arguments for not using this approach
• Performance - dojo is too big/slow
• Dojo is already being used in WPS 7 and has been
load tested with excellent results, little additional
overhead is required
• Dojo classes are about 1k after compression
• No IDE for javascript
• RAD offers extensive support for dojo, even custom
classes
• Javascript is not an ideal language for enterprise
development, easy to turn code into an unmaintainable
mess

7. SOA Development Using Javascript
Arguments for not using this approach
• Security
• Retrieve user id from web service using @Resource
instead of request
• Secure web service URL with group permissions at
servlet level
• Needs more thought
• Browser incompatibilities
• Use dojo when possible to isolate code
• Traditional approach faces same issues

8. SOA Development Using Javascript
Java bean class
package com.dsixe.evaluation.operations;
public class Evaluation {
private static int DAYS_TO_SUBMIT = 10; // ???
private String evaluationID = "";
private String teacherID;
private String startDate;
private String savedDate;
private String completedDate;
private String evaluatorName;

9. SOA Development Using Javascript
Javascript bean class
dojo.provide(“com.dsixe.evaluation.operations.Evaluation");
dojo.require(“com.dsixe._BeanBase");
dojo.declare(“com.dsixe.evaluation.operations.Evaluation",
com.dsixe._BeanBase, {
// By default all fields are private
_evaluationID : null,
_teacherID : null,
_startDate : null, Javascript generated with
_savedDate : null, Fast Code eclipse plugin
_completedDate : null, using custom template,
_evaluatorName : null, minimal hand coding

10. SOA Development Using Javascript
UI.htm Controller.js
Dojo
Service proxy
Custom code
Generated javascript Generated javascript Generated javascript
bean class bean class bean class

11. SOA Development Using Javascript
goGetSubjects(“600”, “02”, updateUISubjects); Controller
goGetSubjects : function(schoolID, gradeID, callback){
var params = new dojox.wire.ml.XmlElement("getSubjects");
params.setPropertyValue("SchoolID", schoolID);
params.setPropertyValue("GradeID", gradeID);
var deferred = myService.getSubjects(params); Service proxy
// ajax callback Javascript bean
deferred.addCallback(function(xmlData){ class
var info = new com.dsixe.commonListService.objects.subject.Subject();
var subjList = info.createFromXML(xmlData);
callback(subjList);
});
}
function updateUISubjects(/* com.dsixe.commonListService.objects.subject.Subject */oSubjects){
var selector = dojo.byId("subject");
selector.options.length = 0; // wipe out list Controller
for (var x=0; x < oSubjects.length; x++){
var opt = new Option(oSubjects[x].getDeptDesc(), oSubjects[x].getDeptCode());
selector.options[x] = opt;
}
}

12. SOA Development Using Javascript
Using ibm_soap dojo module
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:gcp="http://k12.gcps.ga.us/GCPSCommonListServices">
<soapenv:Header/>
<soapenv:Body>
<gcp:getSubjects>
Raw XML from SoapUI
<SchoolID>600</SchoolID>
<GradeID>02</GradeID>
</gcp:getSubjects>
</soapenv:Body>
</soapenv:Envelope>
myService = new ibm_soap.rpc.SoapService(gcpsCommonService);
myService.serviceUrl = "http://localhost:81/MyListServices_WS/MyListServices";
goGetSubjects : function(schoolID, gradeID, callback){
var params = new dojox.wire.ml.XmlElement("getSubjects"); Service proxy
params.setPropertyValue("SchoolID", schoolID);
params.setPropertyValue("GradeID", gradeID);
var deferred = myService.getSubjects(params);
// ajax callback
deferred.addCallback(function(xmlData){
var info = new k12.gcps.commonListService.objects.subject.Subject();
var subjList = info.createFromXML(xmlData);
Pass in XML
callback(subjList);
Array of Subject response
});
} classes