Optimize React projects with efficient schema validation techniques
Summary of my bookmarked links from Dec 16th, 2021
- Designing the perfect Typescript schema validation library
The link leads to a new TypeScript validation library called Zod. The author wanted a library that provides static type inference and a good developer experience, which existing options lacked. Zod aims to be a Typescript-first schema declaration library with correct inferred types, a composable API, and features missing from other libraries. It uses TypeScript generic inference, eliminates the need to manually sync static types and runtime validators, and operates on a "Parse, don't validate!" basis. Zod supports primitives, type inference, objects, arrays (including non-empty arrays), unions (nullable and optional types), intersections, object merging, tuples, recursive types, and function schemas.
- Building a single-page application with Next.js and React Router
Next.js and React Router have different approaches to routing in single-page applications (SPAs). Next.js has its own built-in page-based routing system, while React Router allows for flexible nested routing. However, Next.js can be challenging for implementing traditional client-side routing. Despite this, Next.js offers benefits such as dynamic imports for bundle splitting, easy deployment to Vercel, and code sharing between the client and server. The author of the post highlights Next.js's zero-config client-server codesharing as a significant advantage, enabling the creation of typesafe data layers. They also mention their library, trpc, which simplifies API development. The post further discusses the compatibility issues between Next.js and React Router and provides solutions for integrating them. The author emphasizes Next.js's rewrite feature, which allows URL remapping and enables the combination of server-side rendering (SSR) and client-side rendering (CSR) in a single application.
- Vercel, Next.js, and the war on SPAs
Next.js, a popular framework for React-based applications, presents challenges when building a classical single-page application (SPA) due to limitations in its built-in router. Unlike React Router, Next.js lacks flexibility in nesting routers and sharing data between routes. The official documentation provides minimal guidance, suggesting the use of a custom App. This discrepancy may be attributed to Vercel, the company behind Next.js, which favors server-side rendering (SSR) over client-side routing. While Next.js supports static site generation (SSG), it may serve as a strategic marketing move to attract developers who will eventually convert to paid plans. It is important to consider these factors when choosing Next.js for SPA development.
- Choosing a tech stack for my personal dev blog in 2020
The author discusses the challenges faced while building a personal website using a suitable tech stack. They emphasize the importance of using React and TypeScript for flexibility and access to libraries. The author prefers a good authoring experience with Markdown and seeks a solution that allows the mixing of React and Markdown. They highlight the benefits of static site generation for SEO and fast page loading. The author's chosen solution is to use Next.js, which integrates React and TypeScript seamlessly. They provide a breakdown of the project structure and explain the use of Markdown, frontmatter, and custom components. The solution also includes features like RSS feed generation, SEO optimization, and easy customization. The author shares a GitHub repository for a website starter/boilerplate called Devii.
- You probably don't need GraphQL
tRPC is a library that allows you to build end-to-end typesafe APIs without code generation by leveraging the power of modern TypeScript. It aims to simplify the process of implementing typesafe APIs by importing the type signature of your API directly into your client using plain import syntax. tRPC eliminates the need for over-engineered solutions like GraphQL for sharing API type signatures. With tRPC, you can make strongly typed API calls and benefit from features like end-to-end typesafety, easy nested fetching, and field selection in a TypeScript-native way.
- Why you should be doing schema validation in React projects
The article emphasizes the importance of data validation in client applications. It introduces Zod, a tool for defining and validating data schemas. The author demonstrates how to define a schema using Zod and validate data sets against it. Additionally, the article highlights the significance of validating network requests and user input data, showcasing how Zod can be integrated with React Hook Form for form validation. The use of schema validation, along with logging, alerting, and automated testing, is recommended to prevent common errors and ensure app security. The combination of Zod and React Hook Form offers a robust and user-friendly solution for data validation.
- Reflection in Typescript