Vue.js + Fuse.js: Criando uma aplicação de busca simples e performática

Cláudio Luiz Castro
Jan 31 · 5 min read

Vue.js tem se popularizado no mundo do desenvolvimento front-end principalmente pela sua versatilidade, robustez e uma curva de aprendizado menor quando comparamos com outras soluções disponíveis no mercado.

Nesse artigo vamos construir uma aplicação de busca simples utilizando Vue.js e o Fuse.js. Para quem não conhece, como está descrito na sua própria página oficial, o Fuse.js é uma biblioteca de busca leve, e sem nenhuma dependência externa, escrita inteiramente em javascript.

Nosso app fará uma busca por um termo utilizando uma chave pré definida dentro de um objeto (Json) previamente carregado em nossa aplicação.

Nesse artigo vamos utilizar conceitos básicos e intermediários do Vue.js, recomendados para quem está começando a aprender o framework e já possui conhecimentos básicos de Javascript ;)


Primeiro vamos iniciar o nosso projeto com o vue-cli, uma ferramenta oficial, mantida pelo core team do Vue, que nos ajuda a fazer o trabalho pesado na hora de iniciar um novo projeto vue. Se você ainda não possui o vue-cli instalado na sua máquina, instale-o utilizando o npm, rodando o seguinte comando no terminal:

npm install -g @vue/cli

Após a instalação, pelo terminal, entre no diretório que deseja inicializar o projeto rodando o seguinte comando:

vue create busca-vue-fuse

Escolha a primeira opção que aparecerá no terminal “default (babel , eslint)” e aperte enter. Após a instalação o vue-cli criará um projeto com o nome busca-vue-fuse em um diretório de mesmo nome, já com toda a estrutura de pastas e dependências necessárias para o nosso projeto funcionar. A estrutura do projeto deve ser mais ou menos assim:

Estrutura de pastas criada pelo vue-cli.

Entre na pasta do projeto e bote ele para funcionar:

cd busca-vue-fuse && npm run serve

O nosso web app irá rodar em http://localhost:8080, e ao entrar você deverá ver essa tela:

http://localhost:8080

Tudo certo, já estamos prontos para começar o nosso app de busca.

Criando o primeiro componente

Vamos começar criando o nosso primeiro componente que irá se chamar Buscador.vue e será responsável por ler o termo digitado pelo usuário em um input text e fazer a busca retornando os resultados que o fuse.js encontrar.

Dentro da pasta components crie o arquivo Buscador.vue e inicie a sua estrutura básica adicionando o seguinte código:

O que fizemos nesse componente foi: criamos uma “variável” para o nosso componente chamada termo que inicializamos com uma string vazia dentro do método data() que retorna um objeto contendo todas as “variáveis” do nosso componente Vue. Na parte do template, criamos o nosso Input que será responsável por atribuir o valor digitado à nossa variável termo. Fazemos isso através do atributo v-model="termo" com ele, a nossa variável se torna reativa ao texto digitado no input, ou seja, tudo o que o usuário digitar no input será atribuído como valor de termo.

Agora, iremos excluir o componente HelloWorld que o vue-cli cria como padrão e vamos substituir a sua chamada no componente App.vue. O componente App é o responsável por renderizar a nossa aplicação na tela inicial. Não iremos entrar em detalhes de como essa parte de rotas do Vue funciona, por hora troque as chamadas de HelloWorld para Buscador no componente src/App.vue.

Feito isso já será possível ver o nosso input em localhost:8080

localhost:8080/

Para prosseguir com o desenvolvimento, vamos agora instalar o Fuse.js. Entre na pasta raiz do nosso projeto pelo terminal, cd busca-vue-fuse e instale o Fuse.js com o seguinte comando:

npm install fuse.js

Após a instalação ser concluída nós já poderemos usar o fuse no nosso projeto.

Vamos começar adicionando o código do Fuse no nosso componente Buscador.vue, mas antes é importante que nós tenhamos o arquivo que irá conter os dados que o fuse vai buscar. Para o nosso exemplo, vamos utilizar um json que contém a lista de alguns aviões presentes no MUSAL (Museu Aeroespacial) no Rio de Janeiro.

crie o arquivo base.js no dentro de src/ e adicione o seguinte código contendo o nosso array de aviōes:

Com a nossa lista de aviōes em mãos, vamos importa-la no nosso componente Buscador.vue e criar o nosso dado computado (computed) que irá conter o código de busca do Fuse.

Como podem ver, o código do fuse é bem simples e fácil de implementar. Aqui nós vamos usar apenas as configurações básicas, porém no site oficial do fuse.js é possível encontrar a documentação completa.

O que fizemos no código acima foi o seguinte: Criamos um dado computado, listaAvioesEncontrados() que retorna o resultado da busca feita pelo fuse.

Criamos um novo objeto Fuse new Fuse que importamos da biblioteca instalada, e atribuímos a uma cost . O nosso novo objeto precisa de dois parâmetros para funcionar: A lista de dados que será feita a busca, e um objeto contendo a nossa configuração do fuse fuseConfig . Dentre os atributos do fuseConfig, está a key que será a chave de referência que o fuse vai usar para procurar os resultados dentro da nossa lista, que nosso nosso caso será o nome da aeronave (aviao_nome).

Feito isso retornados o método search disponível no fuse, passando o termo pelo qual queremos buscar. O fuse.search() retorna um array com os objetos que correspondem ao resultado encontrado.

Depois de encerrar, explicarei um pouco melhor cada atributo presente no nosso objeto de configuração do Fuse.

Exibindo os resultados

Por fim, exibimos os resultados retornados pelo nosso dado computado. Para isso usamos o v-for do Vue.js. Adicione o código abaixo no <template> abaixo do campo de busca.

Feito isso já poderá ver o resultado, digitando o nome de um avião:

Nossa busca funcionado perfeitamente :)

Uma breve explicação do FuseConfig

O que significa cada atributo.

  • ThreShould: Defini em que ponto o algoritmo de busca do Fuse “desiste” de procurar pelo termo destacado. Quando setamos 0.0 o fuse buscará pelo termo exato.
  • Location: Determina em que parte do texto (aproximadamente) o algoritmo deve iniciar a busca pelo termo.
  • Minimum character length: Determina se o algoritmo deve começar a buscar a partir de um ou mais algarismos digitados. Se quisermos ignorar letras separadas, devemos setar esse valor para 2. Ao deixarmos em 1 o fuse começa a busca a partir da primeira letra digitada.
  • Max pattern length: O tamanho máximo que o fuse suporta para a busca.

Conclusão

Essa foi uma pequena demonstração do que o Fuse.js é capaz de fazer. Ele é uma ferramenta muito poderosa e fácil de se implementar. Além de ser extremamente leve para a sua aplicação. No site oficial do fuse, está descrito com muito mais detalhes cada atributo de configuração disponível, e como utiliza-los.Encorajo você a dar uma olhada lá, é bem bacana. Aqui você pode baixar ver o projeto completo no meu GitHub.

Enfim, espero que curtam o Fuse tanto quanto eu. ;)

Cláudio Luiz Castro

Written by

Front End Developer. Javascript lover. Aircraft enthusiast.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade