-
Event-driven Architecture in JavaScript
In modern web applications, managing complex interactions between different parts of the app can quickly become challenging. One way to tackle this problem is through an Event-Driven Architecture (EDA), where components or modules communicate by emitting and listening for events. In this post, we’ll explore how to implement EDA in JavaScript, particularly in a React…
-
Optimizing React Application Performance with Code Splitting and Lazy Loading
As React applications grow, performance issues often start to appear. A large codebase means larger bundle sizes, which can slow down load times, especially on mobile devices and slow networks. To address this, React offers Code Splitting and Lazy Loading, techniques that enable us to break down the code into smaller chunks and load only…
-
How Context API Fits into Component-driven Architectures in React.js
React’s Context API is often introduced as a solution for managing global state without the complexity of third-party libraries like Redux. While it is typically associated with simple state management needs, the Context API plays an important role in component-driven architectures, helping create flexible and scalable UI systems. In this post, we will explore how…
-
Micro Frontends in React.js: Why and How to Implement Them
As applications grow in size and complexity, managing a monolithic front-end codebase can become cumbersome. One solution is adopting Micro Frontends, a technique that allows teams to break up a large front-end into smaller, independent applications that work together seamlessly. In this post, we’ll explore the why behind Micro Frontends and discuss how to implement…
-
Architectural Decisions for Scalable React.js Applications
Building a scalable React.js application is not just about writing code that works today but about crafting a foundation that will support future growth and complexity. To ensure long-term success, developers need to make key architectural decisions from the start. These decisions affect performance, maintainability, scalability, and developer productivity. So, let’s see some of the…
-
Benefits of Atomic Design in Modern React.js Applications
Atomic Design is a design methodology that helps developers create consistent, reusable components. This pattern is especially useful in React.js applications, where component reuse and consistency are critical to maintainability. In this post, we’ll explore the core principles of Atomic Design and how adopting this methodology can improve your development workflow and application architecture. So,…
-
How to use getServerSideProps in Next.js
Next.js is a popular framework for building server-side rendered React applications. One of the key features that makes Next.js stand out is its data-fetching methods, particularly getServerSideProps. In this post, we’ll explore how and when to use getServerSideProps to fetch data on every request. Alonso VazquezWeb developer with over ~6 years of experience. I am…
-
Create a phone mask on React.js w/o libraries
Recently I had to create a form that includes a phone number input. Such number input had to had some validations and an input mask to display properly the phone number. Nowadays there are a different npm packages that might help with this task (like react-input-mask), but from times to times, you want to do…
