An OOB Webpart Customization Approach:Client Side Rendering Of List / WebParts using JSLink in SharePoint 2013

I read many articles regarding use of JSLink and this one for MDS enabled sites. But I would like to explain it at high level
Unlike in SharePoint 2010 OOB list customization/WebPart customization ,Now there is no need to override OOB css or writing javascript logic considering whole html rendered at runtime.
Using JSlink , OOB html can be replaced at elementary level as follows.

(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

   1) // Here customize list header by replacing header html
    
    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
        "<hr><ul id='unorderedlist'>";

   2) // Here this function will be called  n number of times where n is the numb         er of items in list or library

    overrideCtx.Templates.Item = customItem;

    3) // Here customize list footer by replacing footerhtml

    overrideCtx.Templates.Footer = "</ul>";

    
    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template.
// It uses the context object to access announcement data.
function customItem(ctx) {

    // Build a listitem entry for every listitem in the list.
    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

This resolves problem about writing XSLT at listview/Dataview level.But in Content query webpart , still there is space for writing xslt but that's why Content search webpart is introduced . though it is available in on-premise version, try this link for it's replacement in office 365