DailyJS

DefiantJS, Mprogress.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries JSON ui

DefiantJS, Mprogress.js

Posted by Alex R. Young on .
Featured

libraries JSON ui

DefiantJS, Mprogress.js

Posted by Alex R. Young on .

DefiantJS

DefiantJS (GitHub: hbi99/defiant.js, License: MIT) by Hakan Bilgin is a library for searching JSON documents with XPath expressions.

Do you need to query large JSON structures? Do you end up coding loops to parse the JSON and identify the data that matches your query? DefiantJS offers a better way. DefiantJS extends the global JSON object with a "search" method that enables lightning-fast searches using XPath expressions.

It comes with something called "snapshot search" that allows you to quickly search large documents. It's used like this:

var snapshot = Defiant.getSnapshot(data);  
// Snapshot search - this is more than 100 times faster than 'regular search'
found = JSON.search(snapshot, '//item');  

You can also use DefiantJS to apply JSON to XSLT. This may be useful if you have existing XSLT documents that you want to use with a newer JavaScript project.

The project's documentation has interactive examples that you can try out, so you can get a feel for how XPath expressions work.

Mprogress.js

Mprogress.js (GitHub: lightningtgc/MProgress.js, License: MIT) is a Material Design-inspired progress bar. It can display a progress bar at the top of the screen like Android applications, but you can also place it within other page elements as well.

It uses a simple constructor function called Mprogress, and you can start the progress indicator animation with start. When the task has finished you call end:

var mprogress = new Mprogress();  
mprogress.start();  
// Slow things happen here
mprogress.end();  

It has other methods as well, like set for changing the position, and it supports video-style "buffering" indicators where two bars are used to show the current playback position and the point at which the data has been buffered. The project's GitHub page has animated gifs that illustrate each of the animation types.