Skip to content
/ vxui Public

vxui is a cross-platform desktop UI framework which use your browser as screen, and use V lang as backend. It reply on Websocket, no http/https, no web server!

License

Notifications You must be signed in to change notification settings

kbkpbot/vxui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vxui

⚠️ Notice:

  • vxui it's not a web-server solution or a framework, but it's an lightweight portable lib to use installed web browser as a user interface.

  • Currently, vxui is in it's alpha stage.

  • vxui = browser + htmx/webui + websocket + v *

Introduction

vxui is a cross-platform desktop UI framework which use your browser as screen, and use V lang as backend. It reply on Websocket, no http/https, no web server!

Motivation

  • Every desktop should has a installed web browser, and it's display it much better than native GUI. Because there are too many frontend designers in the world!
  • When develop a desktop framework with HTML+CSS+JS, why should we integrate a web server? By using websocket, we can totally bypass the integerated web server!

Features

  • Cross-platform. It should be able to running on Windows/Linux/MacOS;
  • Extensible. You can use any frontend framework develop your UI, all you need is just add some tags in your html files;
  • Light weight. vxui contain only a pure-V websocket server, no web server;
  • Powerful. vxui backend can communication with frondend bi-direction and realtime;
  • Flexible. vxui provide websocket-based communication, you can totally define your own protocol, no longer limited by AJAX's request-response model.

Inside vxui

vxui

  • frontend: It is your installed web browser. And a modified vesion of htmx with vxui_htmx.js are all you need.
  • backend: v
  • between frondend and backend, it is websocket.
  • When you start your App, it will first look for a free port on your OS, then the websocket server listen on this port;
  • The App will use command line spawn a process, start the web server, which will open your UI's first html file; Every your UI html file should include a JS agent file.
  • The JS agent in your html file will use the port communication with backend websocket server;
  • By using htmx or webui, every event catch by the JS agent(mouse click, keyup, text change...), will be transfered to your backend; Currently, vxui will replace all AJAX request in your htmx files with websocket communication.

Example

<script src="./js/htmx.js"></script>
<script src="./js/vxui_htmx.js"></script>
<span hx-ext="vxui_htmx"/>
  <!-- have a button POST a click via websocket -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The hx-post and hx-swap attributes tell htmx & vxui-htmx:

"When a user clicks on this button, issue an websocket request to /clicked(hx-post), and replace the entire button with the response(hx-swap)"

And your websocket server will recieve this message:

{"verb":"post","path":"/clicked","elt":"BUTTON","parameters":{},"HEADERS":{"HX-Request":"true","HX-Trigger":null,"HX-Trigger-Name":null,"HX-Target":null,"HX-Current-URL":"file:https:///home/kbkpbot/.vmodules/vxui/static/ss.html"}}

Quick start

  • install vxui
	v install --git https://github.com/kbkpbot/vxui.git
  • check examples

License

MIT license

About

vxui is a cross-platform desktop UI framework which use your browser as screen, and use V lang as backend. It reply on Websocket, no http/https, no web server!

Topics

Resources

License

Stars

Watchers

Forks