Use ternaries rather than && in JSX
Many developers write code without really thinking about the side effects. There are minor differences found in computer science techniques that can have large impacts in production. One such case is the evaluation differences between && and the ternary operator. The ternary operator requires more explicitness than && because && does a truthiness evaluation where many different parameters could evaluate to true (or false, depending on the case).
Kent explains the nature of a production error he accidentally shipped into production at PayPal. The cause of the error was overly lenient evaluation of runtime conditions. It pays to be aware of the potential side effects of certain techniques. Being as strict as possible might be a bit more work on the development side, but could save many times the effort and pain of a production error.
Make Your React Apps Installable – How To Make Any React App a PWA
There is a certain allure to sharing your application source code between the web and mobile tiers. The rise of Progressive Web Applications means that applications that have relatively modest performance and usability needs can be made available on mobile devices in an easy manner.
This article by Aniruddh Mukherjee provides a clear, well-written guide on how you can convert your existing React application into a PWA. He covers the tools to use to validate PWA suitability along with helpful code you’ll need for service workers, display and layout, and offline usage. From my experience, this should take you 10-15 minutes to try it out.
Exploring Render Props Vs. React Hooks In 2020
Good software design principles lead one to encapsulate functionality and ensure that sections of code are only as smart and aware as they need to be. The concept of state in software programs means dealing with the elements that deal with events or user interactions. The application developer builds more resilient, useful components by separating out state from functionality.
The use of “hooks” is the modern answer to state separation. The Intelligencia talks of hooks everywhere. Hooks are a great tool for encapsulation and should be used when they make sense. At the same time, there are uses where the use of render props has advantages and should be considered. Miroslav wrote up his thoughts and examples where Render props might be the more useful technique.
Master the JavaScript Interview: What is a Closure?
It is one thing to be able to use software development techniques. It is another thing entirely to be able to explain a software development technique. Closures are an example of a technique used often, but explained poorly.
Eric Elliott explains JavaScript closures in depth in this article. Spend a bit of time with this article and I’m sure you’ll learn some helpful tips you can use to write better software.
What’s Deno, and how is it different from Node.js?
It’s a common story isn’t it? A project gets built and it takes off. The creator has a laundry list of lessons learned and things that would be different if only it wouldn’t put the newly sprouted ecosystem into disarray. Rarely do creators rebuild their projects.
Ryan Dahl created Node.js – one of the most popular servers on the planet. Naturally there are some things he wishes he approached differently. For the last 18 months Ryan has been hard at work on Deno, a secure TypeScript runtime built on top of V8. The core of Deno is built in Rust, a rapidly growing language offering some interesting benefits over the more traditional C++. Deno supports both JavaScript and TypeScript out of the box. Having TypeScript as a native citizen takes a bit of friction out of the process for developers.
One of the most dramatic changes in Deno as opposed to Node.js is the security model. Runtime code executes in a sandbox that has no access to Environment Variables, other Scripts, Network, and the File System. This approach will reduce accidental (and on-purpose) security issues. The LogRocket blog has a nice write up on Deno features and use.
Ryan expects a 1.0 version of Deno to be made available in a few months. This is one repo worth keeping an eye on.
Modern React testing, part 1: best practices
The golden dream is to have a React app with a full suite of automated tests. Then you could change whatever you want and be assured it’ll work. Testing can be complicated and it doesn’t help there are many options in the marketplace for JavaScript and React testing.
Artem wrote up a 4 part series covering modern React testing options. In this series, he covers Jest, Enzyme and React Testing Library to test React components. Depending on when you chose your own testing libraries and philosophies, you may be in need of a refresher. This series can help you understand the available options for testing React components so you can modernize your test processes.
What is Recoil exactly?
Recoil is a state management library for React apps. The architecture of Recoil is much simpler than Redux. Recoil has two components, atoms and selectors. During state changes, data flows from atoms, through selectors to the components.
At the date of this article, Recoil is in an experimental state. Thus, expect the source code to be incomplete, unsuitable for production use. The ideas present in Recoil are interesting and Recoil could end up being a much simpler state management system to understand and use in your React applications.
MDN Web Docs: 15 years young
The Mozilla MDN is a legendary repository of information for front-end developers. Starting in 2015, the MDN team embarked on a program to increase the value and usability of the site. In the last 3 years, the site had added 3,000 articles, and recorded over a quarter-million article edits. This massive amount of information contributes to the ongoing education of the JavaScript and front-end developer community.
This article discusses the findings and path to improvement taken on by the MDN Web Docs team. They were careful to track metrics and validate their work. The project included finding and removing large amounts of spam, analyzing and improving their browser compatibility sections, JSLinting all code samples, improving the beginner level material, and creating a really nice, responsive mobile layout.
Join us in congratulating the MDN team on their work to help grow our community and provide excellent, updated, resources so we can all write better apps.
Innersourcing – Bringing The Philosophy, Practice, And Culture Of Open-Source Inside Organizations
On a Recent React Wednesday episode we were joined by a panel of excellent open source developers and contributors to discuss how to scale internal development with processes and philosophy from open source. One of our guests has been responsible for creating an Inner-sourcing operation at a global media conglomerate for the last 3 years. His teams build and support many different applications used as part of a content supply chain process.
Using Inner-sourcing principles provided the groundwork for unprecedented code sharing and visibility across the organization. By creating an open organization and fostering a culture of learning and affirmation, the development teams were able to produce quality applications in record time. What’s more, is the developers were able to learn from each other because of the open nature of the work and the review process. The learning environment in place in the organization fostered collaboration across typical business and reporting lines. The net effect was a nimbler organization that could produce quality applications in minimal time.
During the broadcast we also spoke about the importance of open source culture, how to foster a good culture and how to be a good open source citizen. The article has time codes so you can jump around to the parts of the discussion most interesting to you.
