Filtered by Tag: javascript

D3 Round Two: How to Blend HTML5 Canvas with SVG to Speed Up Rendering

| | javascript d3 optimization ui canvas

Soon after the publication of "Digging Into D3 Internals to Eliminate Jank," I was pleased to see that it had sparked a discussion on Twitter, with D3 community members, notably Noah Veltman and Mike Bostock, sharing suggestions for improving our rendering solution.

A suggestion we received both in this discussion and on lobste.rs was to use canvas to render the data points. We had originally avoided canvas because of time constraints, lack of team familiarity with canvas, and the complications it introduced with regards to mouse interactions. However, Noah proposed a combination of SVG and canvas that strikes a balance between canvas' performance and SVG's convenience, complete with a demo. It piqued my interest, and so I decided to explore it in some more detail here.

MongoDB’s JavaScript Fuzzer: Harnessing the Havoc (2/2)

| | javascript testing

Fuzz testing is a method for subjecting a codebase to a tide of hostile input to supplement the test cases engineers create on their own. In part one of this pair, we looked at the hybrid nature of our fuzzer -- how it combines “smart” and “dumb” fuzzing to produce input random enough to provoke bugs, but structured enough to pass input validation and test meaningful codepaths. To wrap up, I’ll discuss how we isolate signal from the noise a fuzzer intrinsically produces, and the tooling that augments the root cause analyses we do when the fuzzer finds an issue.

MongoDB’s JavaScript Fuzzer: Creating Chaos (1/2)

| | javascript testing

As MongoDB becomes more feature rich and complex with time, our need for more sophisticated bug-finding methods grows as well. We recently added a homegrown JavaScript fuzzer to our toolkit, and it is now our most prolific bug finding tool, responsible for finding almost 200 bugs over the course of two release cycles. These bugs span a range of MongoDB components from sharding to the storage engine, with symptoms ranging from deadlocks to data inconsistency. We run the fuzzer as part of our continuous integration system, Evergreen, where it frequently catches bugs in newly committed code.

In part one of two, we examine how our fuzzer hybridizes the two main types of fuzzing to achieve greater coverage than either method alone could accomplish. Part two will focus on the pragmatics of running the fuzzer in a production setting and distilling a root cause from the complex output fuzz tests often produce.

What's a fuzzer?

Fuzzing, or fuzz testing, is a technique of generating randomized, unexpected, and invalid inputs to a program to trigger untested code paths. Fuzzing was originally developed in the 1980s and has since proven to be effective at ensuring the stability of a wide range of systems, from filesystems to distributed clusters to browsers. As people attempt to make fuzzing more effective, two philosophies have emerged: smart, and dumb fuzzing. And as the state of the art evolves, the techniques that are used to implement fuzzers are being partitioned into categories, chief among them being “generational” and “mutational.” In many popular fuzzing tools, smart fuzzing corresponds to generational techniques, and dumb fuzzing to mutational techniques, but as we will see, this is not an intrinsic relationship. Indeed, in our case, the situation is precisely reversed.

Digging into D3 Internals to Eliminate Jank over Large Data Sets

| | javascript d3 optimization ui

Browser JavaScript isn’t like most other user-facing application runtimes, where a main thread handles the UI and you can spin work off into background threads. Because it’s single-threaded, when you have to do heavy lifting, sometimes you need to get creative to keep your UI responsive.

This was the case on one of Cloud Manager’s newest features, the Visual Profiler. It was an ambitious design, and when I was given the initial mocks I was immediately excited by the prospect. As a front-end engineer, I couldn’t wait to start implementing the new chart and table.

Code-generating Away the Boilerplate in Our Migration Back to Spidermonkey

| | c++ metaprogramming embedding javascript

If creativity emerges from constraint, then embedding a JavaScript engine into your database server is a recipe for creativity.

We’ve worked with the internals of a lot of different JavaScript engines, and one thing stands out: JavaScript is hard to embed for anything but the most trivial uses. To do it well, without writing a ton of mind-numbing and maintenance-hostile duplicode, we had to use a wide slice of the code-generating capabilities of C++ in concert. In our most recent migration from the V8 engine back to SpiderMonkey, we eliminated boilerplate by:

  • Generating callbacks with unique template instantiations
  • Implementing type integrations through policy based class design
  • Generating callbacks with constrained method invocation with compile time type lists
  • Utilizing a Lippincott function to provide C++ and Javascript exception interchangeability

I’ve put together a compiling walkthrough of these techniques in use, but before we get there, an examination of the prevailing context is in order...