Learn Go, Realm and Riot

Go is a server-side language, but today we can compile Go code to WebAssembly as well - making it possible for us to bring programs written in minimalistic Go code into the browser!

With this collection, we will learn how to compile and run Go WebAssembly programs in Node.js and the browser, and how our Go code can interop with JavaScript and manipulate the DOM. We will also talk about configuring our VS Code workspace and optimizing the Go WASM binary size.

Go is an open-source programming language that makes it easy to build simple, reliable, and efficient software.

WebAssembly with the Go Language

This collection of lessons will cover a variety of topics that teach you how to work with slices and arrays in go. You'll learn how to declare them, create them using literal syntax, iterate over them, add to them, remove from them and other useful things.

Learn about slices and arrays in Go

Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

riot

Tag Options allow you to abstract your custom tag elements into reusable objects by allowing the tag-user to specify the dynamic parameters of their component.

Riot JS - Tag Options

Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

Riot JS - Getting Started with this React-like micro-library

Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

Riot JS - DOM Events

It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

Riot JS - Repeating Elements with Each Attribute

Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.

Riot JS - Scoped CSS and Toggled Classes

Every tag in Riot has a lifecycle. I'll explore the three hooks: mount, update, and unmount while adding an animation feature for an existing tag. Lifecycle hooks are important for setting up, tearing down, and keeping a tag's view up to date after external logic is run.

Riot JS - Tag Life Cycle Hooks

Golang has no built-in function(s) to filter an array. This lesson will teach you two different ways to filter.

The first is to create a separate array and add the filtered elements to it. This works great, but doesn't use memory as efficiently as the second way.

The second way shows you how to filter by altering the original array in place without making another array to hold the filtered elements. But, it has a side-effect that I'll tell you about which may help you decide which approach you will use to filter your array. 

Filter an Array in Go

There are numerous ways that you can declare and create arrays and slices in Go. This lesson will show you several and I talk about the advantages and disadvantages of one over another. After watching, you will better understand all of the possible ways you can declare/create as well as the idiomatic way.

These include:

* var
* the built-in function *new*
* the built-in function *make*
* Array and Slice literals

While it is not the main intent of this lesson, I do touch on some of the differences between slices and arrays.

Checkout the code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Declare).

Declare Arrays and Slices in Go

Go has a special indexing syntax that forms the basis of removing one or more elements from a slice. I will teach you this syntax and show you its various forms.

Based upon that, I'll show you how to remove a single element from a slice. However, you may find this somewhat limiting. I also will show you a more typical example of removing elements from a slice as we iterate over it. This technique shows you how to remove multiple elements from a slice.

Remove Elements from a slice in Go

There is a built-in append function that is used to append elements to a slice. We'll see in this lesson that the append function works only with slices, not arrays. There are also some nifty alternate uses of the the append function that make appending super easy.

Checkout the sample code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Add).

Append Elements to a Slice in Go

There are a couple of different ways to iterate over an array or slice in Go. The primary approach is to use range, which handles the iteration for you. However, you can also use a traditional for loop if you need to do something out of the ordinary, like iterating in reverse or skipping every other element.

Iterate over an Array or Slice in Go

There are numerous ways to sort slices in Go.

The simplest way uses some basic built-in functions from Go's **sort** package to allow you to easily sort slices of primitives, that being **Strings**, **Ints** and **Float64s**. Using these sort functions, we don't have control over the sort order as the data will be sorted in ascending alphabetical (for strings) or ascending numerical (for Ints and Float64s) order.

In this lesson, we will take a quick look at the easiest way to sort slices of primitives. We will learn about using some of the handy built-in functions in Go's sort package, including:

* sort.Strings: Sorting a slice of strings
* sort.Ints: Sorting a slice of ints
* sort.Float64s: Sorting a slice of float64s

Sort Primitives (strings, ints, and floats) in Go 

There are numerous ways to sort slices in Go.

In this lesson, we will take a quick look at an easy way to sort a slice of structs or primitives. We will learn about using one of the handy built-in functions in Go's sort package called *sort.Slice*. This function takes a slice to sort as an argument and a *less function* or *less func* for short as the second argument. You will write this *less function* to sort the slice however you wish.

Go's sort.Slice function looks like this: *sort.Slice(someSlice, func(i, j int) bool)*. It's super-easy to write an anonymous *less function* to sort.

As you will see, it's easy to use this *less function* to do simple and even complex sorts of your structs with minimal effort.

Sort Slices of Structs using Go sort.Slice

*Go ^1.12, Node ^12.14.0*

Compiling Go programs to WebAssembly does not require Emscripten, and the process is pretty straight forward. In this lesson, we will learn how to compile a simple Go program to a WebAssembly binary, then execute it with Node.js.

Compile and execute a Go WebAssembly program with Node

*Go ^1.12, TinyGo ^0.12.0, Node ^12.14.0*

The WebAssembly binaries generated by the standard Go compiler are often unnecessarily large. In this lesson, we will learn techniques to optimize Go Wasm binary size with an alternative compiler that is designed for microcontrollers - TinyGo.

Optimize Go WebAssembly binary size with TinyGo

*Go ^1.12*

In this lesson, we will learn how to load and use a Go WebAssembly binary in a web app.

Manually load a Go WebAssembly binary in a browser

*Go ^1.12*

In this lesson, we will see how we can interact with the JavaScript environment by using Go's `syscall/js` module to call and pass values into a JavaScript function, and access variables available in JS land.

Access JS Functions and Variables from a Go WebAssembly Program

*Go ^1.12*

When using Go modules related to WebAssembly, namely `syscall/js`, the default settings in VS Code will trigger error reports like *"Build constraints exclude all Go files"* in the editor. In this lesson, we will learn how to fix this and improve our coding experience.

Configure Go Build Constraints in VS Code to work with WebAssembly

*Go ^1.12*

The ability to manipulate the DOM is sometimes crucial when it comes to working with apps powered by WebAssembly. In this lesson, we will see how we can utilize Go's `syscall/js` module to interact with the DOM by porting a sample JS code snippet to Go.

Search

Search Results