Tabris.js 2.0 – Top 10 Features: Binary Fetch

In preparation for the Tabris.js 2.0 release, we started counting down the 10 features of Tabris.js 2.0 that we’re most excited about. We reached the halfway point, which means that the release is almost here and we have 4 features left to go. Feature Number 6: Binary Fetch is a pretty exciting technical feature, especially for me because it required the implementation of shared memory regions in J2V8; but first, what is Binary Fetch.

XHR and Fetch are two standards for retrieving data from a URL. With Tabris.js 1 you could only fetch text-based data through this API, but now you can fetch both text and binary data. The binary data is returned as an ArrayBuffer and can be manipulated in place. On Android, this means that the ArrayBuffer is shared between the underlying V8 instance and the Tabris.js runtime; so no excess data copying is performed.

For example, with binary fetch, you could fetch images from a remote URL and apply different filters before displaying them in an image view.

function loadData() {
  fetch('https://tabrisjs.com/assets/public-content/img/iphone-cropped-small.png')
    .then(response => checkStatus(response) && response.arrayBuffer())
    .then(buffer => {
       new PNG({ filterType:4 }).parse( buffer, function(error, data) {
         var options = {  colorType: 0 }
         var out = PNG.sync.write(data, options);
           let base64Encoded =  _arrayBufferToBase64(out);
           imageView.image = { src:'data:image/png;base64,' + base64Encoded};
       });
      return buffer;
    })
    .catch(err => console.error(err)); // Never forget the final catch!
}

In this example, we load a PNG as an array buffer, and process the buffer to make it greyscale. You of course could apply all sorts of filters. For those interested, I used pngjs to process the image.

The entire snippet is available on github.

We are just putting the final touches on Tabris.js 2.0 and it will be publicly available on July 18th. Follow us on Twitter for all the latest Tabris.js news.

Tabris.js 2.0 - Top 10 Features

The binary fetch() is just one of the cool new additions to Tabris.js 2. Don’t forget to check out the other top 10 features in the rundown below.

1. TypeScript & JSX
2. Windows 10 Support
3. File system access
4. AlertDialog
5. Binary fetch()
6. Simplified event and properties API
7. StatusBar and NavigationBar
8. Tabris CLI
9. Security
10. NavigationView