joshwcomeau / guppy

🐠A friendly application manager and task runner for React.js
ISC License
3.27k stars 154 forks source link

Git Integration #85

Open bennygenel opened 6 years ago

bennygenel commented 6 years ago

Most of the popular IDEs (VS Code, Atom, Webstrom etc.) give some sort of git support out of the box or with a plugin or extension. These help you to quickly perform git task like pull, push, sync etc.. Although these are really helpful they are not really informative. Github Desktop app supports a GUI that can help you to ditch terminal/command line usage for these task but since it is really detailed I'm not sure if a just started user would use it.

For someone just started learning code, git can be scary since it has its own terminology and way of thinking. Since Guppy targets new users, it might be beneficial to add some level of git support with some descriptions about what does that task do underneath.

What can be added?

I think adding "Import with git URL" option can be a good start. This option can be used to add great boilerplates to Guppy without need to first clone the project and then importing it to the Guppy. This addition would bring up some more things to the table though. We are currently setting up task bar with default tasks. Maybe we should scan the package.json/scripts and add those task too?

I'm really curious on your thoughts about this.

joshwcomeau commented 6 years ago

Ah! I have mixed thoughts about this.

I've been thinking about this a lot as well. One of the criticisms of Guppy has been that the CLI hasn't been a major stumbling block for new developers. I don't agree with the criticism, but I do agree that for motivated aspiring coders, Git is a major stumbling block. Anything we can do to make it more accessible would be huge.

That said, embedding an entire Git client sounds like too monumental a task for Guppy, at least for the foreseeable future.

I do think that a lightweight abstraction could make a lot of sense. Something that covers the basic commands:

Git is incredibly powerful and flexible, but newcomers don't need all that. They don't need to know the difference between staged and committed files, or how to rebase, or even that branches are a thing. This is all super valuable info and we should try and emphasize that our limited subset is a stepping stone, not a long-term solution, but I think beginners would really benefit from the basics of git, and it wouldnt be too steep of a learning curve if we only supported the basics.

I'm not sure how we'd deal with merge conflicts, so I still think this is far from a trivial challenge. And I think that we'd be spreading ourselves too thin if we wanted to tackle this now; there's already so much in the backlog and we're still far from delivering on the promise of "no terminal needed for NPM-like tasks", so I'd advocate against pursuing this now, but agree that this is maybe the most important long-term goal.


To deal with some of the specifics from your comment:

I think adding "Import with git URL" option can be a good start. This option can be used to add great boilerplates to Guppy without need to first clone the project and then importing it to the Guppy.

TL:DR; so I like this idea long-term, but I have reservations about prioritizing it in the near-term.

One of the things I like the idea of avoiding is the "boilerplate overload" where there are too many choices to get started. Unless we're talking about different things, I always found the boilerplates that bundle react router and redux and CI and 100 other things totally overwhelming, and before CRA I'd always just do it myself from scratch, adding tools as needed.

That said, I do think it'd be great if folks could paste a URL into Guppy to quickly check out various projects, as a way to learn about them. Like maybe I'm curious about Redux, being able to quickly hop into a repo like sound redux would be a great way to learn. I like the idea of enabling this, since yeah having to download a ZIP and import it into Guppy is not super intuitive)

One issue is that Guppy only supports projects created with CRA and Gatsby. This was not the original goal: originally, I wanted it to be totally generic, and have it support any sort of project. But, I realized pretty quickly that you can create a much more helpful tool when you can make assumptions about the project types.

The dev server task is really just an NPM script, but because I know what that task is called in CRA and Gatsby projects, I can treat it differently, give it its own UI module. Similarly for Eject, where it has a custom button. In the future I'd like to build custom test modules as well.

We could still have a thing where unrecognized project types have a default interface, so it's not actually that big of a blocker... but it adds maintenance burden (every new thing has to think about how it'll work for 3 situations, instead of 2).

We are currently setting up task bar with default tasks. Maybe we should scan the package.json/scripts and add those task too?

We already do this :) the way it works is that we have special hooks for tasks (AKA NPM scripts) that are recognized - we add custom descriptions, and stuff like the eject button for "eject" - but every other task gets its own row without description.

In the future, I would like for the "tasks" module to only be user-defined scripts (and there should be a way to add them through the UI). The built-in tasks for tests and building would have their own custom UI.

joshwcomeau commented 6 years ago

(setting this to low priority not because I think it's unimportant - it may be the single most important feature that Guppy offers - but because it's not slated to be worked on for a while)

AWolf81 commented 5 years ago

I researched a bit about Git clients for Javascript and I've found two implementations (but there are probably more):

I think NodeGit is the way to go. I'll work on Git clone feature after adding the reinstall feature from #278. I'll start on the reinstall feature once I finalized the refactoring of project creation.

mathieudutour commented 5 years ago

There is also dugite which is what GitHub Desktop uses

AWolf81 commented 5 years ago

@mathieudutour Thanks, that's looking great and is probably more mature. I also like the api which should be just await GitProcess.exec([ 'clone' ], pathToRepository) to clone a repository. So this is the way to go.

I think we could take the example performClone function from here and pass the URL and destination as parameter. Not sure about the progress updates but maybe we can add that feature later and start with cloning with-out it. That's probably a good starting point & we can trigger it from a new Git saga.

I also like the implementation of GithubDesktop they are checking if a progress callback is available and if it is they invoke the clone with progress. Github Dekstop clone service

I'll have a look if we can use dugite-extra which adds a high level implementation of dugite and after looking at git clone there it's the same implementation as in GithubDesktop. dugite-extra clone