Technology

Building an SDK for web browsers: 3 things we’ve learned

May 11, 2021
Building an SDK for web browsers: 3 things we’ve learned

In-browser SDKs are a great way to bring your project to the web and simplify the way app developers access your services.

In fact, a number of large companies have built a library around their APIs this way.

Amazon, for example, lets developers build AWS services into their web apps using JavaScript code running in a browser. Facebook, Stripe and Twilio are all doing similar things.

At Microblink, most of our products now work in browsers. We wanted developers to be able to create simple, yet powerful experiences directly on the front-end of their web apps, and we wanted our end users to enjoy those experiences without having to ever leave their tab.

The biggest problem we faced with this goal was: all of our products require intense image processing on the device, something browsers couldn’t handle… until recently.

Tip #1: WebAssembly is the way forward if your code is compute-intensive

Once, all browsers could do is render pages. Today, they let you code, edit videos and play games inside them.

Much of this performance boost came with the widespread adoption of  WebAssembly, a new web standard that runs alongside JavaScript to compile low-level code so that browsers can execute it faster. (1)

Because of its compact binary format, WebAssembly is ideal when you need to create native-like experiences on the web. In our case, that’s real-time data extraction with a hefty amount of artificial intelligence under the hood.

Reading identity cards inside a browser, without any server-side processing. Try our SDKs in Chrome, Safari, Firefox or Edge.

As you can see, WebAssembly is fast. The complex logic used to detect, recognize and read credit cards from a user’s video stream runs buttery smooth, despite the low-resolution feed from a laptop camera.

Performance comparison of Node.js and WebAssembly written in C++ (source).

For our end users, this makes signing up or paying for something online as easy as scanning the data in – with the whole experience only a link away.

Apart from improved performance, compiling your code to WebAssembly brings us:

  • Increased security: WebAssembly runs in a safe, sandboxed environment and is much more difficult to reverse-engineer than JavaScript because of its bytecode format.
  • Accessibility and interoperability: WebAssembly has recently become the official World Wide Web Consortium (W3C) standard (just like HTML and CSS).
  • Portability: WebAssembly can run outside of the browser as well, on a variety of operating systems and instruction set architectures.

The source code behind our SDKs is written in C++ but you can compile WebAssembly from Rust, Go, AssemblyScript, and many other languages, too.

Here’s a high-level look at what the process looks like. You’ll notice we’ve chosen Chrome to illustrate our point as it’s the browser of choice for roughly two-thirds of the world’s internet users. (2)

Still, we have to think about the remaining third. And that means developing with cross-browser compatibility in mind.

Tip #2: Deal with browser compatibility issues by progressively enhancing your SDK

Working with new browser APIs or technologies like WebAssembly will often cause some of your features to flop in certain browsers, either because they are blocked by something or not supported at all.

For example, calling WebRTC API to process real-time video in Chrome won’t work on any iPhone running iOS 14.2 or older because Apple’s WebView doesn’t support it.

Suppose you’re building a video conferencing SDK for the web. You now have a problem on your hands because iPhone users that haven’t updated their software in a few months won’t be able to join a meeting in anything but Safari.

We faced the same issue with WebRTC support and some of our users may not have a webcam to begin with. The way we got around this problem is the same way you approach any dead end: by taking a step back and reprioritizing.

Progressive enhancement in practice

In web development, progressive enhancement means you’re delivering essential features to everyone first while the more advanced functionality is available only to users of the most modern browsers.

We know that our core feature isn’t the scanning itself, but rather the data extraction that follows. We need to get an image of the document, but a user can simply upload one from the gallery instead of launching the webcam.

This basic functionality is something all of our users see. After we’ve covered the essentials, we check whether we can access the camera to actually scan the document.

It helps you if you map out your user journey from square one and determine what happens if and when a feature fails to load. Here’s how we’ve designed our flow prior to building the SDK:

Detecting whether a browser supports a feature

Before establishing a basic level of user experience, we need to know what features will and won’t be able to run across browsers.

To do that, you can either implement your own tests or use an existing library such as wasm-feature-detect by Google. We use it to load an appropriate WebAssembly bundle to our users at runtime, from most compatible to most performant. Here’s an example on how to check whether SIMD, one of WebAssembly features, is supported.

<script type="module">
import { simd } from "https://unpkg.com/wasm-feature-detect?module";
simd().then(simdSupported => {
if (simdSupported) {
/* SIMD is supported */
} else {
/* SIMD isn't supported */
}
});
</script>

Run a cross-browser test for each of your features, build workaround logic around the lack of support, and before you know it, you’ll be progressively enhancing your SDK.

Tip #3: Sidestep the dull work with metaprogramming

If you plan on building multiple SDKs (or even web apps) that share similar functionality, you may want to look into metaprogramming.

Metaprogramming is a technique in which a computer program treats other programs as its data. It lets you automate time-consuming and often tedious work by writing programs that themselves write programs.

As an example, our in-browser SDKs have similar architecture but solve entirely different problems. Metaprogramming helps us transform existing and even generate new JavaScript files for each SDK to:

  • Generate boilerplate code from a single metarepository
  • Add a new feature once and have it work everywhere
  • Fix a bug in one place and change the unwanted behavior in all SDKs
  • Change license keys in bulk, modify paths to WebAssembly files, etc.

We use two different metaprogramming techniques, depending on the scope of the changes that have to be made: template metaprogramming (TMP) and manipulation of abstract syntax tree (AST).

Template metaprogramming comes in handy when you need to generate multiple JavaScript files from a single, generic file.

Using ASTs to manipulate code is helpful in modifying existing source code files while sticking to their style and code structure.

We’ll take a closer look at how you can implement both of these techniques in a future blog post.

Browsers, the place to be

As browsers continue to evolve, we’re bound to see an increase in SDKs that will power simpler, more personalized experiences across the web.

Hopefully, the findings we’ve outlined above will help you build one of your own — with performance, accessibility and smart engineering in mind.

Enjoy working on amazing in-browser SKDs? Come work with us

Integrate ID document scanning into your existing application today

Continue reading

Find more thoughts on the industry insights, use cases, product features, trends in AI, and development processes.

What is identity documentation verification and how does it work in finance?
ID and Document Verification

What is identity documentation verification and how does it work in finance?

August 31, 2023

Identity document verification ensures the authenticity of presented documents, which helps to mitigate the risk of fraudulent activities and breaches…

Upgrade your UX with ID document scanning for web browsers
Technology

Upgrade your UX with ID document scanning for web browsers

February 23, 2023

How easy is it for your customer to start utilizing your product or service? In an age with no abundance…

Microblink’s top 5 blogs of 2022

Microblink’s top 5 blogs of 2022

December 28, 2022

What a year it has been.  For both our Identity and Commerce business units, 2022 was highlighted by growth, innovation,…

Identity Document Scanning product updates – November 2022
Product Updates

Identity Document Scanning product updates – November 2022

November 22, 2022

Find out what’s new in the v6 release of Identity Document Scanning, and how the updates empower your solution and…

Blue in the face: Twitter’s vexing verification raises identity issue on social media
Social Media

Blue in the face: Twitter’s vexing verification raises identity issue on social media

November 17, 2022

In the Twittersphere, the term “verified” has progressively taken on a meaning of its own. It was back in 2009…

Document Verification product updates – August 2022
Product Updates

Document Verification product updates – August 2022

August 10, 2022

Here’s a quick overview of all new features and supported documents in the latest version of Document Verification. Our unique…

Identity Document Scanning product updates – July 2022
Product Updates

Identity Document Scanning product updates – July 2022

July 31, 2022

We’re super excited to announce a new-better-than-ever version of Identity Document Scanning with 50 new identity documents and significantly improved…

3 Keys Elements of Customer Identification Program for AML
ID and Document Verification

3 Keys Elements of Customer Identification Program for AML

February 21, 2024

In the fight against financial crimes, anti-money laundering (AML) is a critical defense. AML refers to procedures, laws, and regulations…

Top 6 Identity Verification Methods
ID and Document Verification

Top 6 Identity Verification Methods

February 21, 2024

In the digital world, establishing trust hinges on the ability to verify identities, ensuring that people are who they claim…

What is a Customer Identification Program (CIP)?
ID and Document Verification

What is a Customer Identification Program (CIP)?

February 21, 2024

Imagine a world where financial transactions are invisible threads connecting individuals across the globe, with no accountability or traceability. Such…