Building a Web App Without JavaScript: A Go-Based Approach
When it comes to building web applications, most of us are familiar with the traditional approach: using JavaScript and Node.js. But what if we told you there’s a way to build a complete web application, from frontend to backend, without writing a single line of JavaScript? Today, we’re going to explore an alternative approach using Go.
Getting Started with Go
Before we dive in, make sure you have Go installed on your machine and a basic understanding of the language. If you need a refresher, check out the free Tour of Go. Additionally, clone the repository with the code for this article to follow along.
A Simple Link Shortener Application
Our goal is to build a single-page link shortener application using only Go. We’ll start by getting the application running locally. Unlike Webpack and other JavaScript-based tools, building and running this application is surprisingly easy. We’ll compile both the frontend and backend using the Go tool, with no configuration required.
To get started, run the backend server and build the frontend in a new terminal window. Then, navigate to https://localhost:8081 in your browser to see the app in action.
How It Works
Our link shortener application consists of a frontend and backend piece. The backend is a static server written in Go, while the frontend is where the magic happens. We’re using a new Go framework called Vecty to organize our application. Vecty forces us to break down our app into components and arrange them into a tree, similar to HTML and the DOM or React.
Vecty Components: A Closer Look
Let’s take a closer look at one of our Vecty components, the form component. This code may look familiar to React developers, with a few key differences. We’re using Go functions to create HTML elements, and event handlers to update the UI dynamically.
The Benefits of Using Go and Vecty
So why choose Go and Vecty over traditional JavaScript-based approaches? For starters, you get to think in terms of components and nesting, just like with React and the DOM. You can write dynamic logic alongside your components, all in pure Go. Plus, you can share code between the server and client, similar to writing a React client and a Node.js server. And, as an added bonus, you get to take advantage of Web Assembly (WASM) for free.
LogRocket: Modern Error Tracking
Before we wrap up, let’s talk about error tracking. LogRocket is a modern error tracking solution that helps you identify and fix issues in minutes. With LogRocket, you can get set up in minutes and start tracking errors in your application. Plus, you can integrate with popular frameworks like Redux, NgRx, and Vuex.
Join the Conversation
Would you like to join LogRocket’s developer community and help shape the type of content we create? Apply to join our Content Advisory Board and get access to exclusive meetups, social accreditation, and swag. Share your thoughts on this article and let’s continue the conversation!