Vecty with Vue.js style templating

Jeff Lindsay - Oct 4 '18 - - Dev Community

As you may recall, I recently made a quick prototype of a frontend framework in Go using WebAssembly. However, the next steps involved writing quite a bit of code to actually generate and reconsile DOM changes. After studying what Vecty did, I decided I should try and use Vecty myself and see how it goes. Instead of using Vecty as made for GopherJS, today I was going to get it working compiled to WebAssembly.

Luckily, it seems good old Brian Ketelsen got the ball rolling. He started a fork of Vecty that does exactly what I theorized you could do. We talked on Twitter and on stream for a bit and he showed me his markdown demo project based on his Vecty fork. Sure enough, I ran it and it worked. That was my whole plan for the day!

So I decided to stumble on to the next thing I wanted to try with Vecty: Reimplement my Vue.js style templating, but which spits out Vecty objects. This would let you replace building HTML and rendering components with all these function helpers.

Slowly but surely I worked through all the cases in this markdown demo example: string interpolation, attribute bindings, event handlers, and component elements. Unfortunately I didn't get to a point where the whole PageView component was rendered with a single template, but I just ran out of time.

Already this is really cool and feels really good. I'm going to keep working on this template system, which by the way is an optional drop-in library. No forking or modifying of Vecty was necessary. I'm going to keep building on Vecty for as long as I can.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .