node: ?Neo3-GUI?Design & Implementation

Lichen9618 commented 4 years ago

Neo core developers and communities have been discussing about Neo3-GUI for a while. There are a few things that got most developers' attention about Neo-GUI. After meaningful discussion on GitHub as well as during Neo 2019 Community assembly event, now we have reached to a point that most of us have agreed on what Neo-GUI should be and how should we improve it. We think next step will be summarizing the whole discussion and move forward with Neo-GUI design and implementation.

This issue describes the overall discussions and corresponding summary, and will also include design and possible implementations as well as any up coming topics should be discussed by core developers and community for Neo-GUI.

Goals for Neo3-GUI

From all the discussions for Neo-GUI on GitHub as well as Community Assembly event, some goals/targets have been confirmed for Neo3-GUI. In order to make Neo3-GUI more user-friendly and widely adapted by more developers, we should improve Neo-GUI for the following:

Neo-GUI should be cross-platform
Neo-GUI should be the UI version of a full node and keep updated with Neo-CLI release
Enhance UI/UX to provide better user's experience for developers as well as users (blockchain purist)
Back-end need to be updated to Neo3 and full function support

Topics have been discussed

UI framework discussion - Done (#497) Community have proposed few great cross-platform UI frameworks for Neo-GUI, including Xamarin, Avalonia, Electron, etc. We have done some research and testing, and then discussion the conclusion on GitHub. Eventually, most community members agree on Electron.
Wireframes for Gui - Done (#498) Under this issue, we have discussed the functions for Neo3-GUI. And thanks for the great work from @lock9 's team, they have finished the design for Neo3-GUI wireframe (Prototype).
Add gui for neocli. (#462) After discussion with @lightszero , we think that it may not be the best solution. The reasons are as follows: Increase the cost of version control and release. Redundant client file will make size increase a lot. Gui has different target users, better to implement it independently.

At this point, we have discussed and agreed on the goals, UI framework and wireframes for Neo-GUI. With the release of Neo3 preview1, we believe that we should start design and develop Neo3-GUI asap and deliver a more mature and user-friendly version along with Neo3 development progress.

Tech-Stack for Neo-GUI

Based on the above detail, we have discussed with Neo community and decided to develop Neo3-GUI with the following framework:

Back end: .Net core 3.0
Front end: Electron + React
Communication: WebSocket + RPC

We will use MVC model to decouple the front-end with back-end so that it will be easy and more organized to develop Neo3-GUI as well as maintain and enhancement later on.

Overall structure of Neo3-GUI

We have designed an overall structure for Neo3-GUI based on the above discussion results, which is open to discussion for further improvement. Thanks again for the great discussion.

system architecture

Next Step - Development & UI design

If there is no more suggestions and discussions about overall structure and tech-stack, we will start UI design based on prototype that Rick provided as well as front-end development and back-end development for Neo3-GUI.

@neo-project/core, @erikzhang @shargon @lock9 @lightszero @vncoelho @igormcoelho @devhawk , Your suggestions and comments will be well appreciated and valuable for the enhancement of Neo-GUI.

1. Neo-GUI Pages list for UI/UX design

Neo-GUI Pages

2. UI/UX design

[In-process]

3. Development

[TO-DO]

lightszero commented 4 years ago

最近我想了一下，这样使用两个进程的开发确实比一个进程麻烦一些我建议我们可以再评估一下像CefGlue这样，把Chromium Embedded的方式。这样前端表现是html，应该可以用c#直接操作DOM

参考 https://github.com/VitalElement/CefGlue.Core

Ashuaidehao commented 4 years ago

这个框架文档资料太少了，而且代码库很久没有更新了，用C#直接调用JS对我们而言也不是必须的，目前来看Electron更加成熟些，我们这边更倾向于更加成熟可靠的解决方案

vncoelho commented 4 years ago

I am not used to neo-gui, but I will try to read as soon as possible.

longfeiWan9 commented 4 years ago

We are going to start designing UI/UX for Neo-GUI and also build the foundation based on discussed cross-platform framework.

lock9 commented 4 years ago

I don't really understand the diagram. Is this the required structure for Electron?

Lichen9618 commented 4 years ago

I don't really understand the diagram. Is this the required structure for Electron?

Right, this diagram represents the basic structure which front end is electron, back end is process depends on Neo.dll

longfeiWan9 commented 4 years ago

I have updated the description of this issue.

Added the Neo-GUI page list to help prototype & UI/UX design. Also Neo-GUI prototype design is already in progress.

Next step will be UI/UX design for GUI page by page, also development.

neo-project / neo