Proposing a new way to write JavaScript.

I created a VSCode extension that uses a lot of the ideas here check it out: VSCode Deno Notebook (Denote).

TLDR: Want to make a VSCode extension that abstracts away the filesystem and allows you to focus on writing individual functions.

NPM and Node.js changed the way we write JavaScript, we think of the familiar hierarchy in files and folders. I think that this leads to really chaotic code, and hard to understand folder structures.

Rails wasn't the first to be highly opinionated about folder structure, but it did lead to things being pretty easy to pickup and understand.

JavaScript is not rails, JS can be used for many different application that break the MVC mold.

I have a supreme frustration and anxiety about composing code. I would love to never think about where my code lives again. I don't need to know what file a piece of code belongs in.

My idea is to use a VSCode extension to abstract away where the code lives and allows you to focus on just writing the individual parts, the functions.

I put to together how I see this vision in a mockup here:

The idea is that an entire project is a set of nested functions.

Each function appears in a box. You have tabs on how you can interact with that code, they could include test, which would "flip" the function code to a callback function to test the code. Another tab is "example" which would take the function and pop it into an example, hitting a "run" button would allow you to execute it directly in the terminal.

A "publish" tab could allow an author to fill in NPM package data and publish that function directly to NPM.

Organization

I've put up a demo of what the folder / file structure would look like. https://github.com/reggi/isolation-project

One method I've thought about is that each "function" can have a name in the screenshot Example.HelloWorld. The function is stored where in the file system and added as a static method to the Example class, created by the extension.

In addition to this, you could also add it to other "namespaces", for instance Greeting.HelloWorld. If you add this, the this type would automatically change to be this: Example | Greeting. Now sibling methods can easily access the function as this.HelloWorld.

Posted this idea on StackOverflow:

Using VSCode text editor within webview?

This is the early steps of this idea, please let me know if this interests you reach out on twitter https://twitter.com/thomasreggi.