A Quick Cross Project Preview Solution

This is not the only post you will find on the internet about it, I create a personal post here more as a personal reference.

Problem:

In a digital media project, we have old CQ5 system serving current articles as a CMS, and now we built an awesome UI project with markup, styles, logic and data in frontEnd, and the editors hope to preview their work in old CMS but with the layout rendered by the new template. Which basically need a cross project preview freature.

This problem is very practical and many recent media company may face the same issue. Though there are many different solutions for this too. After an agile quick standup within my team, we came up a 5min quick solution. (That’s how ppl would accept and feel easy to convince others on a late friday afternoon, lol)

Solution:

The challenge is move a non-existing item(unpublished article) from one system(CQ5) to another(NewTemplate).

The overview of the idea will be:

1. Sync the unbulished article data to new system, json -> mongoDB. Here we will take advantage of a sync tool (an web service) we built internally before to make a sync. So it will be no difficult other than send a POST to the web service call with the article data.

2. Get url to render the article in new system, with some sepcial parameter, it won’t explose the page to public and should bypass the cache layer. Here the new system already have buildin feature with ?preview param [boolean: true/false]

Implementation:

So the implementation is pretty clear now: Build a javascript program with one api call to sync ($.ajax) and redirect (302) or open a new tab in browser to preview with new template. (window.open)

This will only take 5min.

Here is the codes embeded in the jsp page:

$.ajax({
 	type: "POST",
	url: "/PathToSyncTool/api.html",
	data: {
		path: location.pathname.replace(/\.html$/, "")
	},
	success:function(){
		var url = "http://{sitedomain: nymag.com}" + location.pathname + "?preview=true";
		window.open(url,'_blank');
	},
	error:function(){
		alert("Error: Fail to preivew!");
	}
});

Improvement:

To let the editors use the javascript, we should make it a bookmarklet, by wrap it into:

javascript:(function(){ 
 	//Here is the compresssed codes.min.js
}());

Then add a new bookmark to the browser, editor can preview the unpublished article in new template by one click.

Future Work:

In a real development world, you have to face the reality. You might came up with a 5min work which looks smart, but you need to think about the maintain efforts in a long term. Yes you can put your code in your gist like https://gist.github.com/kgao and let ppl create bookmark everytime, however, a better humanity approach will be add a button in old CMS(CQ5) and do the ajax call in jsp to popup a new template page to preview.

Which I will add on Monday. :)