Executando verificação de segurança...
12
PedroEduardoSS
1 min de leitura ·

ALPINE.JS, um framework JavaScript muito parecido com o JQuery

Introdução

Eu estava explorando alguns vídeos no YouTube e me deparei com um tutorial de um tal de Alpine.js, um novo framework JS. No início eu pensei, "Ah não, mais um?!", mas dei uma chance e comecei a ver como era esse novo framework.

Realmente muito simples

O primeiro ponto que percebi foi a simplicidade de utilizar esse framework, que você pode instalar ou usar uma CDN, além de uma documentação bem enxuta. Comparando com frameworks mais conhecidos como React e Angular, o Alpine é o mais próximo de usar JavaScript puro na web.
Segundo a própria documentação, o Alpine.js é uma coleção de 15 atributos, 6 propriedades e 2 métodos, capaz de adicionar a interatividade em documentos HTML (ou seja, fazendo o que o JavaScript nasceu para fazer).

O novo JQuery?

Na própria documentação há algumas referências ao JQuery e realmente são duas ferramentas com os mesmos objetivos, porém, o Alpine promete deixar o código pelo menos mais legível e limpo. Eu até vi alguém no Discord que conseguiu refatorar um código legado feito com JQuery com o Alpine sem dores de cabeça.

Conclusão

Estou experimentando o Alpine e gostando muito até o momento, pricipalmente com projetos Laravel. Eu quis apenas apresentar esse framework que não é tão conhecido, mas que é muito interessante. Se já o utilizou fique a vontade para compartilhar sua experiência.

Documentação do Alpine.js

Carregando publicação patrocinada...
4
brunolinhares

Eu uso bastante no dia a dia, tanto em projetos em produção quanto nos pessoais. Já tem mais ou menos um ano que venho utilizando e tem sido muito útil. Pra quem já tá acostumado com os padrões MVT/MVC, é onde ele realmente brilha.

Além disso, ele é super fácil de estender. Dá pra adicionar funcionalidades personalizadas de forma bem simples, como mostrado aqui na documentação: https://alpinejs.dev/advanced/extending

Por exemplo, criar um diretivo customizado pra transformar texto em maiúsculas é tão simples quanto isso:

Alpine.directive('uppercase', el => {
    el.textContent = el.textContent.toUpperCase()
})

<div x-data>
    <span x-uppercase>Hello World!</span>
</div>

Com isso, já dá pra criar filtros personalizados sem depender de libs externas pra coisas que poderiam ser resolvidas com uma simples função. É esse tipo de abordagem que faz as coisas voltarem a ser simples de novo

1
hagaka

Essa eu não conhecia! Dado que eu não uso a muito tempo, e as vezes eu só apaguei da minha mente mesmo 😅
Eu estava com dificuldades de ver usos dele, mas dai vi a sessão de "plugins" na documentação, e eu quase consigo ver algumas daquelas coisas sendo implementadas como essas diretivas. Muito legal!

2
silvestrini

Alpine é muito bacana, principalmente pela integração com o Livewire. Inclusive ambos foram criado pelo mesmo cara, Caleb Porzio, que pe bem influente na comunidade Laravel.

Ainda sinto algumas dificuldades, coisas que ficam engessadas e não consigo fazer, aí recorro ao bom e velho vanilla js, mas facilita muito o desenvolvimento, tanto que já vem por padrão com starter kits do Laravel.

1
1
Thunay

Eu gosto bastante do Alpine. Lá na empresa onde eu trabalho a gente tem usado faz uns 2 anos já.

Pra mim, o ponto forte dele é justamente a simplicidade de usar ele. o que com vanilla custa umas 5/10 linhas, com o Alpine você faz em 1 linha dentro do proprio html.

1
hagaka

Eu adoro Alpine!!! E por acaso estava pensando nela hoje também!
Já usei para umas coisas pequenas, e tenho vontade de usar em mais projetos
Uma coisa que eu acho engraçado é que por muito tempo toda a documentação que eu via era só essa página inicial! Depois que eu achei esse 'Get started' vai pra uma documentação mais completa. Mas só aqueles exemplos na primeira página já tinha me levado longe! a outra só supriu os problemas mais técnicos
Mas é isso, amor eterno ao meu par 11ty + Alpine.js s2