This Week In React #97: React vs Solid, Headless Components, FS-structure, Remotion, Gatsby, React-Native, Expo, Skia, Vitest, Socket, Interop 2022...

React

Solid.js feels like what I always wanted React to be

Explains why Solid is simpler than React. Solid is reactive and directly updates the DOM (without virtual DOM). The render function is only called once, even if the state changes, and there are no stale closure issues. A good article to discover the differences between these 2 frameworks and discover Solid.

I find Solid really interesting. In the short term it can be a very good alternative to React for web apps. However, I am waiting to see the practical use of the innovations of React 18 because I think that the virtual DOM is interesting for the highly anticipated concurrent features.

Headless components in React and why I stopped using a UI library for our design system

Nir tells his story: from using React-Bootstrap and MUI to implementing an autocomplete from scratch, to ending up using a headless lib that encapsulates behavior and accessibility. A good intro to understand the interest of headless libs, which also lists the popular libs of the ecosystem.

Screaming Architecture: Evolution of a React folder structure and why to group by features right away

Johannes shows us how he gradually refactors his file-system structure to keep his app maintainable over time. An interesting line of thought. I don't think there is a one-size-fits-all solution that works for everyone. Personally I like fractal trees, and I would love for IDEs to offer a way to tag files.

What’s New at GatsbyConf 2022

Gatsby now offers an Image CDN that reduces build times and optimizes loading (Note: Netlify offers an equivalent). Other notable improvements announced: incremental deploys, full TypeScript support, GitHub Enterprise, trailing slash...

Hooks: React’s do-notation

For FP lovers. Devansh explains that you can convert each hook to a render-prop, but not the other way around. Hooks are just syntactic sugar to avoid the "callback hell". It is related to Haskell monads and the do notation. Show various interesting experiments like implementing conditional rendering, or using generator functions for hooks.

Extras:

• 📜 Building Pages in Storybook: Storybook is not limited to the design system and can also be used on full pages. You can mock data, and the new play() function seems useful to setup pages in edge cases.

• 📜 How to manage the useEffect dependency array like a pro?

• 📜 A Deep Dive Comparison Between useMemo And useCallback

• 📜 Hosting a React App with OpenFaaS

• 📜 Improving Web Performance with React Hydration Strategies

• 🧵 Sebastian Markbåge: "One day, React will switch to only ESM"

• 🐦 Classic vs Shorthand Props

• 🎥 Remotion + Fireship: nice intro to discover Remotion

• 🎥 10 React Antipatterns to Avoid: Fireship suggests to avoid some React anti-patterns. A good reminder.

💸 Sponsors

React Bricks: CMS with visual editing for Next.js, Gatsby and Remix, based on React components

Content creators don’t like the grey forms of a headless CMS.

Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?

React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.

You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.

Learn it in about 2 hours with the Step-by-step tutorial or the full Documentation.

Create your free account and start building now

React-Native

Expo: EAS Update Preview Progress

Expo shares its progress on EAS Update, the new Over-The-Air update system currently in preview. It is possible to associate a release channel with a Git branch and do continuous delivery. They also improved performance, security, and are working on a web UI to make it easier to use.

React Native + Github Action = ❤️

Offers a complete workflow to automate the build of React-Native apps. The build is triggered when a new GitHub release is created. There is a bit of work, but it shows that Fastlane may not be so essential anymore.

Extras:

• 📜 What makes Hermes engine (React Native) fast?

• 📜 How we made our React Native tests run 5x faster

• 🧑‍🎨 React-Native-Skia v0.1.105: animations, drop shadow...

• 🐦 Expo deprecating expo-app-auth

• 🐦 @margelo_io (Marc Rousavy) sharing interesting React-Native tips

• 📦 Stacks: a set of React-Native primitives to create your layouts. Encapsulates the practice of avoiding margins. v2.0 has just been released.

• 📦 react-native-reanimated-zoom

Partners

• Start React Native: learn everything about gestures and animations with William Candillon

• React-Native Weekly: stay up-to-date React-Native core updates

• TypeScript Weekly: the best TypeScript links every week, right in your inbox.

• ES.next News: learn about the latest in JavaScript and cross-platform tools

• Tailwind Weekly: all things Tailwind CSS, new issue every Saturday

• G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis

• Infinite Red: US React-Native experts making your idea a reality

• Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

Socket: Secure your JavaScript supply chain

New tool to detect supply-chain security vulnerabilities: compromised npm libs you use in your apps.

Offers a different and pro-active approach: rather than looking for known vulnerabilities, assumes that any npm package may be compromised and looks for indicators based on the history of packages that have already been compromised. A tool to adopt quickly, given the number of attacks of this type is increasing sharply. Read also:

• Introducing Socket

• What's Really Going On Inside Your node_modules Folder?

• Why Vulnerability Scanning Isn't Enough To Protect Your App

Interop 2022: browsers working together to improve the web for developers

The teams of the main browsers will work together in 2022 to improve compatibility on 15 areas of focus which are particularly painful for developers today. There's even a dashboard with a compatibility score for each browser. We find among others the cascade layers, color functions, viewport units, scroll, subgrid...

Extras:

• Vitest v0.6: a great innovation: In-source testing permits to co-locate the test in the source code file!

• Monorepos are changing how teams build software: Vercel gives 4 good reasons to adopt the monorepo

• The <selectmenu> HTML element: an upcoming HTML component could gradually replace <select>

• Future Javascript: ShadowRealms: TC39 moved to stage-3 recently. Allows to execute code in isolation

• Implementing Node.js URL parser in WebAssembly with Rust: interesting feedback: using Rust compiled in WASM did not improve performance of this Node.js API

• Jest --shard option, parallelize the tests on its CI

• WebGPU — All of the cores, none of the canvas

• SPAs were a mistake

• Steve Schoger tips on dark mode

• Progressive enhancement + dark mode switch

• How to add types for Object.fromEntries

• Introducing The XState CLI

• New to the web platform in February 2022

• Safari Technology Preview 141

• New CSS Features In 2022

• Can you get pwned with CSS?

• Parcel CSS 1.5

• "Chrome 99 rolled out this week, with Cascade Layers on by default."

• Web devs rally to challenge Apple App Store browser rules

• Thoughts On Markdown

• Flightcontrol: world-class deployment DX natively to your AWS

• Cloudflare: Steps we've taken around Cloudflare's services in Ukraine, Belarus, and Russia

• Renovated Home For WAPM WebAssembly package manager

• A new year, a new MDN

Jacob Hands ⠕ @jachands

web dev: It's simple! https://t.co/MYJIEUg13q