Alpine.js é um framework reativo como o Vue e o React só que com um custo mínimo, zipado o alpine ocupa 4Kb. Para quem programa e utiliza Vue a sintaxe é praticamente a mesma, como o próprio autor aponta na documentação.
Recentemente comecei a trabalhar com o Tailwind, um framework css de "baixo nível" que utiliza classes como açucar sintático para o puro css. A primeira coisa que pensei quando conheci a ferramenta foi "por que alguém se submeteria a escrever tanta coisa no html?", veja, o código parece sujo no começo, mas os componentes pre-desenhados, o esquema de responsividade deles (melhor até que o do bootstrap), além do código estupidamente explicito, me ganhou. As telas realmente são feitas mais rapidamente e eu não tenho mais que parar, ir numa folha de estilo, procurar qual parte do código tá modificando aquilo, caçar se outra folha está sobrescrevendo o estilo, etc.
O Alpine.js é como o tailwind, deixa explícito o que está sendo feito, a curva de aprendizado é muito curta e é ótimo para ser utilizado em conjunto com o Tailwind. Abaixo o código de um simples todo list feito com o micro framework:
No exemplo são utilizados conceitos simples, o x-data="{ items: [], item: '' }" declara um escopo pro componente, como se fosse uma variável. O x-for cria o dom dinamicamente iterando sobre a variável items. O x-model conecta as modificações do input com a variável item e o @click ativa o evento que insere um valor no item.
Eu realmente estou gostando de trabalhar com ambas as ferramentas e acho que ambas me tiraram da zona de conforto das camadas de abstrações que outros frameworks oferecem, então você realmente aprende css e js utilizando o alpine + tailwind. O projeto que me fez conhecer essas tecnologias utiliza o Laravel (framework PHP) com o Livewire (uma abstração do laravel que componentiza código PHP), tailwind e alpine js, uma stack para ser comentada em outros posts.
Top comments (1)
Salve Ítalo,
também estou tentando criar aplicações Laravel
estranhei um pouco não usar mais Vue js, mas vou ter que ver como funciona essa alpine.
Excelente post!