DEV Community: Vitor Ceron

Suspense - Vue 3

Vitor Ceron — Tue, 13 Oct 2020 01:45:52 +0000

Introdução

O suspense é uma featured que foi implementada no Vue 3. O suspense é um componente especial como o transition, e pode ser utilizado para colocar um "loading" na tela enquanto um componente não carrega por completo.

O que mostra que um componente finalizou o seu carregamento por completo, é quando a função setup finaliza o seu processamento. O setup, basicamente falando, é a função que entrou pra substituir o data.

Antes dessa feature, era necessário criar algumas variáveis para saber se o componente foi carregado, se ele carregou e não tem dados, ou se ainda está carregando, para que fosse possível colocar o comportamento de "loading"" na tela. Com o suspense, isso fica mais implícito, facilitando a escrita desse tipo de componente, e o entendimento para quem está lendo.

Estrutura do Suspense

Estruturalmente, é um componente mais tranquilo de visualizar e entender o que está fazendo, veja um exemplo:

<Suspense>
  <template #default>
    <ListaDeProdutos />
  </template>
  <template #fallback>
    <div>Carregando...</div>
  </template>
</Suspense>

No caso, o componente <Suspense> envolve o componente que será renderizado. O primeiro template, significa que será mostrado na tela, o componente que está dentro dele, porém só será renderizado, assim que a função setup dele finalizar seu processamento. O segundo template, que é o que contém a #fallback, irá ser mostrado na tela enquanto a função setup do componente ListaDeProdutos não finaliza o seu processamento.

Múltiplos componentes

Dentro do template #default, é possível colocar diversos componentes, e o próprio suspense irá continuar fazendo seu controle normalmente, porém, só irá exibir todos os componentes, assim que a função setup de todos sejam processadas.

<Suspense>
  <template #default>
    <ListaDeProdutos />
    <ListaDeClientes />
    <InformacoesDoCaixa />
  </template>
  <template #fallback>
    <div>Carregando...</div>
  </template>
</Suspense>

Exemplo prático

Para este exemplo, vou utilizar uma instalação padrão do Vue. Nesse projeto, irei criar um componente chamado ListProductsComponent.vue, dentro do diretório de componentes, dentro dele só terá um texto e o componente setup com um setTimeout para simular uma função assíncrona, dessa forma:

//ListProductsComponent.vue
<template>
  <div>
      teste de componente de listagem 
  </div>
</template>

<script>
export default {
    name: 'ListProductsComponent',
    async setup(){
        const promise = new Promise( (resolve) => {
            setTimeout(function(){
                resolve('Sucess');
            }, 4000);
        });

        const product = await promise;
        return {
            product
        }
    }
}
</script>

Com isso, esse componente irá demorar 4 segundos para finalizar o processamento dos dados que estão dentro do setup.

Posterior a criação do componente, será necessário realizar a importação deste, dentro do App.vue. Depois de importado, agora é preciso colocar o componente suspense, e os templates default e de fallback, para que tudo funcione corretamente, o App.vue deve ficar assim:

//App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <Suspense>
    <template #default>
      <list-products-component />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
</Suspense>
  
</template>

<script>
import ListProductsComponent from './components/ListProductsComponent.vue'

export default {
  name: 'App',
  components: {
    ListProductsComponent
  }
}
</script>

Com esse código, o resultado será que quando carregar a tela, irá aparecer a tela de loading, e só depois de 4 segundos que irá aparecer o componente com o texto adicionado.

Vídeo completo sobre o Suspense

Caso você prefira acessar esse conteúdo em vídeo, gravei um completo sobre esse assunto, no vídeo tem um slide detalhado sobre cada ponto do Suspense, mostrando passo a passo na teoria, e também tem um exemplo prático de como realizar a criação de um projeto com o Vue3, e a implementação do componente Suspense, veja o vídeo:

https://youtu.be/RI3CvQcXJwE

Conclusão

O Vue 3 irá adicionar novas funcionalidades a fim de melhorar o desenvolvimento, o processamento, deixar projetos mais leves, e entre outras coisas. Essa é uma das novidades dessa versão, em breve irei trazer mais conteúdos sobre o Vue 3, até o próximo post :)

Rererências:

https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/

Javascript forEach

Vitor Ceron — Fri, 11 Sep 2020 23:28:06 +0000

Introdução

O Javascript contém diversas estruturas de repetição, e uma delas é o forEach. O forEach é utilizado para percorrer um array, que pode ser um array simples, ou um array de objetos.

Array simples

O forEach funciona da seguinte maneira, a partir de um array, você usa o forEach, e na prática, ele executará uma função para cada elemento do seu array. Essa função é chamada de função de callback. Vamos ver um exemplo:

let array_de_pessoas = ['João', 'Maria', 'José'];
array_de_pessoas.forEach((valorAtual, indice, array) => {
  console.log(`${valorAtual}, ${indice}, ${array}`);
  //irá imprimir o resultado no console:
  //João, 0, João,Maria
  //Maria, 1, João,Maria
});

Vamos entender melhor o que acontece nessa função. Na primeira linha, eu tenho o array de pessoas no qual será percorrido pela função foreach. Na linha 2 eu faço o array de pessoas chamar a função forEach, e depois do primeiro parênteses, é a função que é executada para cada valor do array, a função de callback.

A função de callback pode receber até 3 parâmetros, e eles não são obrigatórios, caso queira, pode utilizar somente o primeiro e não passar mais nenhum.

O primeiro parâmetro, é o valor atual, esse valor vai ser cada item do array, no nosso exemplo, temos um array com 3 posições, o forEach ele vai executar a função de callback uma vez para cada posição do array, sendo assim, na primeira vez que executar, o nosso valor atual conterá o nome do João, na segunda terá Maria, e na terceira José.

O segundo é o índice, todo array, tem um índice, que é utilizado para marcar cada posição do array, e o índice começa sempre em 0.

O terceiro é o array propriamente dito, caso você precise, você pode utilizar esse terceiro parâmetro para realizar algum processamento com esses dados, porém normalmente não é comum precisar desse parâmetro.

Então dessa forma você pode percorrer todo um array, e manipular os dados desejados, e com esses parâmetros você pode utilizar melhor sua lógica para resolver determinado problema.

Array de objetos

Os arrays de objetos são muito comuns, e há momentos que precisamos percorrer esses dados, e funciona da mesma maneira do array simples, a única diferença é que em cada posição, que seria o valorAtual, em vez de ter somente uma string, vai ter um objeto literal, e dessa forma você pode acessar cada posição do objeto, por exemplo:

let pessoas = [
  {
    nome: 'Joao', 
    idade: 30
  }, 
  { 
    nome: 'Maria', 
    idade: 20 
  }
];
pessoas.forEach((pessoa, index, array) => { 
    console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`)
    //vai aparecer no console
    //O nome é: João e tem a idade 30
    //O nome é: Maria e tem a idade 20
});

Break foreach, parando o loop

Há momentos nos quais você pode querer parar a execução de um loop, por exemplo, você está procurando por um valor dentro de um array, e quando você o acha, você não quer continuar passando pelo loop, porque não precisa, porém não é possível fazer isso com o foreach.

Caso você precise fazer isso, é necessário utilizar o loop for que com ele é possível ter o controle de parada com o break.

Pulando para a próxima posição "continue"

No forEach não é possível dar um continue e pular para a próxima posição do array, mas o que da para fazer, é colocar um return na função, que no caso, quando a função estiver executando em determinado elemento e você colocar o return, ele vai parar a execução naquela posição e vai para a próxima, por exemplo:

let pessoas = [
  {
    nome: 'Joao', 
    idade: 30
  }, 
  { 
    nome: 'Maria', 
    idade: 20 
  }
];
pessoas.forEach((pessoa, index, array) => { 
    if(idade > 25){
         return;
    }
    console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`)
    //vai aparecer no console
    //O nome é: Maria e tem a idade 20
});

Nesse caso, o forEach pulou o João, porque ele tem idade maior que 25, e então o forEach pulou essa posição no array e foi executar a próxima posição.

Para saber mais

Caso você queira ver uma explicação detalhada e com um exemplo prático e real que pode ser utilizado no dia-a-dia, gravei um vídeo que vou deixar aqui abaixo:

https://youtu.be/Q3tiAEvWhOE

Conclusão

O forEach é uma estrutura de repetição, que se bem utilizada, pode ser muito útil. Se estiver precisando percorrer um array para realizar algum processamento e não esperar nenhum retorno, essa é uma opção ideal para solucionar o seu problema. Espero que tenha gostado, até o próximo post :)

Referências:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Newsletter

http://programandosolucoes.dev.br/assinar-a-newsletter/

Como utilizar o Bootstrap-vue Table

Vitor Ceron — Sat, 05 Sep 2020 13:23:10 +0000

Introdução

O Bootstrap-vue Table é a tabela padrão do framework e contém recursos incríveis que com certeza irão aumentar sua produtividade.

A Table do Bootstrap-vue é otimizada para que os dados que venham por meio de uma API ou até um processamento dentro do sistema, consiga renderizar a tabela.

Outro ponto importante é que a tabela tem diversas variações e customizações, abrindo um leque gigante de oportunidades. Com certeza alguma das variações irá se adaptar ao que precisa.

Exibindo os Dados na Tabela

o Bootstrap-vue Table, basicamente espera somente um array de objetos para que consiga exibir os dados. Isso é interessante, visto que normalmente os retornos de APIs, vem nesse formato. Segue um exemplo de como renderizar uma tabela:

<template>
  <div>
    <b-table :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro' },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina' },
          { age: 89, first_name: 'José', last_name: 'Silva' }
        ]
      }
    }
  }
</script>

E o resultado fica da seguinte forma:

Definindo os campos a serem exibidos

Na tabela, pode ser configurado, quais campos você deseja que apareça para o seu usuário. Por exemplo, o retorno da sua API retorna 4 campos, porém você deseja que só apareça 3. Para isso você pode configurar a prop fields, que ela irá exibir somente as colunas desejadas. No exemplo abaixo, o sistema recebe 4 informações (nome, sobrenome, idade, ativo), porém só irá exibir 3 (nome, sobrenome, idade):

<template>
  <div>
    <b-table :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ]
      }
    }
  }
</script>

Ordenação dos dados

Os dados que estão dentro das colunas podem ser ordenados facilmente. Essa configuração também fica dentro da prop fields. Anteriormente, configuramos a prop em um array, porém ela também pode ser um objeto que recebe alguns valores, e um deles é o sortable

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Idade',
            sortable: true
          }
        ],
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ]
      }
    }
  }
</script>

O resultado disso, vai ser no topo da tabela ter a opção onde você pode clicar e ordenar os dados de forma crescente ou decrescente de maneira bem fácil:

Coluna personalizada

Na maioria dos casos, precisamos personalizar colunas para colocar algumas informações. Por exemplo, nas tabelas, é comum precisarmos ter um botão editar e excluir um registro. Vamos implementar isso agora por meio do slot:

  
    
        
            Editar
            Excluir

<script>
export default {
  data() {
      return {
        items: [
          { id: 1, age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { id: 2, age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ],
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Idade',
            sortable: true
          },
          {
            key: 'actions',
            label: 'Ações',
          }
        ],
      }
    }
}
</script>

Para essa tabela, adicionei em cada item, um ID, que será utilizado somente para ter um campo único para cada usuário, simulando um banco de dados. Foi adicionado uma coluna personalizada com o v-slot:cell(actions)="data". No caso esse actions é o nome do key que está dentro do fields. O data contém os dados do items que foi passado para o b-table, então o data.id vai conter o id de cada cliente da tabela. Essa tabela fica assim:

Cabeçalho Fixo

Em grandes tabelas, é necessário que o cabeçalho fique fixo, para que o seu usuário consiga saber qual a coluna independente da posição que ele está no momento. Para configurar esse cabeçalho fixo é feito de maneira bem simples, somente passar a prop sticky-header:

<template>
  <div>
    <b-table sticky-header :items="items" head-variant="dark"></b-table>
  </div>
</template>

<script>
export default {
  data() {
      return {
        items: [
          { id: 1, age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { id: 2, age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
        ],
      }
    }
}
</script>

Repare que mesmo que tenha muitos dados, o topo da tabela não se move:

Para saber mais

Caso você queira ver um vídeo com mais informações sobre o assunto, eu gravei um e publiquei no meu canal no youtube:

https://youtu.be/e1XoO6Owolw

Conclusão

O Bootstrap-vue Table é um assunto que é muito extenso, porque tem diversas variações e configurações que podem ser feitas. Provavelmente no seu dia-a-dia você irá precisar configurar algumas dessas coisas, porque elas dão muito mais produtividade pra você e pro usuário do seu sistema. Muito obrigado por ter lido até aqui, qualquer sugestão de conteúdo, pode deixar nos comentários, valeu :)

Newsletter