DEV Community: Pablo Veiga

Why ['1', '5', '11'].map(parseInt) in JS returns [1, NaN, 3]?

Pablo Veiga — Fri, 21 Jun 2024 13:03:09 +0000

In JavaScript, the map function applies a given function to each element of an array and returns a new array with the results. When you use map with parseInt like ['1', '5', '11'].map(parseInt), the result might not be what you expect due to the way parseInt and map interact. Let's break down what happens.

Understanding parseInt

The parseInt function in JavaScript parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

parseInt(string, radix)

string: The string to be parsed.
radix: An integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string.

If radix is not provided, parseInt will use different heuristics to determine the base of the string, which can lead to unexpected results.

The map Function

The map function calls the provided function once for each element in an array, in order, and constructs a new array from the results.

array.map(function(currentValue, index, array) {
  // function body
})

currentValue: The current element being processed in the array.
index: The index of the current element being processed in the array.
array: The array map was called upon.

Combining map and parseInt

When you use parseInt inside map, parseInt is called with two arguments: the element of the array and the index of that element. However, parseInt can take two arguments where the second argument is the radix. So, the index is inadvertently used as the radix.

Here's how it breaks down:

For the first element '1' at index 0:

parseInt('1', 0) // 0 is interpreted as the radix, which defaults to 10
// Result: 1

For the second element '5' at index 1:

parseInt('5', 1) // 1 is interpreted as the radix, but radix 1 is invalid
// Result: NaN (Not a Number)

For the third element '11' at index 2:

parseInt('11', 2) // 2 is interpreted as the radix (binary)
// '11' in binary is 3 in decimal
// Result: 3

Thus, ['1', '5', '11'].map(parseInt) results in [1, NaN, 3].

Correct Usage

To avoid this issue, you can pass a function that only uses the first argument of parseInt and defaults the radix to 10:

['1', '5', '11'].map(str => parseInt(str, 10)) // [1, 5, 11]

or just ommit the radix param:

['1', '5', '11'].map(str => parseInt(str)) // [1, 5, 11]

Here, str is explicitly converted to an integer using a base of 10 for each element in the array, resulting in [1, 5, 11].

Cover image and article content created with the help of AI

Why ['1', '5', '11'].map(parseInt) in JS returns [1, NaN, 3]?

Pablo Veiga — Fri, 21 Jun 2024 13:03:09 +0000

Understanding parseInt

The parseInt function in JavaScript parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

parseInt(string, radix)

string: The string to be parsed.
radix: An integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string.

If radix is not provided, parseInt will use different heuristics to determine the base of the string, which can lead to unexpected results.

The map Function

The map function calls the provided function once for each element in an array, in order, and constructs a new array from the results.

array.map(function(currentValue, index, array) {
  // function body
})

currentValue: The current element being processed in the array.
index: The index of the current element being processed in the array.
array: The array map was called upon.

Combining map and parseInt

Here's how it breaks down:

For the first element '1' at index 0:

parseInt('1', 0) // 0 is interpreted as the radix, which defaults to 10
// Result: 1

For the second element '5' at index 1:

parseInt('5', 1) // 1 is interpreted as the radix, but radix 1 is invalid
// Result: NaN (Not a Number)

For the third element '11' at index 2:

parseInt('11', 2) // 2 is interpreted as the radix (binary)
// '11' in binary is 3 in decimal
// Result: 3

Thus, ['1', '5', '11'].map(parseInt) results in [1, NaN, 3].

Correct Usage

To avoid this issue, you can pass a function that only uses the first argument of parseInt and defaults the radix to 10:

['1', '5', '11'].map(str => parseInt(str, 10)) // [1, 5, 11]

or just ommit the radix param:

['1', '5', '11'].map(str => parseInt(str)) // [1, 5, 11]

Here, str is explicitly converted to an integer using a base of 10 for each element in the array, resulting in [1, 5, 11].

Useful English Abbreviations - Part I

Pablo Veiga — Wed, 08 Feb 2023 00:11:37 +0000

Working remotely is quite common these days. Not only for IT people, but for professionals of several different areas. Having said that, communication is key to achieve great results.

No! This post is neither an article about the infamous home-office nor any kind of doubtful coaching session for you to grow on your career.

Let's talk about ABBREVIATIONS 🫢 (what?!)

Considering that human beings tend to be a little bit lazy, not only when speaking but also when writing, I listed some of the most common abbreviations you might see when talking to someone using text messages.
Some of them are extremely common in working environments and some are likely to be sent in an informal conversation.
Either way, it might be useful if you, like me, have already come across some crazy initials during a chat and had no idea what that meant.

BRB - Be Right Back

Mainly used when you need to drop a meeting shortly to go to the bathroom or to sip your tasty wine while your camera is off.

IMHO - In My Humble Opinion 😌

This is used when you need to (politely) disagree with what someone else said. Something like: "Yeah, I see your point. But, IMHO, I don't think we should go that way".

TBH - To Be Honest

When someone is making clear they're sharing a sincere opinion (even though no one else has asked for).
"Well... TBH, I'm here just for the money."

LMAO - Laughing My Ass Off 🤣

This is an English expression to use when you want to show someone you found something extremely funny (even though your real face might be showing the opposite 😒).

OMG - Oh My God! 😨

This is one of the classic sentences used by Discovery Channel interviewees. This will tell people how surprised you are after someone said something (even if it's not that interesting at all.)

ASAP - As Soon As Posible 💨

Say this when you wanna ask someone to stop beating around the bush and deliver that infamous report immediately or when you almost need to apologize to someone for not doing something you were supposed to.

NP - No Problem 👍

Use that when someone apologizes immediately after saying something stupid or when they say they're sorry about forgetting to send that urgent e-mail (even though you might be pissed off with them for that 😅).

LGTM - Looks Good To Me 👌

This is extremely famous and basically means that you haven't read or checked anything related to your colleague's work but you want to get rid of that as quickly as possible.

PTAL - Please Take Another Look 👀

This one is for those times when you revise or fix something, for example, a task description or a report and you want people to “take another look” at it. Read: "this is rubbish, please do it again 😬)

Conclusion

Since many people are working remotely, text communication is something extremely important and present nowadays. Having the ability to communicate efficiently leverages common understanding and collaboration. If you talk frequently to native English speakers you'll commonly find yourself Googling some expression or abbreviations. This article (hopefully the first part of a second yet to be written) brings some of the most common abbreviations used in English written communication.
I hope it helps you!

VueJS - Drag 'n Drop

Pablo Veiga — Fri, 01 Oct 2021 11:58:08 +0000

For some time, it was necessary to write a lot of JavaScript code in order to implement the famous drag 'n drop feature in a web application.

Fortunately, in January of 2008, W3C released the fifth version of HTML which provides the scripting Drag and Drop API that can be used with JavaScript.

TL;DR

In this article you're going to learn how to implement a few reusable components in order to add drag and drop capabilities to your next VueJS Project.

The whole sample code available in this article is based on VueJS 3.

It's important to mention that you may find several third-party libraries that implement drag and drop features. That's fine and you will probably save time by using them.
The goal here is just to practice a little bit of VueJS, see how HTML 5 Drag and Drop API works and also create your own reusable and lightweight components without the need of any external dependency.

If you still don't know how to create a VueJS project from scratch, I recommend you to take a look at this article through which I explain how I structure my own VueJS projects from scratch.

Create a new VueJS Project and let's get hands dirty!

Droppable Item

We're going to start by creating a simple component that will allow other elements to be dragged into it.

We're going to call it DroppableItem and it will look like this:

<template>
  <span
    @dragover="handleOnDragOver"
    @dragleave="onDragLeave"
    @drop="onDrop"
  >
    <slot />
  </span>
</template>

<script>
export default {
  name: 'DroppableItem',
  props: [
    'onDragOver',
    'onDragLeave',
    'onDrop'
  ],
  setup(props) {
    const handleOnDragOver = event => {
      event.preventDefault()
      props.onDragOver && props.onDragOver(event)
    }

    return { handleOnDragOver }
  }
}
</script>

Let's dive deeper into each part of this implementation.

The template is very simple. It is made of a unique span element with a slot inside it.
We're going to add some event listeners to this very root element, which are:

@dragover: triggered when dragging an element over it;
@dragleave: triggered when dragging an element out of it;
@drop: triggered when dropping an element into it;

Even though it's not a good practice, we're not defining the prop types in this example just to keep it simple.

Notice that we wrap the onDragOver event within a handleDragOver method. We do this to implement the preventDefault() method and make the component capable of having something dragged over it.

We are also making use of a slot to allow this component to receive HTML content and "assume the form" of any element that is put inside it.

That's pretty much what's needed to create our DropableItem.

DraggableItem

Now, let's create the component that will allow us to drag elements around the interface.
This is how it will look like:

<template>
  <span
    draggable="true"
    @dragstart="handleDragStart"
  >
    <slot />
  </span>
</template>

<script>
export default {
  name: 'DraggableItem',
  props: ['transferData'],
  setup(props)  {
    const handleDragStart = event => {
      event.dataTransfer.setData('value', JSON.stringify(props.transferData))
    }

    return { handleDragStart }
  }
}
</script>

Let's dive deeper into this implementation. Starting with the template:

draggable - This attribute informs the browser that this is a draggable element.

Initially, we need to set the draggable attribute as true to enable the Drag and Drop API for the span element that is around our slot. It's important to mention that, in this case, even though we're working with VueJS, we have to set the value "true" explicitly, otherwise it won't work as expected.

@dragstart - This is the default HTML event listened by VueJS. It is triggered when the user clicks, holds and drags the element.

Now let's take a look at the component's setup:

We defined a method named onDragStart that will be called when the user starts to drag the component.

In this method, we pass the transferData prop value to the dataTransfer property of the dragstart event.

According to MDN Web Docs:

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation.

We need to serialize the value before setting it to dataTransfer.
This will allow us to retrieve it when the element has been dropped.

So far, so good!
This is all we need to build generic and reusable wrapper components to drag and drop elements around our application.

Now, to make use of them, we need to define the content of their default slots.
Let's suppose we want to create draggable circles that can be dragged into a square area.
Assuming they will be implemented in the App component, here is how it would look like:

<template>
  <div>
    <DraggableItem v-for="ball in balls" :key="ball.id" :transferData="ball">
      <div class="circle">
        {{ ball.id }}
      </div>
    </DraggableItem>    
    <hr />
    <DroppableItem>
      <div class="square" />
    </DroppableItem>
  </div>
</template>

<script>
import { computed } from 'vue'
import DraggableItem from '@/components/DraggableItem'
import DroppableItem from '@/components/DroppableItem'

export default {
  name: 'App',
  components: {
    DraggableItem,
    DroppableItem
  },
  setup() {
     const balls = [ { id: 1 }, { id: 2 }, { id: 3 } ]
     return { balls }
  }
}
</script>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  border: 1px solid red;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.square {
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 1px dashed black;
  padding: 10px;
}
</style>

In this example, we can already drag each one of the balls, but nothing happens when we do it.
In order to make this implementation really work, we need to improve the code to make it more dynamic.
We are going to add:

availableBalls - a computed property that will represent the balls available to be dragged. As the user drags a ball into the square, it will no longer be available to be dragged again.
selectedBalls - a reactive variable that will represent all of the balls that were dragged into the droppable square.
isDroppableItemActive - a reactive variable that will represent the state of the droppable square. We will use it to change the background color of the square when an element is being dragged over it.
onDragOver - a method that will be called when a ball is dragged over the square. It will be responsible for setting the isDroppableItemActive variable and changing its background color.
onDragLeave - a method that will be called when a ball is dragged out of the square. It will be responsible for resetting the isDroppableItemActive variable and its background color.
onDrop - a method that will be called when a ball is dropped into the square. It will reset its background color and update the selectedBalls variable.

Notice that we use the dataTransfer.getData() of Drag and Drop API to retrieve the data of that item that was dragged.
As it is a serialized value, we need to use JSON.parse to "unserialize" it and turn it into a valid object.

We are going to use Lodash FP's differenceBy method just for the sake of simplicity but you can implement your own filtering.

This is how our App component will look like after the improvements:

<template>
  <div>
    <DraggableItem v-for="ball in availableBalls" :key="ball.id" :transferData="ball">
      <span class="circle">
        {{ ball.id }}
      </span> 
    </DraggableItem>
    <hr />
    <DroppableItem v-bind="{ onDragOver, onDragLeave, onDrop }">
      <span :class="droppableItemClass">
        <span class="circle" v-for="ball in selectedBalls" :key="ball.id">
          {{ ball.id }}
        </span>
      </span>
    </DroppableItem>
  </div>
</template>

<script>
import { differenceBy } from 'lodash/fp'
import { computed, ref } from 'vue'

import DraggableItem from './DraggableItem'
import DroppableItem from './DroppableItem'

export default {
  name: 'DraggableBalls',
  components: {
    DraggableItem,
    DroppableItem
  },
  setup() {
    const balls = [ { id: 1 }, { id: 2 }, { id: 3 } ]

    const selectedBalls = ref([])
    const isDroppableItemActive = ref(false)

    const availableBalls = computed(() => differenceBy('id', balls, selectedBalls.value))
    const droppableItemClass = computed(() => ['square', isDroppableItemActive.value && 'hover'])

     const onDragOver = () => {
       isDroppableItemActive.value = true
     }

     const onDragLeave = () => isDroppableItemActive.value = false

     const onDrop = event => {
        const ball = JSON.parse(event.dataTransfer.getData('value'))
        selectedBalls.value = [
          ...selectedBalls.value,
          ball
        ]
        isDroppableItemActive.value = false
     }

     return { availableBalls, selectedBalls, droppableItemClass, onDragOver, onDragLeave, onDrop }
  }
}
</script>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  border: 1px solid red;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.square {
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 1px dashed black;
  padding: 10px;
}

.hover {
  background-color: rgb(172, 255, 158);
}
</style>

And this is the visual result:

VueJS - Drag and Drop Example

You can find a more complete and fully-working example in this repo.

I hope you liked!
Please, share and comment.

Cover image by E-learning Heroes

VueJS - Componente Reutilizável de Carregamento de Dados

Pablo Veiga — Mon, 13 Sep 2021 21:13:13 +0000

É possível contar com os dedos de uma mão as aplicações web ao redor do mundo que não precisam realizar carregamento de dados remotos e exibi-los aos usuários.

Então, assumindo que a sua próxima Single Page Application (construída usando VueJS, logicamente 😍) vai precisar obter dados de um servidor remoto, eu gostaria de te ensinar a construir um componente reutilizável que vai ser responsável por gerenciar a visualização de estado de outros componentes que dependem de carregamento de dados e prover, facilmente, feedback para seus usuários.

Começando pelo começo

Inicialmente, é preciso ter em mente o quão importante é a exibição correta do estado atual da aplicação para que os usuários saibam o que está acontecendo e o que esperar dela.
Isso vai fazer com que eles não fiquem em dúvida se a interface travou enquanto esperam informações serem carregadas e também informá-los caso ocorra algum erro para que possam entrar em contato com o suporte imediatamente, se necessário.

Padrão Loading / Error / Data (Carregamento / Erro / Dado)

Eu não tenho certeza se é um padrão "oficial" (me mande uma mensagem caso você saiba algo a respeito) mas esta é uma forma muito fácil de implementar e que vai ajudar você a organizar a exibição do estado da sua aplicação de forma bastante simples.

Considere o objeto abaixo. Ele representa o estado inicial de uma lista de users (usuários):

const users = {
  loading: false,
  error: null,
  data: []
}

Ao construir objetos neste formato, você poderá alterar o valor de cada atributo de acordo com o que está acontecendo na sua aplicação e utilizá-los para exibir na tela qualquer coisa de acordo com cada estado por vez. Portanto, quando a aplicação estiver carregando os dados, basta setar loading para true e quando o carregamento for concluído, setar para false.

De forma similar, error e data também devem ser atualizados de acordo com o resultado da chamada ao back end: se algum erro ocorreu, você pode atribuir a mensagem ao atributo error e, caso a requisição tenha sido concluída e o dado entregue com sucesso, basta atribuí-lo ao atributo data.

Especializando

Um objeto de estado, como explicado acima, ainda é muito genérico. Vamos inseri-lo no contexto de uma aplicação VueJS.
Faremos isso implementando um componente utilizando slots, o que vai nos permitir passar o dado recebido pelo componente Fetcher para os componentes filho.

De acordo com a documentação do VueJS:

Vue implementa uma API de distribuição de conteúdo que é modelada após o atual detalhamento da especificação dos componentes da Web, usando o elemento <slot> para servir como saída de distribuição de conteúdos.

Para iniciar, crie uma estrutura básica de um componente Vue e implemente o objeto users como variável reativa dentro de data conforme o exemplo abaixo:

export default {
  data() {
    return {
      loading: false,
      error: null,
      data: null
    }
  }
}

Agora, crie o método responsável por fazer o request, carregar os dados e atualizar a variável de estado. Perceba que fazemos a chamada ao método que carrega os dados no hook created para que seja executado assim que o componente for criado.

import { fetchUsers } from '@/services/users'

export default {
  data() {
    return {
      loading: false,
      error: null,
      data: []

    }
  },
  created() {
    this.fetchUsers()
  }
  methods: {
    async fetchUsers() {
      this.loading = true
      this.error = null
      this.users.data = []

      try {
        fetchUsers()
      } catch(error) {
        this.users.error = error
      } finally {
        this.users.loading = false
      }
    }
  }
}

O próximo passo é implementar o template que irá exibir elementos diferentes de acordo com os estados de Loading (carregando), Error (erro) e Data (dados) usando slots para passar o valor de data para componentes filhos, caso esteja definido.

<template>
  <div>
    <div v-if="users.loading">
      Loading...
    </div>
    <div v-else-if="users.error">
      {{ users.error }}
    </div>
    <slot v-else :data="users.data" />    
  </div>
</template>

Com o componente Fetcher construído, vamos utilizá-lo em outro componente chamado UsersList, que irá representar nossa lista de usuários.

<template>
   <UsersFetcher>
     <template #default="{ data }">
       <table>
         <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
         </tr>
         <tr v-for="user in data" :key="user.id">
           <td>{{ user.id }}</td>
           <td>{{ user.name }}</td>
           <td>{{ user.age }}</td>
         </tr>
       </table>
     </template>
   </UsersFetcher>
</template>

import UsersFetcher from '@/components/UsersFetcher'

export default {
  name: 'UsersList',
  components: {
    UsersFetcher
  }
}

Tornando o componente reutilizável

Esta foi uma forma muito simples de se implementar o padrão Loading / Error / Data a fim de capturar e exibir feedback correto para os usuários quando a aplicação precisa buscar dados remotos. Porém, a implementação acima não é muito reutilizável já que está carregando e manipulando, estritamente, usuários.

Para tornar o componente mais genérico, basta implementarmos algumas pequenas mudanças e assim será possível utilizá-lo em qualquer lugar onde nossa aplicação precise buscar e exibir dados.

Primeiro, vamos tornar o componente Fetcher mais dinâmico visto que, em uma aplicação real, teremos que carregar diversos tipos de dados que, por sua vez, requerem métodos de serviço e nomes de variáveis específicos.
Vamos utilizar props para passar valores dinâmicos para dentro do componente.

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      {{ error }}
    </div>
    <slot v-else :data="data" />    
  </div>
</template>

export default {
  name: 'Fetcher',
  props: {
    apiMethod: {
      type: Function,
      required: true
    },
    params: {
      type: Object,
      default: () => {}
    },
    updater: {
      type: Function,
      default: (previous, current) => current
    },
    initialValue: {
      type: [Number, String, Array, Object],
      default: null
    }
  }
}

Analisando cada uma das props definidas acima:

apiMethod [obrigatória]: a função responsável por realizar a chamada à API para carregar dados externos

params [opcional]: os parâmetros enviados na chamada do método de serviço (apiMethod), quando necessários. Ex.: quando precisamos carregar dados usando filtros.

updater [opcional]: função que irá transformar os dados recebidos.

initialValue [opcional]: o valor inicial do atributo data do objeto de estado.

Após implementar estas props, vamos criar agora o mecanismo principal que irá permitir que o componente seja reutilizado.
Utilizando as props definidas, podemos agora definir as operações e controlar o estado do componente de acordo com o resultado da requisição.

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      {{ error }}
    </div>
    <slot v-else :data="data" />    
  </div>
</template>

export default {
  name: 'Fetcher',
  props: {
    apiMethod: {
      type: Function,
      required: true
    },
    params: {
      type: Object,
      default: () => {}
    },
    updater: {
      type: Function,
      default: (previous, current) => current
    },
    initialValue: {
      type: [Number, String, Array, Object],
      default: null
    }
  },
  data() {
    return {
      loading: false,
      error: null,
      data: this.initialValue
    }
  },
  methods: {
    fetch() {
      const { method, params } = this
      this.loading = true

      try {
        method(params)
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    }
  } 
}

Após implementar estas mudanças, assim ficará o nosso componente Fetcher:

<template>
   <Fetcher :apiMethod="fetchUsers">
     <template #default="{ data }">
       <table>
         <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
         </tr>
         <tr v-for="user in data" :key="user.id">
           <td>{{ user.id }}</td>
           <td>{{ user.name }}</td>
           <td>{{ user.age }}</td>
         </tr>
       </table>
     </template>
   </Fetcher>
</template>

import Fetcher from '@/components/Fetcher'
import { fetchUsers } from '@/services/users'

export default {
  name: 'UsersList',
  components: {
    Fetcher
  },
  methods: {
    fetchUsers
  }
}

E é isso! :)
Utilizando apenas conceitos básicos de VueJS como props e slots podemos criar um componente de carregamento de dados reutilizável que será responsável por carregar e exibir os dados e prover feedback apropriado conforme o estado da aplicação.
Além disso, você pode utilizá-lo em qualquer página ou componente que precise carregar dados, independentemente do tipo.

Você encontra um exemplo 100% funcional desta implementação neste repositório.

Espero que tenha gostado. Por favor, comente e compartilhe!

Gostaria de agradecer especialmente a Neil Merton por ter me ajudado a corrigir partes do código utilizado neste artigo.

Imagem de capa por nordwood

VueJS - 6 maneiras de implementar v-model

Pablo Veiga — Mon, 13 Sep 2021 21:05:03 +0000

VueJS é um framework web utilizado para construir aplicações front end e é, no momento, amplamente utilizado por desenvolvedores ao redor do mundo.

Ele possui a diretiva v-model que torna a implementação de two-way data binding em elementos de entrada de dados "mamão com açúcar".

Independentemente do que estiver construindo, você provavelmente vai precisar criar componentes customizados que recebem e manipulam dados através do mecanismo de two-way data binding.

Neste artigo eu vou te mostrar 5 formas diferentes de implementar o seu próprio v-model em seu componente:

Watcher local de variáveis
Método customizado
Computed Properties "Anabolizadas"
Prop customizada + evento (VueJS 2)
O modificador .sync (VueJS 2)
v-model nomeado (VueJS 3)

Obs.: O objetivo aqui não é comparar a performance nem discutir quais das implementações são melhores ou piores mas sim apresentar diferentes abordagens que podem ser utilizadas para atingir o resultado esperado de um v-model em componentes customizados.

ℹ O componente chamado BaseInput.vue usado nos exemplos é bastante simples e você, provavelmente, irá se questionar se implementar o mecanismo de two-way data binding nele é realmente necessário. Porém, como mencionei anteriormente, a intenção aqui é apenas demonstrar as possibilidades.

1. Watcher de variável local

Esta é, de longe, a forma mais comum de se implementar um v-model em um componente.
Aqui, basta criar uma prop chamada value com o tipo desejado, criar uma variável reativa (utilizando a função data() do componente), inicializá-la com o valor da prop value definida anteriormente e "observar" suas mudanças utilizando um watcher.

Cada vez que o watcher identifica uma mudança na variável local, ele emite um evento input passando o novo valor da mesma. Este valor poderá, então, ser lido pelo componente pai que, por sua vez, irá atualizar a prop value "de fora para dentro".

<!-- BaseInput.vue -->
<template>
  <input type="text" v-model="model" />
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        model: this.value
      }
    },
    watch: {
      model(currentValue) {
        this.$emit('input', currentValue)
      }
    }
  }
</script>

<!-- Utilização -->
<BaseInput v-model="text" />

2. Método Customizado

Você já deve ter lido por aí que, para prevenir problemas de performance, você deve evitar utilizar muitos watchers na sua aplicação.
Neste segundo exemplo, tendo em mente esta premissa, nós tiramos proveito do evento @input disparado pelo elemento de entrada (<input />) nativo* e, utilizando um método customizado dentro do nosso componente, passamos o valor capturado deste elemento para o componente pai através da emissão de um evento input. O componente pai, por sua vez, ao utilizar o v-model poderá atualizar a prop value "de fora para dentro"**.

É importante mencionar que, neste caso, não utilizamos a diretiva v-model no input nativo, mas sim sua propriedade value.

* O VueJS já cria, automaticamente, event listeners em elementos de entrada de dados e, quando esses elementos são destruídos, os listeners são destruídos também.

<!-- BaseInput.vue -->
<template>
  <input type="text" :value="value" @input="onInput" />
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    methods: {
      onInput(event) {
        this.$emit('input', event.target.value)
      }
    }
  }
</script>

<!-- Utilização -->
<BaseInput v-model="text" />

⚠ VueJS 3: se você está utilizando a versão mais recente do VueJS, substitua o nome da prop value por modelValue e o nome do evento emitido input por update:modelValue. Leia mais na documentação do VueJS 3

3. Propriedades Computed "Anabolizadas"

Uma outra forma de implementar seu próprio v-model é utilizando os getters e setters de computed properties.
Primeiro defina uma computed property local, dentro do seu componente. Depois, implemente um getter que retorna o valor da prop value e um setter que emite o evento input para que o componente pai atualize a prop value "de fora para dentro"**.

<!-- BaseInput.vue -->
<template>
  <input type="text" v-model="model" />
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    computed: {
      model: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit('input', value)
        }
      }
    }
  }
</script>

<!-- Utilização -->
<BaseInput v-model="text" />

⚠ VueJS 3: se você está utilizando a versão mais recente do VueJS, substitua o nome da prop value por modelValue e o nome do evento de input por update:modelValue de acordo com a documentação do VueJS 3.

** Você deve evitar a alteração de valor de uma prop diretamente Leia mais na documentação.

4. Prop e Evento Customizados (VueJS 2)

Você deve ter percebido que, nos exemplos anteriores, o nome da prop é sempre value e o nome do evento é sempre input. Estes nomes são utilizados por padrão para implementar um v-model em um componente customizado. Porém, você pode trocá-los de acordo com suas necessidades.
Para que isso seja possível e o mecanismo de two-way data binding continue funcionando você pode utilizar o atributo model da instância do Vue para informar ao componente o nome da prop e do evento que devem representar "participar" do mecanismo.

<!-- BaseInput.vue -->
<template>
  <input type="text" :value="text"  @input="onInput" />
</template>

<script>
  export default {
    model: {
      prop: 'text',
      event: 'update'
    },
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    methods: {
      onInput(event) {
        this.$emit('update', event.target.value)
      }
    }
  }
</script>

<!-- Usage -->
<BaseInput v-model="text" />

⚠ VueJS 3: se você está usando a última versão do VueJS, esta abordagem não irá funcionar pois está desatualizada.

5. O modificador ".sync" (VueJS 2)

Esta não é, exatamente, uma implementação de um v-model mas irá funcionar de forma similar.
Utilizando o modificador .sync(VueJS 2.3+), o componente filho, ao invés de utilizar a prop value, irá utilizar o nome da prop que está sendo "sincronizada" com o componente pai.

Além disso, ao invés de emitir um evento input para atualizar a prop, você emite um evento convenientemente chamado update:text (Source: VueJS - prop.sync) .

<!-- BaseInput.vue -->
<template>
  <input type="text" :value="text"  @input="onInput" />
</template>

<script>
  export default {
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    methods: {
      onInput(event) {
        this.$emit('update:text', event.target.value)
      }
    }
  }
</script>

<!-- Utilização -->
<BaseInput :text.sync="text" />

⚠ VueJS 3: se você está utilizando a versão mais recente do VueJS, esta abordagem não irá funcionar visto que está descontinuada

6. v-model nomeado (VueJS 3)

A versão 3 do VueJS, lançada em 18 de setembro de 2020, tornou possível definir facilmente qual prop vai representar o v-model dentro de um componente.
Para fazer isso, basta utilizar um modificador no próprio v-model quando utilizar o seu componente customizado.
No exemplo abaixo, estamos dizendo que a propriedade text, dentro do componente BaseInput, irá receber o valor vindo do v-model.

<!-- BaseInput.vue -->
<template>
  <input type="text" :value="text"  @input="onInput" />
</template>

<script>
  export default {
    model: {
      prop: 'text',
      event: 'update'
    },
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    methods: {
      onInput(event) {
        this.$emit('update', event.target.value)
      }
    }
  }
</script>

<!-- Utilização -->
<BaseInput v-model:text="text" />

Deixe seu comentário me dizendo se conhece alguma outra implementação envolvendo v-model que seja interessante mencionar aqui ou envie-me sugestões de outros assuntos que podem se tornar um artigo como este.

Você pode encontrar exemplos de todas as abordagens aqui citadas (em inglês) neste repositório.

Muito Obrigado a Keith Machado pela colaboração! (Ver artigo original (inglês))

Espero que seja útil e, por favor, compartilhe!

JS - Mocking a GraphQL API with GraphQL Faker

Pablo Veiga — Fri, 30 Jul 2021 13:01:13 +0000

Mock API's are very useful when you need to "hit the ground running" with the front-end of a project. There are times when we need to have something visual to validate an idea with a client or to move forward with the interface while the back end is still being built.

Two weeks ago I published another article about it, explaining how to mock a REST API using JSON Server.

TL;DR

This time I'm going to write about how to mock a GraphQL API using GraphQL Faker.

GraphQL

Assuming you already know the basics of how GraphQL works, I'm not going to dive deep into its details. But, just to contextualize this article, according to GraphQL official website:

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

and

Apps using GraphQL are fast and stable because they control the data they get, not the server.

Mocking a GraphQL API

Building a fake GraphQL API is not difficult at all and all you need to do is:

install GraphQL Faker package;
configure a .graphql file containing the schema definitions (types, inputs, queries and mutations);
take advantage of the Faker JS extension to easily mock contextualized data.

Installing GraphQL Faker

First, add GraphQL Faker package to your project.
If you need to build a VueJS project but you don't know where to start from, check this article of mine where I explain how I structure my new VueJS projects from scratch.
If your project is not going to be written in VueJS (sorry to hear that :(), you may check your favourite JavaScript framework's tutorial page to see how to start a fresh new project with it or even built it from scratch. These are the most common JavaScript ones:

Access its root directory and, in a terminal window, execute the following command:



npm install graphql-faker --save-dev

Notice that we'll use --save-dev flag to install this dependency only for development since the production version of the application will require the real GraphQL API to work

Configuring the Schema - Types

This is the most important part of building your mocked GraphQL API. By configuring the schema, you will be able to really use the API to return data as you need.

If you still don't know how a GraphQL Schema is configured, take a look at this link.

Let's imagine a simple application that needs to display a list of users and details of their respective addresses like street, city and country.

In this case, we need to create these two types within our schema.graphql file. The good thing about GraphQL Faker is that it already provides the @fake and @examples directives that allow us to define possible values to be mocked when retrieving data from our mocked API. Check this out:



type User {
  name: String @fake(type: firstName)
  age: Int @examples(values: [20 25 30 35])
  address: Address
}

type Address {
  street: String @fake(type: streetName)
  number: Int @examples(values: [303 409])
  city: String @fake(type: city)
  state: String @fake(type: stateAbbr)
  country: String @fake(type: country)
}

Obs.: Faker JS provides several different types of fake data that will allow you to create real-world mocked data according to your needs. I'm not sure exactly which types are available to be used along with GraphQL Faker, but most of them are according to some tests I've made.

Configuring the Schema - Queries/Mutations

After configuring the Types, we need to set the Queries and Mutations to be able to perform operations.

Keep in mind that the Mutations will not create any data anywhere like JSON Server mock API but they will support you in building the correct inputs the front end will need to send when calling them.

When creating a Query we may define which is the type it should return and also the minimum and maximum size of the array it will return. In the example below, the User query, the API will return lists containing between 3 and 20 users, randomly each time we call it.



type Query {
  Users: [User] @listLength(min:3, max: 20)
}

You may also define an input types and Mutations to allow your front end to perform these operations without receiving a 400 or 404 error.

Imagine that your application will allow people to create users and their address. So, we need to define, in our Schema a UserInput and an AddressInput (you may call it whatever you prefer) to be used in the mocked Mutation we'll create later:



input UserInput {
  name: String
  age: Int,
  address: AddressInput
}

input AddressInput {
  street: String
  number: Int
  city: String
  state: String
  country: String
}

After creating the inputs properly, we can define our mutation:



type Mutation {
  CreateUser(user: UserInput): User
}

Running GraphQL Faker

In order to test the mocked API you've just created, first we need to include a new script into our package.json file like the following:



"mock:api": "graphql-faker ./schema.graphql"

Then, all you need to do is run the command on a terminal using:



npm run mock:api

By running it you will see the following information:

The three links are:

Interactive Editor

A text editor where you can update your schema

GraphQL API

A playground where you can test all of your queries and mutations and also check all of the types defined in the schema.

Voyager

An interactive graph representation of your schema

The ports may defer. If you want to define a specific port to use the GraphQL Faker, you may define it in the script in the package.json file.



// It will run on port 4000

"mock:api": "graphql-faker --port 4000 ./schema.graphql"

Testing GraphQL Faker API

Access the GraphQL API address (http://localhost:PORT/graphql) and try out your query and check the full (and interactive) documentation of your schema :).

GraphiQL Playground - Watch Video

You can find a simple and fully functional project similar to what we've built together in this article at this repo.

Considerations

If you got until this point, it means you've read the last piece of text from a series of 16 articles, published weekly since April 6th, when I decided to write about Different ways of implementing v-model (in VueJS).

The inspiration came after reading an article that said that "every developer should write". Unfortunately, this article is no longer available on the internet but its message was transmitted.

I'm not sure if I'll keep writing and, if I decide so, I don't know how frequently, but the most important thing is that I achieved my personal goal: 1 published article per week along 16 weeks in a row.

During this period three of my articles were delivered in one of the biggest VueJS newsletters around the world and one person reached out to me with an international job offer.

You can see more about these stories in my LinkedIn.

Follow me here, if you still do not and I'll bring you news soon!
Thanks for all of the support!

Comment and share!

JS - Demystifying Currying

Pablo Veiga — Thu, 22 Jul 2021 18:14:20 +0000

If you are new to software development you've probably come across the term currying and still ask yourself what the h*ck that is.

Let's start with the main concept:

In mathematics and computer science, "currying" is the technique of converting a function that takes multiple arguments into a sequence of functions that each takes a single argument.

Source: Wikipedia

If this still doesn't make sense to you, don't worry! Let's dive into some practical examples and you'll figure it out.

TL;DR

In this article I explain, in a practical way, what currying is within a programming context and how to take advantage of it.
The examples are all in JavaScript but they may be applied in several other languages.

It's important to know that currying does not call a function, but transforms it. Basically, it turns this fn(param1, param2, param3) into this fn(param1)(param2)(param3).

It's very common to find out there currying definitions and examples that, in fact, refer to partial function application.
If you, like me, Are interested in functional programming but are (still) not an expert in any purely functional language, these two concepts may be confused.

Partial Application

In functional languages, functions are not "invoked" but "applied" to their arguments. They are known as "first-class citizens", which means they can be assigned to variables and interact with other functions being used as parameters or even being returned by them.

A function is partially applied when it is applied to only part of its parameters and returns another function that expects the other ones.

For example:

function sum(num1, num2, num3) {
  return num1 + num2 + num3
}

// It can be invoked in two different ways
sum(1, 2, 3)                // 6
sum.appply(null, [1, 2, 3]) // 6

Now, let's create a function that applies sum partially, which means, it fixes the first parameter and returns a function that expects the other two.

function partialSum(num1) {
  return function(num2, num3) {
    return sum(num1, num2, num3)
  }
}

// Using it
const sumTwo = partialSum(2)
sumTwo(3, 4) // 9

This operation may even be generalized to any function:

function partial(fn) {
  const args = Array.prototype.slice.call(arguments, 1)

  return function() {
    return fn.apply(null, args.concat(Array.prototype.slice.call(arguments, 0)))
  }
}

// Using it
const sumTwo = partial(sum, 2)
sumTwo(3, 4) // 9

Currying

According to currying most precise definition (as mentioned at the beginning of this article):

"currying" is the technique of converting a function that takes multiple arguments into a sequence of functions that each takes a single argument

Notice that the example above does not match the definition requirements because partial(sum, 2) returns a function that deals with two arguments instead of one.
If our function did currying, it would have to be called like this to get the same final result:

const sumTwo = curry(soma, 2)
sumTwo(3)(4) // 9

Its utility is arguable not only in JavaScript but other languages as well. There are some justifiable use cases but some simply are not.
Currying is very useful when functions are always unary, which means they only accept one argument.

Examples

Enough talking, let's see some real-life examples of currying:

Notice that these examples are just to explain a little bit better how to implement curry, if they are useful or not is not being discussed here

Imagine you have a function responsible for logging activities within your application. Your logs may have 3 parameters and you'd like to curry it so that it becomes more flexible.

const logFn = (timestamp, type, message) => 
  console.log(`[${date.getHours()}:${date.getMinutes()}] [${type}] ${message}`)

To curry the function above we could implement our own currying function or take advantage of any library that does this for us. In this case, we're going to use Lodash Functional Programming package.
It does the heavy work for us and saves us time.
(If you want to try your own currying implementation, check this piece of code)

Currying our log function:

const { curry } from 'lodash/fp'

const log = curry(logfn)

After this, we can call our function normally:

const timestamp = new Date()
const type = 'WARNING'
const message = 'Some warning'

log(timestamp, type, message)

But we can also call it in the curried form:

const timestamp = new Date(
const type = 'WARNING'
const message = 'Some warning'

log(time)(type)(message)

And we can easily make a convenience function for current logs:

const logNow = log(new Date().getTime())

// Usage
logNow('INFO', 'Message') // [HH:mm] INFO Message

Another common use for curried functions is when you deal with chained functions as when using pipe from Lodash, for example.
But this is something for another article :)

Conclusion

Currying is a little bit complicated to understand at first glance, but if you exercise it every day, you will figure it out and, most important, understand when to use it because, at the end of the day, this is what really matters: knowing which technique must be applied to each scenario.

I hope you liked it.
Comment and share!

P.S.: Feel free to correct me if I'm wrong at some point.
Currying is still a little bit new to me :)

JS - Mocking a REST API with JSON Server

Pablo Veiga — Sat, 17 Jul 2021 16:19:31 +0000

Depending on how your team works, you might need to move forward with the front end while the back end is still being structured.
Or perhaps you need speed to create an MVP or a proof of concept.

This means that you probably will receive interface designs from the designer or product manager and will need to implement them using mocked data, while the back end is still not ready.

When I first started developing web applications, I used to mock data within the components by replicating pieces of HTML or setting variables with mocked arrays or objects according to what the interface required.

The problem is when you do this, you increase the amount of work needed when the integration time comes because you will need to:

remove mocked data from components;
create the services which connect the front end to the back end;
consume these services to display real data;

It turns out that this path can be much less painful if you use mock API's.

TL;DR

In this article I show you how to easily mock a simple REST API using JSON Server

JSON Server is just one option amongst several others that allow you to fake REST APIs to deal with interface prototyping.

JSON Server - Mock REST API

Let's start with JSON Server. This package allows you to bootstrap a mocked REST API server without much effort.

Considering you have already created the main structure of your project using NPM or Yarn, install the package to your project using one of the following commands:

// If using NPM
npm install json-server --save-dev

// If using Yarn
yarn add json-server -D

Then, you need to follow these three steps:

Configure an entry-point file;
Create a JSON file with mocked data;
Add a new script to your package.json file;

1. Configuring an entry-point file

JSON Server will act like a simplified Express server, so, this is how you create the main file required by it to run:

const path = require('path')
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router(path.join(__dirname, 'db.json'))
const middlewares = jsonServer.defaults()

server.use(
  jsonServer.rewriter({
    '/api/*': '/$1'
  })
)

server.use(middlewares)
server.use(jsonServer.bodyParser)

server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

Notice that here, I intend to use the prefix /api for my requests. You may change it to whatever you like.

2. Creating mocked data

JSON Server works based on Low DB a "Tiny local JSON database for small projects". So you need to configure a db.json file that will serve the data.

Let's suppose I need to list users and products, for example. This is how our JSON file will be:

{
  "users": [
    {
      "id": 1,
      "name": "Jon Doe",
      "age": 30,
      "active": true
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "age": 25,
      "active": true
    },
    {
      "id": 3,
      "name": "Bob Taylor",
      "age": 45,
      "active": false
    }
  ],
  "products": [
    {
      "id": 1,
      "name": "Pizza",
      "price": 10,
      "active": true
    },
    {
      "id": 2,
      "name": "Hamburger",
      "price": 7,
      "active": true
    },
    {
      "id": 3,
      "name": "Ice Cream",
      "price": 2.5,
      "active": false
    }
  ]
}

This is enough for the mock API to be started and for you to make requests right away.

But first, let's create a new script into the package.json file so that we don't need to install json-server globally in your machine.

3. Creating the mock API script:

Add the following property to the scripts section of the package.json file:

"mock:api": "node json-server/server"

And that's it. In this implementation, we configured JSON server to bootstrap the mock API using the port 3000 but you might change it in the server.js file.

This is an example of the results when requesting http://localhost:3000/api/users directly from the browser.

I'm using the JSON Viewer extension to display the data properly formatted and coloured as seen above.

4. JSON Server basic operations

JSON Server will let you implement front-end services that make real API calls and let them ready to wait for the real back-end API because it works exactly like a REST API.

This also means you can use the most common verbs to perform actions with your data:

GET: used to retrieve full arrays, objects by id or even filter by certain attributes:

GET: /users => retrieves all users

GET: /users/1 => retrieve the user with id = 1

GET: /users?_sort=age&_order=desc => retrieve users sorted by age descending

GET: /users?age_gte=10 => retrieve users whose ages are greater than 10

POST - used to create new values. Make a POST request using the URL of the resource you want to add and pass the value using the body.

// This will add a new product to the "products" array

URL: `/api/products`
BODY:
{
  "id": 4,
  "name": "Chocolate",
  "price": 6,
  "active": true
}

PUT - used to update a resource. Make a PUT request passing the id of the resource you want to update as a query param and the value to be set using the body.

// This will update the user with the id = 2

URL: `/api/users/2`
BODY:
{
 "id": 2,
 "active": false
}

DELETE - used to remove a resource. Make a DELETE request passing the id of the resource you want to be deleted as a query param.

This will remove the user with id = 3

DELETE: `/api/users/3`

5. JSON Server advanced operations

As JSON server works just like Express JS, you can also extend it to perform more advanced operations, map different URL's to specific data in the db.json file or even implement middlewares and _ parsers_.

I'm not going to dive deep into all of the possibilities because they are endless. It's worth taking a look at the full documentation in their Github to take advantage of its full power.

Conclusions

You don't need to install and configure databases and back-end API anymore when starting a new front-end project. Sometimes all you need is some sample data to simulate real scenarios.

In this article you were introduced to JSON Server, an extraordinary tool that can help you bootstrap a simple (or not so simple) REST API very quickly that will provide support for your next front-end prototyped application.

You can find a fully-working example in this repository.

I hope you liked it.
Please, share and comment!

Cover image by Marc-Olivier Jodoin

VueJS - Recursive Components

Pablo Veiga — Mon, 12 Jul 2021 11:10:07 +0000

During your web developer career you will probably come across certain scenarios where recursion is needed. And there's more, you might even need to implement it in one of your VueJS components. But don't push yourself too hard! Being capable of identifying when recursion must (or not) be used is not that simple and it's an ability that comes with time and experience. I've also struggled to understand how recursion works. Keep cool and one day a light will be shed on it and you'll fully understand everything like magic.

TL;DR

In this article we define "recursion" and use this approach to create recursive VueJS components, which means that they use themselves within their own implementation.

Concept

Before we start to see Recursive Components, let's move a step backwards and talk about recursion as a programming resource. The term recursion has several definitions according to its context but they all mean basically the same.

The Cambridge Dictionary says that recursion is:

the practice of describing numbers, expressions, etc. in terms of the numbers, expressions, etc. that come before them in a series (within Mathematics and Computing contexts).

or even

the practice of putting a structure such as a phrase inside a structure of the same kind (within Language context).

But the best definition I've ever read is this one found on the University of Utah - School of Computing website:

Recursion is the process of defining a problem (or the solution to a problem) in terms of itself.

Source: https://www.cs.utah.edu/~germain/PPS/Topics/recursion.html

Nearly philosophical!

Recursive Components

Now that you understood (or almost!) what recursion stands for, let's think of some scenarios where it could be applied within a VueJS application.

Imagine that you are building an application similar to a social network where people can comment on posts. Now, imagine that people might be able to comment on comments.
Now, let's say you might need to display the whole structure of a file system containing folders within folders as something we call tree.

There might be other scenarios but these two above are enough for us to think about implementing recursive components.

In the first scenario, a comment might have comments, so we could implement a component that invokes itself in order to display comments within comments.

In the second scenario, we may need to implement a tree node component that might contain other tree nodes inside, which would be the case of folders (or files) inside folders.

Implementation

Let's grab the second example, which is commonly required.
We are going to implement a recursive component that is capable of displaying a tree structure.

There are two important things we must consider:

we want to build an extensible component in terms of layout because we might need to display different trees;
we must have a breaking point within the component to avoid loops. This will work exactly the same way it does within recursive functions to prevent it from calling itself endlessly;

Creating the project structure

First, let's create a basic VueJS project structure. If you like, you might check this other article of mine where I explain how I structure my own boilerplates to get a VueJS project up and running.

Once you've done that, you are ready to move to the next step.

Building a recursive component

First of all let's create the "shell" of our component. We want to display the label of each node.

Let's make use of the b-alert component from Bootstrap Vue just to avoid dealing too much with styling.

Initially we are going to display the node label and also an arrow that will help us show and hide the node children.

Create a TreeNode.vue file within components folder and implement it like the following:

src/components/TreeNode.vue



<template>
  <b-alert show class="d-flex justify-content-between mb-1">
     {{ node.label }}
     <span class="fas fa-angle-right" />
   </b-alert>
</template>



export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}

Let's render this new component in Home.vue page.
As the TreeNode represents only one node, we need to use a v-for directive to render all of our nodes.
We're going to use a static set of data in order to see the components working.

This is how we do it:

src/views/Home.vue



<template>
  <div>
    <TreeNode v-for="node in nodes" :key="node.id" :node="node" />
  </div>
</template>



import TreeNode from '@/components/TreeNode/TreeNode'

export default {
  name: 'HomeView',
  components: {
    TreeNode
  },
  computed: {
    nodes() {
      return [
        {
          id: 1,
          label: 'Foods',
          children: [
            {
              id: 2,
              label: 'Fruits',
              children: [
                {
                  id: 3,
                  label: 'Banana'
                },
                {
                  id: 4,
                  label: 'Apple'
                },
                {
                  id: 5,
                  label: 'Strawberry'
                }
              ]
            },
            {
              id: 6,
              label: 'Vegetables',
              children: [
                {
                  id: 7,
                  label: 'Carrot'
                },
                {
                  id: 8,
                  label: 'Lettuce'
                },
                {
                  id: 9,
                  label: 'Potato'
                }
              ]
            }
          ]
        },
        {
          id: 10,
          label: 'Drinks',
          children: [
            {
              id: 11,
              label: 'Beers',
              children: [
                {
                  id: 12,
                  label: 'Budweiser'
                },
                {
                  id: 13,
                  label: 'Heineken'
                }
              ]
            },
            {
              id: 14,
              label: 'Wines'
            },
            {
              id: 15,
              label: 'Whiskey'
            }
          ]
        }
      ]
    }
  }
}

This is how it will look like:

Now let's implement the magic.
The TreeNode component must be able to reference itself in order to display the children nodes of each node. As a tree structure may contain several levels, our component must support that.

In order to achieve that, we are going to implement a breaking point checking if the node has children or not. If it has, it will render a v-for loop of itself to display the nested nodes.

This is how it will look like:



<div>
    <b-alert show class="d-flex justify-content-between mb-1">
      {{ node.label }}
      <span class="fas fa-angle-right" />
    </b-alert>
    <div v-if="hasChildren">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>



export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  computed: {
    hasChildren() {
      const { children } = this.node
      return children && children.length > 0
    }
  }
}

And this is how it should look like:

Now we can see all nodes of our tree structure, but it still doesn't look like a tree, right?!
We need to manipulate styling in order to achieve that.
So, what we do is: let's add a left margin to each node according to its level.

We're going to add a spacing prop to the TreeNode component and use it to set a margin-left style into the layout. We are also going to pass this prop to the children nodes incrementing it by 10 (which result in 10px when rendering).

Check this out:



<template>
  <div :style="nodeMargin">
    <b-alert show class="d-flex justify-content-between mb-1">
      {{ node.label }}
      <span class="fas fa-angle-right" />
    </b-alert>
    <div v-if="hasChildren">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :spacing="spacing + 10"
      />
    </div>
  </div>
</template>



export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    spacing: {
      type: Number,
      default: 0
    }
  },
  computed: {
    nodeMargin() {
      return {
        'margin-left': `${this.spacing}px`
      }
    },
    hasChildren() {
      const { children } = this.node
      return children && children.length > 0
    }
  }
}

This is how it will look like:

We're almost there. Now, we just need to make sure that the right-side arrow will be displayed only if the node has children and also implement a method that will show and hide children nodes.

In order to do that we are going make the arrow icon dynamic using a computed property and also create a reactive variable to control if the children nodes of that respective node are being displayed or not and call it from the click event of the icon.



<template>
  <div :style="nodeMargin">
    <b-alert show class="d-flex justify-content-between mb-1">
      {{ node.label }}
      <span
        v-if="hasChildren"
        :class="toggleChildrenIcon"
        @click="toggleChildren"
        @keypress="toggleChildren"
      />
    </b-alert>
    <div v-if="hasChildren" v-show="showChildren">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :spacing="spacing + 10"
      />
    </div>
  </div>
</template>



export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    spacing: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showChildren: false
    }
  },
  computed: {
    nodeMargin() {
      return {
        'margin-left': `${this.spacing}px`
      }
    },
    hasChildren() {
      const { children } = this.node
      return children && children.length > 0
    },
    toggleChildrenIcon() {
      return this.showChildren ? 'fas fa-angle-down' : 'fas fa-angle-right'
    }
  },
  methods: {
    toggleChildren() {
      this.showChildren = !this.showChildren
    }
  }
}

And this is the result:
https://www.loom.com/share/233a8108a4ca43ecb5723d4e791ceb20

You may want to customise this base component to support your layout and business requirements by adding some more advanced functionality like:

close all children nodes when closing a parent node;
props to allow the user to customise classes;
node search;

Conclusion

When building web applications we need to be aware of which data structures we're going to deal with.
There are several scenarios where data must be displayed as a tree.

In this article, I explained one (of some) approaches to build a recursive component that will help you display data as a tree without much effort.

Extra

In the example above we assumed the data would be structured as tree using the children approach but this is not the only way of defining a tree in terms of data.
Sometimes all we have is a flat array with items that reference themselves to inform which node is the parent of which node.
Like the following:



[
  {
     id: 1,
     label: 'Root Node',
     parentId: null,
     order: 1
  },
  {
     id: 2,
     label: 'Child Node',
     parentId: 1,
     order: 1
  },
  {
     id: 3,
     label: 'Grandchild Node',
     parentId: 2,
     order: 2
  },
  {
     id: 4,
     label: 'Root Node 2',
     parentId: null,
     order: 2
  }
]

This same structure can be displayed as a tree like this:

If this is your case, you might want to use this reduce function to help you transform data before passing it to your recently-learnt Tree Component. :)

You can find the full source code in this repository.

I hope you liked it!
Please, comment and share...

VueJS - 5 utilities you're likely to need

Pablo Veiga — Fri, 02 Jul 2021 17:45:39 +0000

If you ever need to build an administrative tool using VueJS, you will probably need a few third-party components to help you deal with some complex user-interface behaviors.

You can always build everything from scratch but if you, like me, work for a big company where time is money and productivity must be kept high, it is likely for you to look in the community for some components and libraries capable of speeding things up for you a little bit.

TL;DR

In this article I'm going to introduce you to 5 very useful third-party components that almost every administrative tool tend to require.
Notice that I'm not saying that they are the only options for solving the problems they intend to but, as I've already used them (and still do!) and they worked like a charm, I decided to share.

Content Placeholders

Have you ever noticed the "skeleton" that is displayed for you by Facebook or LinkedIn, for example, while their page is loading?
They are called placeholders and they are there to provide you prompt feedback and indicate where data will be put to when it's been fully loaded.
It's very nice to prevent the user from thinking the page has frozen while there is still nothing to be displayed.

Within VueJS context, you'll probably find several other packages that do that but vue-content-placeholders is likely to be the one you look for.

They allow you to display placeholders in the most common formats such as images, text and even both of them combined.
They are pretty easy to install and use.

This is how it looks like (one of its possibilities):

Source: https://github.com/michalsnik/vue-content-placeholders

Vue Select

Tell me about one single application that does not need a select list. It's almost impossible to think that your system will not require this kind of component.
We all know that the HTML default select element (and some other elements as well) is not smart enough. We don't have an integrated search or even a dynamic content loading that usesAJAX amongst other things.

It was with the intention of solving some of these problems that Vue Select was created.
It is a very complete and smart select list component that provides, among several other things:

integrated search
dynamic AJAX content loading
custom labels and icons
custom selection value (easily)

It is really easy to install and implement and their documentation is full of nice examples of what the component is capable of.

Source: https://vue-select.org/guide/validation.html#required

Vue Tree Select

If you've ever needed to implement a component to display a tree structure you know how challenging it is.
Besides the fact you need to structure the data correctly, dealing with recursive components might be a nightmare depending on the requirements. Now think about displaying data within a tree and even making it reactive! It makes me tired just to think about it.

Vue Tree crosses your path to make this task easier for you.
This amazing component is capable of displaying tree structures easily and it also provides tons of functionalities such as built-in search, settings to determine whether all the nodes are selectable or only the leaves; it is also possible to load children nodes dynamically using AJAX. Well, there are endless possibilities here and you must try it.
One more thing to consider: its CSS classes are very well structured which means you can easily overwrite them to create your own custom style.

Source: https://vue-treeselect.js.org/

Vue Tags Input

Within a web application context, it's very common to find tags input that acts like a multiple text field.
In this case, it's not that difficult to implement your own component but why should you bother if there is already a third-party component that does the heavy work for you.
Meet Vue Tags Input.
It's a small package that provides a tags input ready to use.

Source: http://www.vue-tags-input.com/#/

Data Fetcher Component

Last but not least, let's talk about data fetching.
An application, regardless of being small or not, needs to fetch data from a server and display it to the user.
Now, imagine if you could build your own component that does that and even better, providing proper feedback to users, so that they know when data is still loading or if there is an error.

I'd like to introduce to you the Data Fetcher Component. This is not exactly a third-party component because you will have to implement it yourself but this approach is very useful and reusable so, it's worth taking a look.
I've been using this component for a while and it really helps me.

It doesn't matter the size of your next VueJS application. The most important thing is that you are capable of finding resources, mechanisms, approaches and techniques that speed up your work.
All of the components, libraries and packages introduced to you here will help you with that and you will become free to focus on what really matters: developing!

I hope you liked it.
Please, comment and share!

Cover Image by: Matteo Grassi

VueJS - Internationalization

Pablo Veiga — Fri, 25 Jun 2021 17:42:50 +0000

Since the Internet's boom, more and more web applications are released each day (approximately 576k new websites per day*). Currently, there are over 1.7 billion websites* on the Internet and many of them are accessed by people from all around the world.

Probably, if you create a website, you will want it to be accessed by as many people as possible. To make that happen and also provide a nice experience for your users, you will have to think about how to deliver it in different languages.

* Source: Website Setup

TL;DR

In this article I'm going to show you how to:

create a multi-language website using VueJS and Vue i18n;
implement a language switcher;
use the vuex-persistedstate package to avoid losing state when reloading the page;

Internationalization (i18n)

Let's start with some basic concepts.

If you're still not aware of Internationalization or what i18n really means, here is its official definition:

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.
(Source: W3.org)

Internationalization is often written i18n (English), where 18 is the number of letters between "i" and "n" in the English word (cool, right?!).

Vue i18n

If you perform a quick search on the internet you will find some solutions to implement i18n to your website or application built using VueJS.
Probably, the most famous (and easy-to-use) one is Vue i18n, an open source plugin for VueJS that provides a very friendly API to implement translation to different target languages in your website.

Installation

Assuming you've already created your VueJS project (take a look at this article if you don't now where to start from), the first step to begin using the plugin is installing it. In a terminal window, go to the root directory of your project and run the following command:

yarn add vue-i18n --save

You might use NPM as well, depending on your project configuration.

Configuration

The Vue i18n package works in a very simple way.
You can set several configurations, but these are the basic ones required for your project to work:

the initial language: the language loaded by default;
the messages: a simple JSON object that contains the messages (translation keys) used for each one of the languages;

First, create the folder structure that will hold everything together:

Create a folder called i18n in the src directory of your project.
Within the i18n folder, create an index.js file and a folder called messages.

This is how this first index.js file will look like:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './messages'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  messages
})

In this example, we're going to build a part of an application that needs to be delivered in three different languages: English (default), Spanish and Brazilian Portuguese.

Within the messages folder, create three folders named en, es and pt-BR and, inside each one of them (that represents a different language), create two files: one named menu.js and another named index.js .

The files will look like this:

English

// /src/i18n/messages/en/menu.js

export default {
  home: 'Home',
  about: 'About',
  contact: 'Contact'
}

// /src/i18n/messages/en/index.js

import menu from './menu'

export default {
  menu
}

Spanish

// /src/i18n/messages/es/menu.js

export default {
  home: 'Pagina de Inicio',
  about: 'Acerca de',
  contact: 'Contacto'
}

// /src/i18n/messages/es/index.js

import menu from './menu'

export default {
  menu
}

Portuguese (Brazil)

// /src/i18n/messages/pt-BR/menu.js

export default {
  home: 'Início',
  about: 'Sobre',
  contact: 'Contato'
}

// /src/i18n/messages/pt-BR/index.js

import menu from './menu'

export default {
  menu
}

If you need, you may create more levels within the messages object to organise them better. Like this:

export default {
  links: {
    home: {
      label: 'Home',
      help: 'Click here to go to home page'
    },
    about: {
      label: 'About',
      help: 'Click here to know more about us'
    },
    contact: {
      label: 'Contact',
      help: 'Click here to go to reach out to us'
    }

  }
}

Still inside the messages folder, create an index.js file like this:

import en from './en'
import es from './es'
import ptBR from './pt-BR'

export default {
  en,
  es,
  'pt-BR': ptBR
}

In the main.js file, import the i18n package and set it to the Vue instance:

import App from './App.vue'
import i18n from './i18n' 

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Now your application is ready to take advantage of the vue-i18n plugin. Let's create a simple scenario to use it.

Implementation

We're going to implement a language switcher and put it into a navbar at the top of the page. This switcher will be responsible to set the current locale of the application using Vuex + Vuex Persisted State.

To make things easier, I chose to use Bootstrap Vue. If you don't know it yet, it's worth taking a look. It provides all of the Bootstrap components, wrapped into Vue components :)

Before creating the component itself, we're going to structure a basic Vuex module that will be responsible for managing the language state, we'll also make use of the Vuex Persisted State plugin, to easily store the state in the local storage so that, when refreshing the page, the user does not lose its selected language.

To add Vuex Persist in your project, run the following command in the root directory of your project:

yarn add  vuex-persistedstate --save

Create a file named index.js and a folder named store inside the src directory.
Create folder named modules within store.
Create a file named locale.js inside the modules folder and implement it like this:

// src/store/modules/locale.js

export default {
  namespaced: true,
  state: {
    locale: 'en'
  },
  mutations: {
    setLocale(state, locale) {
      state.locale = locale
    }
  }
}

This is how the store/index.js will look like:

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import locale from './modules/locale'

const persistedState = createPersistedState({
  key: 'vuejs-vue-i18n',
  paths: ['locale']
})

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    locale
  },
  plugins: [persistedState]
})

Now, let's implement the LanguageSwitch.vue component. It will hold all of the available languages and it will use Vuex helpers functions to update the current language:

<!-- src/components/LanguageSwitcher.vue (template) -->
<template>
  <b-nav-item-dropdown :text="currentLocale" right>
    <b-dropdown-item
      :disabled="isCurrentLocale('en')"
      @click="onSetLocale('en')"
    >
      EN
    </b-dropdown-item>
    <b-dropdown-item
      :disabled="isCurrentLocale('es')"
      @click="onSetLocale('es')"
    >
      ES
    </b-dropdown-item>
    <b-dropdown-item
      :disabled="isCurrentLocale('pt-BR')"
      @click="onSetLocale('pt-BR')"
    >
      PT-BR</b-dropdown-item
    >
  </b-nav-item-dropdown>
</template>

// src/components/LanguageSwitcher.vue (script)

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'LanguageSwitcher',
  computed: {
    ...mapState('locale', ['locale']),
    currentLocale() {
      return this.locale.toUpperCase()
    }
  },
  created() {
    this.$i18n.locale = this.locale
  },
  methods: {
    ...mapMutations('locale', ['setLocale']),
    onSetLocale(locale) {
      this.$i18n.locale = locale
      this.setLocale(locale)
    },
    isCurrentLocale(locale) {
      return this.locale === locale
    }
  }
}
</script>

Now, let's create a simple Navbar.vue component to put the recently created LanguageSwitcher one. Notice that, in this case, we use the global $t helper provided by the Vue i18n plugin to get the proper translation we need to display according to the current locale. It's very simple to use, all you need to do, it call it passing a translation key as argument.

Example:

{{ $t('translation.key') }}

You may also use directly in the script section of your components, if needed:

{
  computed: {
    label() {
       // For this work, you have to create a file named `common.js` inside the folder of each language and export it in its respective `index.js` file.
       return this.$t('common.label')
    }
  },
  methods: {
    getTitle() {
       return this.$t('common.title')
    }
  }
}

This is how our Navbar.vue component will look like:

<!-- src/components/Navbar.vue (template) -->
<template>
  <b-navbar toggleable="lg" type="dark" variant="primary">
    <b-navbar-brand>VueJS vue-i18n</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse" />

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item :to="{ name: 'Home' }">
          {{ $t('navbar.home') }}
        </b-nav-item>
        <b-nav-item :to="{ name: 'About' }">
          {{ $t('navbar.about') }}
        </b-nav-item>
        <b-nav-item :to="{ name: 'Contact' }">
          {{ $t('navbar.contact') }}
        </b-nav-item>
      </b-navbar-nav>

      <b-navbar-nav class="ml-auto">
        <LanguageSwitcher />
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<!-- src/components/Navbar.vue (script) -->
<script>
import LanguageSwitcher from '@/components/LanguageSwitcher/LanguageSwitcher'

export default {
  name: 'Navbar',
  components: {
    LanguageSwitcher
  }
}
</script>

We're going to create a Layout.vue component that will hold the Navbar and will be used within the Views we are going to create next:

<!-- src/views/Layout.vue (template) -->
<template>
  <b-row>
    <b-col>
      <Navbar />
      <b-container>
        <slot />
      </b-container>
    </b-col>
  </b-row>
</template>

// src/views/Layout.vue (script)

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'Layout',
  components: {
    Navbar
  }
}
</script>

For everything to work properly, we need to create the views, implement the Layout component into them and add them to the router/index.js file. In this section, the most important thing is to use the global $t helper, provided by the Vue i18n package

src/components/Home.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.home') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'HomeView',
  components: {
    Layout
  }
}
</script>

src/components/About.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.about') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'AboutView',
  components: {
    Layout
  }
}
</script>

src/components/Contact.vue

<template>
  <Layout>
    <h1>{{ $t('navbar.contact') }}</h1>
  </Layout>
</template>

<script>
import Layout from './Layout'

export default {
  name: 'ContactView',
  components: {
    Layout
  }
}
</script>

In order to use nested translation keys, the process is simple, since Vue I18n works with the full translation key path, like this:

<template>
  <Layout>
    <h1>{{ $t('navbar.links.contact.label') }}</h1>
  </Layout>
</template>

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('@/views/Contact')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

This is how the application should work after the full implementation:

VueJS Internationalization Sample Video

You can find the fully-working source code in this link!

Other features

Besides translating simple pieces of text, Vue I18n also provides other useful features like:

You may explore the website to find out more about the tool.

I hope you liked it.
Please, comment and share!

Cover image by Ben White