avldya/jsgo

GopherJS compiler, serving framework and CDN.

jsgo.io

GopherJS is an amazing tool, but I've always been frustrated by the size of the output. All the packages in the dependency tree (including the standard library) are compiled to a single JS file. This can cause the resultant file to be several megabytes.

I've always thought a better solution would be to split the JS up by package and store it in a centralized CDN. This architecture would then allow aggressive caching: If you import fmt, it'll be delivered as a separate file fmt.js, and there's a good chance some of your visitors will already have it in their browser cache. Additionally, incremental updates to your app will only change the package you're updating, so your visitors won't have to download the entire dependency tree again.

jsgo.io makes this simple.

Features

• Compiles Go to JS using GopherJS.
• Splits the JS up by Go package.
• Stores the JS in a CDN for you (GCP / Cloudflare).
• Aggressively caches the JS.
• Creates a page on jsgo.io that runs the JS.
• Creates a single loader JS file you can use on your site.

How it works

Visit https://compile.jsgo.io/<path> to compile or re-compile your package. Here's a very simple hello world. Just click Compile.

After it's finished, you'll be shown a link to a page that runs the code on jsgo.io. The compile page will also give you a link to a single JS file on pkg.jsgo.io - this is the loader JS for your package. Add this in a <script> tag on your site and it will download all the dependencies and execute your package.

URLs on jsgo.io that start github.com may be abbreviated: github.com/foo/bar will be available at jsgo.io/foo/bar and also jsgo.io/github.com/foo/bar. Package URLs on pkg.jsgo.io always use the full path.

Production ready?

The package CDN (everything on pkg.jsgo.io) should be considered relatively production ready - it's just static JS files in a Google Storage bucket behind a Cloudflare CDN so there's very little that can go wrong. Additionally, the URL of each file contains a hash of it's contents, ensuring immutability.

The index pages (everything on jsgo.io) should only be used for testing and toy projects. Remember you're sharing a domain with everyone else, so the browser environment (cookies, local storage etc.) should be used with caution! For anything important, create your own index page on your site and add the loader JS (on pkg.jsgo.io) to a <script> tag.

Ths compile server (everything on compile.jsgo.io) should be considered in beta... Please add an issue if it's having trouble compiling your project.

Demos

• https://jsgo.io/hajimehoshi/go-inovation
• https://jsgo.io/hajimehoshi/ebiten/examples/2048
• https://jsgo.io/shurcooL/tictactoe/cmd/tictactoe
• https://jsgo.io/dave/todomvc
• https://jsgo.io/gopherjs/vecty/example/markdown
• https://jsgo.io/dave/html2vecty
• https://jsgo.io/dave/zip
• https://jsgo.io/dave/img

The power of aggressive caching is apparent when loading pages which share common packages... The examples in the ebiten game library are a great demonstration of this:

• https://jsgo.io/hajimehoshi/ebiten/examples/blocks
• https://jsgo.io/hajimehoshi/ebiten/examples/airship
• https://jsgo.io/hajimehoshi/ebiten/examples/alphablending
• https://jsgo.io/hajimehoshi/ebiten/examples/audio
• https://jsgo.io/hajimehoshi/ebiten/examples/infinitescroll
• https://jsgo.io/hajimehoshi/ebiten/examples/rotate
• https://jsgo.io/hajimehoshi/ebiten/examples/sprites

Index

You can customize the HTML delivered by the jsgo.io page by adding a file named index.jsgo.html to your package. Use {{ .Script }} as the script src. See todomvc for an example.

Progress

If a function window.jsgoProgress exists, it will be called repeatedly as packages load. Two parameters are supplied: count (the number of packages loaded so far) and total (the total number of packages).

The default index page on jsgo.io is to display a simple count / total message in a span. However, by supplying a custom index.jsgo.html, more complex effects may be created - see the html2vecty example for a bootstrap progress bar.

Limitations

If there's any non git repositories (e.g. hg, svn or bzr) in your dependency tree, it will fail. This is unlikely to change. Workaround: vendor the dependencies and it'll work fine.

How to contact me

If you'd like to chat more about the project, feel free to add an issue, mention @dave in your PR, email me or post in the #gopherjs channel of the Gophers Slack. I'm happy to help!

Run locally?

If you'd like to run jsgo locally, take a look at these instructions.