Let’s build an app with micro frontends together

Image by Author

In this article, I will walk you through how to implement a micro frontends app with single-spa and module federation in Webpack.

Example Repository

Here is the final codebase on GitHub:

Contents

Micro Frontends

Micro frontends have been around since 2016 in front end developments. In a nutshell, the idea of micro frontends is to break down the monolith app into smaller, easier to build, and more maintainable pieces.

That allows you to:

  • Deploy independently
  • Use multiple UI frameworks (React, Vue.js, and Angular) in one place
  • Decouple a piece of UI components from a…


Rendering with good performance

Pencil on envelope
Pencil on envelope
Photo by Jen Theodore on Unsplash.

In this article, I will walk you through how to implement list items without unnecessary re-rendering using Recoil.

Example Repo

Here is the reference for the final code base:

Set Up React App

To quickly start, we use create-react-app to set up the React app:

npx create-react-app reg-suit-app --template typescript

After installation, run the dev server by running this command:

yarn start

You will see the welcome page:


Implement a real-time application with GraphQL Subscriptions and Go

The words “GraphQL subscriptions with Go” on an abstract background
The words “GraphQL subscriptions with Go” on an abstract background
Photo by israel palacio on Unsplash , Altered by Author

In this article, I will walk you through how to implement GraphQL subscriptions with Go.

Dependencies

Required dependencies are as follows:

Server side

Frontend side

GraphQL Subscriptions

GraphQL subscriptions enable you to fetch data periodically without polling from clients. Subscriptions maintain an active connection via WebSockets and get you notified immediately after detecting updates.

Redis Stream

In version 2, Redis provided a Pub/Sub feature that can decouple publishers and subscribers. By using this, the publishers can send messages to any number of subscribers on a channel without a knowledge of what subscribers there are.

In version 5, Redis provides a new feature called Redis…


A simple tutorial to achieve real-time communication in your web apps

Image of city with title of article on it.
Image of city with title of article on it.
Photo by Manson Yim on Unsplash , Altered by Author

This post will walk you through how to implement WebSocket using Go and React.

Dependencies

Required dependencies are as follows:

Set up an API Server

First, we will make an API server with the echo package.

Add the following code to main.go:

It will respond to Hello, World! at http://localhost:8080, like so:


A guide to running parallel tests with Jest and CircleCI

Colorful sky
Colorful sky
Photo by Kristopher Roller on Unsplash.

This article will walk you through how to do test splitting with CircleCI and how to reduce the testing time in your app. It will also detail how to split frontend tests to improve the DX.

Here’s the final code base on GitHub:

Set Up React App

To quickly start, we will use the create-next-app to set up the React app:

npx create-next-app test-app

After the installation, run the dev server by running this command:

yarn dev

You will see the welcome page:


Introduce automatic visual testing for your UI

In this post, I will show you how to do visual testing using reg-suit.

Your app could have countless different states in components and layouts. Then it will be tough to find every UI change and you will lose track of how they are supposed to look.

To avoid that, automatic UI testing is necessary for your workflow.

reg-suit is a visual testing tool that allows you to:

  • Compare UI changes to the previous one
  • Check the report generated by HTML
  • Get notified in PR during CI services if UI changed

Example Repo

Here is the reference for the final codebase:

Contents

  • Set…


Automatically install missing typings

Photo by Kyaw Tun on Unsplash

In this article, I will walk you through how to automate the installation of TypeScript typings in a package.json.

TypeSync

TypeSync is a tool that allows you to install missing TypeScript typings.

When you execute the command, it will automatically add a typing package in the package.json, like so:


Introducing Managed federation

In the previous post, I introduced how to implement Apollo Federation in the Go application.

In this post, I will walk you through the Managed federation feature in Apollo Federation.

Example Repository

Here’s the final codebase on GitHub. main branch is a version of part-1. part-2 branch is used in this post.

Contents

Managed Federation

Apollo Federation is an essential architecture that allows your organization to scale GraphQL API with multiple implementing services in one graph.

It has its own gateway server which handles the request from the client-side and executes incoming operations across the services, like distributes…


Better GraphQL with Apollo in Go

The words “Apollo Federation in Go” against a background of a starry night sky
The words “Apollo Federation in Go” against a background of a starry night sky
Image credit: Author

In this article, I will walk you through how to implement Apollo Federation in Go, with a simple example. Here’s the final code base on GitHub:

What Is Apollo Federation?

Apollo Federation is a technology that allows you to compose multiple GraphQL services into a unified data graph.

Apollo Federation can expose one graph for all of the data in service without experiencing heavyweight development or a large code base like a monolithic architecture.

It enables us to collaborate with multiple teams on shared data and to separate concerns to work on any features without interfering with each other.

The idea of this is…


Introducing cross-browser testing, built on GitHub Actions

Photo by Michał Parzuchowski on Unsplash

TestCafe is an automatic E2E testing tool based on Node.js and supports a cross-browser platform.

In this article, I will show you how to do cross-browser testing with TestCafe on GitHub Actions.

Example Repository

Here’s the final codebase on GitHub:

Contents

Set Up React App

To start, we use create-react-app to set up the React app:

npx create-react-app testcafe-app --template typescript

After installation, run the dev server by running this command:

yarn start

You will see the welcome page:

Manato Kuroda

Web Developer, TypeScript, React, React Native, Vue.js, Go, Swift, and Ruby on Rails https://manatoworks.me/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store