Uma aplicação com uma ui, e ux bem polida agrada ao usuário, retém eles, e trás uma experiência de “quero mais”, tornando assim a tua aplicação mais querida e consequentemente, mais usuarios para ela. A escolha de melhores botões, fontes, tamanhos, cores e formatos que possam fornecer a melhor experiência para o usuário é crucial hoje em dia.

Por isso a importância de ter ferramentas que facilitam o sistema de design, isso esta ligado desde o departamento de design até o frontend, principalmente no universo frontend, notamos que actualmente, existem diversas formas de estilizar páginas web usando o ReactJs, desde utilizar o CSS simples, Sass ou até mesmo styled components. Tudo se resume em criar um arquivo separado do código JSX que irá conter toda a estilização daquele componente ou daquela página. Porém, existe uma outra forma de fazer estilização que é utilizando as interfaces declarativas.

Por isso a importância de ter ferramentas que facilitam o sistema de design, isso esta ligado desde o departamento de design até o frontend, principalmente no universo frontend, notamos que actualmente, existem diversas formas de estilizar páginas web usando o ReactJs, desde utilizar o CSS simples, Sass ou até mesmo styled components. Tudo se resume em criar um arquivo separado do código JSX que irá conter toda a estilização daquele componente ou daquela página. Porém, existe uma outra forma de fazer estilização que é utilizando as interfaces declarativas.

Interfaces declarativas com Material UI.

Material UI é uma biblioteca de componentes para React que oferece uma ampla variedade de elementos de interface do usuário (UI) prontos para uso. Essa biblioteca fornece uma solução completa para a criação de aplicativos React com aparência e sensação profissionais em um tempo muito curto.

A importância de usar Material UI na criação de componentes está na facilidade e agilidade que ele oferece. Ele permite que os desenvolvedores criem uma interface atraente sem precisar passar horas criando o design do zero. Com a Material UI, os desenvolvedores podem usar os componentes predefinidos para criar rapidamente uma IU responsiva e elegante.

Como podemos ver no exemplo abaixo, após instalamos o Material UI, podemos importar o componente de Button, como outros componentes, o exemplo de uso e bem simples e intuitivo.

import * as React from 'react';
import Button from '@mui/material/Button';

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Ola Mundo</Button>
    </div>
  );
}

Nota: A sua instalação e bem simples, poderá seguir o tutorial na documentação em anexo.

Outra vantagem do Material UI é a consistência.

“Com a grande variedade de componentes oferecidos pela biblioteca, é fácil manter a consistência visual em todo o aplicativo, garantindo que os elementos da UI pareçam e funcionem da mesma forma em todas as páginas.”

Com a grande variedade de componentes oferecidos pela biblioteca, é fácil manter a consistência visual em todo o aplicativo, garantindo que os elementos da UI pareçam e funcionem da mesma forma em todas as páginas.

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed ${blue[500]}`,
          },
        },
        {
          props: { variant: 'dashed', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});


export default function MyApp() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Ola Mundo</Button>
    </ThemeProvider>
  );
}

Existem vários casos de uso para o Material UI. Uma das aplicações mais comuns é na construção de painéis de administração e páginas de configuração de aplicativos, onde é necessário um grande número de elementos de interface do usuário, como tabelas, formulários, gráficos, botões e outras partes da interface. Esses elementos de interface do usuário podem ser muito trabalhosos e demorados de se construir do zero, mas com o Material UI, os desenvolvedores podem criar esses elementos rapidamente e com facilidade, agilidade obedecendo ao tempo e ainda assim mantendo uma boa experiência.

Outro caso de uso comum é na criação de aplicativos móveis, onde a usabilidade e a experiência do usuário são extremamente importantes. O Material UI é optimizado para dispositivos móveis, com componentes responsivos e fáceis de usar em telas menores.

Um exemplo real é no produto Fidli, que é um sistema de fidelização que aumenta a retenção de clientes e as vendas com uma solução simples e de baixo custo, no seu painél de administração, no qual usamos o Material UI, no desenvolvimento de um formulário onde tivemos de buscar uma lista grande de pessoas e o usuário deveria escrever ao mesmo tempo, a filtrar, e a trazer uma lista filtrada. Fazendo esse comportamento do zero iria custar tempo e energia, foi só dar uma lida na documentação do Material UI e encontramos esse componente AutoComplete.

AutoComplete – Segundo a documentação, é uma entrada de texto normal aprimorada por um painel de opções sugeridas.

E útil para definir o valor de uma caixa de texto de linha única em um dos dois tipos de cenários:

• O valor para a caixa de texto deve ser escolhido a partir de um conjunto predefinido de valores permitidos, por exemplo, um campo de localização deve conter um nome de localização válido: caixa de combinação.
• A caixa de texto pode conter qualquer valor arbitrário, mas é vantajoso sugerir possíveis valores ao usuário, por exemplo, um campo de pesquisa pode sugerir pesquisas semelhantes ou anteriores para economizar tempo do usuário: free solo.

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const topNomes = [
  { label: 'Miguel', year: 1995 },
  { label: 'Arthur', year: 1991 },
  { label: "Théo", year: 1946 },
  { label: 'Heitor', year: 1997 },
  { label: 'Ravi', year: 1995 },
  { label: 'Gael', year: 1994 },
  { label: 'Davi', year: 2001 },
  { label: 'Bernardo', year: 1998 },
  { label: 'Noah', year: 1968 },
  { label: 'Gabriel', year: 1998 },
  { label: 'Interstellar', year: 2014 },
  { label: 'Casablanca', year: 1942 },
];

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={topNomes}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

Com isso facilitou demasiado o nosso trabalho e reduziu o custo, do tempo que iríamos gastar em criar um componente desse tipo.

Mas ela também possui algumas desvantagens, como todo codigo html, css e javascript pode ser escrito no mesmo arquivo, se não separado pode deixar o código difícil de entender, ainda outra é que essa já vem com código pronto, o que a dado momento pode sobrecarregar a página. Mas tirando esses pontos, é uma óptima ferramenta que poderá estar na sua pasta de ferramentas.

Esse breve artigo serviu para lhe mostrar a praticidade que é construir interfaces escaláveis com o Material UI, o uso de Material UI na criação de componentes oferece muitas vantagens, incluindo facilidade, agilidade, consistência e personalização, claro que essa biblioteca possui muito mais funcionalidades do que foi mostrado aqui, portanto, aconselho a você, desenvolvedor ou desenvolvedora, a dar uma olhadinha na documentação, que é bastante intuitiva e simples de entender.

Espero que tenha gostado 🤟

https://mui.com/material-ui/getting-started/installation/

The post Interfaces declarativas (Construindo interfaces altamente escaláveis com Material UI) first appeared on VOID.