O que é Alpine.js e como usá-lo?

O mundo do desenvolvimento web é caótico – frameworks surgem e desaparecem e as coisas podem ser esmagadoras tanto para desenvolvedores novos quanto para experientes.

Ao contrário da maioria dos frameworks de desenvolvimento web, o Alpine.js pretende ser o mais simples possível, mas poderoso o suficiente para lidar com conceitos como reatividade e efeitos colaterais.

Introdução ao Alpine.js

A instalação do Alpine.js é bastante simples. Você só precisa incluir o seguinte roteiro marca no seu HTML:

<roteiroadiarorigem=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">roteiro>

Como alternativa, você pode instalar o Alpine.js em seu projeto usando o Node Package Manager:

npm instalar alpinejs

Reatividade em Alpine.js

Criar um index.htm arquivo e adicione o seguinte código clichê:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8">





instagram viewer


<metahttp-equiv="Compatível com X-UA"contente="IE=borda">
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0">
<título>Alpine.jstítulo>
cabeça>
<corpo>
<roteiroadiarorigem=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">roteiro>
corpo>
html>

O adiar atributo no roteiro A tag informa ao navegador para executar o script somente após terminar de analisar o documento.

Alpine.js fornece várias diretivas como dados x que ele usa para armazenar dados e x-texto que ele usa para definir textointerno do componente anexado. Para usar essas diretivas, adicione o seguinte código ao seu HTML.

<divdados x="{name:'David Uzondu', organização:'Make Use Of'}">
 Meu nome é <fortex-texto="nome">forte>
 e <eux-texto="organização">eu> é incrível
div>

A diretiva x-data armazena um objeto com as chaves nome e organização. Você pode então passar essas chaves para a diretiva x-text. Ao executar o código, Alpine.js preencherá os valores:

Como o Alpine.js se compara ao React

Alpine.js é um framework leve que o torna adequado para o desenvolvimento de pequenos projetos e protótipos.

Em estruturas maiores como o React, você usa ganchos como useEffect() para lidar com efeitos colaterais no ciclo de vida do componente. Este gancho executa uma função de retorno de chamada sempre que um dos elementos da matriz de dependência muda:

importar {useEffect} de"Reagir";
funçãoMeuComponente() {
 useEffect(() => {
/* A função de retorno de chamada vai aqui */
 }, [ /* A matriz de dependência é opcional */ ]);
}

Para lidar com os efeitos colaterais no Alpine.js, você pode usar o efeito x diretiva. Por exemplo, digamos que você queira observar uma variável e registrar o valor sempre que ela mudar:

<divdados x="{número 1}"efeito x="console.log (número)">
<h1x-texto="número">h1>
<botão @clique="número = número + 1">Adicionar novo númerobotão>
div>

A primeira coisa que você pode notar é que não precisa especificar uma dependência. A Alpine simplesmente escutará as alterações em todas as variáveis ​​passadas para efeito x. O @clique A diretiva incrementa a variável number em 1.

Renderização condicional em Alpine.js

Renderizando elementos condicionalmente é algo que você pode fazer em frameworks como React. Alpine.js também permite renderizar elementos condicionalmente. Ele fornece um x-se directiva e uma especial modelo elemento que você pode usar para renderizar elementos condicionalmente.

criar outro index.htm arquivo e adicione o mesmo código clichê de antes. Adicione o seguinte código ao corpo do HTML.

<divdados x="{mostrado: verdadeiro}">
<botão @clique="mostrado=!mostrado"x-texto="mostrando? 'Ocultar elemento': 'Mostrar elemento'">Alternarbotão>
<modelox-se="mostrando">
<div>A rápida raposa marrom saltou sobre o cachorro.div>
modelo>
div>

O x-se directiva é passada para o modelo elemento. Isso é importante porque permite que o Alpine.js rastreie um elemento que está sendo adicionado ou removido da página. O modelo elemento deve conter um elemento de nível raiz; o código a seguir violaria essa regra:

<modelox-se="mostrando">
<div>Este elemento será renderizado muito bem.div>
<div>Este elemento será ignorado pelo Alpine.jsdiv>
modelo>

Construindo um aplicativo de tarefas com Alpine.js

É hora de combinar tudo o que você aprendeu até agora e criar um aplicativo de tarefas simples com suporte de armazenamento local. Primeiro, crie uma pasta e preencha-a com um index.htm arquivo e um estilo.css arquivo. Adicione o código clichê no arquivo index.htm e inclua uma referência ao estilo.css arquivo:

<linkrele="folha de estilo"href="estilo.css">

Não se preocupe com o CSS aqui, apenas copie o estilo.css arquivo deste repositório GitHub do projeto.

Para manter os dados após o recarregamento da página, você precisa do Alpine.js persistir plugar. Adicione a compilação CDN deste plug-in como um roteiro tag, logo acima da compilação principal da CDN Alpine.js:

<roteiroadiarorigem=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">roteiro>

No corpo definir um div elemento com um dados x diretiva. Esta diretiva deve conter um array chamado todas as tarefas. Em seguida, adicione um h1 elemento com o texto "Aplicativo de Tarefas".

<divdados x="{allTasks:$persist([])}">
<h1>Aplicação de Tarefash1>
div>

O $persistir plugin é um wrapper para o JavaScript LocalStorage API. Ele informa ao navegador para armazenar a matriz no armazenamento local, para que os dados permaneçam intactos mesmo após o recarregamento da página. Adicionar um forma com um enviar diretiva que também impede a ação de envio padrão.

<forma @enviar.prevenir="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{tarefa: $refs.task.value.trim(), id: Date.now(), concluído: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Valor de entrada não pode estar vazio')
: alert('Tarefa já adicionada.');
 $refs.task.value=''
">
forma>

O $refs cláusula permite acesso ao elemento DOM com a "tarefa" ref x diretiva. O código também lida com alguma validação e garante que não adicione strings vazias ou tarefas duplicadas à lista. Antes de terminar o formulário, adicione um entrada elemento com um ref x de "tarefa" e um espaço reservado. Em seguida, adicione um botão e defina seu tipo como "enviar".

<entradatipo="texto"ref x="tarefa">
<botãotipo="enviar">Adicionar tarefabotão>

Em seguida, defina um div com a classe "itens". Este div deve conter dois outros divs: um com o dados x definido como uma matriz "incompleta" e o outro definido como uma matriz "completa". Ambos os divs devem ter um efeito x diretiva e a matriz deve ser agrupada no $persistir cláusula como mostrado anteriormente.

<divaula="Unid">
<divdados x="{incompleto:$persist([])}"efeito x="incompleto = allTasks.filter (x=>x.donefalse)">
div>

<divdados x="{completado:$persist([])}"efeito x="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

No primeiro div, adicione um h3 tag com o texto "Incompleto". Então, para cada elemento da incompleto matriz, renderize um div que contém os "controles" e a própria tarefa.

Os controles permitem que o usuário exclua um item ou marque-o como concluído:

<h3>Incompletoh3>
<modelox-para="elemento incompleto":chave="elemento.id">
<divdados x="{showControls: false}" @passe o rato por cima="mostrarControles = verdadeiro" @mouseout="mostrarcontroles = falso"
 classe="tarefa"
 >
<divaula="controles">
<divx-show="mostrarcontroles" @clique="elemento.feito=verdadeiro">[M]div>
<divx-show="mostrarcontroles" @clique="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-texto="elemento.tarefa" >div>
div>
modelo>

Você pode usar o x-para diretiva para iterar por meio de uma matriz e elementos de renderização. É similar à v-para no Vue e no Array.map() método de matriz em Reagir. O div "controls" contém dois divs com a string "[M]" e "[R]". Essas strings significam "Marcar como concluído" e "Remover". Você pode substituí-los por ícones adequados, se desejar.

O x-show diretiva define um elemento mostrar propriedade CSS para nenhum se o valor que aponta para a diretiva for falso. O segundo div no div "itens" é semelhante ao primeiro com algumas exceções notáveis: O h3 text é definido como "Completed", o primeiro filho do div "control" tem o texto "[U]" em vez de "[M]" e neste div's @clique diretiva, elemento.feito está configurado para falso.

<divx-show="mostrarcontroles" @clique="elemento.feito=falso">[VOCÊ]div>

E é isso, você repassou os fundamentos do Alpine.js e usou o que aprendeu para criar um aplicativo básico de tarefas.

Tornando o código Alpine.js mais fácil de escrever

Quando você começa a escrever o código Alpine.js, pode ser difícil entender. Felizmente, editores de código como o Visual Studio Code fornecem uma ampla variedade de extensões que facilitam o desenvolvimento.

No Marketplace de extensões, você pode obter a extensão Alpine.js IntelliSense, que facilita o trabalho com diretivas. Isso pode ajudar a melhorar sua produtividade ao usar o Alpine.js em seus projetos.