The goal of our Web Labs is a toolbox that enables development of interactive web simulations or “labs,” and a set of labs built with this toolbox. Our development practice is as follows.
First, Get something up on the screen. Often this involves finding an example on the web and modifying it. Don’t spend a lot of time designing and thinking before something simple gets running. We believe that it is better to get something useful running than it is to have a beautiful plan and theory in development but nothing working to show for your time.
Second, repeat the following:
- Add functionality.
- As we observe repetition of code and see patterns developing, generalize the code. Have the objective of maximizing code in libraries and minimizing code needed to build new labs.
- As we observe patterns developing in the user interfaces, refine the design of a user interface guideline that is simple and consistent between labs in order to speed development of new labs and speed user comprehension when entering new labs.
Reactor Lab is a pioneer in developing interactive simulations for active learning. This is a screenshot of an experiment in the Lab in March 1993, when the Lab was a single HyperCard stack. The screenshot was taken after it was converted to a LiveCode stack to keep it alive and operable on today’s computers. Click on the image to see a larger version.
Here is the same experiment in today’s Reactor Lab.
A brief history of the development of Reactor Lab through 2006 is available at LiveCode Journal. The article refers to Revolution, which was LiveCode’s previous name.
In an earlier post, I wrote about flow based programming (FBP). Recently, I ran across Fabrik, which was one of the first visual tools for FBP. One inspiration for Fabrik was Show and Tell.
In chemical engineering we wire, or rather pipe, visual components together in application-specific software tools to design chemical processes (see Resources, COCO Simulator here) and process control systems (Matlab Simulink).
“Fabrik – A Visual Programming Environment”
Dan Ingalls, Scott Wallace, Yu-Ying Chow, Frank Ludolph, Ken Doyle of Apple Computer.
presented at ACM, OOPSLA 1988 Conference Proceedings
“Fabrik is a visual programming environment – a kit of computational and user-interface components that can be “wired” together to build new components and useful applications. … A kit is a set of primitive components, together with a framework for connecting the components to do new and interesting things…. The kit approach has been around for a long time, manifest in the subroutine libraries of the last three decades. However, the ability to browse through, and experiment with the available components was extremely primitive, owing to the textual orientation of underlying computing environments during those early years. … With the advent of iconic user interfaces, nontechnical users — those not trained to appreciate invisible objects and connections — are able to work concretely (by pointing at an image) with data and functional components.”
“The unbelievable life of the forgotten genius [Katherine Johnson] who turned Americans’ space dreams into reality” http://www.businessinsider.com/katherine-johnson-hidden-figures-nasa-human-computers-2016-8
“Throughout her education, she says she succeeded in part because she was always asking questions — even when people tried to ignore her, her hand stayed up.”
Trailer for upcoming movie about Katherine Johnson, Hidden Figures: http://www.foxmovies.com/movies/hidden-figures
FBP makes a lot of sense. As far as application-specific apps, see the chemical process simulators COCO, Aspen Plus, and even Reactor Lab’s Division 1, Lab 6, Reactor Networks. Although lacking a graphical programming interface, our web apps have code structured with a similar metaphor of independent objects sending messages to each other, as do the dynamic simulations in Reactor Lab. This metaphor makes writing, expanding, and maintaining dynamic simulations easy.
A screenshot of Reactor Lab’s Reactor Networks is shown here, with a screenshot from the Flowhub clock example below it. Click on an image to see full-sized version.