Debugging with Flipper – React Native
The Flipper open source mobile debugging platform helps developers to visualize, inspect & control apps in a simple and intuitive manner. Flipper is backed by Facebook and is now a default integration in React Native. With Flipper, you can easily inspect the native layout, monitor the redux state, and test deep linking from a single tool.
One of my favorite uses of Flipper is in styling an application. With Flipper, you can update component styles without refreshing. This adds speed to the work of making your app look good.
Another developer experience improvement is the ability to inspect network requests. Where you may have used a proxy before, having this capability in the same debugging toll will take a bit more friction out of your life. We could all use less friction in our lives.
React Mental Models
Problem solving is so much easier when you have the right mental model. If your model is off, this creates a disharmony that must be overcome before you can effectively problem solve. Obed Parlapiano has been working on a blog post series to explain his mental models on how React functions.
His use of visual aids really helps to make these models come to life. If you take the time to read this post, and the ones that follow on the same topics, you’ll be a more efficient and happier React developer.
React Native for Microsoft Surface Duo
The Surface Duo is one of many dual screen devices expected to hit the market. I know what you are thinking, more fragmentation in tooling to support these new devices… but wait. The fine folks at Microsoft have released a new React Native library to simplify building for dual screen devices. React with React Native, is truly becoming the “One True Way” to build modern applications.
The library provides helpers to intuit the capabilities of the device like whether it is dual screen capable, whether the app is on one screen, or spanning both screens, and an event listener so your app can appropriately react to being spanned across both screens.
React Testing Library Mistakes
Who would know best how to use React Testing Library than Kent C. Dodds. He created it after all. Naturally, he sees a lot of folks who are learning how best to use the library but might be missing the mark. In this article Kent documents common mistakes developers make with the testing library.
By reading this article on common React Testing Library mistakes, you’ll be better at writing tests. More tests, less bugs. Less bugs, happier users. You are writing tests right??
GitHub update – Codespaces, discussion forums and more
Most developers wondered what would happen with GitHub once the Microsoft Acquisition happened. What was Microsoft wanting with GitHub? Would there be any updates?
It turns out Microsoft has come out strong and made some long-awaited improvements to GitHub. Project owners have been asking for discussion forums for a long time and for some reason the original GitHub team didn’t prioritize the feature. At the GitHub Satellite virtual conference, some great features have been announced.
Firstly, the discussion forums will finally arrive. This will make it much easier for project owners, contributors, and users to work together in a transparent fashion. A long-awaited feature we are excited to start using.
Also, GitHub Codespaces was announced providing a full cloud-hosted development environment based on Microsoft VS Code. Now developers can use these preconfigured environments without having to make changes to their local environment structure. Environment configuration clashes and set up time won’t be missed at all. Pricing is unknown and will follow the announcement shortly.
A11y & React
A11y, short for accessibility, is ensuring users with assistive or adaptive technology can use your application. This technology can be in the form of screen readers, magnifiers, or some other helper technology to help a disabled user properly use your app.
Unfortunately, A11y is commonly overlooked by developers who aren’t sure what to do. Neha Sharma recently did a good presentation on accessibility in React applications. It’s worth your time to make sure you are doing what you need to do to support accessibility.
React Re-rendering
Unnecessary renders in React cause extra work on the UI thread. This contributes to a poor user experience. With the right architecture, you can avoid unnecessary re-renders. This leaves the main thread of your application freer to do the important work.
Understanding React rendering and re-rendering is a necessary part of ever React developers tool box. Let Felix Gerschau refresh your memory on React re-rendering.
