DEV Community

loading...

Vue-like framework in Go+wasm

Jeff Lindsay
Indie maker of many things. Helped pioneer SHDH, webhooks, Hacker Dojo, TIGSource, OpenStack, JWT, Twilio, Docker, Dokku, all incidental. Follow your curiosity
Updated on ・3 min read

I'd been planning to do this one for a while. It's a proof of concept for a
front-end web framework in Go that feels like Vue.js and uses WebAssembly. My intention here is not that I just HAVE to write code in Go, but because I just want to skip all the bullshit involved in a modern JavaScript app stack. I want hot reloading, I want components, but I don't want a project that has hundreds of dependencies, the Webpack rat nest, and all that. Plus, then Go projects that need a simple frontend can just be written in Go like the rest of the project.

Now, I've looked into this before thinking about a React-like framework. It turns out one exists for Gopherjs, and Gopherjs is built around an API that can nearly be replaced for the syscall/js API that you get when you compile to WebAssembly. However, swapping out that API doesn't Just Work yet, and it turns out I don't really like what React looks like in Go. You don't have JSX, so they do these nested function calls to generate bits of HTML. If we can't get inline JSX, I'd rather it just be a template.

Vue.js is another modern framework that gives you the same React style components, but built on top of a powerful Vue instance primitive. The way you create Vue instances felt a lot like how you'd create a new struct in Go, so it already seemed like it would feel better.

Last week I put together a simple proof of concept that implements the Vue.js template syntax in Go. Unlike Vue, it renders out HTML instead of building out a DOM, but that could be swapped out later if we need to go that way. I've always been a fan of template engines that embed directives in the HTML elements, so, if nothing else, it might be nice to just have this Vue.js template engine in Go.

I also did some WebAssembly prototypes, making sure I could compile a simple Go program to WebAssembly and playing around with the syscall/js API. The server to serve this up I turned into a watcher that will recompile the WASM code and then tell the page to refresh via WebSocket. It takes a while for the webassembly binary to load, but otherwise it's pretty fast.

Then, I organized these pieces into a Vue instance so I could do a struct in Go and call Mount on it. Data is not reactive, and methods are a work in progress, but I did get them to be used as an event handler; changing state in the Vue instance and re-rendering.

There are a lot of shortcuts here, I'm just trying to see how far I can get
to see how it feels. At some point I'll start over and build the thing right if it makes sense to actually build this thing. I feel like it might.

So that's it, let me know what you think or if you have any questions. Subscribe if you'd like to keep following along, or follow me on Twitch. thanks for watching

Discussion (8)

Collapse
zambiorix profile image
Zambiorix • Edited
At some point I'll start over and build the thing right if it makes sense to actually build this thing. I feel like it might.

It makes sense to actually build this thing!
I love Vue and I love Go, the combination would be awesome :-)

Collapse
zambiorix profile image
Zambiorix

FYI

It made sense to somebody else too ...

github.com/norunners/vue

Collapse
andrusgerman profile image
Andrus Diaz German

Also create something similar to the library you are sharing
gitlab.com/AndrusGerman/vuego ,a pretty spartan wrapper since I didn't want to complicate the project but with many climbing facilities. With support of routes, components and custom parameters (Vuetify etc).

Collapse
wolfgangbraun profile image
Wolfgang Braun

Hey Jeff,

couple of month ago I had the exact same idea (go wasm vue) and thought it was good because shrinking the tech stack reduces costs and WASM brings additional potential.

If we had hot reloading, reactivity, virtual rendering/DOM and templating in one web frontend framework written in go that would be pretty nice.
A go web API server could be its companion.

In this scenario a dev could concentrate on improving his/her go skills and only needs DB-querying and CSS skills alongside (and that'd be all needed for a reactive database driven web application)

Nice you've found the time for this POC, keep it up and make the repo public ;)

Collapse
hubyhuby profile image
hubyhuby

Hi there,
This would be awsome to get rid of the JS and have golang all over the place ;)
If we would have a vue like framework in GO that would be great !
Looking forward to play with it.
Is there a github, where we can try it ?

Have fun

Collapse
rhymes profile image
rhymes

Really cool experiment!

Collapse
progrium profile image
Jeff Lindsay Author

Thanks!

Collapse
ppiccolo profile image
Paolo

amazing idea !! keep it live please.