What is W3.JS and why is W3Schools promoting it?

Question

I was noticing that W3Schools has a tutorial on what they're calling W3.JS, which in my opinion appears to compete with jQuery. I was having trouble finding information on it from any source other than w3Schools themselves.

W3Schools does appear (in my opinion) to have some propensity to promote semi-abandonware. For example, AppML.

Is this library actually used anywhere? What is its history (especially its release history) and if this is actually going to be developed into something that would actually be worth considering using?

Note: I'm not seeking a library recommendation here - I do realize that that's explicitly off-topic - I'm just asking for background information on this particular library.

Answer 1

The W3 JS library has a couple of attractive properties.
1. It's very lite. 2. There's not much of a learning curve; I was able to get a few things "working" with little to no documentation (and beyond w3schools.com, there's not much.)

I tried several different pieces of functionality in the library and here's my take on it. To try and gain some separation of concerns, I stumbled on this library looking for the ability to use a PHP-like include statement to pull in an HTML fragment file. W3.JS provides the ability to add an attribute to a div element

<div w3-include-html="frags/content.html"></div> 

And with a JQuery UI-esque initialize statement, the file's contents would be loaded into your div element on the client side.

<script>
w3.includeHTML();
</script>

This does work but it's about all that does. I used the library on a legacy App I inherited that was done in Classic ASP on the server side. One thing I relied upon from JQuery was the AJAX function for POST requests to a crude ASP page I used as a "data access layer." The page would use a POST variable like an enum to tell it which function to call and then subsequent variables as needed in each function. Below is an example of W3.JSs ability to perform a Web Request and then use it's display-object function with an HTML object (here an un-ordered list) to displayed a retrieved JSON object that has an attribute "customers" that is an array. This will generate LI elements with an innerHTML that is an attribute of each customer instance; "CustomerName." ({{CustomerName}}) is a place holder here.

<ul id="id01">
 <li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
    w3.getHttpObject("CommonServerFns.asp?operation=1", controllerFn);
    function controllerFn(myObject) {
        //myObject looks like {"customers":[{"CustomerName":"Mike Jones"}]}
        w3.displayObject("id01", myObject);
    }
</script>

So to even try the above example I had to convert my data page to use the Query String of a GET request, which I didn't have a problem with. However, used in Lieu of a JQuery AJAX request and a vanilla JS callback function, like below.

$.ajax({
      url: "ServerCommonFns.asp",
      type: "POST",
      data: '{"operation":1}',
      complete: function(jqXHR, statusMsg){
            //if status is 200, jqXHR.responseText has my serialized JSON 
            var retData = JSON.parse(jqXHR.responseText);
            var tgtListElement = document.getElementById("id01");
            //Clear the placeholder code from the list and go to work...
            tgtListElement.innerHTML = "";
            for(var index = 0;index<retData.length;index++){
                var listNode = document.createElement("li");
                listNode.innerHTML = retData[index].CustomerName;
                tgtListElement.appendChild(listNode);
            }
      });

So W3JS looks like the preferred solution, it's less code for sure. However, in the app I worked on, I timed the web requests for both method and the results were shocking. The request returned a JSON string that was roughly 737K in size and the request took ~2.5 seconds to complete. My JQuery solution took about ~4.5 seconds including the ~2.5 second request. The W3.JS solution took anywhere from 17 - 27 seconds to complete. I did some tweaking thinking that I had made a mistake and that was the only way the "Better & Faster Javascript Library" could be running that poorly but it appears not. I don't know why but the W3 JS solution was clearly not usable in my app.

I tried to use this library again early last week; thinking an application less data intensive might work much better. If you've read this far I'll save you a few more lines of reading....it wasn't. This app used Classic ASP with another "data access layer" type ASP page, again utilized with JQuery and Vanilla JS using the AJAX function. I built a JS function to pass as param/function ptr like so

var sortAsc = true;
//JSONObj looks like {"faqs":[{id:1,createdBy:"Les Grossman"}, 
//{id:2,createdBy:"Jeff Portnoy"}]};
var JSONObj = null;
function compareFn(a, b){
    if(a.id < b.id) return sortAsc ?  1 : -1;
    if(a.id > b.id) return sortAsc ?  -1 : 1;
    return 0;
}
//Assign my onclick event handler
document.getElementById("faqId").onclick = function(){
    JSONObj.sort(compareFn);
    sortAsync = !sortAsync;
    //Logic below to clear and reload the rows in my HTML table...
    //See above example for pretty much identical code
}

This again is fairly code intensive and I didn't want to have to fire of a web request everytime a column header was clicked (to use the sort ability of a SQLite Query) rather than a custom JS function. So I tried using the w3.sortHTML() function to do the job. It looked something like this but I kept my JQuery AJAX code to load the table initially and used the sortHTML() function post load for sorting. The w3.sortHTML function takes params in this order

1. Repeating element container unique selector ("Select, UL, OL, Table, etc.").
2. Repeating element group selector (option, li, tr, etc.) In this instance I use .faq as I've applied it to all table -> tr instances.

3. Selector for attribute/element of repeating group to sort by (Keeps track of ascending/descending sort order internally.)

   FAQ Number FAQ Name 1 Tug Speedman 2 Alpa Chino 3 Kirk Lazarus ...

I'm using this page to display FAQ Data from our HelpDesk system (uses my login to scrape data into a SQLite database so any user can see FAQ data without needing a login/license for a Helpdesk system.) The web request returns a JSON string roughly 430 KB in size and creates 320 table rows with 5 table columns (for our e.g. only two columns are coded for.) This request takes ~3 seconds to complete. My JQuery/JS AJAX request w/ callback function roughly ~5.5 seconds total, including the ~3 secs for web request/response. My custom sort fn took less than 1 second, regardless of sort by column (only id shown in example), to sort my ret data obj (sorted as a global object "JSONObj"), clear the table and refill the table with sorted rows. Again, lots of code to do this so I thought W3 JS might help me out. My W3 JS sort implementation takes ~8 seconds to sort integer/numeric data and ~10 seconds to sort text/string data. This is way too long for my needs (again) so I reverted back to my JQuery/JS solution.

In conclusion, it seems that anything of greater than trivial size begets really poor performance in this library. I think the creators of W3.JS had their functional requirements correct as the library does boast some very useful abstracted functionality but it's no replacement for JQuery and other existing frameworks or even your good old fashioned Javascript code. Wish things had worked out; would have been really helpful.

EDIT - So I've been going through the source of the library and, while there are several shorthand methods for web reqs, there is simply a w3.http() method with the following signature.

function (target, readyfunc, xml, method)

The params are appropriately named except for xml which is just a string value. I was able to get this working with my previously mentioned ASP page that handles POST requests. I invoked it like so.

w3.http("ServerCommonFns.asp", httpCallBack, "operation=1", "post");
function httpCallBack(){
            if(this.readyState == 1){
                console.log("Setting needed header...");
                this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
            }
            else if(this.readyState == 4){
                console.log("Parsing response....");
                //document.getElementById("main").innerHTML = JSON.stringify(this.responseText);
                var responseObj = JSON.parse(this.responseText);
                var respDataObj = JSON.parse(responseObj.retdata);
                var tableObj = document.getElementById("responseTable");
                tableObj.innerHTML = "";
                for(var index=0;index<respDataObj.length;index++){
                    var newRow = document.createElement("tr");
                    newRow.innerHTML = "<td>" + respDataObj[index].MACHINE_ID + "</td>";
                    tableObj.appendChild(newRow);
                }
                return false;
            }

        }

You'll see httpCallBack is used like it's the listener for the onreadystatechange event for the internal xhr object because it is just that. In order to work in my instance, I had to set the content-type header before the request was opened so my xml/param argument was interpreted properly. So W3.JS can do POST requests but the w3.http() function is little more than a simple wrapper around the Javascript XMLHttpRequest() object. Also, the requests are invoked Asynchronously and there's no way to change that behavior so just FYI.

--SECOND EDIT. So I've got a lull in work and I felt I may have given W3.JS less than it's due. Today I experimented with a few things and examined the source for a little insight. I found a couple things that I find at least neat and I thought I'd finish this wall of text with them. Below this is the source for what I did today. I tried combining a few W3.JS functions with an existing data source for an app I wrote for our MFG Q/A folks.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <script src="https://www.w3schools.com/lib/w3.js"></script>
        <script>
            var xhrObj = null;
            var jsonObj = null;
            var sortAsc = true;
            function w3ReadyStateChanged(){
                if(this.readyState == 1){
                    console.log("Preparing Request/Setting needed header...");
                    this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
                }
                else if(this.readyState == 4){
                    console.log("Parsing response....");
                    //document.getElementById("main").innerHTML = JSON.stringify(this.responseText);
                    var responseObj = JSON.parse(this.responseText);
                    if(responseObj.retcode != 1){
                        console.log("A retcode of: " + responseObj.retcode + " has indicated a failed web request...");
                        return false;
                    }

                    jsonObj = {}; 
                    //var respDataObj = JSON.parse(responseObj.retdata);
                    jsonObj.retdata = JSON.parse(responseObj.retdata);
                    //
                    console.log("Starting Display: " + new Date())
                    w3.displayObject("responseTable", jsonObj);
                    console.log("Display Finished: " + new Date())
                    //This is to stop page refresh.
                    return false;
                }

            }
            function tryw3xhr(){
                w3.http("ParCommonFns.asp", w3ReadyStateChanged, "operation=13&useCriteria=false&openPARs=1", "POST");
            }
            function compareFn(a, b){
                if(parseInt(a[0]) > parseInt(b[0]))
                    return 1;
                else if(parseInt(a[0]) < parseInt(b[0]))
                    return -1;
                else
                    return 0;
            }
            function sortContainerData(containerElementId, repeatingSelector, sortByIndex){
                //w3.sortHTML('#responseTable','tr.dataRow')
                var dataObj = {};
                var containerElement = document.getElementById(containerElementId);
                if(!containerElement){
                    console.log("Couldn't locate a table or list with ID: " + containerElementId);
                    return false;
                }
                //
                var sortElements = containerElement.querySelectorAll(repeatingSelector);
                if(!sortElements || sortElements.length == 0){
                    console.log("repeatingSelector failed to yield results: ");
                    return false;
                }
                //
                dataObj.sortElements = new Array(sortElements.length);
                for(var i = 0;i<sortElements.length;i++){
                    var tempArray = new Array(sortElements[i].children.length);
                    for(var j = 0;j<sortElements[i].children.length;j++){
                        tempArray[j] = sortElements[i].children[j].innerHTML;
                    }
                    dataObj.sortElements[i] = tempArray;
                }
                //w3.sortHTML('#responseTable', '.dataRow', 'td')
                console.log("Starting Sort: " + new Date());
                var t0 = performance.now();
                var doCustom = false, didSwap = false;
                if(doCustom){
                    var sortLen = dataObj.sortElements.length;
                    var j = 0;
                    //if (parseInt(dataObj.sortElements[i][sortByIndex]) == dataObj.sortElements[i][sortByIndex])
                    //    compareInt = true;
                    for (var i = 0; i < sortLen - 1; i++){
                        didSwap = false;
                        j = i + 1;
                        while (j < sortLen && parseInt(dataObj.sortElements[i][sortByIndex]) >= parseInt(dataObj.sortElements[j][sortByIndex])) {
                            j++;
                        }
                        //If j equals sortLen, then i is greater than all others so we stick it on top.....
                        if (i + 1 == j)
                            break;
                        if (j == sortLen) {

                            dataObj.sortElements.push(dataObj.sortElements[i].slice());
                            dataObj.sortElements.splice(i, 1);
                            didSwap = true;
                        } else if (j > (i + 1)) {
                            dataObj.sortElements.splice(j, 0, dataObj.sortElements[i].slice());
                            dataObj.sortElements.splice(i, 1);
                            didSwap = true;
                        }
                        if (didSwap)
                            i--;
                        //if(i % 50 == 0) 
                        //  console.log("Handled: " + i);
                    }
                    //This is cheating but it should work.....
                    if (!sortAsc) dataObj.sortElements.reverse();
                }
                else{
                    dataObj.sortElements.sort(compareFn);
                }
                sortAsc = !sortAsc;
                console.log("Sort Time (MS): " + (performance.now() - t0));
                //
                console.log("Starting Reload: " + new Date())   ;
                var containerBody = containerElement.querySelector("tbody");
                containerBody.innerHTML = "";
                for(var i = 0;i<dataObj.sortElements.length ;i++){
                    var newRow = document.createElement("tr");
                    newRow.classList.add("dataRow");
                    //
                    for(var j =0;j<dataObj.sortElements[i].length;j++){
                        var newCol = document.createElement("td");
                        newCol.innerHTML = dataObj.sortElements[i][j];
                        newRow.appendChild(newCol);
                    }
                    //
                    containerBody.appendChild(newRow);
                }
                console.log("Ops complete: " + new Date())  ;
                return false;
            }
            window.onload = function () {
                document.getElementById("invokeBtn").disabled = true;
                tryw3xhr();
                document.getElementById("invokeBtn").disabled = false;
                w3.hide("#conditionalContent");
            };
            //
            function runW3JSFn() {
                var w3TargetId = "#w3Target";
                var w3FunctionsSelect = document.getElementById("w3Functions");
                if (w3FunctionsSelect.value == "show") {
                    w3.show(w3TargetId);
                }
                else if (w3FunctionsSelect.value == "hide") {
                    //Doesn't preserve space....
                    w3.hide(w3TargetId);
                }
                else if (w3FunctionsSelect.value == "toggle") {
                    w3.toggleShow(w3TargetId);
                }
                else if (w3FunctionsSelect.value == "addStyle") {
                    //But no remove style?
                    w3.addStyle(w3TargetId, 'border', '2px solid green');
                }
                else if (w3FunctionsSelect.value == "addClass") {
                    w3.addClass(w3TargetId, 'w3Class');
                }
                else if (w3FunctionsSelect.value == "removeClass") {
                    //Italics should go away.....
                    w3.removeClass(w3TargetId, 'w3Class');
                }
                else if (w3FunctionsSelect.value == "toggleClass") {
                    //Italics should go away.....
                    w3.toggleClass(w3TargetId, 'w3Class');
                }
                else if (w3FunctionsSelect.value == "filterTable") {
                    //Italics should go away.....
                    document.querySelector(w3TargetId).innerHTML = "<h2> Try an ID # in the box below....</h2>";
                }
                else { document.querySelector(w3TargetId).innerHTML = "<h2> Invalid function specified....</h2>"; }
            }
            //
            function doVanillaJSFn() {
                var w3TargetId = "#w3Target";
                var w3FunctionsSelect = document.getElementById("w3Functions");
                if (w3FunctionsSelect.value == "show") {
                    document.querySelector(w3TargetId).style.display = 'block';
                }
                else if (w3FunctionsSelect.value == "hide") {
                    //Doesn't preserve space....
                    document.querySelector(w3TargetId).style.display = 'none';
                }
                else if (w3FunctionsSelect.value == "toggle") {
                    var tgtElement = document.querySelector(w3TargetId);
                    if (tgtElement.style.display == 'block')
                        tgtElement.style.display = 'none';
                    else
                        tgtElement.style.display = 'block';
                }
                else if (w3FunctionsSelect.value == "addStyle") {
                    //$(tgtElement).css("attr", "val");
                    //Works....
                    document.querySelector(w3TargetId).setAttribute("style", "border: 4px solid green");
                    //But better.....
                    if(confirm("Try Better way ?"))
                        document.querySelector(w3TargetId).border = "4px solid green";
                }
                else if (w3FunctionsSelect.value == "addClass") {
                    document.querySelector(w3TargetId).classList.add("w3Class");
                }
                else if (w3FunctionsSelect.value == "removeClass") {
                    //Italics should go away.....
                    document.querySelector(w3TargetId).classList.remove("w3Class");
                }
                else if (w3FunctionsSelect.value == "toggleClass") {
                    //Italics should go away.....
                    var tgtElement = document.querySelector(w3TargetId);
                    if (tgtElement.classList.contains("w3Class"))
                        tgtElement.classList.remove("w3Class");
                    else
                        tgtElement.classList.add("w3Class");
                }
                else if (w3FunctionsSelect.value == "filterTable") {
                    //Italics should go away.....
                    document.querySelector("#filterCtrl").oninput = function () { myCustomFilter() };
                    document.querySelector(w3TargetId).innerHTML = "<h2> Try it now....</h2>";
                }
                else { document.querySelector(w3TargetId).innerHTML = "<h2> Invalid function specified....</h2>"; }
            }
            function myCustomFilter() {
                var tableElement = document.getElementById("responseTable");
                var filterData = document.getElementById("filterCtrl").value.trim().toLowerCase();
                ////
                for (var i = 1; i < tableElement.rows.length; i++) {
                    var foundRowMatch = false;
                    if (filterData == "") {
                        tableElement.rows[i].style.display = 'table-row';
                        continue;
                    }
                    for (var j = 0; j < tableElement.rows[i].cells.length; j++) {
                       var cellSplit = tableElement.rows[i].cells[j].innerHTML.trim().split(' ');
                        for (var k = 0; k < cellSplit.length; k++) {
                            if (cellSplit[k].trim().toLowerCase() == filterData) {
                                foundRowMatch = true;
                                break;
                            }
                        }
                        if (foundRowMatch) break;
                    }
                //    //
                    if (!foundRowMatch) tableElement.rows[i].style.display = 'none';
                    else tableElement.rows[i].style.display = 'table-row';
                }
                //
                return false;
            }

</script>
<style>
    #parHeaders{
        background-color: red;
        border-bottom: 4px solid black;
    }
    .w3Class {
        font-style:italic;
    }

</style>
    </head>
    <body>
        <select id="w3Functions">
            <option value="show">Show</option>
            <option value="hide">Hide</option>
            <option value="toggle">Toggle</option>
            <option value="addStyle">Add Style</option>
            <option value="addClass">Add Class</option>
            <option value="removeClass">Remove Class</option>
            <option value="toggleClass">Toggle Class</option>
            <option value="filterTable">Filter Table</option>
        </select> &nbsp; &nbsp;
            <button id="invokeBtn" onclick="runW3JSFn(); return false;">Try w3 function</button> &nbsp; &nbsp;
            <button id="invokeBtnAlternate" onclick="doVanillaJSFn(); return false;">Try JS Alternate Function</button>
            <div id="w3Target"><h2>This Is My W3 Functions Target!!!!</h2></div>
            <br/><br/>
            Filter Data By Id: <input id="filterCtrl" type="text" oninput="w3.filterHTML('#responseTable', '.dataRow', this.value);" />
            <br/>
    <div><table id="responseTable">
        <thead>
            <tr id="parHeaders">
                <th id="parIdHdr" onclick="sortContainerData('responseTable', 'tr.dataRow', 0);return false;">ID</th>
                <th id="parTypeHdr">TYPE</th>
                <th id="dateSubmittedHdr">SUBMITTED DATE</th>
                <th id="priorityLevelHdr">PRIORITY LEVEL</th>
                <th id="issueDescHdr">ISSUE DESC</th>
            </tr>
        </thead>
        <tbody>
        <tr class = "dataRow" w3-repeat="retdata">
            <td>{{PAR_ID}}</td>
            <td>{{PAR_TYPE}}</td>
            <td>{{DATE_SUBMITTED}}</td>
            <td>{{PRIORITY_LEVEL}}</td>
            <td>{{ISSUE_DESC}}</td>
        </tr>
            </tbody>
    </table></div>
        <div id="conditionalContent"><h2>Loading.......</h2></div>
    </body>
</html>

So what I was trying to do was use w3.http() to get a JSON string from my unmodified data source (classic ASP page still) and then use the w3.displayObject() with my retrieved JSON object to populate a table with rows. I tried a similar scenario previously and was met with very poor performance but in the source I examined, I didn't see any obvious bottlenecks so I thought I'd try again. My web request takes ~9 seconds to query 750K worth of data. I used this object to retest w3.displayObject and was surprised. Using the above placeholders, which are simply {{attribute names}} of my parsed JSON object, I was able to load 677 rows with 5 columns per row in just a few hundred milliseconds. So for a simple grab and go type operation, I would rate this as acceptable. So then I tried to use the w3.sortHTML() function to sort the rows by the first column, an integer value. This was met with problems when I got it working, it took ~30 seconds to work and it froze my browser a couple times. And then when it did finally print the "sorted" rows, they weren't sorted by integer or numerical value but rather by strings so a value of "100" was followed by the value "11" because the first char matches but for the second, the "1" alphachar is higher than "0". I did a little more tooling and I re-read the source to confirm no-joy; as this sort functionality would be a big help to me. I found out that while W3.JS support sorting lists as well as tables, it does a modified version of a bubble sort and does so by deleting and inserting rows/items in the DOM, not in memory. So I'm going to confirm my prior assertion that this functionality is not a practical sorting implementation.

I mentioned above that JS Array objects have a sort function you can provide a +, 0, or - int value to. To compare, I wrote my own function to sort a table. It works by sorting an array of arrays (each table row column "td"'s innerHTML being put in an Array and then pushed to a containing Array. Then I wrote a modified bubble sort on the first column (my ID column.) I ran into a few problems and it took me 2+ hours to get right. Firstly, it took me 3 - 4 tries to correctly deep copy an array. This is what I thought should do the trick but it would seem not.

var tempArray = new Array(dataObj.sortElements[i]);

What did work was this:

var tempArray = dataObj.sortElements[i].slice();

Then I cut away the array I was moving using this:

dataObj.sortElements.splice(i, 1);

Finally, I used splice again to insert the array in it's proper place while not cleaving any indexes. I also used push to tack it on the end if it encountered no greater compare value. My sort function worked when sorting values in an Ascending direction but, going off sheer memory from my data structures course, I couldn't remember everything I needed to quickly modify for a search in a Descending direction. So I cheated and just sorted Asc and then used array.reverse() to get what I needed. I timed my custom function and worst case it took 56 milliseconds to sort and best case it took .05 milliseconds (the closer to sorted the table is, the better it does.) Then I tried the array.sort() function for comparison.

function compareFn(a, b){
            if(parseInt(a[0]) > parseInt(b[0]))
                return 1;
            else if(parseInt(a[0]) < parseInt(b[0]))
                return -1;
            else
                return 0;
        }
//Invoked like so.....
dataObj.sortElements.sort(compareFn);

Worst case the built in function took 4.5 MS and worst case 2.5. So, if you can't sort the data using your database engine, save yourself the time and trouble and just use array.sort() for consistent results on anything other than data of an overwhelming volume.

As far as the utility functions of W3.JS, I implemented Vanilla JS solutions in an adjacent function and their util functions seemed to work as advertised, though some seemed repetitious (e.g. addClass, removeClass, toggleClass. Just have a param for toggleClass?)

So w3.http, with a little customization, seems to work adequately and w3.displayObject is also worth checking out. The last thing that caught my attention was the w3.filterHTML() function with the following signature. w3.filterHTML('#responseTable', '.dataRow', this.value)

It's the unique selector of your table/list, the selector of the tr or ul element and the value to filter against (the value of a text input in this case.) After some tinkering, I was able to filter the data that I retrieved using w3.http and displayed using w3.displayObject(). This function iterates through all rows and all cells of rows to see if the match value is contained in the text of the field. No way to force a numeric comparison but the response was snappy with no discernable lag. So for my actual final conclusion, this library does provide some functionality that's at least worth benchmarking for yourself and it is very light but it isn't going to liberate you from JQuery. That said, you can see in my example that most things W3.JS can do can also be down in good ol' fashioned Vanilla JS. JQuery has been a dependency for just about every web application for the past decade and change but what do you do if you inherit a web app that references an outdated version of JQuery that you can't simply replace? This happened to me on my most recent web application project and I had to learn how to do most JQuery functions with regular JavaScript. It really wasn't that hard, it liberated me from yet another external dependency and, dare I say it, some of it was kinda fun. So try it yourself. Even if you don't use it, you may discover something helpful to archive for later use. Cheers!

Answer 2

W3.JS, which appears to be at least a partial attempt to compete with jQuery.

It does cover the same basic areas as jQuery. i.e. it is a generic library of DOM helper functions with added Ajax.

I was having trouble even finding information on it from anyone other than them.

That is because it is their library (taking their approach of "Slap W3 at the start of the name and hope people associate it with the W3C" to extremes) and practically nobody else is bothering with it.

W3Schools does appear to have at least some propensity to promote semi-abandonware as the next great thing. Is that what this is?

It does appear so, but that's speculating on the future.

Is this library actually used anywhere?

Nowhere major. Some people who are stumbling across W3Schools and making their first steps on the authoring for the WWW by learning from them are using it. Questions about it crop up on Stackoverflow from time to time.

Does anyone know its history (especially its release history)

The download page has some information.

It includes the rather unhelpful statement W3.JS is free to use. No license is necessary (which is exceptionally vague; free software licenses exist for a reason).

It also has a change log at the bottom.

There is no sign of a version control repository anywhere.

and if this is actually going to be developed into something that would actually be worth considering using?

Opinion, so no comment.