DEV Community: Brandon Villa

Go's language notes for JavaScript Devs

Brandon Villa — Fri, 22 Jan 2021 17:59:49 +0000

These are my personal notes with code samples to explain key concepts of Go's language. I think these notes can be useful for anyone starting to learn Go or even using it as a cheat sheet.

Variables
Logs
Variadic parameters
Statically typed
Strings
Arrays and Slices
Maps
Structs
Embedded structs
Methods
Interfaces and Polymorfism
Anonymous functions
Pointers
JSONs

Variables

// Global scope declaration
var x int

func main() {
    // Shorthand declaration (recommended)
    x := 10
    fmt.Println(x) // 10
}

Logs

func main() {
    fmt.Println("Hello from Go!") // Hello from Go
    x := "Hello from Go!"

    // Print with format

    // %q a single-quoted character literal safely escaped with Go syntax.
    fmt.Printf("%q\n", x) // Hello from Go!

    y := 10
    fmt.Printf("%b\n", y) // 1010 (prints number in binary)
    fmt.Printf("%d\n", y) // 10   (prints number in decimal)
    fmt.Printf("%x\n", y) // a    (prints number in hexadecimal)

    // Print the type of the value
    fmt.Printf("%T\n", y) // int
}

Variadic parameters (x...)

Variadic parameter is to what we call in JavaScript spread operator:

func main() {
    numbers(1, 2, 3, 4)
}

func numbers(x ...int) {
    fmt.Println(x) // [1 2 3 4]
    fmt.Printf("%T", x) // []int (it prints the data type)
}

Statically typed

Go is statically typed:

// Statically typed means:
func main() {
    a := 10
    fmt.Printf("%T\n", a) // int

    a = "now is string value" // this will show an error as is not dynamically typed
}

Strings

Strings are immutable

A string is also an array of bytes, this means that you can access to the indexes of the string doing something like this: str[0] and you will get the value of the letter specified in ASCII

If you're more familiarized with JavaScript or Python you'd be expecting to see the letter instead of the ASCII value, there's also a way to get this value:

func main() {
    text := "Hello world"
    fmt.Println(text) // Hello world
    fmt.Println(text[0]) // 72
    fmt.Println(text[1]) // 101
    fmt.Printf("%T\n", text[0]) // uint8 (byte = uint8)

    // Get the letter instead of the ASCII value (by doing a conversion)
    letter := string(text[0])
    fmt.Println(letter) // H

    // You can also make a conversion from string to array of bytes:
    bs := []byte(text)
    fmt.Println(bs) // [72 101 108 108 111 32 119 111 114 108 100]
}

Arrays and Slices

Arrays are usually declared like this: var a [4]int whereas slices are normally declared like this: x := []int{1, 2, 3, 4}

Slices are a bit more flexible than arrays since arrays are limited by a length from the beginning. Slices are built on arrays so slices have all the capabilities of an array and they are more flexible

For more explanation between arrays and slices: https://blog.golang.org/slices-intro

Operations over arrays/slices:

func main() {
    var x [5]int
    // Array's elements are initialized by default depending on the data type
    fmt.Println(x) // [0, 0, 0, 0, 0]

    // Get the length
    len(x) // 5 
}

Slices using composite literals

func main() {
    // this is a composite literal => dataType{}
    x := []int{3, 50 ,1 , 56, 5}

    // you can iterate over arrays/slices using the for-range loop
    for i, v := range x {
        fmt.Println(i, v) // index, value
    }

    // Get a slice from the slice
    fmt.Println(x[1:3]) // [50, 1]

    // Append to a slice
    fmt.Println(append(x, 4, 6)) // [3, 50 ,1 , 56, 5, 4, 6]
    y := []int{1, 2, 3, 4}

    // Append two slices
    fmt.Println(append(x, y...)) // [3, 50 ,1 , 56, 5, 1, 2, 3, 4]

    // Delete an element in the slice (remove the third element)
    append(x[:2], x[3:]...) // [3, 50, 56, 5]
}

Maps

func main() {
    x := map[string]int{
        "Ana": 30,
        "Joe": 40,
    }
    fmt.Println(x) // map[Ana:30 Joe:40]
    fmt.Println(x["Joe"]) // 40
    fmt.Println(x["None"]) // 0 (zero indexed for non-assigned indexes in the Map)

    // To check if the value is actually indexed or not
    v, ok := x["Nah"]
    fmt.Println(v) // 0
    fmt.Println(ok) // false

    // A common idiomatic statement in Go
    if v, ok := x["Joe"]; ok {
        // Do something when it DOES exists
    }

    // Append element to Map
    x["John"] = 40

    // Delete element from Map
    delete(x, "Joe")
    fmt.Println(x) // (Will print without the removed element)
}

Structs

The syntax is very similar to JS literal objects but internally they are a very different thing, in fact, in Go they don't call it objects but struct

Structs is a composite data type

type person struct {
    name string
    age  int
}

func main() {
    x := person{
        name: "John Doe",
        age:  40,
    }
    fmt.Println(x) // {John Doe 40}
    fmt.Println(x.name, x.age) // John Doe 40
}

Embedded structs

type person struct {
    name string
    age  int
}

type student struct {
    alumni person
    school string
}

func main() {
    x := student{
        alumni: person{
            name: "John Doe",
            age:  40,
        },
        school: "MIT",
    }
    fmt.Println(x)
    fmt.Println(x.alumni.name, x.alumni.age)
}

Methods

Go does not have classes. However, you can define methods on types. A method is a function with a special receiver argument. The receiver appears in its own argument list between the func keyword and the method name:

type person struct {
    name string
    age  int
}
// This function will be attached to any variable whose type is person
func (p person) sayHello() string {
    return "Hello, my name is " + p.name
}

func main() {
    x := person{
        name: "John Doe",
        age:  40,
    }
    y := person{
        name: "Ana Doe",
        age:  40,
    }
    fmt.Println(x.sayHello()) // Hello, my name is John Doe
    fmt.Println(y.sayHello()) // Hello, my name is Ana Doe
}

Interfaces and Polymorfism

// TL;DR:
// The type person is also type human
// The type student is also type human

type person struct {
    name string
    age  int
}

type student struct {
    alumni person
    school string
}

func (p person) sayHello() string {
    return "Hello, my name is " + p.name
}

func (s student) sayHello() string {
    return "Hello, my name is " + s.alumni.name
}

// Any type that has a sayHello() function will also be type human
// This means that person and student are also type human
type human interface {
    sayHello() string
}

func humanCanPass(h human) {
    fmt.Println("Hey! I'm a human", h)
}

func main() {
    p := person{
        name: "John Doe",
        age:  40,
    }
    s := student{
        alumni: person{
            name: "Ana Doe",
            age:  30,
        },
        school: "MIT",
    }
    fmt.Println(p.sayHello())
    fmt.Println(s.sayHello())

    humanCanPass(p)
    humanCanPass(s)
}

Anonymous function

// (func expression)
func main() {
    x := func (s string){
        fmt.Println("Hey!", s)
    }

    x("John")
}

Returning a function is also valid:

func main() {
    x := thisIsValid()
    fmt.Println(x("John")) // Hello John

}

func thisIsValid() func(s string) string {
    return func(s string) string {
        return "Hello " + s
    }
}

Pointers

& gives you the address (reference) in memory

* de-references the address to its value stored

func main() {
    x := 21
    fmt.Println(x) // 21
    fmt.Println(&x) // 0xc0000b6020 (of course this will vary on every machine)

    y := &x
    fmt.Println(y) // 0xc0000b6020
    fmt.Println(*y) // 21

    // This is valid too
    fmt.Println(*&x) // 21
}

JSONs

Example of parsing a slice of person struct to a JSON string

import (
    "encoding/json"
    "fmt"
)
// Keys must be capitalized
type person struct {
    Name     string
    LastName string
    Age      int
}

func main() {
    p1 := person{
        Name:     "John",
        LastName: "Doe",
        Age:      40,
    }
    p2 := person{
        Name:     "Ana",
        LastName: "Doe",
        Age:      32,
    }
    people := []person{p1, p2}

    bs, err := json.Marshal(people)

    if err != nil {
        fmt.Println("The error => ", err)
    }

    fmt.Println(string(bs)) // [{"Name":"John","LastName":"D....
}

Example of parsing a JSON string to a person struct slice (The opposite as the prev example)

import (
    "encoding/json"
    "fmt"
)

type person struct {
    Name     string
    LastName string
    Age      int
}

func main() {
    jsonString := `[{"Name":"John","LastName":"Doe","Age":40},{"Name":"Ana","LastName":"Doe","Age":32}]`
    jsonBytes := []byte(jsonString)
    people := []person{}

    err := json.Unmarshal(jsonBytes, &people)

    if err != nil {
        fmt.Println("The error => ", err)
    }

    fmt.Println(people[0].Name) // John
    fmt.Println(people[0].LastName) // Doe
    fmt.Println(people[1].Name) // Ana
}

I will keep updating this post with more topics...

Micro-frontends: Module Federation with WebPack 5

Brandon Villa — Fri, 07 Aug 2020 02:12:03 +0000

What is Module Federation?

It is basically a JavaScript architecture. It allows a JavaScript application to dynamically load code from another application (a different Webpack build).

This is how you normally use Webpack

You would use Webpack to generate a bundle for production or development, let's say Webpack helps you to generate a folder called dist and a file main.js within this folder. This is the result of all of your JavaScript code that you normally have in a folder called src

The more you add code into your src folder the heavier is this main.js file which Webpack generates. Remember that this is the file you take to your production environment and clients download in their browsers, if this file is heavy that means it will take longer for the users to load your page.

That means we care about the size of our bundle but we also want to keep adding new features to our projects

Is there a solution to this problem?

There is, there are strategies to break that main.js file into chunks of smaller files in order to avoid loading all your code at first render. This is called Code Splitting (https://webpack.js.org/guides/code-splitting/)

There are different techniques to accomplish this, one is defining more than one entry point into your Webpack configuration but it comes with some pitfalls, sometimes you will have duplicated modules between chunks and both chunks will include these modules so it will increase the size of your chunks.

There's another popular and more accepted way, this consists in using the import() syntax which conforms to the ES Proposal in order to have dynamic imports in JS (https://github.com/tc39/proposal-dynamic-import)

Using this approach looks something like this:

function test() {
  import('./some-file-inside-my-project.js')
    .then(module => module.loadItemsInPage())
    .catch(error => alert('There was an error'))
}

We can lazy load the elements to our page using import() syntax and also this will create a new chunk which will get loaded on demand

But what if I told you that there's another way to break this main.js file not only into different chunks but into different projects?

Here is where Module Federation comes

With Module Federation you can import remote Webpack builds to your application. Currently, you could import these chunks but they would have to come from your same project. Now, you can have these chunks (Webpack builds) from a different origin, which means, a different project!

Module Federation in action

To explain what all of this is about, we will see some code samples of a Webpack configuration using ModuleFederationPlugin and some React.js code

For this, we will use Webpack 5 which currently is on version beta. This is how the package.json file looks like:

// package.json (fragment)

...

  "scripts": {
   "start": "webpack-dev-server --open",
   "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.10.3",
    "@babel/preset-react": "7.10.1",
    "babel-loader": "8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "5.0.0-beta.24",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }

...

We have included all the Webpack modules to create a basic setup for a React application

This is how the webpack.config.js looks so far:

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
  },
    output: {
    publicPath: "http://localhost:3000/",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

This is a normal configuration of Webpack

Let's add a react component to the project:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <h1>Hello from React component</h1>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

At this point if you run this project, you will get a page which will show a message saying "Hello from React component". Until now, there's nothing new here.

The code of this project until this step is here:https://github.com/brandonvilla21/module-federation/tree/initial-project

Creating a second project

Now, we will create a second project with the same package.json file but with some differences under the Webpack configuration:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

// Import Plugin
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    // Change port to 3001
    port: 3001,
  },
    output: {
    publicPath: "http://localhost:3001/",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    // Use Plugin
    new ModuleFederationPlugin({
      name: 'app2',
      library: { type: 'var', name: 'app2' },
      filename: 'remoteEntry.js',
      exposes: {
        // expose each component you want 
        './Counter': './src/components/Counter',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

We're importing the ModuleFederationPlugin on top of the configuration

const { ModuleFederationPlugin } = require('webpack').container;

We also need to change the port since we will be running both applications at the same time

port: 3001,

And this is how the Plugin config looks like:

new ModuleFederationPlugin({
  name: 'app2', // We need to give it a name as an identifier
  library: { type: 'var', name: 'app2' },
  filename: 'remoteEntry.js', // Name of the remote file
  exposes: {
    './Counter': './src/components/Counter', // expose each component you want 
  },
  shared: ['react', 'react-dom'], // If the consumer application already has these libraries loaded, it won't load them twice
}),

This is the main piece of configuration in order to share the dependencies of this second project with the first one.

Before consuming this second application from the first one, let's create the Counter component:

// src/components/Counter.js

import React from 'react'

function Counter(props) {
  return (
     <>
       <p>Count: {props.count}</p>
       <button onClick={props.onIncrement}>Increment</button>
       <button onClick={props.onDecrement}>Decrement</button>
     </>
  )
}

export default Counter

This is a very common example but the point here is to show how can we use this component and pass some props from the first application

If you try to run the second app at this point adding a basic index.js like what we did on the first application, you will likely get a message saying the following:

Uncaught Error: Shared module is not available for eager consumption

As the error says, you're eagerly executing your application. In order to provide an async way to load the application we can do the following:

Create a bootstrap.js file and move all your code from index.js to this file

// src/bootstrap.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello from second app</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

And import it in index.js like this: (notice we're using import() syntax here)

// src/index.js

import('./bootstrap')

Now if you run the second project at this point, you will be able to see the message Hello from second app

Importing Counter component to the first project

We will need to update the webpack.config.js file first, in order to consume the Counter component from the second app

// webpack.config.js (fragment)

...
plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      library: { type: 'var', name: 'app1' },
      remotes: {
        app2: 'app2', // Add remote (Second project)
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
...

The difference between this Webpack config and the other relies on expose and remote. Where in the first app, we expose the component that we want to take from the first app, so in this app, we specify the name of the remote app

We also need to specify the remoteEntry.js file from the remote host:

<!-- public/index.html (fragment)-->

...
<body>
  <div id="root"></div>
  <script src="http://localhost:3001/remoteEntry.js"></script>
</body>
...

Importing React component from a remote project

Now it's time to use the Counter component from the second project into the first project:

// src/bootstrap.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Counter = React.lazy(() => import('app2/Counter'));

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Hello from React component</h1>
      <React.Suspense fallback='Loading Counter...'>
        <Counter
          count={count}
          onIncrement={() => setCount(count + 1)}
          onDecrement={() => setCount(count - 1)}
        />
      </React.Suspense>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

We will need to lazy load the Counter component and then we can use React Suspense for loading the component with a fallback

That's it! You should be able to load the counter component from the first project

Conclusions

The possibility to load remote Webpack builds into your applications opens up a new world of possibilities for creating new Frontend architectures. It will be possible to create:

Micro Frontends

Since we can have separate bundles of JavaScript into separate projects, it gives us the possibility to have separate build processes for each application.

You will be able to have totally independent applications with the feeling of a single website. This allows big teams to break down into smaller and more efficient teams which will scale vertically from the Frontend to the Backend team.

This way we will have autonomous teams which won't depend on others in order to deliver new features

It could be represented like this:

Source Image

Design system incorporation at runtime

Currently, there are multiple ways to implement a design system at build time (npm/yarn packages, GitHub packages, Bit.dev) but this could represent an issue for some projects. Whenever you need to update some components from your design system, you will have to re-build your application and deploy it again in order to have the latest version of your design system in production.

With a design system at runtime, you will be able to get the latest version of your design system into your application without going through the build and re-deploy process of your entire application since you will get the components from a different origin and at runtime.

These two are just a few of the possibilities with Federated Modules.

Repository of the complete example

github.com/brandonvilla21/module-federation