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

Sebastien Lorber - Mar 9 '22 - - Dev Community

Hi everyone!

New: LinkedIn page + Twitter community: feel free to join/follow to give me an initial boost 😉. I intend to share more informal content there, not always suitable for this newsletter.

React 18: new RC + blog post were just published 😅 too late for me for this week, I have to send the issue.

This week I found the React vs Solid article really interesting. The one on do-notation too (but requires some FP knowledge).

Nice video intro to Remotion in a 10 minutes video.

A new Vitest feature allows you to co-locate a test with its source code in the same file. It's not going to please everyone 😏 but I love it 😍.

Issues of the React repo (among others) were spammed by pro-Russia supporters who didn't appreciate the Ukraine support banner on the website.

🙏 Support the newsletter:

If you like this newsletter, subscribe in priority there:

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:

💸 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:

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:

Capture d’écran 2022-03-09 à 09 49 18

Image
Beyond boring 🙄 markdown rendering with LLMs ✨ and React ⚛️

frontend, llm, react, chatgpt
Image
A Cheat Sheet For The Ultimate For Asbestosis Settlement Amounts
Image
Bakemate- Where Every Biscuit Tells a Story

biscuitmanufacturer, biscuit, deliciousbiscuits, deliciouscookies
Image
The Top Filtered Coffee Makers Gurus Do Three Things
Image
Choosing the Right Online Video Platform for Your Business
Image
Introduction to Software Testing

testing, softwaretesting, qa, beginners
Image
How to start Next.js with express
Image
Docker Commands for Beginners and Pros

docker, devops, aws, containers
Image
Deep Learning in Computer Vision and NLP: From Neural Networks to Model Deployment
Image
Deep Learning in Computer Vision and NLP: From Neural Networks to Model Deployment
Image
Building a React CRUD App with a FastAPI

react, fastapi, crud
Image
Transferring SSH Keys (`id_rsa` and `id_rsa.pub`) to a New System
Image
A Comprehensive Journey: Building and Deploying a Machine Learning Model with SageMaker
Image
Oracle to Snowflake Migration: Steps, Challenges & Best Practices

datascience, dataengineering, tutorial, learning
Image
10 Essential Lombok Annotations Every Java Developer Needs to Master!

java, springboot, beginners, programming
Image
How to create a typography component with variants with Astro JSand Tailwind CSS

astro, tailwindcss, webcomponents, typography
Image
How a Spouse Visa Solicitor Can Assist You through the Application Procedure

spousevisa, applicationprocedure
Image
Reset password mailer implementation in rails 7 api, devise_token_auth, and sendgrid-ruby.

sendgrid, devise, rails, forgotpassword
Image
Transform Your Workouts: The Science Behind Pre-Workout Supplements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .