Code structure isn't easy to manipulate without reading code or using external tools. F changes that by letting developers connect how functions flow, enabling for better code structure transparency and faster code structure manipulation. Simply drag and drop components to create complex programs without even looking at code. Components are individually tested, and can be combined and collapsed to form groups (currently finicky).
It gets way way better. Im integrating it with text generation so functions can be auto-generated using a table of acceptable input and output data with the help of a chat bot. I suppose then all you need is to decompose a list of requirements into a flow of functions to orchestrate a project. This changes the developers responsibilities from programmer to engineer. We can make componets/groups shareable allowing for reusing of common tasks like injecting middleware, while maintaining ownership and allowing for easy modifiability. F programming anyway. And on top of that, im not satisfied with 2D navigation of the code structure space, I'd like a 3rd dimension that can be scrolled through that brings nodes into view using transparency. I'd also like passing and zooming to be a thing for better structure manipulation.
I created this project to aid my development speed and learnability of prototypes, which I have many of.
I was heavily inspired piping frameworks like rxjs and linq, circuits simulators, Unity's visual scripting Bolt, and the ECS implementation Bevy.
- write bit-sized component code
- visually connect components
- start anywhere
- group components
- view component logs
- cache results
- save componets
- save projects
- parse js into components
- connection guards
- [WIP] parse js project
- [WIP] share components
- Returning
undefinedstops a node from propogating - Params can define guards, eg (cat:"jerry", dog:!null) => {}
- Functions run async with real-time visual playback
- Can you have a bunch of nodes share the same data?
yes, by using an aditional parameter passes in the shared data
- Can you have a node that has optional destinations?
yes, using guards
- Double click to create node
- Drag to move node
- Drag from one node to another to connect nodes
- Click on a node to view the node editor
- Click on a module to either apply it to the selected node, use it as a base when creating new nodes
- Click 'import' to load modules from an existing javascript file/project
- Click 'export' to save the current project as a javascript file
- Click 'run' to execute the currently selected node as the root node
- Click 'save' to save the currently selected node in local storage
- Click 'collapse'/'expand' to toggle the visibility of a group of nodes children, if no group exists its ends are the leaves
- class references to 'this' are replaced with an class object instance
- constructors create an object instance, update its attributes, and return the instance
- class functions take in the class object as the second parameter
Caches like the old .f version of Fortran with unique memory access.
Flows like LISP, LINQ, and RXJS.
Patching like Patcher in FL and Unity.
Usable like...
- Visibility of system status - see how it runs
- Match between system and the real world - a state diagram
- User control and freedom - arrange parts how you want
- Error prevention - test only parts of the code
- Consistency and standards - share existing function
- Recognition over recall - Recognize flow patterns
- Flexibility and efficiency of use - reusable groups
- Error handling - indicate and explore failed state
- Help and documentation - add notes to nodes
Arranged by levels of abstraction:
view > ctrl > core
- Add features an needed by projects
- Parse this project with itself then visually clean it up; recursion is key
- builds 'state'
- html elements 'graphics' logic
- modifies 'state'
- high level 'business' logic
- no 'state'
- low level 'procedural' logic
- Test
- Refactor
- Fix (straightforward)
- Features (straightforward)
- Plan Refactorings: make fixes/features straightforward
- Take an idea
- Visually break it down
- Logically define parts
- Develop it as a proof of concept
- Take an idea, or part that isn't *codable or completed
- Break it down into (3-7) *logical parts, collapsed as a group
- Repeat steps 0-2 until all immediate parts are sufficently small
- Code the parts until the parts' group works as expected
- Collapse the parts' group
- Repeate steps 0-5 until everything is collapsed * logical part: identified with practice (eg. low coupling, high cohesion) * codable: pure js code that takes an input and provides an output
- add: 'global' nodes that auto-inject via parameter names and hide connections
- support: callbacks ie implement a sleep node with setTimeout
- fix: currently applying a group to a node doesn't change the root node
- fix: ALL children of a group till the ends should update when a group saves
- fix: tab should indent at current index, not at end of file
- fix: deleting a group deletes everything
- fix: allow circular nodes in group
- fix: clean up other todo's if practical
- Take something that works
- Make the interface practical
- Make the experience lovable
- extra: make the node & module editors togglable by clicking on the header
- extra: fix group node element colors during interaction
- extra: buttons don't always click when clicked on due to a gap; reduce missed clicks
- extra: indicate head nodes with unique color
- extra: indicate leaf nodes with a unique color
- extra: z axis depth; indicate depth using opacity and z-index on group nodes children, stacking on groups of groups. Have the z index change to that of the nodes selection
- extra: code auto test field
- extra: code compile check & indicator
- extra: add a 'run' button near the project that runs ALL of the head nodes, replacing the need for connecting an init/trigger node to every single gosh darn node
this could be used when you want to... ...have a prototype improve performance ...start a new project from a previous one ...use functionality from another project ...use other peoples code without their permission
- Take this object oriented project
- Change it to functional
- Visually explain project logic
- Manually optimize for cuncurrency
- extra: optimize running nodes in parallel
- extra: (started) import modules from js file
- extra: import project as nodes from js file
-
- parse js loops into nodes that yield using generators
- extra: export project or run path javascript file
- extra: pan node view
- extra: scroll to zoom
- extra: offscreen node indicator (dot on edge)
- extra: allow the spread operator for input params
- extra: properly sanitize code before running to prevent XSS
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent