Ariel, I have played with demos your provided and I am confused. To my mind, it is fancy looking but messy for user to work with. Too many options in arranging content and panels is not alway good for UX. It goes agains my UX philosophy to implement them. Here are the issues as I perceive them

1. Lots of noice on screen. One should reduce number of elements on screen and show them progressively as user does actions. It is bad UX to show everything available.
2. User will need to spend too much energy (and mouse movements) on organizing layouts, showing/hiding, collapsing/expanding, etc. As a user I want to concentrate on my work, not on arranging UI elements
3. Limited usefulness. Currently you can nest w2layouts to create a more complicated layouts, https://w2ui.com/web/demos/#/layout/7, but in my experience, I have never used it in a real project.

Additionally, those libraries seem to be pretty standalone and you can use them in your project along side w2ui, should you need them.

from w2ui.

Hi @vitmalina. I understand your point, and there may be many who agree with you from a strictly UI theory point of view. However, if you look at science-oriented IDEs, they all work like this. Scientific programmers are no longer writing programs. We do everything with data and visualization. Consequently, IDEs have turned into dashboards with this kind of drag-and-drop capability. A science-oriented IDE will have source panes, a command line, a terminal, a file explorer, a help panel, a plot panel, a history panel, etc., etc. And the user wants to arrange these to their liking.

Consider the images below of some common IDEs.

I want to build a pure javascript IDE like that. I understand that may be different from your use case. But it is why I want a UI with this sort of flexibility.

Matlab

Scilab

RStudio

Spyder

Octave

Jupyterlab

from w2ui.

Wow. Who are you? Thank you for quite informative response. I see you do have experience with so many tools. I like it. I agree there is a need for complicated UIs, though, I think they could be somewhat easier for the user, still being complex. Nearly everything in the screenshots you provided could be build with w2layout, with perhaps some minor additions.

Currently, I am working on a project with UI that is quite completed too and I am using w2ui. We are a very early stage start up and still have lots of things to do, but it is already a working product and we started advocating it to college professors this fall. You are welcome to check it out, https://usolver.com/dev/login.html, I believe you should be able to create an account and play with it. I hope it could give you some ideas how to implement your UI. Yes, w2layout did not do everything I need there, but the main working area is part of layout. Menu is outside and side toolbar too, I think.

from w2ui.

I'm just a data scientists who let's himself get distracted by thinking about how tools could be better.

That's a very cool project! One thing that could definitely be better in Office (and google docs) is integrating data with text and presentation.

I'm trying to come up with a minimal set of UI functions that I believe would make an easy to use data science IDE with the capabilities of language-specific ones like spyder, matlab, and studio. The goal being to put a full-featured IDE platform in the hands of the open-source community.

This is approximately what I can think of now:

Definitions:

Panel: a placeholder for other UI elements. Probably having a header bar. Optional menu.
Tab: a UI element with a title and body. We all know what a tab is.
Tab Group or Stack: A set of tab elements that are essentially stacked on top of each other and brought to the top of the stack by clicking on the tab title.
Docking: Element can pop out of the main part of the UI to be a model or independent window. It can then re-dock either into it's original location or somewhere else it is dragged and dropped to.
Dynamic, Responsive Drag and Drop: I don't if there is an industry term for this function/behavior. It's where you drag around a panel or tab and are shown options for where it can be added to a tab stack or placed in a way land that make sense in terms of filling the available space. For example, dragged so that it becomes a full-height panel on the left or full width panel on the bottom, etc.

Essential functions and operations

• Add or remove panels
• Minimize and maximize panels
• Undock and re-dock panels
• Add or remove tabs in panels
• Undock and re-dock tabs. When undocked probably automatically create an appropriate undocked panel for it to be in. For example, undocking a code tab would end up in an undocked editor panel.
• Panels can be repositioned in the layout.
• Tabs can be repositioned within panels. Moved between panels as appropriate.

Element types

Could be tabs or panels whatever makes the most sense.

• Multi-tab editor
• File manager
• Help Files
• Plots
• Terminal
• System shell
• Environment (variable viewer)
• Grid viewer for tabular data
• Notebook renderer
• HTML renderer
• PDF renderer
• History viewer
• Package manager

from w2ui.