Learning Patterns: Patterns for building powerful web apps with vanilla jаvascript and React (2022 Update)

Description

In this book, you will learn design patterns, performance and rendering patterns for building high-quality web applications using modern jаvascript and React. Patterns are time-tested templates for writing code. They can be really powerful, whether you're a seasoned developer or beginner, bringing a valuable level of resilience and flexibility to your codebase. Whether it's better user-experience, developer-experience or just smarter architecture, the patterns in “Learning Patterns” can be a valuable consideration for any modern web application. Design patterns are a fundamental part of software development, as they provide typical solutions to commonly recurring problems in software design. Rather than providing specific pieces of software, design patterns are merely concepts that can be used to handle recurring themes in an optimized way. Over the past couple of years, the web development ecosystem has changed rapidly. Whereas some well-known design patterns may simply not be as valuable as they used to be, others have evolved to solve modern problems with the latest technologies. Facebook's jаvascript library React has gained massive traction in the past 5 years, and is currently the most frequently downloaded framework on NPM compared to competing jаvascript libraries such as Angular, Vue, Ember and Svelte. Due to the popularity of React, design patterns have been modified, optimized, and new ones have been created in order to provide value in the current modern web development ecosystem. The latest version of React introduced a new feature called Hooks, which plays a very important role in your application design and can replace many traditional design patterns. Modern web development involves lots of different kinds of patterns. This project covers the implementation, benefits and pitfalls of common design patterns using ES2015+, React-specific design patterns and their possible modification and implementation using React Hooks, and many more patterns and optimizations that can help improve your modern web app! Overview of React.js Singleton Pattern Proxy Pattern Provider Pattern Prototype Pattern Container/Presentational Pattern Observer Pattern Module Pattern Mixin Pattern Mediator/Middleware Pattern Render Props Pattern Hooks Pattern HOC Pattern Flyweight Pattern Factory Pattern Compound Pattern Command Pattern Overview of Next.js Client-side Rendering Server-side Rendering Static Rendering Incremental Static Generation Progressive Hydration Streaming Server-Side Rendering React Server Components Selective Hydration Optimizing for the Core Web Vitals on a Next.js app Islands Architecture Optimize your loading sequence Static Import Dynamic Import Import on Visibility Import on Interaction Route Based Splitting Bundle Splitting PRPL Pattern Tree Shaking Preload Prefetch List Virtualization Conclusions