meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:tech:wfrontend:criteria:react [2024/05/22 14:57] – [Performance Optimisation] alestaixc2024:tech:wfrontend:criteria:react [2024/05/22 15:50] (current) – rubenhuygens
Line 1: Line 1:
 ==== Implementing Sustainable Practices in React Apps ==== ==== Implementing Sustainable Practices in React Apps ====
-Reference: [[https://medium.com/@darpanrangari/embracing-sustainability-in-web-development-building-greener-react-apps-aa39a838174c|link]] 
  
 ==== Optimising Resource Utilisation ==== ==== Optimising Resource Utilisation ====
Line 6: Line 5:
 One of the key aspects of sustainability in web development is minimising resource consumption. In React apps, developers can implement various techniques to reduce the application’s overall footprint: One of the key aspects of sustainability in web development is minimising resource consumption. In React apps, developers can implement various techniques to reduce the application’s overall footprint:
  
-   * Code Minification and Compression: By minifying and compressing JavaScript and CSS files, developers can significantly reduce their size, resulting in faster loading times and reduced bandwidth consumption. +   * Virtual DOM and Efficient Rendering: React’s virtual DOM efficiently updates and renders only the necessary components, reducing unnecessary re-renders and enhancing performance.
-   * Lazy Loading: Implementing lazy loading techniques allows components, images, and other assets to be loaded only when they are required. This approach minimizes initial loading times and conserves bandwidth. +
-   * Tree Shaking: Utilising tools like Webpack, developers can eliminate unused code from the final bundle. This process reduces the application’s size, making it more resource-efficient.+
  
-==== Performance Optimisation ====+  * Lazy Loading: Implementing lazy loading techniques allows components, images, and other assets to be loaded only when they are required. This approach minimizes initial loading times and conserves bandwidth.
  
-Improving performance not only enhances the user experience but also contributes to sustainability by reducing energy consumption. React provides several optimisation techniques that help improve application performance:+   import React, { Suspense, lazy } from 'react'; 
 +   const LazyComponent = lazy(() => import('./LazyComponent'));
  
-   * Virtual DOM and Efficient Rendering: React’s virtual DOM efficiently updates and renders only the necessary components, reducing unnecessary re-renders and enhancing performance. +  * Code Minification and Compression: By minifying and compressing JavaScript and CSS files, developers can significantly reduce their size, resulting in faster loading times and reduced bandwidth consumption.
- +
-    React.memo, useMemo, and useCallback+
  
-   * Memoization and PureComponent: By memoizing expensive computations and utilising pure components, developers can prevent unnecessary calculations and re-rendering of components, leading to improved performance. +         React.memo, useMemo, useCallback
-   * Debouncing and Throttling: Implementing debouncing and throttling techniques for event handling can minimize excessive computations and network requests, improving both performance and resource efficiency.+
  
 ==== Accessibility and User Experience ==== ==== Accessibility and User Experience ====
Line 37: Line 32:
    (useSWR or React Query)    (useSWR or React Query)
  
-  * Efficient Network Requests: Minimising the number of network requests and optimising data transfer can significantly reduce the energy required to load a React app. Techniques like batched requests, data compression, and utilising efficient protocols like HTTP/2 or HTTP/3 can contribute to energy efficiency.+  * Efficient Network Requests: Minimising the number of network requests and optimising data transfer can significantly reduce the energy required to load a React app. Batching requests through axios. 
 + 
 +   import axios from 'axios'; 
 +    
 +   async function fetchData() { 
 +  const [response1, response2] = await Promise.all([ 
 +    axios.get('/api/data1'), 
 +    axios.get('/api/data2') 
 +  ]); 
   * Background Processes and Timers: Avoiding unnecessary background processes and minimising the usage of timers can reduce energy consumption on both client and server sides. By optimising the timing and frequency of such operations, React apps can be more sustainable.   * Background Processes and Timers: Avoiding unnecessary background processes and minimising the usage of timers can reduce energy consumption on both client and server sides. By optimising the timing and frequency of such operations, React apps can be more sustainable.
  
Line 44: Line 48:
 Apart from technical optimisations, sustainable web development also emphasises the importance of thoughtful design and user experience choices. React apps can incorporate sustainability principles into their design: Apart from technical optimisations, sustainable web development also emphasises the importance of thoughtful design and user experience choices. React apps can incorporate sustainability principles into their design:
  
-   * Minimalism and Simplified UI: Implementing a clean and minimalist user interface not only enhances user experience but also reduces cognitive load and resource requirements. Streamlined designs with fewer elements contribute to a more sustainable user experience. 
-   * Optimal Image Usage: Images often account for a significant portion of a web page’s size and loading time. By utilising efficient image formats (e.g., WebP) and implementing techniques like lazy loading and responsive images, React apps can reduce bandwidth consumption and improve performance. 
    * Dark Mode: Introducing a dark mode option in React apps can provide users with an energy-saving alternative. Dark mode reduces the energy consumption of devices with OLED or AMOLED displays, as fewer pixels need to be lit up.    * Dark Mode: Introducing a dark mode option in React apps can provide users with an energy-saving alternative. Dark mode reduces the energy consumption of devices with OLED or AMOLED displays, as fewer pixels need to be lit up.
 +
 +
 +   const [theme, setTheme] = React.useState('light');
 +
 +   const toggleTheme = () => {
 +     setTheme(theme === 'light' ? 'dark' : 'light');
 +   };
 +
 +Reference: [[https://medium.com/@darpanrangari/embracing-sustainability-in-web-development-building-greener-react-apps-aa39a838174c|link]]