spice up your Golang app with a GUI — part 4: Single Page Application with Vue.js

video @ https://youtu.be/CwdYG8rTOdY

a brief history of web applications and Javascript

SPA — Single Page Applications

revamp on the index.html

<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<!-- vuex -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/vuex"></script>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet">
<html>
<head>
... js library and css imports ...
</head>

<body onload="onStart()">
<button class="btn btn-primary">bootstrap buttons</button>
</body>
</html>
go run generateAssets.go
mv generateAssets.go generateAssets.go.disable
go build -o taskApp
mv generateAssets.go.disable generateAssets.go
./taskApp
decorated button
root
|_ main.go
|_ www
|_ index.html
|_ asset
|_ favicon.png
|_ css
|_ app.css
|_ component
|_ app.js

The application — app.js

new Vue({
el: '#app',
data: function () {
return {
msg: 'vue app created',
};
}
});
...
<body onload="onStart()">
<!-- app entry point -->
<div id="app">
{{msg}}
<button class="btn btn-primary">bootstrap buttons</button>
</div>

<!-- load back all vue related components; app.js MUST be the last one -->
<script src="./component/app.js"></script>

</body>
...
app.js running

The Splash-Screen component

<div class="splash-container" v-bind:class="getContainerClass()">
<div class="splash-inner-container">
<div>
<div class="splash-caption"
style="margin-top: 180px; margin-bottom: 20px;">
<img src="../asset/favicon.png" width="50px; margin-right: 12px;">
<span>Loading...</span>
</div>

<div class="splash-progress-container">
<div id='splash-progress-bar' class="splash-progress-bar"></div>
</div>
</div>
</div>
</div>

v-bind:class

getContainerClass: function () {
let _c = {};
if (this.show) {
_c['core-display-block'] = true;
_c['core-display-none'] = false;
} else {
_c['core-display-block'] = false;
_c['core-display-none'] = true;
}
return _c;
}

class=“splash-progress-bar”

mounted: function() {
let instance = this;
let ePBar = document.querySelector('#splash-progress-bar');
let w = 1;
let hInterval = setInterval(function () {
if (w >= 100) {
clearInterval(hInterval);
instance.show = false;
} else {
ePBar.style.width = w + '%';
}
w++;
}, 50);
}

Moving on…

a java / golang / flutter developer, a big data scientist, a father :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store