A estilização nas aplicações é uma das partes mais importantes da mesma, tanto quanto a regra de negócio e a sua lógica.
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 🤟
