I recently stumbled upon a very interesting project on Github called vugu. It is “A modern UI library for Go+WebAssembly”. It is currently in a highly experimental state, but I believe it has a lot or potential. If you want to learn more, check out the link to Vugu’s github above or this link to their website. In this post, I will be showing a simple exercise I did to get started with Vugu, inspired by a similar Vue project.
Goal
The aim of this project will be to create two text fields, each one with a label preceeding it. When the user submits the content of the text field, the label should change to what was entered in the text field. Part 2 will cover more complex form validation.
Note: Styling for this project was minimal. It’s primary purpose was to experiment with functionality.
Setup
I will assume you already have a functional Go setup and have followed the setup instructions detailed here.
After you have succesfully run the sample app, create a new directory for this project. I’ll call mine vuguFormValidation.
Within vuguFormValidation, create four files (on Unix/Linux):
root.vugutext-field.vugudevserver.gomaster.css(optional for styling)
Let’s get started. To skip to the end, you can download the four files here.
Step 1: text-field.vugu
Our custom text field will be comprised of the label and the actual input field. Here is the code:
Let’s take a closer look. This is a vugu component. Vugu components each get their own component file composed of markup, styling, and code. You can read more on the Vugu docs here. I will not go into exhaustive details of each piece of a component; the docs are relatively short and very informative. While you can put styling within a Vugu componet itself, I prefer to keep my CSS in a seperate file and will show how to do so later.
For now, skip over the markup and look at where it says <script type="application/x-go">. This section controls our component. First we define a TextFieldData struct; this will hold the information used in our component, namely the label (Name) of the text field and the contents.
We then proceed to satisfy the NewData interface of a component. Note that it is an interface of the TextField component, not the TextFieldData. This caused me quite some confusion the first time through. vugu.Props is a map of properties passed in when the component is created. We will see more details of how this works when we get to the root component. For now, just note how we assign the values of a TextFieldData to the corresponding vugu prop and return it.
Now that we’ve seen how to define a new component in Go code, go back up to the markup to see how it is used.
The first thing you’ll notice is that throughout the component we use data.Name or data.Contents extensively. This is how we use the TextFieldData struct we defined earlier. Also note that you can evaluate Go code within an HTML property by preceding the property with a colon (:).
Finally, there is a one property used that is not an HTML property. It is the vg-html property. This is a custom Vugu property that defines what will be placed inside an HTML tag (similar to Javascript’s innerHTML).
Step 2: root.vugu
This is where most of the functionality of our little form will be held. Our goal here will be to create two of our TextField components with initial labels of First Name and Last Name. Then, when the user hits submit, the label will change to reflect the value of whatever is in the TextField at that point. Here is the code:
Let’s start with the markup this time. First, we use the vg-if property to see if the component is updating. If it us, the page simply says “Loading…”. If not, it displays our form.
The form submit action is assigned to the OnSubmit method of data. We will define this later. It is in the next section that the magic happens. We use vg-for to create two TextField components and assign their values based on where they are in an array of TextFields held by data. We will see how all this is defined shortly. For now, note that the properties of text-field are the same as those from TextField’s NewData.
Now let’s look at the code. First, we import some required libraries. syscall/js is needed to access the TextField value for now, although Vugu hopes to eliminate that need shortly. We also import log just to make it easier to debug.
Our RootData struct contains a Fields property (an array of type TextFieldData). This is how we will access and control our TextFields from the root component. It also has the isUpdating property, whose use is explained above.
We then create a NewData method for Root. It is similar to what we did for TextField, however this time we are assigning the inital values of the two TextFieldDatas by populating our Fields array. We also set isUpdating to false.
The last thing we need to look at is our OnSubmit function. Note that this is a method for RootData, not Root. We use log.Print to give us some basic information. event.PreventDefault() is fairly self-explanatory. We set isUpdating to true while we make our changes. Just to show how you would, I left a Javascript console.log command called from Go. Finally, we get to the meat of the function.
The for loop iterates over each field in Fields (there’s only two). The first line after that retrieves the value of the current form field and assigns it to Contents for the current Field. Then there are two debugging statements. The final line finds the id of TextField label and sets it’s innerHTML to Contents.
There you go! If you take devserver.go from the setup and run it, you should be able to see our form doing what we designed it for. If you open the console, you can look at all the log statements.
Optional: Add Styling
Adding styling from a seperate file is pretty straightforward in vugu. First, modify your devserver.go file to include this line before starting the server:
simplehttp.DefaultStaticData["CSSFiles"] = []string{"/master.css"}
Then, simply add your styling in master.css. I kept mine minimal. Here it is:
Conclusion
Hopefully this has been helpful to you and you see the potential of Vugu. It’s still experimental and needs help from developers like you! Check out Vugu’s issue page on Github to see how you can help!
In part two, we will extend this example to include more complex and practical form validation examples.
What do you think? Does Vugu have enough promise to be a major competitor in a world full of Javascript frameworks?
Want more Semi-Structured Thoughts? Subscribe here.