What React 17 Means for DevelopersThe top goal of React version 17 is to be easier to update. The React core team has made upgradeability a primary focus for the library and we are fans of the approach. The React ecosystem has grown by leaps and bounds and as such many React developers have complex apps in production on older versions of React. As the React library evolves, it would impose upgrade complexity on these older version users. TJ VanToll from Telerik wrote up what React 17 Means for Developers. |
Announcing TypeScript 4.0TypeScript is a hugely popular library. Many software developers prefer the syntactical sugar in TypeScript over natural JavaScript. The TypeScript team recently released TypeScript 4.0 with no breaking changes! (Thanks TypeScript team!). React Application Concurrency, Main Thread Scheduling, And The React Scheduling API |
| We spoke with Matan Borenkraout about React Application Concurrency, Main Thread Scheduling, and how the React Scheduling APIs work. Complex React applications must be very careful with how they utilize the main user interface thread as it’s a single thread that needs to be able to run 60 frames per second for a smooth experience. This is an important topic for the Enterprise React developer. This could be a dry topic, but thankfully Matan prepared a very interesting demonstration of how code can block the UI and how to use the Scheduler APIs to solve that. During our broadcast, we spoke of the conditions that influence poor app performance, software techniques to use to solve UI issues, and the mechanisms of the Scheduler APIs. Accessibility In Chrome DevTools |
Chrome DevTools has a lot of functionality to help software developers improve accessibility. Some of these features are not well-known yet. One example is the Contrast Ratio feature that adjusts the display to simulate less-than-perfect viewing conditions. Another feature is the Accessibility Inspector. This helps to validate the ARIA attributes and computed accessibility properties. Using a tool to do this will help ensure your application is a11y compliant.Getting Started with Adobe’s React Spectrum |
| Adobe’s React Spectrum is a free and open-source set of libraries to build out a fully featured design system with React components. We spoke with the React Spectrum team on a recent React Wednesday to learn about the libraries and philosophies. I wrote this up here [insert link] The impressive part about these libraries is how they were architected to use independently. This means you can use the React Aria library to get fully featured accessibility in your own, built-from-scratch component set. You’ll use the expertise, and testing from Adobe, but have your own custom-built component set. Same with the React Stately library – get all the behavior of the component, without having to use someone else’s design opinions. Adobe’s React Spectrum libraries should be the first stop before you build out your own custom component set. You’ll get to work on the custom parts without having to spend time and resources on all the important, but non-visual stuff. This article by Nathan Sebhastian explains how you can take your first steps with Adobe’s React Spectrum libraries. Refactoring a Redux app to use Recoil |
| Recoil is the exciting new state management library for React applications. Many developers have existing applications using Redux and may want a bit of help understanding how to migrate towards Recoil. Ohans Emmanuel wrote a detailed blog post on the LogRocket blog showing how to refactor existing Redux code into Recoil. His article highlights 3 different React app examples. Each example highlights a different use case and helps to reinforce the refactoring concepts. If you are considering a move to Recoil, this article will help you understand the steps you should take, and also which areas of your application need the most attention. Build A Confirmation Modal in React with State Machines |
| Robot and XState are both state machine libraries you can use in your React application. The concept of a state machine is a bit abstract, though in this article Dave does a good job making the topic relatable and fun. I especially enjoyed his diagram on traffic lights. Dave walks you through the concepts of a state machine and also how to implement one in your application. There is plenty of concise code examples along with explanation. When you finish this article, I’ll bet you can see where you could use a state machine in your React application to implement concepts in a much cleaner and more maintainable fashion. Video: How To Save React State On Page Refresh |
| Rahsheen Porter posted a video explaining why page state disappears if the page refreshes. More importantly, Rahsheen explains what you do to preserve state in this case. In this video, he walks you through an example application where state disappears on page reload. Then, he shows you step by step how you can fix this issue so that state is preserved. |
