Vue.js-like без единой строчки js

Игорь Шеко

Web Assembly

WASM

Browser

Божественный JS

$$$

WASM

Поддержка

  • Chrome

  • Firefox

  • Edge

  • Safari ???

https://webkit.org/blog/9672/release-notes-for-safari-technology-preview-97/

JS
Rust
C++

Go

C# ???

???BASIC







GOOS=js GOARCH=wasm go build -o main.wasm main.go
applyFilteFunc := js.FuncOf(applyFilter) //wrapper
js.Global().Set("applyFilter", applyFilteFunc)

Игорь, что ты нагнетаешь?

Они же не могут в DOM

window = js.Global()
doc = window.Get("document")
squaresCanvas = doc.Call("getElementById", "sCanvas")
sctx = squaresCanvas.Call("getContext", "2d")

wordCanvas = doc.Call("getElementById", "wCanvas")
wctx = wordCanvas.Call("getContext", "2d")

width = window.Get("innerWidth").Float()
height = window.Get("innerHeight").Float()

squaresCanvas.Set("width", width)
squaresCanvas.Set("height", height)
<div class="my-first-vugu-comp">
    <button @click="data.Toggle()">Test</button>
    <div vg-if="data.Show">I am here!</div>
</div>

<style>
.my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>

VUGU

PLEASE NOTE: This is experimental technology! (read more)

Templates

  • vg-if
  • vg-for
  • vg-html
  • Dynamic Attributes
  • DOM Events

CSS

  • prefix your styles
  • Styles are deduplicated
  • Styles are inserted in one place at the top of the root component
  • not want to use @import to load external style sheets
  • dynamic elements are not currently supported in styles

PostCSS не нужон!

<div class="demo">
    <div vg-if='data.isLoading'>Loading...</div>
    <div vg-if='len(data.bpi.BPI) > 0'>
        <div>Updated: <span vg-html='data.bpi.Time.Updated'></span></div>
        <ul>
            <li vg-for='data.bpi.BPI'>
                <span vg-html='key'></span> <span vg-html='fmt.Sprint(value.Symbol, value.RateFloat)'></span>
            </li>
        </ul>
    </div>
    <button @click="data.HandleClick(event)">Fetch Bitcoin Price Index</button>
</div>

<script type="application/x-go">
import "encoding/json"
import "net/http"
import "log"
type RootData struct {
    bpi bpi
    isLoading bool
}
type bpi struct {
    Time struct { Updated string `json:"updated"` } `json:"time"`
    BPI map[string]struct { Code string `json:"code"`; Symbol string  `json:"symbol"`; RateFloat float64 `json:"rate_float"` } `json:"bpi"`
}
func (data *RootData) HandleClick(event *vugu.DOMEvent) {
    data.bpi = bpi{}
    ee := event.EventEnv()
    go func() {
        ee.Lock()
        data.isLoading = true
        ee.UnlockRender()
        res, err := http.Get("https://api.coindesk.com/v1/bpi/currentprice.json")
        if err != nil {
            log.Printf("Error fetch()ing: %v", err)
            return
        }
        defer res.Body.Close()
        var newb bpi
        err = json.NewDecoder(res.Body).Decode(&newb)
        if err != nil {
            log.Printf("Error JSON decoding: %v", err)
            return
        }
        ee.Lock()
        defer ee.UnlockRender()
        data.bpi = newb
        data.isLoading = false
    }()
}
</script>

Всем спасибо

Игорь Шеко

Lead of the Front-end team @ Voximplant

Made with Slides.com