Quer acelerar o desenvolvimento de aplicações Angular? Conheça o PO UI!

Artigo escrito por Arthur Fücher e cedido ao TOTVS Developers

Este artigo foi escrito por Arthur Fücher, Developer Advocate no Nubank. Tem atuado com desenvolvimento de software, no papel de Agilista e Desenvolvedor. Nos últimos anos tem focado em linguagens funcionais como Clojure e F#, porém sempre gosta de aprender novas tecnologias. Amante de conversas, jogos de tabuleiro e tecnologia.

Quer acelerar o desenvolvimento de aplicações Angular? Conheça o po-ui!

Um tempo atrás eu estava querendo reescrever uma aplicação que eu fiz para controle de cursos de uma escola. Para o backend eu escolhi C# para continuar meus estudos, e para o frontend eu estava na dúvida entre React e Angular.

A aplicação em sua maioria é composta por CRUD, vários cadastros simples. Ou seja, iria precisar muito de formulários e tabelas/listagens. Foi quando lembrei do PO-UI, dei uma chance e decidir por usar o Angular.

O que é o PO-UI?

Biblioteca de componentes baseado em Angular, de acordo com o próprio site.

Ela nos disponibiliza uma série de componentes prontos, na sua maioria voltados para aplicações CRUD.
Acredito que isso se deva ao fato dele ser um projeto open source da TOTVS, empresa conhecida pelo desenvolvimento de ERPs, que tem a característica de ter uma quantidade de cadastros e listagens grande.

Ao decidir usá-lo, os seguintes pontos me fizeram tomar a decisão:

Documentação

A documentação do projeto é bem completa. Todo componente possui documentação com todas as propriedades, exemplos de uso funcionando e com o código.

Todo desenvolvimento precisa ter documentação, isso faz parte do ciclo de desenvolvimento das features, portanto está sempre atualizada.

UX

Uma coisa interessante do projeto é que por ter uma empresa por trás, os componentes desenvolvidos passam por uma equipe de UX para manter padrões de usabilidade e estilos. Então na minha perspectiva é uma vantagem na utilização do PO-UI, pois você não precisa se preocupar com estilos e padrões de utilização dos compoenentes. Mesmo tendo um padrão de cores, é possível customizar e criar o seu próprio tema.

Metadado

Diversos componentes possui um componente maior (High Component) que possui facilitadores para construção do mesmo. Para criar por exemplo uma lista, existe um componente que recebe o endpoint que deve fazer a chamada para retornar os dados e também recebe um parâmetro com o endpoint de metadados.

Nesse endpoint nosso servidor retorna qual é a estrutura de dados que teremos, e com isso o PO-UI já monta as colunas e formatações. Isso é muito bom para deixar a visualização customizável e deixando a estrutura de dados no backend.

Open source

O projeto está hospedado no github: github.com/po-ui/po-angular
Fazer uso de uma biblioteca open source tem diversas vantagens, como por exemplo olhar e entender como as coisas estão sendo feitas nos componentes que você está usando.

Caso tenha uma necessidade, pode abrir uma issue, discutir com o time a implementação e até contribuir com um novo componente ou comportamento.

O time tem aprendido e evoluído cada vez mais na construção de um projeto open source, que não é fácil

Inclusive ano passado fizemos uma live sobre projetos open source e o PO-UI foi um deles: assista aqui

Eai, achou interessante? Para começar é bem simples, e eles disponibilizam um guia de primeiros passos aqui.
Depois me conta o que achou!
Abraços