Top 7 Libraries for Blazingly Fast ReactJS Applications

Links

• Don’t Fucking Deploy on Friday

  The importance of avoiding deployments on Fridays is emphasized due to the potential risks and negative impact on team members' weekends. However, this practice highlights a larger issue: the lack of safety in making changes. To achieve reliable and efficient deployments, significant investment is required, including extensive automated testing, clean code, and reliable build and deploy systems. It is crucial to decouple release and deployment processes and prioritize the pursuit of bulletproof deployments. While deploying on Fridays is challenging, it can be done successfully with proper preparation and consideration for team dynamics and ongoing incidents.

• Uber Architecture and System Design

  This article discusses the architecture and system design of taxi applications like Uber. It explains how Uber's system has evolved from a monolithic architecture to a service-oriented architecture. The article also highlights the importance of the dispatch system, which relies on map and location data. Uber uses the Google S2 library to represent location data on a three-dimensional sphere, allowing for efficient spatial indexing and query operations. The article further covers topics such as scaling the system, handling traffic, and Uber's geospatial design. Additionally, it mentions the databases used by Uber, analytics for optimizing the system, and fraud detection measures.

• React State Management best practices for 2021 (aka no Redux)

  Redux has been a popular choice for state management in React applications, addressing the prop drilling issue and ensuring state integrity. However, it comes with drawbacks such as verbosity, potential performance issues, and the inability to replicate local state. Instead, you can utilize React contexts and custom hooks to achieve similar results locally. Contexts provide a way to store values accessible by child components without prop drilling, while useReducer allows for local state management with reducers. By combining useContext and useReducer, you can effectively handle state in a maintainable manner, overcoming the limitations of Redux.

• 7 Powerful JavaScript Shorthands That You Should Know

  This article provides a list of useful JavaScript shorthands to speed up the coding process. It covers various shorthands such as converting strings to numbers using the unary operator '+', using the ternary operator for conditional statements, employing short-circuit evaluation, flattening arrays with the 'flat()' method, merging and cloning arrays with the spread operator, using the shorthand 'for...of' loop, and utilizing arrow functions. These shorthands help developers write concise and efficient JavaScript code.

• Practical introduction to algebraic datatypes (ADTs) in TypeScript

  Product types and sum types, also known as Algebraic DataTypes (ADTs), are powerful concepts in TypeScript that enable expressing ideas at compile time. Product types, such as tuples and records, are containers for other types with fixed fields, ensuring type safety. On the other hand, sum types, achieved through union types, represent containers of possibilities. By using pattern matching, developers can handle different cases based on the response received. Refactoring complex if-else scenarios into pattern matching over tagged unions leads to cleaner and safer code. Libraries like ts-pattern and fp-ts provide advanced tools for working with ADTs and functional programming in TypeScript.

• JavaScript interview questions. Answered by me.

  The article describes a graduate student's experience practicing JavaScript interview questions from Microverse. It covers various topics such as wrapping JavaScript code in a function block, the significance of using "use strict," NaN, closures, cloning objects, adding elements to arrays, the difference between undefined and not defined, checking if an object is an array, function hoisting, how "this" works, prototypal inheritance, IIFE, null, undefined, and undeclared variables, the difference between .forEach and .map(), anonymous functions, function Person(), .call and .apply, Function.prototype.bind, Ajax, attributes vs. properties, == vs. ===, leaving the global scope untouched, single-page apps and SEO, promises vs. callbacks, debugging techniques, iterating over object properties and array items, mutable vs. immutable objects, synchronous vs. asynchronous functions, the event loop, let vs. var vs. const, ES6 class vs. ES5 function constructors, higher-order functions, the Document Object Model (DOM), function scope vs. block scope, and coercion in JavaScript.

• 3 Things I Learned Writing 300+ Tests in a Month

  In this blog post, the author reflects on their experience of inheriting an app with minimal testing coverage and shares insights gained from improving the situation. They emphasize the importance of considering testing during implementation, highlighting the benefits of dependency injection and extracting strings into constants for easier test maintenance. The author also discusses the idea that 100% test coverage may not always be necessary and explains the challenges of testing frontend code compared to backend code. Despite the complexities, the author encourages the practice of unit testing and shares personal satisfaction derived from it.

• Microfrontends: Which Framework to Use?

  When it comes to choosing a framework for implementing Microfrontends, the constant influx of new options can be overwhelming. Traditionally, server-side composition was the go-to approach, but now we have build-time and run-time compositions. Single-SPA and Module Federation are two well-known frameworks for run-time composition. At Zulily, a mix of server-side, build-time, and run-time compositions is used to achieve greater autonomy and domain ownership. While both frameworks have challenges, Module Federation faces compatibility issues with create-react-app (CRA) and is still in an alpha phase. As of August 2021, Single-SPA is considered the safer choice for teams relying on CRA.

• Reduce React re-renders with mlyn.

  This article discusses a problem in React applications where a component updates state that needs to be displayed in a different part of the app. The traditional solution involves passing the value through component hierarchies. However, the article introduces a solution using proxy values called subjects. By creating subjects and subscribing to them, only the necessary components are re-rendered when the value changes. The code examples demonstrate the migration from the traditional approach to using subjects in React. This approach simplifies the updating process and reduces unnecessary re-rendering.

• Why Monitors are Counterproductive for Coders

  Using external monitors may seem beneficial for productivity as they increase the amount of data visible to users. However, this article argues that having more code on the screen can actually hinder productivity. The human brain can only retain a limited number of mental items, so reducing the amount of data in view helps maintain focus and enter a productive flow state. Long methods and excessive code on the screen decrease readability and contradict Clean Code principles. While there may be some advantages to using external monitors, such as reading logs or visualizing data, the disadvantages include wasted mental energy from frequent focus switching and potential sleep disturbances from increased exposure to blue light. The author personally prefers working on a MacBook without an external monitor and remains productive. External monitors may be necessary for certain situations, such as computers with small or no built-in displays or for individuals with vision problems. However, for most people, it may be more beneficial to limit the amount of code on the screen for improved focus and productivity.

• Web Application Architecture

  Web application architecture refers to the arrangement of components within a web application and their interactions. It encompasses the relationship between application components, middleware systems, web services, and databases. This architecture enables multiple applications to work together simultaneously, serving end users. Components such as user agents, DNS, load balancers, virtual machines, web servers, databases, caching services, content delivery networks (CDNs), external storage, web services, and data warehouses play crucial roles. Best practices include efficiency, flexibility, reusability, testability, scalability, security, and reliable code structure. Additional resources on the topic can be found in the provided links.

• Micro-Frontend Architecture With React

  Micro-frontend architectures break down front-end apps into smaller, semi-independent "Micro Apps" to enhance project manageability. This article explores implementing micro frontends, their benefits (independent deployments, smaller codebase, and independent teams), and downsides (performance, code duplication, and increased complexity). The author provides a GitHub repository with starter code for implementing micro frontends using a container app and multiple micro apps. The article highlights the use of Cam Jackson's MicroFrontend component to fetch the asset-manifest.json and render the micro frontend. Overall, it offers an overview of micro-frontend implementation and considerations for adoption.

• Storytelling for Frontend Engineers

  This article explores the concept of storytelling in interface design, focusing on how to make components communicate effectively. The author demonstrates this through the example of a number control component, discussing the stories that buttons can tell and the ways to enhance their storytelling capabilities using hover effects, active states, and animations. The importance of aligning animations with real-world physics and creating intuitive user experiences is emphasized. The article concludes by encouraging designers and frontend engineers to consider the stories that components themselves want to convey.

• React + Appwrite = 🔥

  Appwrite is an open-source backend server that offers a range of features and APIs, including authentication, database management, storage, and cloud functions. It can be easily integrated with React and provides benefits such as no cost, usage statistics, extensive API support, task management capabilities, and strong community support. The installation process involves running a Docker installer tool, creating a project, and noting down important information from the Appwrite console. React setup requires installing dependencies like Appwrite and react-router-dom. Overall, Appwrite simplifies backend development and supports various frameworks and platforms.

• Finally a better react.js folder structure

  The article discusses the folder structure for a React.js application. React.js is a library for building user interfaces. The structure includes various directories such as "storybook" for configuration, "public" for static files, "src" for source code, "constants" for generic constants, "helpers" for reusable functions, "layouts" for common top wrapper components, "pages" for page components, "routes" for dynamic route configuration, "schema" for form validation schemas, "service" for HTTP request functions using Axios, "store" for Redux files (actions, reducers, selectors), "styles" for styled components and global styles, "config" for configuration files, "App.js" as the main container component, and "index.js" for rendering the application. The provided GitHub repository link contains a React boilerplate.

• React Split Components: A new way of Function Components without Hooks

  React Split Components (RiC) is a design pattern that addresses the counter-intuitive nature of functional components and the complexity of hooks in React. It leverages closure to eliminate the need for wrapping hooks, allowing developers to write more intuitive, pure JavaScript code similar to Svelte. RiC doesn't require ESLint support and doesn't rely on any external libraries. By using RiC, developers can achieve a natural, simple, and intuitive coding experience. Check out the GitHub repository for more details and code examples: [github.com/nanxiaobei/react-split-components](github.com/nanxiaobei/react-split-components)

• 10 Visual Studio Code Extensions that Help You Get Rid of Technical Debt

  Improve team productivity by addressing technical debt and automating processes. Refactoring and tech debt tools like Glean, Stepsize, JavaScript Assistant, and Abracadabra enhance code reworking and management. Plugins such as TODO Highlight, Todo Tree, and Comment Anchors help track tasks and enhance code navigation. New Relic CodeStream integrates collaboration and code review features into Visual Studio Code. Automation tools like SonarLint provide real-time bug and vulnerability analysis, while Code Runner allows running code snippets in various languages. These tools can streamline development workflows and boost productivity.

• Micro-Frontends From the Begining to Expert

  The Module Federation Framework is recommended for new projects to enable microfrontends. By learning Webpack and creating custom configurations, you can avoid limitations imposed by Create React App (CRA). The provided articles explain how to build websites with Webpack and develop microfrontends using Module Federation. The first article demonstrates creating a React app boilerplate without CRA, while the second article offers a hands-on project using Node.js. Subsequent articles cover topics such as React microfrontends, Webpack configurations, deploying to AWS S3, configuring S3 for web hosting, and adding CloudFront distribution and a domain. Additional resources can be found on the author's sites and repositories.

• If You Want Senior Developers, Then Expose Juniors to Senior Code

  The article discusses the misconception of "writing code juniors understand" and emphasizes the importance of exposing junior developers to senior-level code. It argues that continuously simplifying code for juniors hinders their growth and keeps them from developing necessary skills. The article presents examples of code implementations by junior, mid-level, and senior developers, highlighting the differences in their approaches and code quality. It emphasizes the value of senior developers in writing clean, maintainable code, providing extensive documentation, and prioritizing easy debugging. The article concludes by encouraging the exposure of juniors to senior code through code demos and knowledge sharing.

• Two-way data binding in Vanilla JavaScript without Angular or React

  This article introduces the concept of two-way data binding in frameworks like Angular and React and demonstrates how to achieve it using vanilla JavaScript. The approach involves creating an object's property with getter and setter functions using `Object.defineProperty`. Examples are provided for updating data on input value change and updating input value when data changes. By implementing the provided code snippets, two-way data binding can be achieved in JavaScript without relying on a specific framework.

• 8 Amazing Tools to Double Your Coding Productivity in 2021

  The article discusses various tools that can enhance productivity and improve coding efficiency. Timely tracks and analyzes your time usage, revealing areas of improvement. CodeStream integrates collaboration tools into your IDE, eliminating context switching. Github Copilot leverages AI to provide code suggestions and automate repetitive tasks. Tuple offers superior pair programming features for Mac users. F.lux adjusts screen brightness to protect sleep cycles and eye health. Cold Turkey blocks distractions for focused work sessions. Notion is a versatile note-taking app with customizable features. Habitica gamifies tasks, allowing users to level up and earn rewards.

• We abandoned npm install, maybe you should too

  This blog post discusses the benefits of using a JavaScript monorepo and provides a step-by-step guide on how to create one using Rush.js. The author shares their experience at Strise, where they initially faced challenges with multiple applications and libraries distributed across separate repositories. They highlight the issues with publishing, discoverability, and refactoring in a multirepo architecture. To address these problems, they adopted a monorepo approach with Rush.js. The post explains the key features of Rush.js, such as automatic local linking, single dependency installation, parallelization, and phantom dependencies. The author also provides a GitHub repository with a working example and outlines the setup process in six steps. Overall, the post offers insights into the benefits and implementation of a seamless JavaScript monorepo using Rush.js.

• Applying SOLID To React

  This article serves as a quick reference guide on applying SOLID principles to React+Typescript projects. It discusses the single-responsibility principle, emphasizing that components should have a specific purpose and separate concerns. The open-closed principle is addressed, highlighting the importance of using composition and creating extensible components. The Liskov substitution principle emphasizes the use of TypeScript for ensuring components can be easily swapped. The interface segregation principle advises keeping interfaces small and relevant to the component's needs. Lastly, the dependency inversion principle suggests depending on abstractions rather than specific implementations, demonstrated through an example using axios. The article concludes by encouraging developers to apply SOLID principles selectively and conduct further research.

• 5 Packages to Optimize and Speed Up Your React App During Development

  Optimize your React app during development by utilizing these packages to avoid issues in production. "Why Did You Render" helps identify avoidable re-renders, "Source Map Explorer" analyzes build size and dependencies, "Redux Immutable State Invariant" detects state mutations, "Bundle Size" keeps your bundle size in check, and "Immer" provides efficient state mutation handling, particularly in Redux. These packages aid in identifying and resolving issues early on, ensuring a smoother app experience. Remember, they are intended for development use only.

• Revenge By a Programmer For Not Getting Salaries For 3 months

  In this cautionary tale, a programmer named Paul joins a startup as its first developer. Despite his warnings about allocating more funds for technology, the inexperienced founders ignore him and hire other employees instead. After a year of hard work, the founders reduce the number of developers, leading to increased pressure on the remaining team members. When Paul fails to meet their expectations, they stop paying his salary and eventually fire him. In retaliation, Paul deletes crucial data, forcing the founders to pay him five months' worth of unpaid salary to restore it. While Paul's actions may be seen as justified, legal channels are recommended to resolve such issues.

• Microservices are Dead — Long Live Miniservices

  This article challenges the notion of using microservices and introduces the concept of "miniservices." The author argues that many developers mistakenly refer to their services as microservices when they are actually closer to REST APIs. The key distinction is that microservices should be decoupled from the client, which is not achievable with REST alone. The article suggests using asynchronous messaging, facilitated by a message bus, to achieve true decoupling. The benefits include reactive architecture, easier scalability, minimal impact when adding new services, and improved resilience. The article concludes by emphasizing that microservices are not always the ideal choice, and it's essential to consider the trade-offs and suitability for each architecture.

• My Take on Firefox Dropping the PWA Support

  Firefox, in its latest version (Firefox 85), has introduced a feature to protect against supercookies, signaling a move towards prioritizing user privacy. However, in doing so, Firefox has removed a crucial feature of Progressive Web Apps (PWAs) called Site Specific Browser (SSB). Despite this change, PWAs still offer advantages such as compatibility, responsiveness, app-like interfaces, automatic updates, and safety. Comparing PWAs to native and web apps, PWAs do not require installation but can be added to the home screen. While the removal of SSB may not have a significant impact on the overall PWA landscape, it raises concerns about potential feature restrictions by other browsers.

• I instructed GitHub Copilot to code an Instagram profile feed in React. Here’s what happened.

  GitHub Copilot is an impressive tool trained on billions of lines of code. A frontend engineer took it for a spin to see if it could solve day-to-day problems. Starting with a Next.js setup, they aimed to create a UI with stacked images, infinite scroll, and state management. Copilot provided accurate suggestions for a Tile component and a Feed component, with some CSS tweaks. While it didn't generate the logic for infinite scroll, it correctly handled useState and useEffect. After a few hints, the engineer achieved pagination and observed the button with IntersectionObserver. Though not perfect, Copilot shows promise for automating mundane tasks.

• The Most Sticky React Hook you will ever make

  This custom React hook allows you to store state in the local storage, enhancing the user experience in applications with forms. By utilizing lazy initialization, the hook checks for a value in the local storage. If found, it uses that as the main value; otherwise, it uses the initial value provided. The state value is synchronized with the local storage using the `useEffect` hook. An example of a simple counter implementation is given, where each increment updates the counter value in the local storage. This hook provides a convenient way to persist and retrieve data in React applications.

• Build a PWA with Next.js to Achieve 100% in Google Lighthouse and Next.js Analytics

  This article discusses the process of upgrading a Next.js application to the Next.js 12 framework, focusing on achieving top rankings in Google Lighthouse and Next.js Analytics. The author explains the new features introduced in Next.js 12 and provides instructions for upgrading the application. They also mention the usefulness of WebPageTest.org for optimizing web application performance and address security concerns by implementing HTTP security headers. The content covers various aspects of performance optimization, including Content Security Policy, caching, favicon compression, and testing the application with Google Lighthouse and Next.js Analytics.

• Introducing Plasmic, the visual page builder for Next.js

  Plasmic, a no-code visual page builder, is now available to Next.js developers. With a focus on Next.js codebases, Plasmic allows designers, content creators, and more to easily create and publish pages or parts of pages. It offers total visual control, allowing users to build sites from scratch without writing code and providing production-grade CSS. Developers can override, attach logic, and integrate data, while continuing to use their existing workflow. Plasmic also enables direct import of designs from Figma. The tool aims to empower teams and bridge the gap between non-technical audiences and the Jamstack ecosystem.

• Why Go and not Rust?

  In this article comparing Go and Rust, the author discusses the strengths and use cases of each language. They highlight that both languages are excellent but have different advantages. Go is well-suited for writing microservices and has great support for HTTP and related protocols. It is known for its simplicity, ease of learning, and efficient concurrency model. On the other hand, Rust excels in areas like static memory management and provably-correct concurrency. While Rust may be better for web services, Go's clarity and ability to suppress complexity make it a compelling choice for enterprise software development.

• Top 7 Libraries for Blazingly Fast ReactJS Applications

  This article introduces seven essential libraries for enhancing the performance and code quality of React applications. The first library discussed is React Query, which efficiently manages server state and reduces the need for state management libraries like Redux. The second library, React Hook Form, optimizes form handling and integration with modern UI libraries. React Window is recommended for rendering long lists by displaying only the visible items, improving overall application performance. React LazyLoad enables lazy loading, loading components only when necessary. "Why Did You Render" helps identify unnecessary rendering, aiding in performance issue detection. Reselect is a valuable tool for optimizing Redux by selectively passing necessary data. Lastly, Deep Equal is a library for efficient object comparison, improving memoization performance. These libraries are highly recommended for maximizing React application performance.

• The BFF Pattern (Backend for Frontend): An Introduction

  The Backend-for-Frontend (BFF) pattern provides numerous benefits for developing microservices-based applications. When building an e-Commerce app with microservices, the BFF acts as an intermediate layer between the frontend and microservices, reducing the logic and resource usage on the frontend. It retrieves data from relevant microservices, formats it according to frontend requirements, and sends the formatted data to the frontend. By using a BFF, the frontend remains simplified, resulting in streamlined data representation and improved efficiency. Multiple BFFs can be employed for different UIs, optimizing data consumption. BFFs offer advantages such as separation of concerns, easier maintenance and modification of APIs, enhanced error handling, parallel backend calls, improved security, and shared team ownership of components. Following best practices is crucial, including avoiding self-contained APIs in the BFF, preventing logic duplication, and not over-relying on BFFs. Implementing the BFF pattern with modular and reusable components can be facilitated using tools like Bit.

• Microservices Architecture From A to Z

  This article provides an overview of microservices architecture, comparing it to Service Oriented Architecture (SOA). It discusses the advantages of microservices, such as independent development, deployment, and scaling, as well as smaller, targeted teams and improved resilience. The article also mentions the challenges of complexity, testing, data integrity, and network latency. It explores two communication models within microservices—orchestration and choreography—and offers advice and best practices, including language limitation, API definition, code generation, database isolation, continuous deployment, event-based communication, dependency maintenance, and a proof of concept project.