The Future of Numerical Computing in JavaScript

Hi everyone, I'm Gunj Joshi and today I'll be talking about the future of numerical computing in JavaScript. This is a space that has been dominated by languages such as Python, R, etc. But things have started to change. As a core contributor at Standard Lib, I've had the front row seat to some exciting developments and today we'll explore what's possible, what's hard, and where we're headed.

So let's get started with the why. Why should we even bother to do heavy numerical tasks inside the browser? One, instant access. No need to install Python or set up any backend. You just open a tab and start to compute. Two, privacy and security. The data stays on the client's machine. This is crucial for things such as medical information, personal finance, or anything sensitive in general. Three, low latency. No more waiting for the server to process your tasks. Everything happens right away. And four, accessibility. This lowers the barrier of entry for people who don't have high-end machines or they can't install complex software.

So you might be thinking how does this look like in practice? I've got some cool demos through which we can see that. The first demo is a digit classifier. This is your classic handwritten digit recognition. It is powered by TensorFlow.js. The beauty of this is that everything from data pre-processing to inference fully runs inside your browser. So no server involved. Next example, what we have is of a toxicity detection platform. What it does is that it takes a block of text like an abusive tweet or a comment on a social media platform and flags it as either toxic or not toxic right away in your web browser. Suppose we have a toxic comment here and we want to classify it so it comes out to be true. After that, we have the demo of an OCR. Here we have Tesseract.js which is the JavaScript port of the popular OCR engine. What it does is it takes an image and it extracts the text out of that particular image. After that, we have the MNIST example to visualize model training right inside your browser. So yes, you can actually watch the actual model training right inside your browser such as here.

When we start the training you can see the training is happening right inside your web browser rather than a back end. And after this training is done, you can see the custom training charts or accuracy, confusion matrix, all those stuff.

Next away we have the demos of some accessibility applications. First one of which is WebGazer. It uses your browser to create a web page. Next is WebGazer. It uses your webcam to estimate where you are actually looking on the screen. So suppose wherever my eyeballs move, the red ball, the red pointer or the red ball moves in that particular direction. Next away in our lineup we have Holobooth which is a web-based AR filter. So wherever I move my face or blink my eyes, it moves according to that. And all this also happens inside your web browser again.

We have seen what's possible. Now here comes the big question. How do you actually build something like this? Let's figure this out together. First job comes out to be TensorFlow.js. But it is highly specialized for machine learning. It has little to no support for numerical and linear algebra. Maybe stats or any other scientific computing task. If you think about development pace, it is slowing down. Even its GitHub issues and pull requests suggest that Google's focus might be shifted somewhere else. Our second stop comes out to be an npm grab bag. Here what we do is we just grab some packages such as mathjs for mathematical functions, maybe simple statistics for stats, mljs for machine learning, randomjs to generate some random numbers. Pretty soon you are juggling with 5-6 different libraries, each with its own API style, its own quirks and its own bugs. It's fragile, inconsistent and it gets worse as your project grows. Shouldn't be this hard, right? Alright. Let's pause for a second and zoom out. Maybe let's take a step back and check out what are the essential ingredients of a scientific computing numerical system. And why is it so currently hard in JavaScript? First up in our ingredient list comes out to be syntactical niceties. These might seem cosmetic at first, but they have a big impact on how readable and maintainable your code is. Take R's pipeline operators for example.

On the left we have a classic nested function call style which is pretty dense. But on the right you see much more clearer how it becomes when we use the pipeline. Each operation is changed step by step just like you do in plain english text.

Then next in our list comes site extensions or interactive notebooks. In Jupyter, in Python, Jupyter Notebooks have become the gold standard for interactive computing, mixing code, plots, and text all in one place. In JavaScript we have Observable which brings the same live reactive coding experience right inside your web browsers.

Moving on to something under the hood but super important, bindings to hardware optimized libraries. Libraries such as LAS and LFback power everything from matrix multiplication and QR decomposition to SVD or solving linear equations. These libraries date back to 1970s which were originally written in Fortran and most tools we use today such as NumPy, MATLAB, R, Julia are just wrappers around them. JavaScript is now catching up thanks to WebAssembly which lets us tap into the same performance level right inside the web browser.

Next up we have NumPy's ndarrays which are the backbone of almost every numerical application. They allow you to handle multi-dimensional data efficiently with operations like slicing, reshaping, and broadcasting baked in. In JavaScript we lack a native equivalent while there are libraries trying to fill the gap but it's an area still under development.

Beyond arrays we also need data frames. Pandas data frames let you work with tabular data easily, support filtering, aggregation, and joining datasets. In Python this is handled by Pandas which is built on top of NumPy's ndarrays. JavaScript has projects like DanfoJS which aim to build similar capabilities inside the browser with NodeJS but the tooling and ecosystem around it are not yet as mature mostly because we still lack efficient ndarray infrastructure underneath.

Now let's talk about one of the biggest performance levers in scientific computing, vectorization. This is what it looks like without vectorization. Here we are using a simple list comprehension in Python to square a list of numbers. It works but under the hood this is just looping through each element one by one. It is readable but when you're working with large datasets this approach goes down very fast.

It is readable but when you're working with large datasets this approach goes down very fast. Now check out the vectorized version. Using NumPy we convert the list into an ndarray and apply this squaring operation directly to the entire array. There's no explicit loop here, it's all happening at the C level under the hood making it much more faster.

Here's a more real-world example, a function to compute the distance between two points on the earth's surface using latitude and longitude. This is based on the Haversine formula and we're using NumPy functions to vectorize the entire calculation. Vectorization lets us run the function over entire arrays of coordinates and not just individual points which is key while working with geospatial datasets.

Of course and to really test performance we need large datasets. Here's a method to generate a pandas data frame filled with 100,000 random coordinates. This gives a solid dataset for testing. Notice how we're using vectorized random number generation to quickly fill entire columns. It is efficient and it scales well. Now imagine you want to calculate distances from a fixed point to every row in that big data frame.

Here's the non-vectorized approach using a basic for loop to iterate through each row. This gets the job done but it's painfully slow for large datasets. Each iteration is handled in python space and the performance penalty adds up quickly.

Here's the vectorized approach of the same version that we saw earlier. Notice how we pass entire arrays of latitude and longitude values from the data frame directly into the function. Thanks to numpy and pandas under the hood this runs way faster than looping. And the performance difference is actually very real.

Here's a benchmark showing different methods. As the number of rows grows you can see how the vectorized approach stays flat while others especially the for loop blow up exponentially. Next in the ecosystem specialized domain specific libraries. One of the most famous is scikit-learn which makes machine learning in python super approachable.

This example shows how easy it is to set up a linear regression model and make predictions with just a few lines of code. Another critical piece is stats models which focuses on statistical analysis. Here we're using a simple ordinary least squares regression and printing a full statistical summary of the model. So let's take a moment to recap what we have covered till now. These are the key ingredients that make up a mature numerical computing ecosystem.

First syntactical niceties things like pipeline operators and expressive syntax that make the code readable. Then hardware optimized bindings glass and lapack under the hood to make sure performance scales. Then data structures like nd arrays and data frames which form the foundation for serious numerical work. Then vectorization because for loops don't scale and finally specialized libraries such as scikit-learn and stats models to help you build actual workforce not just toy examples.

Now the question is can javascript meet this bar? Have a pause and wonder for a second. The good news is we are seeing an emerging ecosystem. Individually these are strong but the challenge is still bringing them together into a seamless experience and that's exactly where projects like standard lib are aiming to fill the gap. So what's really exciting about this movement in time is that I think we are on the cusp of a new and versioning ecosystem for web-based scientific ecosystem. An ecosystem which will power and supercharge web applications of the future.

Now it's time to put a spotlight on a key project which is driving forward this emerging ecosystem and that project is standard lib. Standard lib provides a common foundation with standardized APIs atop which others can build domain specific libraries. Now let's revisit our ingredient list that we discussed and see if standard lib got everything covered.

Fancy indexing and by fancy indexing we mean python-like indexing. In that you can create and set arbitrary slices of array data and apply things like Boolean and integer array mask for filtering and data extraction. So here we are first importing the standalone package then we initialize our array x. Apply the array to fancy method on that array then we can do slice retrieval and slice assignment and finally get the result. After that we have Blast which is a collection of fundamental operations used for linear algebra or statistical analysis image transformation and machine learning as well.

It includes operations for matrix multiplication manipulation scaling and transformations such as d dot or d swap dsm dgmm etc and in this code segment what we are doing is first we are importing just the packages that we require then we initialize arrays x and y set the constant alpha and then use the DAX py operation. It also has the linear algebra package also known as LAPACK. This is an example of the DLACPY method which is used to copy all part of a matrix A or only a small part of matrix A to another matrix B. Standard lib supports nd arrays too.

As given in the code segment, you can set the data type buffer shape order which is the array order and strides and offsets. We talked about performance that we obtain by you know using vectorization instead of simple for loops. Similarly the ufuncs of standard lib also support vectorization. In this code block, we are once again importing only the required modules. We initialize the array and apply the absolute function over the entire array at once instead of looping through each element.

To help facilitate interactive data analysis, standard lib comes with its own ripple pre-loaded with all of standard lib's functionality, making it easy to load in a data set for performance analysis. This example demonstrates implementing the PageRank algorithm using standard functionality. Import statements may appear extensive, but they allow importing only necessary packages, reducing bundle sizes. Standard lib serves as a comprehensive solution for numerical computing, with advantages like reduced library juggling.

WebAssembly, a high-performance binary format running in web browsers near native speeds, supports SIMD functions and enables performance-heavy applications in languages like C, C++, or REST. Entire game engines have been ported to WebAssembly for running games directly in web browsers. Notably, applications like Adobe Photoshop are entirely web-based, enabling full image editing within web browsers. Comparisons between JavaScript, C, and WebAssembly for routines like dexpy show performance differences, with WebAssembly excelling in computation performance when data copying is minimized.

This is one more such example of an entire image editing software Adobe Photoshop which is entirely based on our web browsers so you can do all operations all image editing things inside the web browser directly.

Here we compare JavaScript against C and WebAssembly for the blast level routine dexpy. Dexpy multiplies a vector by a scalar and then adds the result to another vector.

In the plot I am showing two different WebAssembly measurements. The first one is WASM and the second one is WASM copy. For the first WebAssembly measurement, I'm measuring WebAssembly performance when performing the computation over vectors which are already allocated in the WebAssembly module heap.

In the second WebAssembly measurement, which is WASM copy, I'm measuring WebAssembly performance when you need to copy data to and from the WebAssembly memory module in addition to performing the blast operation.

So in this plot, as you might have expected, performing computation in WebAssembly without needing to copy performs much better than when needing to copy, especially for routines such as dexpy where copying data adds a significant overhead as compared to the actual operation.

But what may be unexpected is that JavaScript still performs quite well on comparing with WASM copy. That demonstrates that especially for simpler operations using vanilla JavaScript is just fine.

It is only 2 or 2.5 times slower as compared to C. There have been a few more efforts in this direction such as Pyodide for running Python inside your web browsers and WebR for running R inside your web browsers.

Based on these charts we can conclude that standard lib is better or equal to other alternatives based on both loading time and speed.

So let's have a recap of what we have just covered. We first saw how vectorization enables fast and readable numerical code in JavaScript.

Then we saw the role of specialized libraries for ML and stats such as scikit-learn and stats models. Then we also saw how standard lib provides indy arrays, universal functions, core math APIs, and much more.

Also, GLASS and ALIPACK are now accessible inside web browsers using standard lib, and all of this is converging into a real emerging ecosystem with, of course, standard lib at its center.

So how can you get involved in all this? Well, these two QR codes link to the standard lib repository and its blog. So if you just feel to contribute or facing any issue, you can just go ahead and ping the GitHub repository.

You can also read the standard lib blogs which are updated quite regularly regarding the recent activities. Standard lib also participates in Google Summer of Code. It participated last year and this year as well.

That was all from my side. Hope you enjoyed listening to me. Thank you. Have a nice day.