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.🧵 Sebastian Markbåge: "One day, React will switch to only ESM"
🎥 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:
🧑🎨 React-Native-Skia v0.1.105: animations, drop shadow...
🐦 @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.
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:
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
--shardoption, parallelize the tests on its CI"Chrome 99 rolled out this week, with Cascade Layers on by default."
Flightcontrol: world-class deployment DX natively to your AWS
Cloudflare: Steps we've taken around Cloudflare's services in Ukraine, Belarus, and Russia
