Vuejs + Golang = A rare combination

Adesh Gautam
Jul 23, 2019 · 6 min read

Back in 2018, I wrote an article “Django + Angular 4 = A powerful web application” which has over 15k reads. Out of curiosity, I tried Angular 4 and Django. Continuing the series, here is a new article helping you to build amazing apps using - “Vuejs” and “Golang”.

I know, these two aren’t popular to be used along with each other. But, let’s try…

Background

Okay so first, let’s talk about the features these technologies provide.

Golang

  1. Binaries — The binaries are generated with all the dependencies built-in. Thus, you need not to install the runtimes to run the application.
  2. Static typing — The compiler takes care of the code when you are writing it and not only compile it. The type conversions and compatibility etc are taken care of.
  3. Concurrency — The best feature of Golang is that it has first-class support of concurrency built itself in the language.
  4. Standard library — The standard library is powerful enough that you mostly won’t need 3rd party libraries.

Vuejs

  1. Size — After gzipping it weighs only 18kB as compared to the minified jQuery which sizes to 29kB after gzipping.
  2. Readability — The code and syntax of Vuejs is very clear and simple.
  3. Documentation — It has thorough documentation which makes it fast and easy to learn.
  4. Reactivity — The data binding between HTML and Javascript is very fluid.
  5. Vue CLI 3 — It offers a lot of features that makes developers life easy. Just try it and you’ll love it.

Setting up directories

First, set up your directories like below. “LICENSE” and “README.md” for Git.

                      vue create calculator

Build the backend

Golang is fast and the reason for it is the compiler, which doesn’t let you declare variables unless you use them. If you declare something or import any package you will have to use it. It is very strict about it. And also whatever you are going to do you have to tell the compiler beforehand like: if you want to grab the POST data, you have to declare the structure of the JSON data beforehand. This is a little tricky but worth the speed.

packages and the JSON data structures
process function

Now let’s build the frontend

First cd into the frontend directory and install the dependencies using the below command.

   npm install --save bootstrap-vue bootstrap axios vee-validate
writing scripts tag
Calculator.vue
  • Build structures to hold the JSON data. You just can’t store them right away in a variable.
  • The Vuejs frontend will communicate to the server using API calls using GET or POST requests.

Run the App

The backend server can be run using

                        go run server.go
                          npm run serve

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade