Let’s build an app with micro frontends together

Image for post
Image for post
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 large…


Introduce automatic visual testing for your UI

Image for post
Image for post

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 up React…


Automatically install missing typings

Image for post
Image for post
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

Image for post
Image for post

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 shared data to each service. …


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 based on microservice architecture, so you can divide the implementing graphs across multiple composable services. …


Introducing cross-browser testing, built on GitHub Actions

Image for post
Image for post
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:


Understand how polyfill works in your Babel configuration

Image for post
Image for post
Babel and polyfill

In front-end development, Babel and polyfill have become indispensable. However, some people argue they’re symbolic of black boxification, and it’s hard to know how they’re working in the build process and the differences between them.

In this piece, I’ll walk you through how polyfill works in a Babel configuration.

Example Repo

Here’s the example codebase on GitHub:

Dependencies

We’ll use these dependencies in this piece.

  • @babel/cli@7.12.10
  • @babel/core@7.12.10
  • @babel/preset-env@7.12.11
  • core-js-compat@3.8.1

Overview

1. What's Babel?
2. What's a polyfill?
3. What are the differences between Babel and a polyfill?
4. The process of injecting a polyfill in Babel
5. Does Babel handle all polyfills?
6. Why does IE11 crash in your app?
7.


Introduce Linaria to CRA, zero runtime CSS in JavaScript

Linaria homepage screenshot
Linaria homepage screenshot
https://linaria.dev/

CSS in JavaScript has been getting popular these days in front end development.

styled-components is one of the most famous libraries in CSS in JS, and it brought a great DX for a lot of developers, such as name collisions and vendor prefixing out of the box. But there are some issues with performance because of its parser.

When it gets rendered, styled-components:

  • Parses the components
  • Generates the CSS
  • Injects the CSS into the style tag in the HTML file

The whole process could make React render slower in some cases.

In fact, most apps will not even notice the performance issue unless there are a ton of components made up of styled-components. …


A simple tutorial using PHPicker with SwiftUI and PromiseKit

Screenshot of PHPicker
Screenshot of PHPicker
PHPicker

A new image picker was announced at WWDC 2020. PHPicker is the replacement for UIImagePickerController and has a lot of new features, such as:

  • Doesn’t require full Photo Library access
  • Search
  • Multiple selections
  • Zoon in or out

In this article, I will walk you through how to use PHPicker in a SwiftUI app.

Example Repo

Here’s the final code base on GitHub:

Dependencies

These are the dependencies in this app:

  • iOS14
  • Xcode12.0/Swift5.3
  • PromiseKit 6.13.2

Overview

We will implement this app with the following steps:

  1. Add PHPicker to SwiftUI.
  2. Handle asynchronous tasks with PromiseKit.

Let’s suppose that we will implement the functionality of picking a photo from the Photo Library and displaying it on a list. …


Hygen is an automatic code generator

Logo
Logo
Photo from Hygen.

In React development, if the number of files that make up a component keeps growing (e.g. Storybook file, tests file, CSS module), you will find that it’s a bit of a chore to create these by hand.

Imagine that one component has such a structure:

About

Manato Kuroda

Web Developer, TypeScript, React, React Native, Vue.js, Go, Swift, and Ruby on Rails

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