Online Sieve of Eratosthenes Demo via Go and Vue.js


Online Sieve of Eratosthenes demo via Go/GopherJS/gopherjs-vue (Go binding for Vue.js). Sieve of Eratosthenes is a method to find prime numbers up to a given limit. The algorithm comes from GeeksforGeeks [1] and implemented in Go. gopherjs-vue is used to build to UI interaction.

Although the following demo is written in JavaScript/Vue.js, the effect is the same as that written in Go.

Demo

The link of full source code is available on my GitHub repo.

HTML

<div id="vueapp">
  <input v-model="intn" placeholder="Input even integer > 2">
  <p>{{ result }}</p>
</div>

Go: go get github.com/gopherjs/gopherjs and github.com/oskca/gopherjs-vue before compiling the Go code.

package main

import (
      "strconv"

      "github.com/gopherjs/gopherjs/js"
      "github.com/oskca/gopherjs-vue"
)

type Model struct {
      *js.Object        // this is needed for bidirectional data bindings
      Intn       string `js:"intn"`
      Result     string `js:"result"`
}

func SieveOfEratosthenes(n int) []int {
      // Create a boolean array "prime[0..n]" and initialize
      // all entries it as true. A value in prime[i] will
      // finally be false if i is Not a prime, else true.
      integers := make([]bool, n+1)
      for i := 2; i < n+1; i++ {
              integers[i] = true
      }

      for p := 2; p*p <= n; p++ {
              // If integers[p] is not changed, then it is a prime
              if integers[p] == true {
                      // Update all multiples of p
                      for i := p * 2; i <= n; i += p {
                              integers[i] = false
                      }
              }
      }

      // return all prime numbers <= n
      var primes []int
      for p := 2; p <= n; p++ {
              if integers[p] == true {
                      primes = append(primes, p)
              }
      }

      return primes
}

func main() {
      m := &Model{
              Object: js.Global.Get("Object").New(),
      }
      // field assignment is required in this way to make data passing works
      m.Intn = "4"
      m.Result = ""

      // create the VueJS viewModel using a struct pointer
      app := vue.New("#vueapp", m)

      opt := js.Global.Get("Object").New()
      opt.Set("immediate", true)
      app.Call("$watch", "intn", func(newVal, oldVal string) {
              n, err := strconv.Atoi(newVal)
              if err != nil {
                      m.Result = "input must be integer"
                      return
              }
              m.Result = ""

              primes := SieveOfEratosthenes(n)
              for _, prime := range primes {
                      m.Result += (strconv.Itoa(prime) + " ")
              }
      }, opt)
}

The JavaScript equivalent is available on my previous post [2].

Tested on:

  • Chromium 65.0.3325.181 on Ubuntu 17.10 (64-bit)
  • Go 1.10.1
  • GopherJS 1.10-3

References:

[1]Sieve of Eratosthenes - GeeksforGeeks
[2][JavaScript] Sieve of Eratosthenes
[3][Golang] Sieve of Eratosthenes
[4][Vue.js] Online Goldbach's Conjecture Demo
[5]vue - GoDoc
[6]GitHub - lifeng1335/gopherjs-vue-examples: Vue.js official examples written in go language with gopherjs
[7]vm.$watch( expOrFn, callback, [options] ) - API — Vue.js