StackBlitz allows developers to run WebContainers via their service enabling Node.js to be run in the browser.
Overview
StackBlitz allows developers to run WebContainers via their service enabling Node.js to be run in the browser.
However, they weren’t able to support all of node’s dependencies as some dependencies rely on some C and C++ bindings that cannot run in WebContainers.
This Dot Labs aided StackBlitz by converting some of these libraries into Web Assembly modules that could be dropped in to replace existing libraries and allow them to function in StackBlitz’s IDE.
Services Provided
Our team provided staff augmentation to StackBlitz by taking a critical path set of work and implemented it on their behalf using Node.js, Web Assembly, and other modern web technologies.
Tech-stack
Lerna
NodeJS
Rollup
Imagemin
Web Assembly (WASM)
Ava- Imagemin comprises several smaller packages so using a monorepo helped organize the different subpackages.
- Ava was used to write tests to ensure API compatibility between our ports and the original packages.
- WASM allowed us to create binaries that are web compatible enabling the underlying C libraries to be replaced with browser compatible versions.
- Rollup.js was used to package up these packages into single module exports to be consumed by the package management system.
- As the end goal of the project was to make image compression work in StackBlitz web containers, we needed to create compatible ports and thus used Node.js and WASM to create these features.
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
StackBlitz provides developers with a fully equipped online IDE for building, deploying, and sharing JavaScript applications.
Their ordering platforms facilitate integration between multiple systems and services, as well as 3rd party delivery apps, allowing platform customization allowing platform customization as their clients explore new operational strategies.
Image Compression Libraries
We investigated the most popular JavaScript libraries and frameworks currently on the market, such as Angular, Gatsby, NextJS, NuxtJS, 11ty, etc., to find what image compression libraries they shipped with or provided via plugins.
We discovered that imagemin and sharp were the two most commonly used image compression libraries across all these applications.
Unfortunately, these two libraries rely heavily upon C bindings found in the libvips library which could not run in StackBlitz’s WebContainers natively. However, there are many WASM replacements for the C bindings these libraries depend upon meaning we could rewrite them to work in the WebContainers.
Sharp
To replace this library, we had to do a ground up rewrite. In order to save time, we used Sqoosh to shim the functionality needed by sharp.
Sqoosh is a WASM module created by Google for image compression and manipulation that has almost perfect parity with sharp.
Imagemin
This library was built in a modular fashion which allowed us to simply replace its pieces via configuration.
Using several existing WASM packages that had feature parity with its existing modules, we were able to quickly stand up a new imagemin port built purely with JavaScript and WASM.
For the modules that did not have a replacement, we leveraged Sqoosh to shim their APIs and create custom ports.
Ensuring Feature Parity
Once the libraries were completed, we bundled them with Rollup and tested their functionality using Ava.
To improve dev experience in instances where the libraries could not support a particular compression or manipulation, we wrote ‘no operations’ that would return the raw image rather than manipulating it to allow the libraries to run without error and developers to still use the platform.
For the modules that did not have a replacement, we leveraged Sqoosh to shim their APIs and create custom ports.
Let's see how This Dot can help you
Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions
topics covered in this case study:
Chainlink, the company behind the Web3 services platform and blockchain oracle network of the same name, approached This Dot Labs to build a showcase application featuring Chainlink Functions.
Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products
topics covered in this case study:
This Dot Labs took over architectural decision making and development for the e-commerce store and provided a seamless transition with timely deliver of the platform.
WebXR Performance Testing with React: Revolutionizing Mixed Reality Development
topics covered in this case study:
This collaborative endeavor demonstrated the potential of WebXR and showcased the power of leveraging community support and expertise in the open-source ecosystem.
Automating Code Maintenance: This Dot Labs’ Successful Partnership with an Online Metaverse Platform
topics covered in this case study:
Our team created an automated conversion tool to detect newly released code, determine changes introduced by it, and trigger an automatic upgrade to the converted library.
Creating an AI gesture recognition game with next generation Angular and Tensorflow.js
topics covered in this case study:
Ahead of Google I/O in May 2023, the Angular Core Team reached out to This Dot Labs to help them deliver a demo application, showcasing a highly interactive ML integrated application built using Angular with TensorFlow.js in time for the conference.
Enhancing Sentry’s Suite of Debugging Tools with a Cutting Edge Replay Feature
topics covered in this case study:
Sentry’s Emerging Technologies team approached This Dot Labs to augment their team developing a new feature offering a visual replay of user interactions that would seamlessly fit in with Sentry’s portfolio of error and performance monitoring tools.
- See full portfolio