In the beginning of time RPC (Remote Procedure Calls) was the standard way of communicating between remote services. Some time passed and REST (REpresentational State Transfer) took over as the king.

REST and JSON became popular because they made it easy to understand the communication between clients and servers, since JSON is easy for humans to read.

With the rise of Microservices and systems that are increasingly chatty, JSON became a considerable overhead. Transmiting data in a human readable format, as well as serializing and deserializing this data turned out to be very slow. For this reason, different teams started working in more efficient serialization formats (e.g. protobuf, thrift, etc). As part of this revolution, gRPC was born.

gRPC is a recursive acronym that stands for gRPC Remote Procedure Call. It’s a framework for that is supported by many programming languages and provides many features for advanced use-cases.

JDBI is a Java library that can be used to interact with a relational database. JDBI provides a more friendly interface than JDBC, which makes it easier to write code that is correct and safe.

Getting started

The easiest way to create a JDBI instance is by passing a DataSource:

1
2
3
final MysqlDataSource ds = new MysqlDataSource();
datasource.setURL("jdbc:mysql://0.0.0.0:3306/test?user=root&password=my-secret-pw");
final Jdbi jdbi = Jdbi.create(ds);

Once we have a Jdbi object we can use it to get handles. A handle represents an active database connection. Handles need to be closed once they are not needed, or the database might be overwhelmed by open connections. A simple example of using a handle to execute an insert operation:

JDBC (Java DataBase Connectivity) is a part of the JDK (Java Development Kit) that provides methods to interact with databases.

The api can be found under java.sql and javax.sql.

Connecting to a database

In order to communicate with a database we need to first stablish a connection. The preferred way to get a database connection is using a DataSource:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package example;

import com.mysql.cj.jdbc.MysqlDataSource;
import java.sql.Connection;
import java.sql.SQLException;
import javax.sql.DataSource;

public class JdbcExample {
  private static DataSource createDataSource() {
    final MysqlDataSource datasource = new MysqlDataSource();
    datasource.setPassword("my-secret-pw");
    datasource.setUser("root");
    datasource.setServerName("0.0.0.0");

    return datasource;
  }

  public static void main(String[] args) throws SQLException {
    final Connection con = createDataSource().getConnection();
  }
}

Dependency Injection

Dependency injection refers to a technique for building objects in an object oriented language. The idea of this technique is to abstract the process of creating an object from clients of these objects.

There are four roles in dependency injection:

• Client - This is an object that needs to use other objects to achieve a task
• Interface - The client doesn’t know which objects it receives, it interacts with those objects only through a known interface
• Service - An object that implements an interface. This object is passed to the client
• Injector - An object that takes care of constructing objects and passing them to clients

Bazel is a build system (analogous to make, ant, etc.) that promises better dependency analysis, faster builds and better reproducibility. One of the goals of Bazel is to make it easy to be extended to support multiple languages; Currently extensions exist for most of the popular programming languages.

Bazel is a fork of Blaze, Google’s internal build system, so it has been battle tested on very large codebases.

Installation

For up-to-date instructions, visit the official Bazel documentation

To install in Ubuntu based systems, we need to first register the software source:

1
2
3
4
sudo apt install curl gnupg
curl -fsSL https://bazel.build/bazel-release.pub.gpg | gpg --dearmor > bazel.gpg
sudo mv bazel.gpg /etc/apt/trusted.gpg.d/
echo "deb [arch=amd64] https://storage.googleapis.com/bazel-apt stable jdk1.8" | sudo tee /etc/apt/sources.list.d/bazel.list

And then install it:

1
sudo apt update && sudo apt install bazel

Canvas is an HTML element that can be used to draw graphics in the browser. The HTML element renders a rectangular area where we can draw using JavaScript. Adding a canvas to a page is as easy as:

1
<canvas></canvas>

https://jsfiddle.net/ex8u0rgc/

Drawing context

To draw on a canvas, we need to get a reference to the canvas’ drawing context. Here is an example of drawing a rectangle:

1
2
3
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.fillRect(0, 0, 50, 50);

React was designed with the mentality that parent components interact with their children by sending them props. This works in most scenarios, but not all.

Changing a prop in a child component will make it render in a different way, but it doesn’t allow us to tell the component to do something (trigger an event in a component). If we want to trigger an event in a component, we need to get a reference to it. Unfortunately, it’s not always easy to do this.

ref

The React documentation warns against the use of refs and suggests the use of props instead:

For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it.

In this article we are going to explore how to implement Google sign-in on a Golang server.

Google sign-in

When we talk about implementing Google Sign-in, we are referring to using the OpenID Connect protocol to verify a user is who they say they are.

I’m not going to go into the depths of the protocol, but in broad terms, these are the steps we care about:

• Client gets a JWT (usually with the help of a library provided by google)
• Client sends this JWT to our server
• Our server validates the JWT

In this post we are going to focus on the validation of the JWT.

In a recent article I gave an introduction to React. That article shows the first steps of building React components, but leaves us very far from building a useful web application. In this article we will learn how to create a real world application using Next JS.

Next JS

Next JS sells itself as the “React framework for production”. They promise smooth user experience combined with a rich set of features to build fast apps.

Environment set-up

To start an application from scratch we can use their generator:

1
npx create-next-app

We will be prompted for a name. I’ll use example for my app.

When the command finishes, we can start our app in development mode:

1
npm run dev

What we get out of the box:

• Compilation and bundling (Babel and webpack)
• Auto-refresh on changes
• Static Site Generation (SSG) and Server Side Rendering (SSR)
• Server of static files (Files under /public/)

React is without a doubt the most popular web component framework today. With the power of facebook backing it up, it has a lot of support and documentation behind it.

React by itself is not great for building web applications, but can be used with other tools or frameworks to build pretty much anything.

Environment set-up

Before we can start writing React components we need a web page where we want to use them. We’ll create a new folder for our project:

1
2
mkdir react
touch index.html