farmdev

Thoughts on React

The Art of UI Skeletons

A skeleton screen is a technique of rendering placeholders for text, numbers, and other parts of a UI that haven't yet loaded. As a user interacts with the UI, they immediately see the illusion of new screen states—the skeleton—and this makes the app feel very fast. The skeleton layout is typically animated in some way to convey that data is still loading.

My team at Mozilla built addons.mozilla.org with skeleton screens for all loading states. This article covers some of the details about the techniques and approaches we took and some gotchas. It focuses more on the concepts rather than the implementation...

read article

Why Server Side Rendering In React Is So Hard

React first emerged as a powerful way to build living, breathing client side web applications. When my team at Mozilla set out to build a React frontend for addons.mozilla.org in 2016 we knew we needed server side rendering (SSR) for SEO and performance but we underestimated how much of a challenge it would be.

This is a deep dive into how SSR is fundamentally different from what React was designed for...

read article

Safer Unit Testing in React with TypeScript

I hear a lot about how static typing makes JavaScript safer but what about its influence on code architecture? As someone who has worked extensively with dynamically typed languages, I was surprised to realize that type safe applications can be written in entirely new ways.

I'd like to illustrate a fast and effective unit testing strategy that is only possible once you have type safety. I'll be talking about React in TypeScript but this may apply to similar realms...

read article