Giter Club home page Giter Club logo

html's Introduction

Vugu

Travis CI GoDoc stability-experimental

Vugu is an experimental library for web UIs written in Go and targeting webassembly. Guide and docs at https://www.vugu.org. Godoc at https://godoc.org/github.com/vugu/vugu.

If you've ever wanted to write a UI not in JS but pure Go... and run it in your browser, right now... That (experimental;) future is here!

Introducing Vugu (pronounced /ˈvuː.ɡuː/), a VueJS-inspired library in Go targeting wasm.

No node. No JS. No npm. No node_modules folder competing with your music library for disk space.

Updates ♨

  • 2024-05-25 Move to a mage based build process Join the conversation: Gophers on Slack, channel #vugu

Highlights

  • Runs in-browser using WebAssembly
  • Single-file components
  • Vue-like markup syntax
  • Write idiomatic Go code
  • Rapid prototyping
  • ~3 minute setup
  • Standard Go build tools

Start

Get started: http://www.vugu.org/doc/start

Still a work in progress, but a lot of things are already functional. Some work really well.

You must have Go v1.22.3 as a minimum to use vugu. We require the for loop changes that were introduced in Go v1.22, and v1.22.3 was the lastest at the time writing.

Building vugu for Contributors

vugu now uses mage to manage the build of the vugu tools - vugugen, vugufmt and vgfrom. Mage is also used to manage the testing process.

Please see the updated build instruction in the Contributors Guide

Abbreviated Roadmap

  • Move to a Mage based build
  • Single-file components (looks similar to .vue); .vugu -> .go code generation.
  • Includes CSS in components.
  • Basic flow control with vg-if, vg-for and output with vg-content.
  • Dynamic attributes with <tag :prop='expr'>.
  • Nested components with dynamic properties
  • Efficiently syncs to browser DOM.
  • Static HTML output (great for tests).
  • DOM Events, click, etc.
  • Modification tracking to avoid unnecessary computation where possible.
  • Basic dev and prod server tooling, easy to get started
  • Rewrite everything so it is not so terrible internally
  • URL Router (in-progress)
  • Tinygo compilation support
  • Server-side rendering (works, needs more documentation and examples)
  • Go-only component events
  • Slots
  • Component library(s) (wip!)
  • Performance optimizations
  • And much more...

Notes

It's built more like a library than a framework. While Vugu does do code generation for your .vugu component files, (and will even output a default main_wasm.go for a new project and build your program automatically upon page refresh), fundamentally you are still in control. Overall program flow, application wiring and initialization, the render loop that keeps the page in sync with your components - you have control over all of that. Frameworks call your code. Vugu is a library, your code calls it (even if Vugu generates a bit of that for you in the beginning to make things easier). One of the primary goals for Vugu, when it comes to developers first encountering it, was to make it very fast and easy to get started, but without imposing unnecessary limitations on how a project is structured. Go build tooling (and now the module system) is awesome. The idea is to leverage that to the furthest extent possible, rather than reprogramming the wheel.

So you won't find a vugu command line tool that runs a development server, instead you'll find in the docs an appropriate snippet of code you can paste in a file and go run yourself. For the code generation while there is an http.Handler that can do this upon page refresh, you also can (and should!) run vugugen via go generate. There are many small decisions in Vugu which follow this philosophy: wherever reasonably possible, just use the existing mechanism instead of inventing anew. And keep doing that until there's proof that something else is really needed. So far it's been working well. And it allows Vugu to focus on the specific things it brings to the table.

Examples

Examples of implementations can be found into examples repositories

VSCode plugin

As most of your code will be in .vugu files, you will need to install vscode-vugu Credits goes to @binhonglee.

html's People

Contributors

bradleypeabody avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

html's Issues

`vg-template` reacts badly with tables

Love playing around trying to build a site with your Vugu framework.

One problem I've had is trying to use a loop within a table. Something like the following:

<table>
  <vg-template vg-for='i:=0; i<10; i++'>
    <tr><td vg-content='fmt.Sprint("before", i)'></td></tr>
    <tr><td vg-content='fmt.Sprint("after", i)'></td></tr>
  </vg-template>
</table>

In my use case I need to create two rows for each loop iteration, so sticking the vg-for on the <tr> isn't a possibility without significant reorganization.

Unfortunately, the generated code for this somehow lifts the loop outside the table, and won't compile due to references to the undeclared variable i.

My read of the code is that the issue is that vugu/html's parsing of tables uses "table insertion mode" while building the HTML node tree, and table insertion mode doesn't respect the <vg-template> tags -- it ends up moving them outside the table.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.