Soa development using javascript
Download as PPTX, PDF•1 like•2,890 views
This document discusses an alternative approach to web application development using JavaScript and web services instead of the traditional approach of serving HTML fragments from a servlet. The key points of this approach are: 1) The browser makes AJAX requests directly to web services instead of to a servlet, and uses JavaScript to manipulate the DOM instead of receiving HTML fragments. 2) Performance is improved by distributing the load across clients instead of a single server. 3) It follows a SOA approach by separating the presentation, business logic, and data layers.
![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;
}
}](https://image.slidesharecdn.com/soadevelopmentusingjavascript-120228131936-phpapp02/85/Soa-development-using-javascript-11-320.jpg)
Soa development using javascript
- 1. SOA Development Using Javascript An alternative approach to web development Carl Domingue IBM Certified Solution Developer [email protected] 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