Skip to main content

STRUDEL Kit

Welcome to the STRUDEL Kit Docs! STRUDEL Kit is a web development toolkit for building scientific UIs based on the STRUDEL Design System and Task Flows. The toolkit helps users build out scientific Task Flows as usable web applications. It consists of a suite of React-based TypeScript templates and a command line interface for bootstrapping apps using the templates. Apps built with STRUDEL are pre-baked with much of the setup you need to turn complex Task Flows into efficient and highly usable experiences for your users.

Visit strudel.science for more information about the STRUDEL project.

Key Features

  • Fully customizable React templates for common Task Flows in scientific software
  • CLI for bootstrapping React apps that are template-ready
  • Consistent user experience
  • Automated file-based routing
  • Configuration-based customization

How does it work?

STRUDEL Kit brings together multiple open source tools as well as its own set of templates and lightweight components to offer a cohesive system in which someone can quickly jump in and start developing a usable scientific web app. There are two main pieces to web applications built with STRUDEL Kit: the base app and the Task Flow templates.

The base app provides the basic scaffolding you need to get started building a web app. It consists of a preconfigured architecture of open source tools and custom components. Here's what's included:

React

Component-based web UI library

The Task Flows templates are pre-built flows of React components for common patterns in scientific UIs. The template components are configured to plug right into the base app but you can also plug them into existing React apps with a little bit of restructuring.

The strudel-cli brings both of these pieces together in a command line tool for easily generating base apps and Task Flow templates. It is the primary interface for getting started with STRUDEL Kit.

Once you have generated your base app and have begun adding Task Flows, you have full reign to customize the app. STRUDEL Kit is a great way to get your app started but in most cases you will have project-specific customizations and requirements. For this reason, STRUDEL Kit does not lock you into any particular tool and gives you full freedom to edit the templates as you see fit. You can add in new libraries, replace ones that came with the Kit, or just keep building within the system you set up with STRUDEL Kit.

Motivation

There are many tools out there to help make building web applications easier for developers and better for end users but few tools target the unique needs of scientific software UIs. STRUDEL aims to be a go-to resource for Research Scientists and Research Software Engineers who want to build tools that offer a great user experience that can help advance their research goals.

Instead of reinventing the wheel from the ground up, STRUDEL Kit leverages existing open source tools and tries to fill in the gaps when it comes to building scientific web applications. We think that implementing a good task flow in a UI is vital to a good user experience. STRUDEL focuses on high level flows and components to help make good user experience more accessible to the scientific software community.

Who should use STRUDEL Kit?

STRUDEL Kit aims to be a useful tool for experts in frontend engineering and an approachable batteries-included tool for engineers and computational scientists who have only some experience with web development. Understanding JavaScript, TypeScript, and React are important for being able to customize the apps you build with STRUDEL Kit. However, STRUDEL Kit also offers configuration-based customization which makes it easy to make basic changes without even touching the inner React code and we are working to make the configurations even more powerful.

Before getting started, we recommend having some familiarity with the command line, JSON or similar data types, JavaScript, and React. Check out our curated list of resources for getting started with some of STRUDEL Kit's foundational technologies.

Next Steps

Installation

Install everything you need to get started