Challenges Going Forward

Table Of Contents

• Introduction
• Starting Point
• Function Registration
• Components
• Building a Router
• A Full Example
• Challenges Going Forward
• Conclusion

JavaScript Frontend frameworks have undoubtedly helped to push the boundaries of what was previously possible in the context of a browser. Ever more complex applications have come out built on top of the likes of React, Angular and VueJS to name but a few and there’s the well known joke about how a new frontend framework seems to come out every day.

However, this pace of development is exceptionally good news for developers around the world. With each new framework, we discover better ways of handling state, or rendering efficiently with things like the shadow DOM.

The latest trend however, seems to be moving towards writing these frameworks in languages other than JavaScript and compiling them into WebAssembly. We’re starting to see major improvements in the way that JavaScript and WebAssembly communicates thanks to the likes of Lin Clark and we’ll undoubtedly see more major improvements as WebAssembly starts to become more prominent in our lives.

Introduction

So, in this tutorial, I thought it would be a good idea to build the base of an incredibly simple frontend framework written in Go that compiles into WebAssembly. At a minimum, this will include the following features:

• Function Registration
• Components
• Super Simplistic-Routing

I’m warning you now though that these are going to be incredibly simple and nowhere near production ready. If this is article is somewhat popular, I’ll hopefully be taking it forward however, and trying to build something that meets the requirements of a semi-decent frontend framework.

Github: The full source code of this project can be found here: elliotforbes/oak. If you fancy contributing to the project, feel free, I’d be happy to get any pull requests!

Starting Point

index.html

js

entrypoint.jslib.wasm

main.go

Oak Framework Initialized

lib.wasmentrypoint.js

Awesome, if everything worked, then we are ready to try it out in the browser! We can use a really simple file server like this:

go run server.gohttp://localhost:8080

Function Registration

Ok, so we’ve got a fairly basic print statement working, but in the grand scheme of things, I don’t quite think that qualifies it as a Web Framework just yet.

index.htmlstring

main.go

So, this is where things start to become a bit more useful. Our framework now allows us to register functions so users of the framework can start creating their own functionality.

Other projects using our framework can start to register their own functions that can subsequently be used within their own frontend applications.

Components

components/home.go

So, how do we go about doing this?

render()

I essentially want to be able to do something like this within a project that uses this framework:

componentsHomeComponentRender()

interfacecomponents/comopnent.go

oak.RegisterFunctioninit

HTMLcoolFunc()does stuff

Awesome, let’s see how we can go about building a simple router now.

Building a Router

components

id

router/router.go

string

RouterRoutes

Link

RegisterRoutepath

Link

Awesome, so we’ve got a really simple router up and running now, if we wanted to use this in a simple application we could do so like this:

A Full Example

With all of this put together, we can start building really simple web applications that feature components and routing. If you want to see a couple of examples as to how this works, then check out the examples within the official repo: elliotforbes/oak/examples

Challenges Going Forward

The code in this framework is in no way production ready, but I’m hoping this post kicks off good discussion as to how we can start building more production ready frameworks in Go.

If nothing else, it starts the journey of identifying what still has to be done to make this a viable alternative to the likes of React/Angular/VueJS, all of which are phenomenal frameworks that massively speed up developer productivity.

I’m hoping this article motivates some of you to go off and start looking at how you can improve on this incredibly simple starting point.

Conclusion

If you enjoyed this tutorial, then please feel free to share it to your friends, on your twitter, or wherever you feel like, it really helps the site and directly supports me writing more!

I’m also on YouTube, so feel free to subscribe to my channel for more Go content! - TutorialEdge.

The full source code for the Oak framework can be found here: github.com/elliotforbes/oak. Feel free to submit PRs!