Restructuring WebUI

[hacdias]

So, I've been taking a look at WebUI's code and I found it to be a bit too much cluttered and heavy (we're even using Bootstrap 😓). I think we could simply start from the beginning by running react-create-app and build on top of that, which would also reduce the dependencies since react-scripts manages the build and the hot reloading.

I also think we could open a repository called ipfs-components or something so we could share React Components between WebUI and Desktop. My vision is that WebUI is like an augmented version of Desktop and they can easily share many components, such as headers, menus, buttons and such.

Also, part of this restructuring:

• Make code simpler.
• Let IPFS WebUI work with JS-IPFS.
• Make WebUI prettier and in harmony with ipfs-desktop.
• In the middle, try to fix bugs and issues 😄

What do you think? I'm going to have a lot of free time until mid of February and I can work on this.

/cc @ipfs-shipyard/ipfs-gui-team

[hacdias]

I'm getting started on feat/new branch and I created a shareable-components folder inside src which contain the React Components that can be shared across IPFS WebUI and IPFS Desktop. In the future, if this gets merged, we could put them on their own repo.

[lidel]

Looking at this from browser extension side, I'd say I am 👍 for ipfs-reusable-webcomponents (mouthful, but I think it is better for discoverability to make it explicit what it is about).

It could provide components that follow IPFS Style Guide (WIP at ipfs-ui-style-guide) and make UX cross-pollination between repos easier. 🐝

React seems to be a good, pragmatic choice that gives us a more bang for the buck (community-wise as well). It is also whitelisted by Mozilla for use in WebExtensions. However, perhaps we should keep it open for components for other libs than React by keeping everything in react/ subdirectory?

A good test case to create along the way would be to create a component that we could reuse in both Desktop and Companion "today". For example, a streamlined "upload pane component" that could be later extended to add option to wrap a file in directory or display visual feedback about upload progress etc in both apps!

@diasdavid what are your thoughts on this? Are you ok with creating components repo in shipyard?
(It may be easier for @hacdias to work in webui repo exclusively for now, but after his refactor is done we could migrate shareable-components to separate repo)

[hacdias]

I agree with you @lidel. I'm just a bit afraid about the WebComponent vs React Component vs [Insert Here Your Front End Framework] Component. Right now, Desktop and WebUI can easily share loads of code, hence my suggestion in creating that bridge between two. I believe it can be expanded to Companion too.

Right now, the 'feat/new' branch isn't working. I'm just moving some stuff from Desktop to here and bootstraping the pages we need to create. 😄 Still have an exam this week, but I hope to have something working by the end of the week.

[hacdias]

And then we should implement the UI Style Guide (colors, paddings, fonts and such) when it's ready.

Edit: I didn't thought about reusing components as big as panes since they might need some specific stuff like Electron stuff for Desktop and others for WebUI. Was thinking more about icons, buttons, menus, headers, footers and such. What do you think @lidel?

[lidel]

@hacdias affirmative, if we want to reuse stuff, our official apps should all follow one Component standard. Unless someone vetoes React Components, it seems to be fine.

My open question is about general policy: do we want to provide a space for 3rd party developers to submit "ipfs components" for other frameworks? Or is it something that should be outside of the repo?

• 👍 people who do not use React can still benefit from "official" component repository
• 👎 may come with maintenance costs, may fragment community

Its not urgent to answer it now, but we should have the answer ready before someone submits PR with SpaceAliens Components :)

[olizilla]

Now feels like a good time to have another look at Web Components. It'd be rad if our presentational components were implemented as Web Components that could be reused in whatever view lib you want.

On the flip side, it'd be simpler in the short term to just react all the things, and if no-one is against react all the things, then it might just be extra work.

Perhaps we should structure things so that we can add components for various view libs, and start with react as the blessed one, and experiment with web components as we go?

[hacdias]

Yeah, I agree with you too @olizilla. We could start by using React and let room to expand to other libs. And then, eventually, take a look at WebComponents and... who knows... use them?

[hacdias]

This branch will also include a brand new file manager 😄 which can be then ported to IPFS Desktop so we can have a better tree view and show all of the files @olizilla.

Ref.: ipfs/ipfs-desktop#590

[olizilla]

@hacdias nice! and super +1 for tackling this. Could you drop some notes on this issue with some more details of what you're proposing? Even if you are still figuring that out! That way we can get people on board, and divide up the work.

[hacdias]

Right now I'm rebuilding WebUI from scratch and creating the React Components that can be used for both WebUI and Desktop.

I'd like to know if you agree about creating a repository to put the common React components right now. If it's not ready to be published, I can put it on my user and then move it to there when it's more mature. I think it would be much easier to keep going this proposal and then I could create a parallel PR in Station using the common React Components too 😄

This way, I could work on WebUI and Desktop in a asynchronous way.

Edit.: I'll try to add more details soon.

[hacdias]

For the File Manager itself, I'll be taking some ideias and features from a web File Manager I've built before.

[olizilla]

Ace. I'm in favour of a components repo, but I think it'll work best to start with a proposal in a PR here. I'm keen to work on this with you, but I don't have any time for a couple of weeks. Are you up for sharing your thoughts in a WIP PR that I can follow along with as you go?

[hacdias]

I'll create a PR with all of the details @olizilla 😄

[daviddias]

Hi all, apologies for taking so much time to come to this thread. Awesome discussion, really happy that this proposal came to a Github issue. @hacdias 👏🏽👏🏽👏🏽

@diasdavid what are your thoughts on this? Are you ok with creating components repo in shipyard?

of course, go for it :)

[hacdias]

Are you all okay if I move ipfs-react-components to ipfs-shipyard? If so, should I keep its name?

[lidel]

👍 for moving. You can leave name as is, we can change it later (github is smart and does redirects until final name is reached, so all links will still work).

[hacdias]

Done! I'm now focusing on improving Desktop and will start updating the components to the styles Agatha published today 😄

[lidel]

I feel a quick update is due for anyone interested in the future of WebUI:

• We went over feedback provided in issues in this repo about UI/UX of current webui
• A lot of design work is happening in these design tasks
  (including wireframes and proposed designs. still ongoing effort, feel free to provide feedback)
• The discussion about tech choices for new WebUI continues in Tech choices for WebUI++ ipfs-gui#51
• Expect more issues to appear in this repo under revamp label at some point

[olizilla]

Oh me oh my! https://github.com/ipfs-shipyard/ipfs-webui/releases/tag/v2.0