Optimize React projects with efficient schema validation techniques

Links

• 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

  Typescript Reflection, unlike its counterparts in languages like Java and C#, is limited in functionality. While Javascript introduced Reflect, it lacks strong typing and features like interfaces and abstract classes. Typescript does offer classes, interfaces, and strict types, but its reflection capabilities are not as robust as desired. By leveraging reflect-metadata and emitDecoratorMetadata, developers can access function argument and return types through decorators. However, this approach has limitations and restricts the usage of metadata without decorators. Overall, Typescript Reflection falls short compared to other languages, with limited use beyond dependency injection tools.