XSLT vs CSS/HTML/jQuery

 

It is a very confusing yet thoughtful decision picking up a technology to create web pages when you have the data in XML files. Hence, comparison of XSLT vs CSS/HTML/jQuery is important to study.

The full form of XSLT is eXtensible Stylesheet Language Transformations.
A file with extension XSL is used for converting the data from XML format to the human readable format and CSS can be embed into this template to enhance the GUI.

The use of XSL template seems to be a burden while displaying the data on the HTML page. When a person thinks of it for the first time, few questions arise in the mind.

  1. Why can’t one just use CSS for design, Javascript for fetching the data (it could be in JSON or XML) & making the GUI interactive and HTML for designing pages?
  2. Why add an additional component that is XSL when CSS, Javascript and HTML fulfil all the needs?
  3. Then, is there any advantage of using XSL?

Let’s see what the benefits of XSL language are and why it is used:
XSL helps in extracting data from complex XML (data file) file and converting into HTML format. XSL bridge the gap between complex XML-based documents and the CSS formatting model.

In simple terms, XSL is a language used to transform XML from one format to another. It takes the XML as input. Using some XSL tags, CSS and HTML gives XHTML as output.

The beauty of XSL is that you just need to include the reference of XML document and it will handle the transformation automatically at the browser/client side or this transformation can also be handled at the server side by using XALAN or Saxon engine.

Let’s clear the confusion first:
XSL – It’s a template that contains the formatting in the form of HTML/CSS and link to the XML file from where that data has been fetched.
XSL template can contain CSS and Javascript, but this is not necessary. The basic work of XSL template is to read data from XML file and give a structure to it.

Which means XSL is very different from CSS. On the other hand, CSS is used to give a stylish GUI to the data read using XSL.

Now, the question comes to the mind can we not just use javascript to render the XML file and make the GUI readable using HTML and CSS?

Right, the comparison is not really between CSS and XSL, but it’s between XSL and Javascript.
CSS and HTML will remain in place in either case (XSL + HTML/CSS and Javascript + HTML/CSS) to make the data presentable.

Also, CSS has now become a powerful language to define the structure of the web page so, it’s just a matter of reading the data and for that we have two options XSL or Javascript.
Both, XSL and Javascript are useful, let’s explore more to make a decision which combination to use:

In this case, it’s really up to the developer or architect developing what to choose for designing their application because both the technology has its own advantages.

  1. XSL is old and not easy to read because of which it is less known whereas Javascript is more popular because it is easier to read and implement.
  2. XSLT is a good solution for templating. The language and syntax are a bit unusual — “choose/when” instead of “case/switch” is a glaring example — but it does its job well.
  3. XSL is a template that can be processed at client side or at server side; it’s a matter of choice. If the processing happens on the client side the XML file gets transferred to the client side, which is not good. If the processing happens on the server side, then it will consume server resources. Whereas Javascript has a balance in that sense, it fetches all the data in a variable then transfers it to the client side where it can be processed, if needed.
  4. I feel Javascript will be lightweight as compared to XSLT report, but not tested.

I feel that using XSLT is not a good idea even if I have XML data that needs to be processed.

But most of the apache testing tools like Selenium and JMeter use XSLT reporting which brings in the confusion.

Is there really an advantage of using XSLT reports over plain Javascript, CSS and HTML?

Please share your thoughts in comments section.

How to make Draggable items using jquery

Below example of drag and drop describing How to make Draggable items using jquery.

Code:


 

OUTPUT:
drag and drop