Forem: Alireza

Improve performance with a simple css tip

Alireza — Thu, 26 Sep 2024 12:39:37 +0000

CSS animations have become a powerful tool for creating engaging user experiences. Animations can guide users, provide feedback, or simply enhance the overall aesthetics of an interface. However, not all CSS properties are equally efficient when it comes to animating elements on a webpage. One common mistake is using margin for animations instead of transform. In this article, we'll explore why transform is a far better choice for performance and smoothness, and how it differs from margin.

How CSS Animations Work in the Browser

To understand why transform is preferred over margin for animations, it’s important to know how browsers process animations. Browsers go through several stages to render a webpage:

Layout (Reflow): The browser calculates the size and position of each element based on the document’s structure and CSS rules.
Paint: The browser fills in pixels, including background colors, borders, shadows, text, and images.
Composite: The browser layers the elements together and displays them on the screen.

Animations that trigger layout or paint are generally more expensive in terms of performance, as they force the browser to recalculate positions, sizes, and the visuals of elements. This is where transform shines compared to margin.

The Problem with Animating `margin`

When you animate an element using margin, the browser has to recalculate the layout every frame of the animation. For example, if you animate margin-left to move an element across the screen, the browser needs to reflow (recalculate the layout) to account for the new margin values. This triggers both layout recalculation and sometimes a repaint, which can be costly, especially if the page has a complex structure.

For example, consider this CSS animation that moves an element using margin:

/* Margin-based animation */
@keyframes moveWithMargin {
  0% { margin-left: 0; }
  100% { margin-left: 100px; }
}

.element {
  animation: moveWithMargin 1s linear infinite;
}

This animation triggers a layout recalculation at each step of the animation because the margin affects the flow of the document. As a result, it can slow down the rendering process, especially on pages with many elements or on devices with limited resources.

Why `transform` is a Better Alternative

Unlike margin, the transform property doesn’t affect the layout of the document. It works by creating a new "layer" for the element and applying visual changes without recalculating the positions or dimensions of any other elements on the page. This is where the GPU (Graphics Processing Unit) comes into play. When you use transform, the browser can offload the task to the GPU, which handles the animation more efficiently.

Here’s the same animation, but using transform:

/* Transform-based animation */
@keyframes moveWithTransform {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.element {
  animation: moveWithTransform 1s linear infinite;
}

In this case, the element’s position is updated by the transform property, but the rest of the page layout remains unaffected. No reflow or repaint occurs, and the animation runs much smoother. The browser can handle the animation purely in the composite phase, which is much faster and less resource-intensive.

Performance Benefits of `transform`

No Layout Recalculations: The biggest advantage of using transform is that it doesn't trigger layout recalculation. The browser doesn't need to figure out the positions of other elements because the transform property applies only to visual appearance, not layout.
GPU Acceleration: Many modern browsers use GPU acceleration for transform animations. Offloading the work to the GPU allows for smoother animations, especially when dealing with 3D transformations or complex animations. This is not something the GPU can easily do with margin.
Reduced Paint Costs: While margin changes can trigger a repaint (recalculating what the element looks like), transform typically doesn’t. This means less time is spent rendering the visual updates, leading to better performance.
Smoother User Experience: Since the browser skips the costly layout and paint steps, animations run at a higher frame rate, leading to a more fluid experience for users, especially on mobile devices or slower machines.

Conclusion

Using the transform property for CSS animations is a more efficient and performant choice than using margin. By avoiding costly layout recalculations and taking advantage of GPU acceleration, you can ensure your animations run smoothly, even on resource-constrained devices. Additionally, any changes to the box model attributes—such as padding or border—trigger a reflow, which can further degrade performance. To create high-performance animations, avoid modifying properties that cause reflow and instead opt for transform to achieve a snappier, more fluid user experience.

How to Build a React component library?

Alireza — Thu, 12 Jan 2023 14:15:45 +0000

In this article I tried to talk the steps of create a react component library.

Why do we need to build a react component library?

If you have several components that are shared between your projects or some js code that is copy-pasting and these things happen more than 2 or 3 times then you need to convert your shared code to a library.

So let's create a react component library.

First, we need to generate our component. We can create a React project and create a component. Our folder structure would be like this:

├── src
│   ├── components
|   │   ├── Button
|   |   │   ├── Button.tsx
|   |   │   ├── Button.scss
|   |   │   └── index.ts
|   │   ├── TextField
|   |   │   ├── TextField.tsx
|   |   │   ├── TextField.scss
|   |   │   └── index.ts
|   │   └── index.ts
├── package.json
├── tsconfig.json
└── rollup.config.js

src/components/index.ts

export { default as Button } from "./Button";
export { default as TextField } from "./TextField";

After we create our component we need to config our rollup. We use rollup to bundle our library(also we could use webpack).

Let's config our rollup to bundle our library:

rollup.config.js

import externalDeps from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import sourcemaps from 'rollup-plugin-sourcemaps';
import resolve from '@rollup/plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';
import replace from '@rollup/plugin-replace';
import styles from 'rollup-plugin-styles';
import babel from 'rollup-plugin-babel';
import json from '@rollup/plugin-json';
import pkg from './package.json';

const globals = {
  react: 'React',
  'react-dom': 'ReactDOM',
  'react-query': 'ReactQuery',
};

const plugins = [
  externalDeps(), //prevents packages listed in peerDependencies from being bundled with our component library
  commonJS(), //convert common js modules to es6
  resolve(), // Locate and bundle third-party dependencies in node_modules
  typescript(), // transpiles our TypeScript code into JavaScript.
postcss() // transforms our Sass into CSS
];

export default {
  input: `./src/components/index.ts`,
  output: [
    {
      name: 'index',
      file: `lib/index.cj.js`,
      format: 'cjs',
      sourcemap: true,
    },
    {
      name: 'index' ,
      file: `lib/index.es.js`,
      format: 'esm',
      sourcemap: true,
    },
    {
      name: 'index',
      file: `lib/index.umd.js`,
      format: 'umd',
      sourcemap: true,
      globals,
    },
  ],
  plugins,
}));

esm vs common js vs umd
These types are js module formats.
Some tools like webpack and node use common js format and some tools like rollup and webpack2 use esm module. umd(Universal Module Definition) is the type of module that strive to work everywhere. Also, umd is a kind of fallback for other formats. If you want to include any of these files in the browser as standalone script tags without a build step like e.g. Webpack, you will want to use umd.

How to test our packages?
we have 3 options to test our package before publishing:

npm link
npm pack
Storybook

npm link:
npm link add our package in node_module universal of your system and install your package globally. every time we change our files this package will be updated in node_modules folder.

npm pack:
This command will pack our package and we can install the package in our project. with every change that we make in our package, we need to run this command and install our library again.

Storybook:
In my opinion, the best way to test our package locally is Storybook.
In addition, to test our package, we can also have good documentation.

Final step:
Finally, we should publish our package.
with npm publish we can publish our package in the npm registry but before that, we should create an account in npm.
also, we need to make some changes in our packge.json file.

package.json:

{
  "name": "@react-components-library/react-sample-components-library",
  "version": "0.0.20",
  "main": "lib/index.js", // common js 
  "module": "lib/index.es.js", //esm
  "browser": "lib/index.umd.js", //umd
  "files": [
    "/lib"
  ],
  "type": "module",
  "scripts": {
    "test": "jest",
    "start": "styleguidist server",
    "build": "rm -rf ./lib && rollup -c",
    "prepublishOnly": "rm -rf lib && npm run build",
    "postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz",
    "docs:build": "styleguidist build"
  },
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
...
}

There are some tips here:

we should our react and react-dom in our peerDependencies to prevent rollup to add these packages in our bundle.
when npm publish execute, first run prepublishOnly script. so we can add our build steps to this script.
files indicates which files or folders should push to the npm registry.