Bicycle: an alternative to iframe on jQuery.ajax as a tool for developing mash-up applications. Is there any reason?

Hello! I want to bring to the attention of the community a technical mechanism that allows you to easily make an iframe-like application running on ajax. The jQuery and easyXDM are used as the basis.

Technical description, prototype, assumptions about possible uses and doubts under the cut.


')
First of all, I want to say that in the article under the mashup I mean not a general concept,
but a specific, special case. When needed, a web application running on the same domain
( service ) - to embed in another ( platform ).
The user is on the site page and can interact with the service .

Disadvantages of existing solutions

iframe

• The url in the browser string does not change when moving inside an iframe.
• It is necessary to do something in addition to change the height of the iframe automatically by its content.
• You need to save the current position of the user in the session, so that when you click on F5, the last page on which the user was displayed, and not the main page of the service.
• You need to make sure that links to external sites are opened in target = "_ parent" or target = "_ blank", otherwise the external resource will also open inside the iframe, and it will look strange.
• It is necessary to think over the click logic in the “Open in a new tab” mode in order to automatically redirect to the appropriate page of the site.
• There are restrictions on the size when displaying large popup blocks, such as pictures in lightbox.
• Not all search engines can index iframe content.
• Difficulties in organizing a common authorization.

Third level domain on the service server

• The need for the creators of the service to do development for each specific site (Collect cap, basement, design of each specific site)
• Additional efforts from the site to register a third-level domain.
• The need to update the basement cap makes it possible to develop the site.
• Difficulties in organizing a common authorization.

The proposed solution allows you to quickly organize a mashup from an already running application or easily create a new one.

Prototype demo

http://mashups.ru/demo

I did not test for Mac :(
This is a service (a regular php application using various web engines) and various test platforms on which the service is embedded. There are php source codes of the service, in the comments there are points that are necessary for it to work as a mashup (they will be described later in the article, in the code in the comments will be marked as # for_mashup # ). Hosting is on the other side of the planet (there are real http delays), this allows in some browsers to see with the naked eye the advantage of ajax in speed over the usual web application. This implies not the first opening of the page, but subsequent clicks on the links of the service.

Technical points

Server part of the service. For everything to work, you need to add a special code to the server part of the service application that replaces the usual server response to the jsonp response. For example, the service response to a GET request:

<div>hello world</div> 

Will be replaced by

 callback_function( { "content": "<div>hello world<\/div>" } ); 

A POST response to

 <script>parent.callback_function( { "content": "<div>hello world<\/div>" } );</script> 

These substitutions allow you to send cross-domain ajax requests to the service server from a browser located on the platform page. The location is transmitted in the same way for the case of imitating 301 HTTP response of the service. For example:

 callback_function( { "location": "/postSuccess/" } ); 

In the php language, such a substitution is easily implemented by hanging the output callback through the ob_start function. Directly for the developer of the service, it will be sufficient in the script that is executed on all pages to make an additional include a special script that will do all this within itself.

It is necessary to put the swf file for easyXDM in a specific place for the application to work in <IE8 browsers.
Also place a special php file serviceProvider, it defines the required js, css kit for the service plus work with the session.

Server side of the site. Adding JS code to a page, like adding a banner system code.

Client part. JS library based on easyXDM is added to the service page, which does the following:

• Replaces the href and action attributes of the A and FORM tags, respectively, in the HTML code coming from the service.
• Replaces jQuery methods ajax, methods of working with DOM.
• Creates an analogue of the window.location object.
• Creates an environment for interacting with the platform.

Everything except the window.location analog will work in a mashup just like in a standalone web application.
With the window.location problem, it cannot be substituted. Therefore, in order to use window.location in the service, you need to refer to MU.location - its counterpart, which provides work within the framework of the mashup. But to provide performance and service as a standalone application and as a mashup is quite simple.

 ... <head> <script>var MU = window;</script> </head> ... <a href="#" onclick="MU.location.href = '/link/'; return false;"></a> 

Those. define the global variable MU as window. As part of the mashup, the special js script will replace it with the desired object, and without the substitution, it will work like a normal window.

Also, if you use the version completely without the iframe tag, there is the problem of accessing the jQuery ajax and DOM methods. In fact, there are two versions of jQuery methods on the page, one working within the framework of the platform, the other working within the service.
While there is such an interface solution:

 $.muDom(); 

and after that, any access to the DOM methods of jQuery will be implemented within the service, and only with one call.

 $.muAjax (); 

and after that, any calls to jQuery's ajax methods will be implemented within the service, and only with one call.
For example:

 $.muAjax(); $.get( '/page', function( response ) { alert(response ) } ); //   alert    http://[ ]/page;  , , $.get    . $.get( '/page', function( response ) { alert(response ) } ) //       http://[ ]/page; 

Ideas to simplify the editing process html / css design service integrated into the site no. However, one of the simplest, in my opinion, is to do it in the service of the correct semantic layout, abundant, id and / or class attributes, so that they can easily be hooked for them later. Well, css edit. In this case, you only need the work of the layout designer, the work of the programmer is practically not required.

It is possible to integrate with and without iframe. Using the version with or without iframe depends on the service. With iframe is safer, the service cannot perform any js method of the site, read document.cookie, etc. Without it - more freedom, but less chance that someone wants to install it on your page. Depends, perhaps, on authority. For example, many install facebook widgets, but no one really thinks that he (facebook) will ever want to quietly turn to document.cookie, collect personal data, and then use them in some way in his logic. Because facebook is a famous, popular service. Partially a security problem for a version without an iframe, the site can solve the exception of unsafe js code, check on ajax server requests, setting the httpOnly attribute for an important cookie.

Other tools useful when creating a mashup

So far there is a prototype of an iframe analog, but there are still unrealized ideas for solving other integration issues.

General Authorization

When creating a site partition mashap, it may be necessary for the site authorization to be transferred to the service. Asking the user to register a second time on the same site as it is not very. There is a specific implementation idea, through a special session key for each service. The idea is to free the developer of the service from additional efforts to study oauth and its modifications at various sites. A developer of the site from wasting time on the choice of technology and the implementation of the transfer of authorization service.

Service availability for search engines

If necessary, the site can add a special code to the server side that will pass json service responses through itself, replacing links. The version for the search engine will work on links without "#". But if a client that supports js gets on such a link, it will automatically redirect to the page with a "#".

Widgets

In order for users to get to the new section on the site, it may be necessary to display blocks with links. For example, on the main page of the site would be useful widget on new pages in the service (recent posts, comments, ads, products, events, etc ...). Or widgets that are based on the content of a particular page will show the closest in meaning links to the service section. The content of the widget is generated on the service server. As input data can be a link to a page, the contents of a specific container, just some variables, keywords, etc.

CPA statistics

To assess the usefulness of the mashup and the mutual settlement between the owner of the service and the site, you may need the CPA (Cost per action) statistics tool. The developer of the service determines the key actions, and the system collects statistics on their performance by the user.

How can I use

• the ability to monetize traffic and expand functionality with the help of an external service - a section without wasting time on organizing integration for a site with great popularity ;
• Understand / test the usefulness / uselessness of the service application for the social network of a specific operating site , while saving development resources;
• after the development and successful launch of the application of a working site , the ability with minimal cost, embed in any other site with high attendance;
• distribution of the service of a working federal site in the form of a special section on popular regional sites;
• additional marketing tool (the ability to integrate your service to another resource) for sites already operating ;
• saving time and resources on SEO and advertising, check out the idea within the framework of an already operating site with traffic for a startup service ;
• the opportunity for a start-up service not to create a website at all, and to make money on collaborative mashups with already popular promoted sites;
• for sites on designers (ucoz.ru and the like) , the ability to add a service to the site - a section that is difficult to implement as part of the engine;
• for highload site the ability to reduce the load, HTTP traffic, speed of displaying the page due to the possibility of caching, processing and assembling the page from the content generated by different servers on the client;
• for a large website or a social network as an auxiliary tool in organizing a platform like those already on facebook.com, vk.com, odnoklassniki.ru, my.mail.ru, which allow you to create iframe applications by external companies
• for internal web applications that collect information from different servers.

The main idea is to provide an opportunity for a site that has achieved success in attracting traffic to cooperate with a site that can monetize it (traffic). According to the survey (page 5) , only 9.9% of sites in monetization are monetized using the service model. In my opinion, the possibility of easy mutually beneficial exchange of services between sites can raise this figure, and ultimately stimulate the development of new start-up services.

Doubts

1. Is there something I don’t know or am I mistaken about making the whole idea useless?
2. iframe is good and simple and everything is used in many places, why complicate things?
3. Url in a social application, for example, does not change, not because it does not allow with an iframe, but simply because no one needs it. On the Internet, almost did not find a large number of dissatisfied.
4. The essence of the problem (is there anyway?) Is impossible to describe to a person who did not work with the iframe, or who was not technically technically at all.
5. Social applications are already being done - “one, two, and you're ready ... there is a usual iframe”, will there be a saving of development time?

With this article I want to know how interesting the project. Get additional motivation for active development, or vice versa, to understand that no one needs it. I will be glad to constructive criticism.