Embedded IDE

[joshwcomeau]

The future vision for Guppy is that it's a batteries-included jetpack, to help boost your experience developing React/Gatsby applications.

I would love for it to be a single download that includes everything you need; a usable copy of Node (#44), an ultra-simple wrapper around basic Git operations (#85), and finally, a code editor.

Initially I thought "Nah it would be way too much work to build our own editor". And indeed, I don't want to take on the maintenance burden of that.

But I've been thinking about ways around that...

Describe the solution you'd like Visual Studio Code's editor, Monaco, is open-source! It seems like the kind of thing we could embed, and all we'd have to worry about is the bindings so that changes made are saved.

Actually, Ives over at CodeSandbox recently got the entirety of VS Code running within CodeSandbox! This means you can install extensions, set up different code layouts, everything. The entire VS Code experience.

I'm good friends with Ives, so I may be able to ask him for help on setting this up. In other words, I think an embedded VS Code is entirely possible :)

To be clear, this feels like a 2019 kind of thing, not something we should start work on immediately. Just opening the issue to track discussion around it.

Describe alternatives you've considered There might be other editors we can embed?

We could also not embed any editors. This idea might be a bit controversial. It would significantly inflate our download size, and users may want to use a different editor.

But, I think if our focus is on the absolute beginner, they won't have any editor preferences already. And really, even if someone does, nobody says they have to use the included one if they don't want to.

Maybe we could offer two different bundles, with and without it? Although I'd want to wait and see if there was sufficient demand in splitting them up.

[j-f1]

IMO we should make bundles that include an external editor (perhaps Atom and VS Code to start) along with Guppy in one downloadable. This would allow us to stay out of the editor business while still making it a very simple install.

[AWolf81]

I also think that we shouldn't add the complexity of a code editor and be focused on the workflow. I think it's possible to do it like you mentioned it but I'm not sure if we should do this.

Maybe we could check if we could do it the other way round - Integrate Guppy as extension to VS code or Atom. I haven't created an extension for VS code before.

Benefits from integration into VS code:

• Git flow already available
• No other app to start - Guppy could be displayed in a sidebar

Maybe we could have two versions of Guppy. Standalone and VS code extension. VS code is also an Electron app so it should be straight forward to add Guppy as extension.

Here is a getting started guide for VS code extensions.

[joshwcomeau]

IMO we should make bundles that include an external editor (perhaps Atom and VS Code to start) along with Guppy in one downloadable. This would allow us to stay out of the editor business while still making it a very simple install.

Yeah, I think this is something we should do in the short-term.

There are advantages to having it integrated beyond just download convenience, though:

• Staying within the same program is convenient
• If my panelling idea (#155) works out, it opens up a whole bunch of neat possibilities. For example, you could set up your window to have a code pane next to the test pane, and really easily iterate on writing test-driven code
• We can control the experience. For example, I remember when I started, I didn't care about spacing at all, and neither did most of my peers. As a result we wrote code that was harder to read. If we controlled the experience, we could bundle in Prettier and have it run on save by default. This is of course something users can do on their own, but it's another handful of steps we've removed from the getting-started experience. We could also bundle project-specific extensions, like ESLint for create-react-app.

I think because we're targeting beginners, we can afford to be opinionated. Editors like VS Code need to work for a wide variety of circumstances, and as such they aren't tailored for anything specifically. I think that's actually the killer advantage that Guppy could have over something like CodeSandbox or JS-UI; it's opinionated and targeted at a specific group of folks.

Maybe we could check if we could do it the other way round - Integrate Guppy as extension to VS code or Atom. I haven't created an extension for VS code before.

Yeah, so I actually considered this before getting started with Guppy :) ultimately I thought it worked better as a standalone app because I wanted to be able to control the experience and tailor it for newcomers (eg. the onboarding flow for creating new projects). There's a lot I suspect would be hard/impossible to do with an extension.

If anyone wants to explore it, it could be neat! But I'd be surprised if we could replicate the same beginner experience as an extension.