Favorite JavaScript web libraries w/helper functions?


#1

I’m working on getting existing web libraries to load within Interface/Entity/AC/etc. scripts so their utility functions can be used as a shortcut.

Right now my test suite includes jQuery, Knockout, Underscore and d3.js.

Does anybody know of other open source web libraries to consider that have well-tested and general-purpose helper functions/functionality?


#2

I am sticking with vanilla-js :slight_smile: when ever possible. Technically speaking the new ES6 spec is really promising and would love to see it in Hifi.


#3

ES6 does look interesting. Do particular language features catch your fancy or just the optimizations in general?

Regarding vanilla-js – it’s a good minimalist approach for the browser.

But consider what it takes to fetch and parse a JSON from a server using vanilla Entity scripting:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/myfeed.json', true);
xhr.onreadystatechange = function() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      var result = JSON.parse(this.responseText);
      print('parsed JSON: ', result);
    }
  }
};
xhr.send();

And then how straightforward the same operation is with jQuery:

jQuery.getJSON('http://localhost:8080/myfeed.json', function(result) { console.info('parsed JSON: ', result); });

That one line of code tells a story and it captures only the essentials.

jQuery isn’t perfect but it does allow many simple-sounding things to remain simple. Like let’s add error checking:

jQuery.getJSON('http://localhost:8080/myfeed.json', function(result) { console.info('parsed JSON: ', result); })
.error(function(res, err) { console.error('error fetching json: ', err); });

Consider also how much easier a code review would be…

To me the high-level minimalism that jQuery offers is preferable. It’s not the only option.


#4

I’ve been using the dsp.js audio processing library by pasting it into my animation scripts when required, as I don’t seem to be able to include it in the normal way. It’s a great library, very mature and well tested. It might be useful for people doing audio work in js also.


#5

Only issue with jquery is the fact that people seem to be using many different versions of it instead of sticking to the latest ones, it tends to take a while to load,

With ES6 Promises, that whole statement would be written as :

fetch('http://localhost:8080/myfeed.json', {method: "POST"})
  .then( (result)=> console.info('parsed Json: ', result); )
  .catch( (exc) => console.error("exception ", exc);  );

This is especially much more powerful with having to chain multiple promises:

fetch('http://localhost:8080/myfeed.json', {method: "POST"})
   .then( (result)=> 
       fetch('http://localhost:8080/result.json', 
              {method: "POST", var1: result.var1});)
   .then( (result)) => console.log("result ", result); )
   .catch( (exc) => console.error("exception ", exc);  );

Instead of having to nest all those requests after each other.

then there are other fun short hands like

var map = { x , y };

being same as

var map = { x:x, y:y };

Which would be really useful for mapping vectors and quaternions quickly.

and more!

Basically from my point of view it makes vanilla JS a tad bit more fluid to write.


#6

@davedub – dsp.js looks cool. I won’t be able to test until back at my other computer, but maybe the reason it didn’t work as an include is the ‘var’ in var DSP = ... might mask DSP from becoming a exportable global. If that’s the case, changing to just DSP = ... might do the trick.

@Menithal – ES6 could technically be used right now if willing to do transpiling as a prepackaging step.

Have you considered CoffeeScript? (that’s actually what I’ve been using lately with HiFi)

CoffeeScript has destructuring assignments and list comprehensions. Promises aren’t built-in, but are easy to polyfill. Your first example would remain about the same:

fetch('http://localhost:8080/myfeed.json')
  .then( (result)=> console.info('parsed Json: ', result) )
  .catch( (exc)=> console.error("exception ", exc)  )

(CoffeeScript is usually more whitespacey – so the 1:1 parity with your example is just a neat coincidence; still, whitespace aside, the two languages could easily be cousins)

But I digress. The idea here wasn’t to change scripting languages – but to leverage existing, durable and compatibly-licensed open source JavaScript to solve “once and well” some of the problems frequently-recurring across scripts.


#7

Yeah, Coffeescript is another good way to fill in the missing features, I dabbled with it for a bit when doing some nodeJs experiments a while ago.

With JS thought its a matter of preference, I been looking into Babel.js with my projects to bring in ES6 features to browsers, but I have yet to experiment if it works with Hifi.

Id however prefer to have the standards natively integrated to the JS engine instead of having to use a library to do just that, to fill the blanks, as it always seems like these frameworks and polyfills keep appearing, like mushrooms in a forest after a rainy day, and eventually dying out.