Vue-like framework in Go+wasm

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