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

The React Newsletter

Hi <<First Name>>,
 
Adventures in static typing: React, Redux, Flow, oh my

One of the largest single-page apps at WeWork consists of roughly 140K lines of code. A myriad of React components connected with Redux (and Reflux, in some of the older, to-be-refactored parts), juggling data from various backend services, styled with different systems (CSS modules, Radium), sprinkled with dozens of utility libraries.

Managing a beast of such size is no small feat.

Enter static typing — a language feature known to reduce the number of times someone has to fix a critical bug in the middle of the night, swearing to never write a single line of code again. In recent years, type annotations gained popularity in the front-end world, thanks to the excellent tools like Flow and TypeScript.

The story that follows is one filled with tears of both joy and sorrow, as we’ve spent the last nine months annotating the app with Flow.

The biggest takeaway? Adding end-to-end static typing to a React/Redux app is a lot of work — you’ll run into issues with Flow, third-party annotations, duplication, broken types along the boundaries of decorated or exported components, and a severe lack of documentation on how it should all be wired together. Nevertheless, the end result will be an undoubtedly higher-quality codebase that’s easier to work with and is more secure.


Read more
 
React Hooks: Memoization

React Hooks make our life so much better in almost every wayBut the minute performance becomes an issue, things get slightly tricky. You can write blazing fast applications using Hooks, but before you do that, there are a thing or two that you should be aware of.

Should you memoize?

React is plenty fast for most use cases. If your application is fast enough and you don’t have any performance problems, this article is not for you. Solving imaginary performance problems is a real thing, so before you start optimizing, make sure you are familiar with React Profiler.


Read more
 
Tip Top Testing in JavaScript
In this talk we'll dive into the approaches and strategies needed to create a great unit test environment for your JavaScript and React applications. We'll examine what makes the perfect test, what to avoid, and how to use more complex features like mocks and spies to enable you to write tests more easily. We'll also look at some of the common pitfalls and mistakes people make that can really begin to hurt you as your test suite grows.

Watch video
 
Storybook 5.0

Welcome to the future of component development! We’re kicking off 2019 with Storybook 5.0 (SB5), our biggest release to date. Here’s what’s in it:

  • 🎨 Complete overhaul of Storybook’s developer experience
  • 💅 Theme-ready component library
  • 🛠 Evolved front-end architecture for addons
  • 🖼 Brand new Storybook website

Read on for a project update, tour of improvements, and upgrade instructions.


Read more
 
How to use React.js to create a Chrome extension in 5 minutes
Recently I have tried to create a Chrome extension that replaces new tabscreen with GitHub trending projects, and it got trending in Product Hunt. I built it using create-react-app and I would like to share how I did it, in 5 minutes.

Read more
 
Testing components with Jest and React Testing Library

Our Frontend team recently introduced React into a large scale SAAS product. By the end of the implementation we had about 15 live components including reusable ones like buttons and spinners, and larger ones that contained most of the app’s logic.

In order to allow for quicker development we chose to implement all of the components without any unit or integration tests. All of the components we wrote were replacing existing functionality which meant they all had end-to-end UI test coverage. We felt confident that these UI tests would be enough until we went back to write more in-depth coverage.
 

Deciding on Jest

Choosing Jest was quite simple. We did a quick comparison on a few React testing technologies and found that Jest would support our needs the best. It is officially supported by the Facebook team and a few key features such as mocking, parallelizing test runs, and snapshots seemed like they could help us with problems we experienced in the past. Once we got started on the implementation, the setup and config were extremely simple and the documentation was extensive. Our team discussed that we would need other utilities and libraries to help us specifically test React components. We briefly looked at using Enzyme but since the documentation and principles around React Testing Library looked so promising we didn’t explore Enzyme further.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp