Webpack-cli: UI: Layout designs for frontend of webpack-cli ui

[rishabh3112]

Designs for Layout of webapp for webpack-cli ui. I would prefer a single page application otherwise as per @ematipico or other core contributors.

[rishabh3112]

I have designed one if it seems fine I will design other pages too.

P.S. It is my first shot to designing so please go slow!
cc @evenstensberg, @ematipico and @renatoagds

[renatoagds]

@rishabh3112 looks so good! I would love to follow it ... Good job!!

[LakshSingla]

@renatoagds Have you started working on the frontend part of the design? If not, I would love to contribute to it. Also, it seems that preact is not currently merged in this repo.

[renatoagds]

@LakshSingla we do not start the frontend part yet. I'm finishing the preact setup that we discussed in #647

[rishabh3112]

The design is not final as it will go through reiterations through @evenstensberg as he told me so don't waste in implementing it right away.
@LakshSingla hold your nerves and wait for @renatoagds to finish !!
Meanwhile you may like to work on ui-server ?

[rishabh3112]

What changes you want here @evenstensberg?

[evenstensberg]

We can take it up at the meeting we're having, do you want to join us @rishabh3112 ?

[rishabh3112]

Cool, I would join the meeting but keep it after 1st December, I would be having end semester exams in this month.
P.S. Just to confirm, the meeting would be on hangout right?

[evenstensberg]

That's right, are you available?

[rishabh3112]

Yeah, but after 1st December.

[evenstensberg]

Okay, we'll take up things needed at the meeting and I'll get back to you afterwards 👍

[rishabh3112]

Any updates here @evenstensberg?

[evenstensberg]

We're having designers from zalando (cc @fokusferit ) that will have a look at this with user stories and flow as well as one of the creators of vue ui

[rishabh3112]

Awesome 🤩

[fokusferit]

so @ here -> I talked with 2 designers in my unit and one would be interested. I will discuss with him some questions, but I'm sure he will ask something around:

" How does the user flow will look like?" or "What is the thing he will see at the first page and where can the user go from there (or not) ?", as he is not a technical person, I might need some help here what your vision is. We had a Chat with Even in the last Hangout but everyone has something in their mind 😄

[evenstensberg]

Yes, let’s invite him to the meeting and take it from there!

[renatoagds]

@evenstensberg @fokusferit after the meeting, please, put the notes here, so we could help with opinions 👍

[renatoagds]

@evenstensberg @fokusferit Hey guys! Do we have any news? I would like to start the UI part of init command, since we're finishing the API for it: https://github.com/webpack/webpack-cli/pull/700

[evenstensberg]

Awaiting feedback from design team at Zalando

[renatoagds]

News on this one guys?

[fokusferit]

A first possible user story (user workflow -> https://webpack.jakoblind.no/) what would be good here is how we can create a better design (or how to do UX)

[rishabh3112]

Hi above user story is awesome, I would also recommend having a chat based user flow for init as it is question-answer based.

[thisaayush]

@evenstensberg
As we are going for preact in the frontend.
I'm creating the base component of GUI and @rishabh3112 is that init endpoint complete or I can contribute there too.

GUI concept tell me if you like it !!!

*@rishabh3112 thanks *

[evenstensberg]

I think we need to do something like the first one, but with a menu in addition to the screen. If you could focus on the design for a page that allows the user to create a configuration that would be great.

( see @fokusferit 's comment)

[thisaayush]

Hey, I was thinking about what if the app first detects if the configuration file (config,prod,dev) exists or not as app loads. After that it gives appropriate options that can be performed. So design must be like a single page app with no menus and navigation. The whole point here is to not confuse the new-user.:v:

[rishabh3112]

https://dotconfig.xyz very much similar to previously mentioned, just posting may be it will be useful for designers.

[fokusferit]

So maybe to summarize it a bit in a classical user story way:

I as a webpack user
want an easy online interface to generate my project
so that I don't spend time in setting up things manually and start immediately developing.

Based on this "story" or more an "Epic" (scrum wording), there are multiple things to consider:

1. Like in this comment we need a possibility to create a new project.
   1.1. This new project screen would be basically be something like https://dotconfig.xyz/ or https://webpack.jakoblind.no/ or (if you think this could be differently done) your design.
   1.2 Right now the examples are just showing the webpack file, in the past there the idea to show something like a progress bar / progress cli visualize and show the state of the init process. Basically, when people create a new project based on the config settings, we need to show the progress of initializing the new project.

2. A way to manage projects, e.g. creating a new project and later tracking the ones we created. This could also mean developers are possible to add more folders with a webpack config file and the UI checks the webpack config, loads it and provides possibilities to change the config based on that.

3. Provide more functionality regarding all the features the cli currently has + scaffolds (optional, next steps)

[rishabh3112]

Adding a point which I feel should be discussed:
There are two choices here for creation of new projects:

1. Follow how CLI implement creation of new projects i.e. questioning the user one to one (like chat) on he/she wants on high level. For this user don't need to know which plugin and loaders are added. It is under implementation.

2. Follow what the sites posted here follow.

[renatoagds]

@fokusferit @rishabh3112 I think we could mix both of this ideas.

For new projects (without webpack.config) we could do an user-friendly quiz, asking if the user wants to support that feature or not.

For projects with webpack.config, initially, we could have a interface that our user could add or remove the same features that we support in init.

With that in mind, we have a initial ecosystem that is based in support features and implemented features will be supported in new or ongoing projects.

What you guys think about that?

[jahzielv]

Hi all! Thanks @evenstensberg and @fokusferit for getting me plugged into this project! I'd love to help out on this feature in any way that I can. After hearing ideas at the meeting yesterday, I definitely agree with @renatoagds - mixing the two approaches will let new users be able to get set up quickly, while still allowing experienced users with a webpack.config to use the UI.

[misterdev]

Hi all!
I think "chat like" interactions are better suited for the terminal than a web page. Imo a form like interaction would do the job well.

I'm not a designer, but I've worked mostly as a frontend developer and I have some knowledge of user experience. If nobody is working on a mockup I can do something probably next week.

[anshumanv]

We can draw our inspirations about workflow of managing, importing projects, configuring loaders, plugins and running and searching for scaffolds as well from the vue-cli as it mostly covers our needs and has a nice ui as well ;)

[misterdev]

Leaving this here for inspiration http://webpackmonitor.com

[mehulmpt]

Hi everyone. Sorry I'm late to the party, this has been happening since last October but I came to know about it this week only as I was going through webpack's listed proposals for GSoC and eventually landed on last 3 hangout meetings some of you had regarding the CLI-UI integration. Here's my take on this.

Although @fokusferit summarizes it in his message above (https://github.com/webpack/webpack-cli/issues/654#issuecomment-472062333), but I'll try to break it down just my way once and please let me know what you think.

Problem

Webpack wants a GUI based configuration initilization and management of webpack config for the project for beginner as well as intermediate to advanced developers.

Splitting UI in 2 modes

Seeing the hangouts video, a guy mentioned that "webpack is going to be used by developers anyway and not by non-techie people ... " to which there was a counter answer that we'll want this to be accessible to everyone, that's the point of UI. I believe we're trying to make things simpler than they should be here. As a light developer, I would really need a different UI compared to a moderate to advanced developer. I propose we split the initial interface in 2 modes: Basic and Advanced.

Basic

This mode includes configuration in the form of pre-defined questions and choices listed (i.e. Do you want to support Sass? Do you want to uglify your JS on production?, etc.) which are basic and limited, targeted to a early developer. As for the management part, we could analyze the existing webpack config file and repopulate our limited existing fields with the fields user has chosen. This mode should also display a dummy project structure (based on the entry point) and some other metadata on which files should be processed, which ones to ignore, which convertor (loader) (say sass) to use with which file, etc. We could also over prebuilt webpack configs (personal website, react app, handlebars based, etc.)

Advanced

This mode includes a much verbose UI which explicitly allows developers to add loaders, plugins, pass configuration to loaders, temporarily disable options, etc. much more advanced stuff which a basic developer would not really know. Here we can use jargon words and provide much more control over the configuration than just being able to add/swap limited amount of loaders and plugins.

My whole point is that if you want a UI for a technology like webpack, you cannot effectively target it at both beginners and advanced users simultaneously. Beginners won't understand stuff like loaders, plugins, differences in things like publicpath, path, simultaneiously and intermediate-advanced users would get a bit annoyed for not having a finer control over their config. Hence, split the UI.

[rishabh3112]

Hi @mehulmpt,
Thanks for your opinion.

P.S. how are you and Ritu mohan mam ?

[mehulmpt]

Thank you for asking Rishab. We're doing good. :)

[evenstensberg]

@mehulmpt we can have two options, but those are made through a tab in the GUI, not flags

[mehulmpt]

@evenstensberg of course. Command line for webpack is sorted anyway. I'm talking about GUI only

[renatoagds]

@mehulmpt Liked so much your idea. Based on that I would like to propose we started with basic view, since advanced users could use the CLI normally, right?

[mehulmpt]

@renatoagds sure that could be a start. But before making it public beta/alpha, we need to get the advanced tab up as well since that is what was discussed in one of the hangout meetings - "This interface should be for everyone" so we cannot leave out intermediate to advanced users here.

[renatoagds]

@mehulmpt Agreed! We should create a list of features for basic & advanced, release basic as our MVP into a next tag maybe, and final version with advanced features. Sounds like a plan?

[evenstensberg]

@mehulmpt I've deleted your comment bc it contains personal data that could be misused. Please contact us via email

[keneohiaeri]

Hello everyone, I want to know if any progress has been made on the Webpack CLI user interface. I am completely new to using Webpack, but from reading the previous messages here and doing my own little research, I was able to come up with a user story and user flow for the Webpack CLI.
You check them out here and drop your comments: https://clip.ng/jfbt
I'd love to join the Design team and work on the user interface too if that's okay.

[rishabh3112]

Great @keneohiaeri, you can get started with #825 and collaborate with me 👍

[renatoagds]

Nice job @keneohiaeri ... I would just propose to explore more what you're thinking about Optmize Bundle. It means add new plugins, etc (update the current config)? Or an automatic check into the project? IMO when we say Optimize Bundle it's too much general.

[keneohiaeri]

I see the Optimize Bundle goal as an update to the current config. We could still come up with a better definition of Optimize Bundle, and avoid the problems of it being too general.

[rishabh3112]

Closing this issue. Thanks, everyone for the feedback 😃.
Further feedback can be shared at rishabh3112/webpack-ui#1

[evenstensberg]

Open for visibility (edit: now in a sep org, see other UI issues open for current status)