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 15:03] – [Sustainable Design and UI/UX] alestaixc2024:tech:wfrontend:criteria:react [2024/05/22 15:50] (current) – rubenhuygens
Line 5: 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.+ 
 +  * 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.
  
    import React, { Suspense, lazy } from 'react';    import React, { Suspense, lazy } from 'react';
    const LazyComponent = lazy(() => import('./LazyComponent'));    const LazyComponent = lazy(() => import('./LazyComponent'));
  
-   * 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.+  * 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.
  
-==== Performance Optimisation ====+         React.memo, useMemo, useCallback
  
-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: 
- 
-   * Virtual DOM and Efficient Rendering: React’s virtual DOM efficiently updates and renders only the necessary components, reducing unnecessary re-renders and enhancing performance. 
- 
-   * 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 
 ==== Accessibility and User Experience ==== ==== Accessibility and User Experience ====