Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
The Import On Interaction Pattern

tl;dr: lazy-load non-critical resources when a user interacts with UI requiring it

Your page may contain code or data for a component or resource that isn’t immediately necessary. For example, part of the user-interface a user doesn't see unless they click or scroll on parts of the page. This can apply to many kinds of first-party code you author, but this also applies to third-party widgets such as video players or chat widgets where you typically need to click a button to display the main interface.

Loading these resources eagerly (i.e right away) can block the main thread if they are costly, pushing out how soon a user can interact with more critical parts of a page. This can impact interaction readiness metrics like First Input DelayTotal Blocking Time and Time to Interactive. Instead of loading these resources immediately, you can load them at a more opportune moment, such as:

  • When the user clicks to interact with that component for the first time
  • Scrolls the component into view
  • or deferring load of that component until the browser is idle (via requestIdleCallback).

The different ways to load resources are, at a high-level:

  • Eager - load resource right away (the normal way of loading scripts)
  • Lazy (Route-based) - load when a user navigates to a route or component
  • Lazy (On interaction) - load when the user clicks UI (e.g Show Chat)
  • Lazy (In viewport) - load when the user scrolls towards the component
  • Prefetch - load prior to needed, but after critical resources are loaded
  • Preload - eagerly, with a greater level of urgency

Read more
Dockerizing a React App

Docker is a containerization tool used to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services. It also helps to eliminate environment-specific bugs since you can replicate your production environment locally.

This tutorial demonstrates how to Dockerize a React app using the Create React App generator. We’ll specifically focus on-

  1. Setting up a development environment with code hot-reloading
  2. Configuring a production-ready image using multistage builds

Read more
Gatsby vs Next.js: Which does SSG Better?
The battle you've all been waiting for!

Which does static site generation better? Next.js or Gatsby?

Next.js recently super charged its SSG capabilities with v9.3:

Gatsby has always been a SSG champion.

Let's see how they compare!

Watch video
Thoughts on Device Based Code Split in React

This article is a mix of arguments, reality checks and a code solution at the end. Its focus: device (touch/desktop) driven code split in React with no backend.

Often the road leading to an actual implementation is long and bumpy - priorities, design, budget, colleagues with their own views, talking in different languages. These obstacles are challenging and usually take more energy to deal with than just coding. For that reason they deserve a separate preface here.

Jump to the code section, if this is what you are looking for, otherwise let’s continue.

Read more
Supercharge Testing React Applications With Wallaby.js
Ever had to switch your focus from your editor and to your terminal to see the results of your tests? This article will introduce you to Wallaby.js — a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file. You will also learn how to use Wallaby.js for testing React applications.

Read more
Examples of large production-grade, open-source React apps

It’s bloody hard to find a good example of a large production-grade, open-source React app.

There are a few reasons for this:

  1. No one writes amazing code the first time they write it

    • Experienced product engineers know there’s a trade-off between quality and getting features in the hands of customers. You’re more likely to find ugly tech debt with a //TODO: Improve this later! comment than best practices
  2. Most companies keep their apps in private repos

    • Trade secrets and all that jazz.
  3. There’s a lot of beginner-grade repos out there

    • Without a ton of experience, it’s hard to tell the good from the bad

On that note, I’ve reviewed the following well-known open-source React apps, and reckon they’re worth checking out.

Read more
React video courses
Because I need to pay my bills 😉
Copyright © 2020 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp