Comparaison des meilleures bibliothèques de composants pour React

Pour chaque application web sérieuse, vous devriez choisir une bibliothèque de composants. Il existe de très bonnes bibliothèques prêtes à l'emploi, alors pourquoi réinventer la roue ? Cet article compare les cinq principaux éléments bibliothèques pour React en créant un simple écran de connexion.

Material UI

Le Material Design est un langage de conception développé par Google en 2014. Google l'utilise dans le système d'exploitation Android et dans son propre produits.

Material UI met en œuvre la conception des matériaux pour réagir. Il s'agit d'une bibliothèque React très populaire, soutenue par une société basée à Paris. Pour le stylisme, la bibliothèque utilise sa propre solution CSS-in-JS et des styled-components. Il a également la possibilité d'adapter le thème. Dans l'ensemble, c'est une bibliothèque puissante et si vous aimez le Material Design vous obtiendrez une solution complète pour développer vos produits.

// taken from https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in

import React from 'react'
import Avatar from '@material-ui/core/Avatar'
import Button from '@material-ui/core/Button'
import CssBaseline from '@material-ui/core/CssBaseline'
import TextField from '@material-ui/core/TextField'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
import Typography from '@material-ui/core/Typography'
import { makeStyles } from '@material-ui/core/styles'
import Container from '@material-ui/core/Container'

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}))

export default function SignIn() {
  const classes = useStyles()

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
        </form>
      </div>
    </Container>
  )
}

Fluent UI React

Fluent est un logiciel libre et multiplateforme système créé par Microsoft. Fluent UI React est l'implémentation du système Fluent pour les développeurs web React. Le site web de Fluent UI React contient une bonne documentation avec des recommandations de bonnes pratiques. Il y a également un support de premier ordre pour TypeScript. Pour les thèmes, il existe un site web de Fluent UI Theme Designer où vous pouvez personnaliser votre thème de manière interactive.

En général, si vous aimez le design, il n'y a rien de mal à utiliser Fluent UI.

import * as React from 'react'
import { Card } from '@uifabric/react-cards'
import { TextField } from 'office-ui-fabric-react/lib/TextField'
import { Text } from 'office-ui-fabric-react'
import { PrimaryButton } from 'office-ui-fabric-react'

const Login = () => {
  const cardTokens = { childrenMargin: 20, width: 500, maxWidth: 400 }

  return (
    <Card
      aria-label="Basic vertical card"
      tokens={cardTokens}
      style={{
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: '10rem',
      }}
    >
      <Card.Section>
        <Text
          block
          variant="xLarge"
          style={{ textAlign: 'left', marginBottom: '2rem' }}
        >
          Sign In
        </Text>
        <TextField underlined placeholder="Email address" />
        <TextField underlined type="password" placeholder="Password" />
        <PrimaryButton text="SIGN IN" style={{ marginTop: '3rem' }} />
      </Card.Section>
    </Card>
  )
}

export default Login

Ant Design

Le système de conception par Ant Financial, une grande société financière chinoise est en source ouverte. Ant Financial est affiliée à la grande société de commerce électronique Alibaba. De nombreuses autres grandes entreprises chinoises de l'internet, comme Tencent et Baidu, utilisent également ce système de conception.

La bibliothèque Ant Design est complète et comporte un grand choix de composants. La documentation est bonne, mais certaines pages sont encore uniquement en chinois. TypeScript est supporté et la thématisation est possible avec les variables Less.

Cette bibliothèque est sûre de rester dans le coin, car elle est soutenue par les principaux entreprises chinoises de l'internet.

import React from 'react'
import { Card } from 'antd'
import { Input } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { LockOutlined } from '@ant-design/icons'
import { Button } from 'antd'

const Login = () => {
  return (
    <>
      <Card
        title="Login"
        style={{
          width: 300,
          marginLeft: 'auto',
          marginRight: 'auto',
          marginTop: '5rem',
        }}
      >
        <Input placeholder="Email Address" prefix={<UserOutlined />} />
        <Input
          placeholder="Password"
          type="password"
          style={{ marginTop: '1.5rem' }}
          prefix={<LockOutlined />}
        />
        <Button type="primary" style={{ width: '100%', marginTop: '1.5rem' }}>
          SIGN IN
        </Button>
      </Card>
    </>
  )
}

export default Login

React Spectrum

Adobe a créé un système de conception open source appelé Spectrum. En tant que développeur de logiciels de conception bien connus comme PhotoShop et Illustrator, il a mis l'accent sur la qualité de la conception.

Et cela transparaît dans le fait que Spectrum se distingue des autres systèmes de conception par son aspect rafraîchissant. On peut percevoir un sentiment d'harmonie dans la composition des composants.

La mise en œuvre de Spectrum s'appelle React Spectrum. React Spectrum met l'accent sur l'accessibilité que tous les composants prennent en charge. La documentation est très complète et React Spectrum offre également un soutien à l'internationalisation. Il existe également React Stately, une collection de React hooks pour la gestion du système de conception. La thématisation est prise en charge ainsi qu'un mode d'obscurcissement automatique.

Au moment de la rédaction du présent document, certains composants (comme la combobox) sont encore en version alpha et non publiée. Mais cela devrait changer rapidement.

React Spectrum correspond parfaitement aux applications web qui veulent se distinguer par leur design.

import React from 'react'
import { Flex, Heading, View, TextField, Button } from '@adobe/react-spectrum'

const Login = () => {
  return (
    <Flex
      direction="column"
      justifyContent="center"
      alignItems="center"
      height={window.innerHeight + 'px'}
    >
      <View
        borderWidth="thin"
        borderColor="dark"
        borderRadius="medium"
        padding="size-250"
        width="300px"
      >
        <Heading level={2}>Sign In</Heading>
        <TextField label="Email Address" placeholder="[email protected]" />
        <TextField label="Password" type="password" />
        <Button variant="cta" marginTop="size-130">
          SIGN IN
        </Button>
      </View>
    </Flex>
  )
}

export default Login

Semantic UI React

Semantic UI React a tout ce que vous pouvez attendre d'une bibliothèque de composants. Elle comporte plus de 50 composants et un bon concept de thème. En tant que projet communautaire, il dépend des contributions. Il est donc bon de savoir qu'il est toujours actif.

Login.js

import React, { useState } from 'react'
import { Grid, Form, Segment, Button, Header, Message } from 'semantic-ui-react'

const Login = () => {
  return (
    <>
      <Grid
        textAlign="center"
        verticalAlign="middle"
        style={{ marginTop: '7rem' }}
      >
        <Grid.Column style={{ maxWidth: 450 }}>
          <Header as="h2" icon color="blue" textAlign="center">
            Sign In
          </Header>
          <Form size="large">
            <Segment stacked>
              <Form.Input
                fluid
                name="email"
                icon="mail"
                iconPosition="left"
                placeholder="Email address"
              />
              <Form.Input
                fluid
                name="password"
                type="password"
                icon="lock"
                iconPosition="left"
                placeholder="Password"
              />
              <Button color="blue" fluid size="large">
                SIGN IN
              </Button>
            </Segment>
          </Form>
          <Message>
            Not a user? <a href="register">Register here.</a>
          </Message>
        </Grid.Column>
      </Grid>
    </>
  )
}

export default Login

Conclusion

Les goûts en matière de design sont différents, donc en utilisant l'un des systèmes de design des grandes entreprises, vous êtes bon. L'avenir de Semantic UI React dépend de la communauté qui est active aujourd'hui. Donc si vous voulez soutenir un projet indépendant, Semantic UI React est le choix qu'il vous faut.

J'espère que cet article vous facilitera un peu le choix d'une bibliothèque de composants appropriée.

Références

• Material Design : https://material.io

• Fluent Design : https://www.microsoft.com/design/fluent

• Spectrum : https://spectrum.adobe.com

• Ant Design : https://ant.design

• Semantic UI : https://semantic-ui.com