This content originally appeared on DEV Community and was authored by agatha-vieira
Quem nunca teve problemas na hora de fazer o desenvolvimento do seu front-end? Quem nunca queria usar Vue, mas por não saber usar muito bem, sofreu para conseguir um resultado igual ele? Pois bem, a recém-nascida lib do Laravel chamada Livewire promete resolver esses problemas! Entenda melhor a ferramenta neste post ?
AFINAL, O QUE É LIVEWIRE?
O Livewire é uma biblioteca que foi adicionada em 2019 pelo famosíssimo framework Laravel.
A proposta dela é criar interfaces dinâmicas (similares ao Vue) com os códigos do blade e do próprio Laravel. Sim! Exatamente! Você, programador Back-end, poderá criar um front-end bem desenvolvido com o Livewire!
Indo direto ao ponto, o Livewire funciona de um jeito beeem peculiar. Qualquer interação que acontecer com ele, se faz uma requisição AJAX e o HTML é renderizado do lado do servidor e depois retornado ao cliente. Esse fluxo permite que ele seja reativo, porém, um pouco mais lento. Ele tem algo parecido com um DOM virtual, onde ele compara as alterações com o DOM renderizado e então aplica as modificações.
VANTAGENS E DESVANTAGENS DO LIVEWIRE
Os principais pontos positivos do Livewire são:
A facilidade de trabalho, pois é simples de entender para quem já usa o Laravel.
O nível profissional dele permite uma avalanche de possibilidades com simples comandos, todos com um resultado bem próximo de um Vue.
Porém, nem tudo são flores. Apesar de parecer um paraíso, o Livewire possui pontos negativos também. O primeiro deles, é que, por ser uma ferramenta muito recente, o suporte e dúvidas tiradas são poucas, até nos fóruns mais conhecidos dos desenvolvedores, como o Stack Overflow.
Outro ponto, é que, por ter a proposta de não usar uma linguagem diferente, no caso, o JavaScript. Porém, esse problema pode ser resolvido usando a micro framework AlpineJS como adicional, menor e sem ser tão pesada quanto um Angular, por exemplo.
Durante o trabalho com Livewire, podemos usar comandos do Laravel para criar os componentes, como “php artisan make:livewire Teste”. A lib trabalha com dois arquivos separados: a view e o arquivo que comanda a view. No caso, um deles tem a extensão .blade.php, o qual estamos acostumados a criar os estilos da tela e tudo que aparecerá para o cliente. No outro, o qual possui o mesmo nome da blade, é o controlador, onde terão as funções chamadas por métodos e eventos da blade e onde são declaradas as variáveis presentes na tela.
Exemplificando, criando um componente para ser um contador e mostrar em tempo real o número sendo adicionado na tela em cada clique do botão, usaremos o comando “php artisan make:livewire contador”. Dois arquivos são criados, o “Contador.php” e o “contador.blade.php”. Este último, temos o botão e a variável do número que será adicionado. O primeiro, por sua vez, terá toda a lógica por trás da funcionalidade, como a função de incrementar número e a variável número.
Em resumo, a biblioteca Livewire é uma ferramenta muito interessante e essencial para quem não se adaptou ou não conhece o Vue. Entretanto, como trata-se de uma lib muito recente (lançada em julho de 2019), seu suporte é limitado e ela é pouco abordada em fóruns da internet. É perfeito para aqueles que já estão acostumados com Laravel e querem criar interfaces de forma prática. Esclarecidos esses pontos, é necessário uma análise dos prós e contras para optar pelo uso desse recurso, que é muito promissor e acrescenta demais ao programador front-end.
Aprenda mais nos nossos canais digitais!
Site: https://fireworkweb.com.br
Youtube:https://bit.ly/2GwqNU1
Insta: @fireworkweb
Face: @fireworkweb
Linkedin: Firework Web & Mobile
This content originally appeared on DEV Community and was authored by agatha-vieira
agatha-vieira | Sciencx (2021-08-18T20:46:51+00:00) Livewire – Revolução no desenvolvimento front-end Laravel?. Retrieved from https://www.scien.cx/2021/08/18/livewire-revolucao-no-desenvolvimento-front-end-laravel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.