Por Daniel Tygel
Logo do DRF and React By Schema: Bianca Rubin
React possui um grande poder na construção de interfaces altamente responsivas e dinâmicas para usuárias, com grande maleabilidade e qualidade.
Já o Django oferece uma infra-estrutura consolidada, de alta performance e popular de organização de modelos de dados para construção de ações de criação, remoção e atualização de dados (CRUD) para sistemas simples a altamente complexos e intrincados.
Uma reconhecida e ativa biblioteca do Django, chamada Django Rest Framework, ou simplesmente DRF, aproveita destas características do Django para permitir a desenvolvedores a criação de poderosos esquemas de API, diretamente relacionados ao modelo de dados, fazendo uso do conceito de viewsets (análogos às views) e de serializers (análogos aos forms).
No django, a/o desenvolvedor/a está muito concentrada/o no modelo de dados. É uma profunda correlação de dados, suas relações, seus tipos, suas condições de validação. A nossa solução DRF and React By Schema aproveita este esforço que foi realizado em plasmar o modelo de dados (que é a alma da compreensão do sistema) e oferece uma forma da/o desenvolvedor/a em react não ter que se preocupar com isso, pois o pacote react consome o que é gerado pelo pacote django. Por isso, nossa solução compõe-se de 2 pacotes, em linguagens diferentes: o drf-react-by-schema-django, e o drf-react-by-schema-react
A construção de sistemas com uma grande quantidade de formulários, para gestão de diferentes processos, é “a casa” do django, mas a sua forma de lidar com a interface, baseada nas views, forms e, especialmente, os templates, templatetags e inclusiontags, é antiquada, já que toda atualização deve atualizar a página toda, numa lógica de renderização de templates HTML.
Uma opção atraente é usar o React como cliente (interface) de uma instância do Django com DRF como servidora. Ou seja, o django servir os dados e fazer as operações nos dados como um servidor HeadLess (ou seja, sem views, nem forms, nem templates, somente por meio de API).
Entretanto, um problema comum com isso é que acaba tornando-se necessário duplicar trabalho entre o cliente (React) e o servidor (Django/DRF), para a construção das tratativas dos formulários no React se relacionarem ao servidor.
Como exemplo, vamos supor que o sistema é um gestor de produtos, e cada produto é parte de uma categoria de produtos. Vamos supor que temos as categorias “hortifruti” e “grãos”, e os produtos alface, mamão e uva em hortifruti, e os produtos feijão, arroz e fava em grãos. Vamos supor que cada produto tem o atributo “nome”, “descrição”, “unidade”, “preço por unidade” e “disponibilidade”. E vamos supor que cada categoria tem o atributo “nome” e “descrição”.
No Django, o modelo de dados é feito de forma muito simples: criar um model ProductCategory e um model Product, com uma relação de “ForeignKey” demonstrando uma relação de um pra muitos entre o produto e a categoria (uma categoria pode ter muitos produtos; e um produto pertence a uma única categoria).
No React, será necessária a construção do formulário, os tipos de componente (entrada de texto simples, entrada de texto longo, entrada numérica, entrada de senha, entrada de switch Sim/Não, múltipla escolha por autocompletar, dropdown de escolha única, etc), as condições de validação (se é obrigatório ou não, se tem dados iniciais, formato do dado, etc).
Ora, isso é um retrabalho, visto que estas informações estão no model do Django!
Mas como passar as informações de estrutura de dados para o React? É aí que entra o DRF and React By Schema – Django (drf-react-by-schema-django). O seu pacote do Django (drf-react-by-schema-django) monta um schema poderoso no servidor que pode ser acessado pelo React, via opção OPTION.
E como montar os forms, condições de validação e componentes de formulário no React? Aí é que entra o DRF and React By Schema – React (drf-react-by-schema-react) que consome os schemas gerados pelo drf-react-by-schema-django e monta automaticamente tudo isso para o desenvolvedor com pouquíssimas linhas de código, e ainda permitindo a total personalização das interfaces (layout).
Ainda por cima, do lado do django, o drf-react-by-schema-django monta a estrutura de endpoints de API automaticamente e diretamente dos modelos dos apps, junto com poderosas ferramentas de busca, filtros, aninhamento de objetos relacionados, validação e tratamento dos processos de criação, atualização e remoção dos objetos, o que é uma árdua tarefa de se fazer manualmente no Django DRF, pois normalmente exige profundo conhecimento de serializers e viewsets. O drf-react-by-schema-django simplifica todo este processo ao desenvolvedor, sempre mantendo a performance.
Do lado do react, o drf-react-by-schema-react oferece um leque de poderosos componentes que permite construir formulários automaticamente, incluindo formulários de múltiplos objetos (através de tabelas editáveis), usando toda a potência do MUI e do MUI x-DataGrid.
A suíte DRF and React By Schema (drf-react-by-schema) está disponível para o React em https://www.npmjs.com/package/drf-react-by-schema e para o Django em https://pypi.org/project/drf-react-by-schema/