How do Web Applications communicate with a server? - ajax

Let's say I wanted to create a collaborative web application where users can simultaneously work on e.g. a diagram. I have my interactive web site (HTML/CSS/JavaScript) on the client side, and let's say a Java application synchronizing a centralized model on the server side. How would client and server exchange messages? To get a better idea of how the system is supposed to work like, here are some details and a small illustration:
Requirements
The underlaying technology should support authorized communication to show/hide sensitive information.
The model of the diagram should only exist on the server (centralized model, no copies), whereby changes should be broadcasted to other users (other browsers who are currently editing the same document).
After receiving changes to the model, the server shall perform computationally higher demanding tasks such as consistency checks and inform the user if e.g. an action is invalid.
Constraints
The system must not poll or set flags (it should be a direct communication).
The website must not be reloaded during use.
Software running on the client must be restricted to JavaScript.
Technology I've found
Here are some of the solutions I've looked at, ranked from (imho) most suitable to least, whereby I'm not sure if the list is even complete and all my assumptions are correct.
Java Web Service using javax.jws - The service would offer an API described by WSDL and be capable of responding with SOAP messages using the HTTP protocol, but can JavaScript process these messages?
Servlets & Java Server Pages (JSPs) - Would, as far as I know, require a page reload to fetch new content (isn't this pretty much the same as PHP? Both are executed on the server to generate HTML pages..)
I've already found this question which, however, does not provide concrete technologies in the answer. Thank you for any hints and clarification, I dearly appreciate it!

As you have already found out, there are many approaches to this common problem.
SOAP (sometimes called "Web Services" or "WS*") is a standard that was developed for application to application communication. It's strengths are precise specifications (and therefore many good libraries), interface sharing for client and server (through WSDL), and discoverability.
However, SOAP has very limited -if any- support in Browsers.
The most common modern approach is probably RESTful web services based on XML or JSON. When used in a browser as client, JSON is preferred, as the unmarshalling is trivial in JavaScript. Many frameworks and libraries like Angular and jQuery take on the tedious cross-browser AJAX request crafting. Some boilerplate is required to wrap the data in HTML, however. This downside can also be an upside if you consider the cleaner architecture and maintainability.
Since you're using Java on your server, you might also want to look into JSFs AJAX capabilities. It doesn't really use REST (no well-defined resources), but loads server-side rendered chunks of your HTML page asynchronously (read: AJAX) and re-renders them in the DOM. This can be seen as a compromise between real REST and full page reloading. The good side of it is you don't have to define any resources but your backing beans. The downsides are: possible overhead, since you're downloading HTML instead of pure data; and bad testability since you cannot access the rendered chunks outside the JSF context.
Wholly different issues are 1. the synchronization of concurrent requests and 2. communication with clients from server. For the latter you can either look into Web Sockets (the next big thing) or the good-old polling.
If concurrent edits of the same data are a concern to you, you'll have to implement a sort of strategy to tell whether edits can be merged or whether one has to be declined. The client will need to handle such situations and offer the user reviewing, overriding or reverting etc.
EDIT: more on Java servlets and JSP
Servlets are nothing but Java classes that handle specific HTTP requests, usually bound to certain URL paths. They're comparable to PHP pages: In PHP the web server gets a request and searches for a corresponding PHP file. Then it parses the PHP script and returns the response. Servlets do the same, only the syntax is very different. JSP is mostly a try at bringing more PHP-ish syntax to Java. Behind the curtains, they're rendered to pure Java servlets.
Java servlets have a long history which is older than AJAX, but many frameworks have taken on the challenge of implementing flexible resource handling on the server. Most notably Jersey and RESTEasy, which are implementations of the Java EE standard JAX-RS; and Spring, which is a request-based framework that competes well against Java EE standards. Then there is also JSF, which is sometimes called a successor of JSP. To the user it's little different than JSP, but the syntax is nicer and IMHO it is more feature-rich than JSP. Especially considering extensions like PrimeFaces. In contrast to JSP, JSF embraces AJAX and many built-in components are capable of communicating with the server using AJAX, including calling Java functions and re-rendering parts of the page.

I would recommend you try websockets since connections will be persistent between clients and server and any of them can send a message at any time.
You could implement a websocket server in Java on the server and use Javascript's built in websockets functionallity on the clients.
Take a look at https://www.websocket.org/ to learn more about websockets.

Related

How to respond to ajax calls on the server side?

I have been working on a mobile app that sends an ajax call to the server and waits for a response from the server in json format.
I am wondering from the server side, how to respond to an ajax call? Could someone give me an example in code?
I check the server code of my project (written by other members of the team) and could not understand it. I can only see it is written in java and also some keywords such as apache, springframework, etc pop up. I am a total newbie for server side programming and I want to learn more about it. Could someone give me some tips on how to get started with those as well? How does a server work? Is it just like responding to various request? What language could you use to build it and what is Apache? I know this looks like a lot of questions so probably I need to get some basic knowledge first. Any help/tips/suggestions on readings is appreciated.
This is kind of a broad question, as there are a lot of different server-side technologies that can handle server side AJAX requests, but if you want to go the Java route, using Spring Framework makes it very easy.
Spring Framework is a large open-source Enterprise Java framework that has a variety of features which entire books rarely even cover.
(Apache is an open-source project that contains over a hundred different sub-projects, the most popular being a web server.)
Spring does have some specific tools to handle REST calls. Assuming your AJAX is making a REST call (which is what it sounds like), and your project is already using Spring framework, it is fairly straightforward (assuming you already know Java). The Spring framework handles all the hard stuff for you. There are a few different ways to do this using Spring, but check out this link for creating a simple REST service:
https://spring.io/guides/gs/rest-service/
Another route would be to look into PHP, which is a server-side scripting language. With PHP, you can handle AJAX requests without the need for an application server (most basic web servers speak PHP). There are plenty of good resources for this, but one of my favorites is http://www.tutorialspoint.com/php/
BTW - the TutorialsPoint site is great for Java and Spring as well

zk vs gwt zk too many requests

Hi I am trying to compare the performance of zk and gwt.
In my comparision I cant write any javascript by myself if the framework itself converts some code into js its ok(like gwt) but I cant write js by myself
On writing code in the above way for almost anything done on browser a request is sent to the server in ZK.
Hence eventually if you compare the no of request sent by zk to server is too high as compared to gwt.
i would like to ask the following.
whose performance is better zk or gwt while ignoring the above.
if we dont ignore the above then is my conclusion that gwts performance is better than zk right ?
I know that there might be other parameters when comparing performance... but if the difference between requests are so high i cant really see zk beating gwt which some people have said on some forums
pls help
thanks
GWT and ZK are very different architecturally. GWT is client-centric so it sends less requests to the server. With GWT you can basically control everything by yourself. This on the otherhand means, the developer is responsible for handling server requests and asynchornouse data transfer between server and client. If you are an experienced web developer then the result could be great. If you are not then it could be pretty challenging and complex as there are some network and security issues you need to take care.
On the other hand, ZK is server-centric, it handles these server-client async communication for you. With ZK developers can focus more on the business logic without taking care of client-server issues. As the framework takes care of client-server talk, there are more requests by default. If you wish to minimize the request, you can probably follow their developer's guide to do some tuning.
IMO ZK and GWT are both matured framework. You can probably think about your project requirements and your experiences in Web development then choose the solution.
The previous posts are basiclly, but there are some features in zk that,I think, must be talked about.
Remember, every request is a zk-event, cos zk is completely event-based.
Client-Side Event-Handling
Zk allows you to implement client-side event-handling just as well as server-side,
which includes preventing zk from firing an event to the server.
You can simple manipulate the client objects in js as you can do it in Java on the
server-side or just do some post processing and and then...
Use Client-Side Event-Firing
Zk got that usefull js method zAu.send(zk.Event,int) that let's you send custom
or standart events to the server.
Deferrable Event-Listeners
Deferrable-events are queued at client-side, so you can minimize the number of
requests.
Stubonly
Stubonly is a way to make a component client-side only. But by now this is only
available for zk EE.
So, you can see, if you like, you can limit the requests to maybe the same amount of requests of GWT.
If it make sense or not depandce on you/your applycation. But I think you can say that zk is more powerfull than GWT.
You maybe interested in iZUML and defer rendering too.
ZK is server side focused, since GWT is all in the browser, so ZK needs much more ajax hits to the server to get js fragments, screen portions, etc. whereas GWT just hit the server at the beginning to download the js app (which will be cached in the client for ever) and whenever the app needs some data from the backend.
Said that, IMHO GWT should perform better since you dont need any sort of view logic being executed in the server (lighter servers), and there are less requests in the wire.
GWT and ZK are kind of different.
I've done some ZK projects and also some GWT projects. I didn't have performance issues in either cases,but I feel I need to write more code when I use GWT.
My experience from real world projects with two teams, one writing using the zk framework and the second using GWT. Identical UI projects having data served from the same data service layer. The zk team completed the project in one third of the time the GWT team consumed. Both projects deployed in production. Users were happy using either app. Finally we kept the zk version in production. Why? Simply because the maintenance of the zk app was so much faster and simple compared to GWT! Sorry GWT... Nice technology backed up by a giant but we will keep going with zk.

Should I build a REST backend for GWT application

I am planning a new application and have been experimenting with GWT as a possible frontend. The design question I am facing is this.
Should I use
Option A: GWT-RPC and build the app quickly
Option B: Build a REST backend using Spring MVC 3.0 with all the great #Controller, #Service, #Repository annotations and build a client side library to talk to the backend using the GWT overlay features and the GWT Request builder?
I am interested in all the pros and cons and people experiences with this type of design?
Ask yourself the question: "Will I need to reuse the server-side interface with a non-GWT front-end?"
If the answer is "no, I'll just have a GWT client": You can use GWT-RPC, and take advantage of the fact that you can use your Java objects both on the server and the client-side. This can also make the communication a bit more efficient, at least when used with <inherits name="com.google.gwt.user.RemoteServiceObfuscateTypeNames" />, which shortens the type names to small numeric values. You'll also get the advantage of better error handling (using Exceptions), type safety, etc.
If the answer is "yes, I'll make my service accessible for multiple kinds of front-ends": You can use REST with JSON (or XML), which can also be understood by non-GWT clients. In addition to switching clients, this would also allow you to switch to a different server implementation (maybe non-Java) in the future more easily. The disadvantage is, that you'll probably have to write wrappers (JavaScript Overlay Types) or transformation code on the GWT client side to build nice Java objects from the JSON objects. You'll have to be especially careful when you deploy a new version of the service, which brings us back to the lack of type safety.
The third option of course would be to build both. I'd choose this option, if the public REST interface should be different from the GWT-RPC interface anyway - maybe providing just a subset of easy to use services.
You can do both if use also use the RestyGWT project. It will make calling REST based JSON resources as easy as using GWT-RPC. Plus you can typically reuse the same request response DTOs from the server side on the client side.
We ran into the same issue when we created the Spiffy UI Framework. We chose REST and I would never go back. I'd even say GWT-RPC is a GWT Anti-pattern.
REST is a good idea even if you never intend to expose your REST endpoints. Creating a REST API will make your UI faster, your API better, and your entire application more maintainable.
I would say build a REST backend. In my last project we started by developing using GWT-RPC for the first few months, we wanted fast bootstrapping. Later on, when we needed the REST API, it was so expensive to do the refactoring we ended up with two backend APIs (REST and RPC)
If you build a proper REST backend, and a deserialization infra on the client side (to transform the json\xml to GWT Java objects) then the benefit of the RPC is almost nothing.
Another sometimes forgotten advantage of the REST approach is that it's more natural to the browser running the client, RPC is a propitiatory protocol, where all the requests are using POST. You can benefit from client side caching when reading resources in the standard way.
Answering ams comments:
Regarding the RPC protocol, last time I "sniffed" it using firebug it didn't look like json, so I don't know about that. Though, even if it is json based, it still uses only the HTTP POST method to communicate with the server, so my point here about caching is still valid, the browser won't cache POST requests.
Regarding the retrospective and what could have done better, writing the RPC service in a resource oriented architecture could lead later to easier porting to REST. remember that in REST one usually exposes resources with the basic CRUD operations, if you focus on that approach when writing the RPC service then you should be fine.
The REST architectural style promotes inspectable messages (which aids debugging and security), API evolution, multiple platforms, simple interfaces, failure recovery, high scalability, and (optionally) extensible systems via code on demand. It trades per-interaction performance for overall network efficiency. It reduces the server's control over consistent application behavior.
The "RPC style" (as we speak of it in opposition to REST) promotes platform uniformity, interface variability, code generation (and thereby the ability to pretend the network doesn't exist, but see the Fallacies), and customized interactions. It trades overall network efficiency for high per-interaction performance. It increases the server's control over consistent application behavior.
If your application desires the former qualities, use the REST style. If it desires the latter, use the RPC style.
If you're planning on using using Hibernate/JPA on the server-side and sending the resulting POJO's with relational data in them to the client (ie. an Employee object with a collection of Phones), definitely go with the REST implementation.
I started my GWT project a month ago using GWT RPC. All was well until I tried to serialize an object from the underlying db with a One-To-Many relationship in it. And got the dreaded:
com.google.gwt.user.client.rpc.SerializationException: Type 'org.hibernate.collection.PersistentList' was not included in the set of types which can be serialized by this SerializationPolicy
If you encounter this and want to stay with GWT RPC you will have to use something like:
GWT Request Factory (www.gwtproject.org/doc/latest/DevGuideRequestFactory.html) - which forces you to write 3+ classes/interfaces per POJO you want to share with the client. OUCH!
Gilead (sourceforge.net/projects/gilead/) - which appears to a dead project.
I'm now using RestyGWT. The switch was fairly painless and my POJO's serialize without issue.
I would say that this depends on the scope of your total application. If your backend should be used by other clients, needs to be extendable etc. then create a separate module using REST. If the backend is to be used by only this client, then go for the GWT-RPC solution.

Implementing Real-Time Collaboration On A Page?

I would like to create a web page which would allow multiple users to work together on a page, Imagine a web based editor that allowed to users to change the documents as an example of this type of feature.
How would more experienced programmers go about implementing this as i really cant seem to formulate any way to even begin going about this task. Would there be any programming librarys that make implementing this feature easier or is it just too complex to even think about?
I am creating this webapp primarily using GWT and SmartGWT if that helps.
Thanks for any input you may have.
There is indeed a cometd-like library for gwt - http://code.google.com/p/gwteventservice/
Wiki:
In web development, Comet is a neologism to describe a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term for multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins.
In practice:
In normal way client can receive resources by request->responce. It is no possible to send data directly to client without request. With comet you can hold realtime connection between client and server and exchange data in realtime.
Check out: docs.google.com. They are using comet.
Etherpad.com is a service that used to do this. It has been since bought by Google, and the code released as open-source. You can see several links on the etherpad.com page for the source download and related information.

Handling XMLHttpRequest to call external application

I need a simple way to use XMLHttpRequest as a way for a web client to access applications in an embedded device. I'm getting confused trying to figure out how to make something thin and light that handles the XMLHttpRequests coming to the web server and can translate those to application calls.
The situation:
The web client using Ajax (ExtJS specifically) needs to send and receive asynchronously to an existing embedded application. This isn't just to have a thick client/thin server, the client needs to run background checking on the application status.
The application can expose a socket interface, with a known set of commands, events, and configuration values. Configuration could probably be transmitted as XML since it comes from a SQLite database.
In between the client and app is a lighttpd web server running something that somehow handles the translation. This something is the problem.
What I think I want:
Lighttpd can use FastCGI to route all XMLHttpRequest to an external process. This process will understand HTML/XML, and translate between that and the application's language. It will have custom logic to simulate pushing notifications to the client (receive XMLHttpRequest, don't respond until the next notification is available).
C/C++. I'd really like to avoid installing Java/PHP/Perl on an embedded device. So I'll need more low level understanding.
How do I do this?
Are there good C++ libraries for interpreting the CGI headers and HTML so that I don't have to do any syntax processing, I can just deal with the request/response contents?
Are there any good references to exactly what goes on, server side, when handling the XMLHttpRequest and CGI interfaces?
Is there any package that does most of this job already, or will I have to build the non-HTTP/CGI stuff from scratch?
If I understand correctly, the way I approach this problem would be a 3-tier (Don't get hang up so much on the 3-tier buzz words that we all have heard about):
JavaScript (ExtJs) on browsers talks HTTP, Ajax using XmlHttpRequest, raw (naked) or wrapper doesn't really matter, to the web server (Lighttpd, Apache, ...).
Since the app on the embedded device can talk by socket, the web server would use socket to talk to the embedded device.
You can decide to put more business logic on the JavaScript, and keep the Apache/Lighttpd code really thin so it wont timeout.
In this way, you can leverage all technologies that you're already familiar with. Ajax between tier 1 and 2 is nothing new, and use socket between 2 and 3.
I did not mean that you did not know socket. I just proposed a way to take a desc of a problem where I hear a lots of words: XML/HTML/Ajax/XmlHttpRequest/Java/PHP/Perl/C++/CGI and more and offer a way to simplify into smaller, better understood problem. Let me clarify:
If you want to ultimately retrieve data from the embedded devices and render on the browsers, then have the browsers making a request to the web server, the web server uses socket to talk to the embedded device. How the data is passed between browser and server, that's normal HTTP, no more, no less. Same thing between web server and embedded device, except socket instead of HTTP.
So if just you take a simple problem, like doing an addition of 2 numbers. Except these 2 input numbers would get passed to the web server, and then the web server passes to the embedded device, where the addition is carried out. The result gets passed back to the web server, back to the browser for rendering. If you can do that much, you can already make the data flow everywhere you want to.
How to parse the data depends on how you design the structure of the data that might include container which wraps around a payload.
"... whatever HTTP is coming to the server into usable bits of information, and generate the proper HTTP response"
...but that's not any different than how you handle the HTTP request on the server using your server-side language.
...how to implement a backend process in C/C++, instead of installing a package like PHP
If the embedded device is programmed in C/C++, you are required to know how to do socket programming in C/C++. On your web server, you also have to know how to socket programming, except that will be in that server-side language.
Hope this helps.

Resources