Building a custom dashboard or data app typically involves many steps: meeting with various stakeholders to get their requirements, finding the right data sources, and building prototypes just to get started. Then iterating on them, going through change requests, and finally maintaining the resulting app for years to come.

Observable helps with many of these steps, with tailored solutions for building, hosting, and maintaining a dashboard or data app.

Building a modern data app that your customers will use

Users today expect their dashboards to look and work like the apps they’re used to on their phones: clean and modern looking, seamlessly working across different device and screen sizes, and – most of all – fast. A dashboard that is slow, clunky, or is impossible to use on a phone will frustrate your users.

Zippy load times aren’t just a nice-to-have, but a real competitive advantage. If your dashboard is facing external users or customers, its performance and visual appearance will color their perception of your product.

When today’s established BI tools were new, direct access to databases was novel and exciting. But in the decades since, the wait for fresh data has turned into a tedium that users aren’t used to anymore from other data-focused apps. A different approach is needed today, one that presents data immediately, no matter how slow the backend database it’s reading from might be.

Data apps built with Observable Framework are much faster than traditional dashboards because of data loaders. By moving database access, data transformations, modeling, etc., to the build phase, the experience for the user is an app that loads instantly. We have a blog post that explains how data loaders work (and why they’re awesome), but the gist is that they load and transform the data offline, long before the user requests the page. Their output gets bundled with the code and sent to the browser very efficiently, without having to wait for a database query or further processing.

Interaction in a Framework app can also be much faster by pre-loading the data needed for drill-down, different filter settings, etc. All of these operations are then performed right there in the browser. Traditional dashboards respond to interactions by sending a new query to the database to get a result set based on the new settings. Framework apps can perform the same operations in memory using DuckDB or similar databases. Efficient data formats like parquet that can easily transmit millions of rows to the user, and allow the app to query them much faster than the round-trip time of a query on the network.

Web standards and advanced features for a better developer experience 

Application speed aside, an important consideration when choosing a framework for development, is how much it helps developers build their applications faster and more efficiently. Or in other words, how much time — and thus, money — they save by using it.

The Observable approach, of using data loaders to push slow data queries to an offline process, enables developers to build data apps that are always up to date, load instantly, and work on any device their users might choose to use.

Reactive JavaScript

Framework’s reactive style of JavaScript encourages a modular approach to building applications, which helps with both coding and testing. Any changes to values propagate through your code without having to write explicit update logic. Data updates, filters, and all kinds of interaction are much more straightforward to build this way. Developers familiar with React and other reactive frameworks will feel right at home, and can even use React code (JSX-style) in Framework directly.

Responsive layout and built-in components

Observable Framework comes with a set of pre-built components and tools that help you get started quickly. These include layout components for responsive layouts, and interactive elements to add filters and other functionality to your dashboard.

A modern data app needs to work across many different devices and screen sizes, from large monitors to smartphones. Resizing a dashboard is not just a matter of scaling individual parts of it, but also reflowing the layout to work on different aspect ratios and hiding less important elements on smaller screens. Modern browsers support the relevant cascading style sheets (CSS) features to make all this happen seamlessly, but configuring them is not straightforward. Framework’s layout helpers make this task much easier and faster.

Framework’s set of recommended libraries, which are available without an explicit import, include many useful open-source (D3, Observable Plot, lodash) and custom libraries (like hypertext literal). For data loaders, we also have a set of data integrations for you to quickly access your data from many sources. These have been honed over years of developing web applications, and provides a great starting point for your own work without having to go hunt for the right npm module for many common tasks.

Easy access control and deployments

On the backend, you don’t want to waste time finding a way to control access (and you certainly don’t want to roll your own). Observable provides both hosting and access control that integrates with common SSO (single sign-on) providers. You can also share dashboards with anybody privately using secret links, which is especially useful for external-facing applications.

Framework app builds are easy to automate so they update and deploy to Observable as needed (we have a blog post on the considerations for how often to build, based on your operation’s time scale).

Observable data apps are easier to maintain

Once you’ve built your data app, it is important to maintain it to keep it from breaking, and from falling into disuse — what is commonly called dashboard rot

Observable’s project analytics show you how many times your data apps are used, both overall and per page. This helps to fight dashboard rot by surfacing where a seemingly useful app might not get the use you expected. Observable Framework supports dashboards with multiple pages, but which of them are actually providing value to your users is hard to tell without such fine-grained analytics. They can also inform changes to the data app, or decide which pages might be retired.

Crucially, your data needs to stay up to date and your data sources remain accessible. How do you know if a database has gone missing, or permissions changed to cut off your users? Framework’s build process will throw errors when it can’t update its data, which you can then respond to immediately. Most BI tools will just silently fail, with your users being left in the dark about why they can’t see their data — and you as the developer never even finding out.

Developing and maintaining a data app is not just a one-person job. Framework projects can easily be developed together (using common source-control tools like git and GitHub), and handed over to others who can take over monitoring deployments or maintenance when things go awry. Even if the original developer might have moved on or is working on other projects, the source code and project analytics are available to others who can maintain or extend the data app. This avoids having to rebuild from scratch or redo work that has already been invested.

Conclusion

There was a time when it was acceptable for business software to be clunky, slow, and ugly. But today’s users expect modern, fast, and clean data apps that work wherever they are.

Observable Framework makes modern web technologies available to developers to use in their data apps. It saves time and money by making it easier to build and maintain data apps, and ties in with hosting and access control on the Observable platform. And it delights users with apps that are fast and pleasant to use.