![]() Visualizing dependencies: Unlike a “nodes-and-wires” environment, we use the spreadsheet style of referencing by name here, to avoid the chaos of wires.I think 1) a cleaner DSL that can pattern match on event types, 2) more visualization of what the reduce is doing to the stream would help. Visualizing event stream manipulations: Those complicated reduce functions in Javascript aren’t easy to write or read.Also thanks to Steve Krouse for the inspiration here.) (This is kind of related to the Elm architecture / event sourcing. ![]() All other cells derive their state as pure functions over the live output of this cell. Here’s how it works: there’s one special system cell that exposes an append-only event stream of all the DOM events happening in the UI. Handling user input is the tricky part.A cell can reactively reference data from other cells, and can output either data (as vanilla JS data) or UI (using JSX templating). The formula code for each cell is written in Javascript. Split up the transformation into little incremental “cells”, each of which show live output. Use a spreadsheet-style reactive interface to build up the function data -> UI.Make your UI a pure function of your data.Here’s a 10 minute demo of TodoMVC built in this environment: jq is nice, but I want to try designing a language that can take better advantage of the visual environment (just as a spreadsheet formula language is co-designed with the spreadsheet editor)Įventually the project spiraled out of control morphed into something quite different: a live programming environment for building GUI applications in a pure functional style.This could be solved with better visual cues. Because there are no grid rows, it’s a bit hard to tell which objects on the left correspond to which objects in the downstream output on the right.This needs to be improved for a smoother live programming experience, to guide users towards a correct full formula Currently the formula editor just errors out on partial formulas that aren’t syntactically valid.There should be autocomplete for field names in the formula editor, and the ability to directly click on fields in the data to use them in a formula, like clicking on cells in a spreadsheet.There’s so much more that could be done on top of this starting point a few ideas: This makes it easy to run code once per object, eg in the demo, doing an HTTP request for each URL, without needing to write your own map function. Currently, the runtime iterates over the top-level array and runs the provided code snippet once per element. Javascript, for general-purpose programming.The expression operates on the entire JSON collection all at once. jq, a concise DSL for manipulating JSON collections.There are two options for the formula language: ![]() Just like in a spreadsheet, you can see each intermediate stage of your data transformation in a separate column. At the top of the column, the user can enter a formula that transforms the previous column’s data. In the demo video below, I’m taking a list of git commits from the Github API, getting the author for each commit, getting the API endpoint for querying their followers, issuing web requests to those URLs to fetch the list of followers, and then getting the usernames of the author’s followers.Įach column contains an array of JSON data. The original idea for this project was to make a live programming environment around jq, which is a nice language for manipulating JSON data. But I think another part of the solution is having an environment where you can see the data as you transform it, so you’re not working blindfolded. Language features can help here, especially idioms from functional programming. Often, programming requires tedious manipulation of data structures, like “loop over each element in this list, and extract this deeply nested key.” You can see the (very prototype-y) code on Github. Return to it at some point to develop it further. At this point it’s still just an □ early draft □, but I plan to ![]() In fall 2019 I made some prototypes of a live programming environmentĬalled JSON Sheets.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |