Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collect & analyze examples of CLI apps #12951

Open
KyleAMathews opened this issue Mar 29, 2019 · 14 comments

Comments

@KyleAMathews
Copy link
Contributor

commented Mar 29, 2019

Particularly for software that's similar to Gatsby.

For each, try out installing and creating a project and write up what the experience is like and take screenshots of different workflows.

Next phase

(look at these after implementing quick wins gained from list above)

@shannonbux

This comment has been minimized.

Copy link
Collaborator

commented Mar 29, 2019

Vue CLI

Overall observations

  • People say they like the Vue graphical UI, we had mixed experience, not sure about it yet. A lot they're doing well, such as reports and analytics, a lot of basic stuff that was tough (finding the project's code, finding error messaging)
  • When a process is done, the command line interface anchors its position at the relevant info. For example, when localhost:8000 was ready, the text saying "Done!" + the link got anchored at the top.

Installing

Nice interface for selecting options instead of defaults Screen Shot 2019-03-29 at 2 39 12 PM Screen Shot 2019-03-29 at 2 40 22 PM Screen Shot 2019-03-29 at 2 43 13 PM

CLI help

seemed standard Screen Shot 2019-03-29 at 4 08 25 PM

Creating project

Emojis are fun, not super accessible, great landing page for first project w/ links to docs - Emojis and fairly clear updates and links to learn new things Screen Shot 2019-03-29 at 2 43 25 PM Screen Shot 2019-03-29 at 2 43 59 PM Screen Shot 2019-03-29 at 2 44 31 PM Screen Shot 2019-03-29 at 2 44 58 PM
  • The homepage of the hello-world starter is a nice documentation introduction, although it made me want to open that same page on the docs site bc I'd probably delete it from my project
Screen Shot 2019-03-29 at 2 46 42 PM - The default vs. manually selecting options was easy to use - Lots of people say they love the `vue ui` idea - it's a graphical interface Screen Shot 2019-03-29 at 2 52 41 PM Screen Shot 2019-03-29 at 2 52 49 PM Screen Shot 2019-03-29 at 2 53 01 PM Screen Shot 2019-03-29 at 2 54 35 PM Screen Shot 2019-03-29 at 2 56 03 PM ![Screen Shot 2019-03-29 at 2 55 20 PM](https://user-images.githubusercontent.com/32467162/55265853-4c66df80-5237-11e9-817b-7b4786d13f30.png) Screen Shot 2019-03-29 at 2 55 29 PM Screen Shot 2019-03-29 at 3 09 35 PM Screen Shot 2019-03-29 at 2 56 26 PM Screen Shot 2019-03-29 at 2 57 14 PM Screen Shot 2019-03-29 at 2 58 24 PM Screen Shot 2019-03-29 at 2 58 29 PM Screen Shot 2019-03-29 at 2 58 34 PM Screen Shot 2019-03-29 at 3 00 26 PM Screen Shot 2019-03-29 at 2 59 35 PM Screen Shot 2019-03-29 at 3 00 35 PM Screen Shot 2019-03-29 at 2 59 12 PM

Develop

seemed standard. The graphical UI made it hard to edit files and seemed buggy - CLI Screen Shot 2019-03-29 at 2 46 03 PM
  • the UI doesn't help you find the project's files--it's possible, just hard to find. Also, I clicked on "open the project in code editor" and it didn't work.

No images here yet

Production

Nothing important to note here - Nothing important to note here

Errors and recovery

Chrome extension for errors (haven't tried yet), some bugs w/ repeated error output. Graphical UI is worse than the command line output bc it just says "7 errors generated" w/ no link to greater details - interesting Chrome extension Screen Shot 2019-03-29 at 3 06 03 PM - Repeated typescript warning many times when I ran `npm run build` to warn me that my version of typescript is above their currently supported versions Screen Shot 2019-03-29 at 3 03 36 PM - The UI also didn't make warnings and errors easy. The dashboard shows how many warnings got generated, but isn't clickable. The output is better; you just have to remember to click on the tab. Screen Shot 2019-03-29 at 3 17 10 PM Screen Shot 2019-03-29 at 3 17 01 PM
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Mar 29, 2019

Phoenix Framework

Based on Elixir which is based on Erlang

Installation

Has a bunch of dependencies to install — Elixir & Postgres — homebrew handled these easily Screenshot 2019-03-29 14 38 07
Then had to install `hex` which is a Elixir or Phoenix package manager Screenshot 2019-03-29 14 40 56 Screenshot 2019-03-29 14 41 11

Create new project

👍 Screenshot 2019-03-29 14 42 15

Postinstall

Very nice postinstall messages on what to do next Screenshot 2019-03-29 14 43 04

Help command

Pretty standard help text Screenshot 2019-03-29 15 20 09

Develop

Interesting mix of Phoenix output + webpack — ok organized, no color Screenshot 2019-03-29 15 07 40

Error handling

Pretty adequate error messages on simple problem in browser/terminal Browser Screenshot 2019-03-29 15 11 14

Terminal

Screenshot 2019-03-29 15 11 24
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Mar 29, 2019

Ruby on Rails

Played with the hosted RoR on repl.it for 5 minutes https://repl.it/languages/rails

Develop

Really verbose output for each handled request Screenshot 2019-03-29 15 25 30
Fun initial screen Screenshot 2019-03-29 15 24 42

Couldn't figure out how to edit the page so couldn't trigger an error to see how that was handled.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Mar 29, 2019

Django

https://repl.it/languages/django

Develop

output

Verbose server software style output - Doesn't hot reload styles - Hot reloads python which is fun (handled by repl.it though?) Screenshot 2019-03-29 15 25 30 Screenshot 2019-03-29 15 32 40

Error handling

Prints very long error trace w/ no colors and has error message nestled in middle — so kinda confusing Screenshot 2019-03-29 15 35 04

@KyleAMathews KyleAMathews changed the title Collect examples of great CLI experiences Collect & analyze examples of CLI apps Mar 29, 2019

@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Mar 29, 2019

Parcel

Install global cli

Pretty good except for noise from NPM from installing binaries Screenshot 2019-03-29 15 56 48

Development

Use html as entry point. No fancy way to start projects. Has a basic html file in README (which points to an index.js which it doesn't say to add).

Errors

Well written errors in both browser overlay & terminal Screenshot 2019-03-29 16 02 36 Screenshot 2019-03-29 16 02 44

Build

Screenshot 2019-03-29 16 03 25

@shannonbux

This comment has been minimized.

Copy link
Collaborator

commented Mar 29, 2019

Create-react-app

Install & create project

Really fast, looooong list of dependencies seemed unnecessary to read, installation and creating project occurred in one command which was nice - Installation was really fast = 27.63 seconds - Not sure why I need to see a readout of the entire list of dependencies. Was super long (screenshot doesn't show them all) Screen Shot 2019-03-29 at 4 14 42 PM - Creating a project was included in installation `npx create-react-app my-app` which was nice although it confused me since it's one less step than I'm used to

CLI help

appeared after I installed w/o needing additional command, which was nice - appeared after I installed, which was nice Screen Shot 2019-03-29 at 4 13 58 PM

Develop

localhost:3000 opened automatically after developing which was nice - localhost:3000 opened automatically once I ran `npm start` in the project, which was nice, although the terminal said I would need to open it myself, so that was confusing bc I was about to type it in and then it just opened by itself Screen Shot 2019-03-29 at 4 20 03 PM - hot reloading worked great

Test

Hadn't seen `npm test` options before this, seems useful - `npm test` gave me some options for testing Screen Shot 2019-03-29 at 4 28 27 PM

Build

`npm run build` comes up with some options that don't seem common enough to be front and center - `npm run build` comes up with some options that don't seem common enough to be front and center Screen Shot 2019-03-29 at 4 32 10 PM

Errors and recovery

Command line and browser show same error - Command line and browser show same error when I entered 1/0 into a .js file Screen Shot 2019-03-29 at 4 33 29 PM Screen Shot 2019-03-29 at 4 33 15 PM
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Mar 29, 2019

Next.js

Install

Oddly they assume that you've already setup a node project (but don't tell you this) as they're first instruction is to install next/react/react-dom — wonder how often that bites people.

No postinstall message

Screenshot 2019-03-29 16 20 39

Develop

Clear the screen and show nice success message Screenshot 2019-03-29 16 23 03

Errors

Show nice & similar errors in both terminal and browser. Returns to success message in terminal + regular stuff in browser upon fixing error Screenshot 2019-03-29 16 24 42 Screenshot 2019-03-29 16 24 52

Production

With next.js you build the assets and then start the server. Spartan output that gets the job done but nothing more Screenshot 2019-03-29 16 27 59 Screenshot 2019-03-29 16 29 27
@shannonbux

This comment has been minimized.

Copy link
Collaborator

commented Mar 30, 2019

React-static

Install

Nothing noteworthy here Screen Shot 2019-03-29 at 5 06 54 PM

CLI Help

Seemed fairly standard, came up at end of create new project process Screen Shot 2019-03-29 at 5 08 11 PM

Create new project

Suggested name for the project, prompted me to `cd my-project-name`, provided a list of templates to choose from, and then suggested what to do next. Very nice! Screen Shot 2019-03-29 at 5 08 11 PM

Develop

Hot reloading required me to refresh the page on Chrome. The CLI did a nice job converting my `npm start` command to what it needed me to run instead. I guess it could have prompted me to change my behavior too. Finally, I had to look a while for the link to the localhost:3000 Screen Shot 2019-03-29 at 5 10 37 PM - The CLI did a nice job converting my `npm start` command to what it needed me to run instead. - Finally, I had to look a while for the link to the localhost:3000 Screen Shot 2019-03-29 at 5 17 45 PM

Build

Ran into what seems to be an error and couldn't run the build process using `react-static-build` or go back to development mode either. `npm run build` worked though. So choosing npm early on must lock you into npm commands, but I didn't know that. Screen Shot 2019-03-29 at 5 23 09 PM - Lots of output from build process. Screen Shot 2019-03-29 at 5 26 19 PM - End of the screenshot. Couldn't fit all on one screen Screen Shot 2019-03-29 at 5 26 30 PM

Error & recovery

A little frustrating that each build didn't show timestamp of when it succeeded. Also only uses green text for "Build updated" and a check mark to mean "success". Wondering why they don't just say "build updated successfully" to be a little clearer, especially for accessibility purposes Screen Shot 2019-03-29 at 5 22 15 PM Screen Shot 2019-03-29 at 5 19 53 PM Screen Shot 2019-03-29 at 5 20 06 PM
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

Hugo

Install

Easy with homebrew Screenshot 2019-03-29 21 56 03

Develop

Fast and simple Screenshot 2019-03-29 21 57 55

Handling errors

showed error in browser & terminal and cleared both once the error was fixed Screenshot 2019-03-29 21 59 55 Screenshot 2019-03-29 22 00 11
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

create-next-app

Simple helper for quickly setting up new Next.js apps. Creates directory, installs dependencies, displays success message and help with commands people can run Screenshot 2019-04-03 17 14 15
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

Middleman

Ruby-based SSG

Install

New project creation is easy from CLI. Clones repo and installs gems Screenshot 2019-04-03 17 19 20

Error handling

There's no hot reloading so you have to refresh to see errors. I was only able to trigger their error screen by calling a non-existent ruby function in the erb file. The error wasn't shown in the terminal until I stopped and started the dev server. JS/frontmatter errors were ignored. The build failed with this error as well but it didn't show it — you needed to re-run the build with a `--verbose` flag Screenshot 2019-04-03 17 25 01
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

@11ty/eleventy

Install

Standard NPM install

New project

Docs instruct you to echo a string into a file to create your first file :-) Everything is run out of the global so there's nothing to install in the project

Error handling

I created a JS page and triggered an error. The CLI showed the error and the browser didn't. When I fixed the error, the CLI showed the build running again successfully Screenshot 2019-04-03 17 48 35
@KyleAMathews

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2019

Gridsome

Install

Standard NPM global install

New project

Did something pretty clever where they hid output cloning / installing packages (presumably _unless_ there's an error). Ended up being very clean Screenshot 2019-04-03 17 54 03

Develop

Shows log during bootstrap and then clears the screen to show the normal webpack successful compilation output

Error and recovery

Shows error in browser & terminal and clears them on fixing Screenshot 2019-04-03 17 56 33 Screenshot 2019-04-03 17 56 42
@shannonbux

This comment has been minimized.

Copy link
Collaborator

commented Apr 5, 2019

Angular CLI

Angular Console

A desktop app that allows you to run commands in a graphical interface. Features: - nav bar = recent, create, import. Also has icons to open project in finder, code editor, or terminal - run schematics, see options and descriptions for each option, toggle & set options with toggle button and text input fields - serve, test, build buttons - works w/ any schematics you have set up

Pros:

  • way simpler than Vue's graphical UI

Cons:

  • not sure what the audience is--how hard is it to look up schematic options and find out what they mean in a regular CLI?

Really good doc on CLI

This doc was super clear, concise, etc. https://angular.io/cli

Install & create project

Pretty standard - Installation was really fast - Pretty standard

CLI help

If I tried to run a command that wasn't supported, a nice suggestion would remind me to look run `ng help`

Develop

Couldn't see the link to the localhost address. I think we're doing this better

Build

Seemed standard, not much output, just date, hash, and time it took with some "chunks", whatever those are

Errors and recovery

haven't tested yet
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.