Escrito por: Amit Kulkarni

Desde que comecei a usar o Vim, em 2016, descobri várias funcionalidades menos conhecidas que ele oferece nativamente, sem a necessidade de plug-ins.

Você pode falar de algumas noções básicas antes de começar a explicar sobre essas coisas novas?

Ah, com certeza! Antes de copiar e colar alguns comandos de uma folha de dicas, vou fazer uma suposição ousada: você não estaria lendo isso se quisesse uma folha de dicas e se já conhecesse o básico do Vim.

Você pode ter acabado de ouvir que as distribuições do Linux são fornecidas com um editor de texto de linha de comando padrão chamado Vim – e pode ser que você queira apenas experimentá-lo.

Então, vamos supor que você seja completamente novo nesse jogo e vamos começar apenas com o básico que precisamos entender (sem história/teoria entediante).

OBSERVAÇÃO: se você já conhece o básico, clique aqui para pular essa parte.

Qual é o seu diferencial aqui em comparação a muitos outros artigos sobre o Vim?

A maioria dos artigos introdutórios sobre o Vim começa com os modos: inserir, salvar e sair. Se você estiver realmente com disposição para aprender perfeitamente a teoria dos modos, sinta-se à vontade para ler o que for útil para você nos wikibooks (texto em inglês).

Também existem ótimos livros e artigos que explicam que há uma filosofia por trás da maneira como o Vim funciona e que os comandos no VI/Vim são destinados a serem combinados. É absolutamente verdade – e tenho certeza de que você apreciará isso assim que se acostumar com o editor e com o poder que ele oferece.

Já ouvi histórias engraçadas e vi imagens engraçadas sobre a curva de aprendizado do Vim. Isso é verdade? É realmente tão ruim assim?

Bem, sempre existirão os haters, certo? No entanto, na minha opinião, a imagem que representa um pouco melhor o Vim é a seguinte:

A maioria dos artigos sobre o Vim se refere à curva de aprendizado como uma parede de aprendizado, mas vamos ver a situação positivamente: olhe para o outro lado da parede!

Para iniciantes, é literalmente uma parede, pois eles nunca fizeram nada parecido antes para usar um editor na linha de comando. O que mais me atraiu quando comecei como iniciante foi a onipresença do Vim.

Faça login em qualquer máquina (exceto no Windows) a partir de qualquer terminal e você literalmente pode ter um editor digitando vi de olhos fechados. O editor aparecerá na sua frente!

Outra coisa que me atraiu foi a capacidade de trabalhar sem um mouse e sem perder tempo produtivo com o touchpad ou tendo de conseguir um mouse para o laptop.

Eu sei, eu sei! Já consigo ouvir alguns de vocês gritando "Emacs! Emacs!". Eu entendo. Ocorre que, desde que me envolvi com o Vim, nunca tive realmente interesse no emacs (talvez por causa da instalação necessária). Então, sim, o emacs também é ótimo, suponho. Sinta-se à vontade para mudar antes de começar essa bela jornada com o VI(m).

Acabei de abrir meu terminal, digitei vi e pressionei a tecla Enter. Tudo o que vejo é uma tela de boas-vindas. Não consigo digitar e não sei como sair disso. Tem certeza de que é um editor poderoso com recursos?

Tenho 100% de certeza. O comportamento que você acabou de presenciar é a "parede" que mencionamos antes. Acredite em mim. O VI(m) pode fazer muitas outras coisas. Ele apenas tem suas próprias maneiras de ser usado. Você pode editar arquivos, abrir abas, dividir a tela horizontal ou verticalmente, navegar no sistema de arquivos, executar comandos Linux sem sair do arquivo, iniciar compilações a partir do seu código-fonte sem sair do arquivo, marcar diretórios e até mesmo linhas de um arquivo, buscar e substituir palavras, copiar e colar (logicamente), e muito mais.

Sim, como se fosse uma grande coisa para um editor suportar esses recursos. Todo mundo faz isso. Qual é a novidade?

Não há uma novidade. A vantagem que vejo é a capacidade de focar no seu arquivo/código sem precisar sair do teclado. Sério, se você não se importa em usar um mouse, vá em frente e abra seu MS Word ou outro editor com interface gráfica qualquer e faça todas as edições que desejar.

Entendi. Por que não usar um IDE para fazer alguns trabalhos?

Ok, então você é um desenvolvedor e gosta/ama um IDE. Não, o VI(m) não substitui o seu IDE incrível. O VI(m) não possui os recursos incríveis de fábrica que o seu IDE possui. O VI(m) é apenas pequeno em tamanho (pacote e instalação) em comparação com os IDEs robustos e está disponível para uso sem precisar de configuração ou instalações. Sério, o VI(m) não se compara às ótimas coisas que seu IDE oferece.

Chega de conversa! Mostre-me o básico.

Claro. Antes de começar, tenha em mente que qualquer usuário do Vim basicamente lida com o modo de comando e o modo de inserção. Não há escapatória (literalmente – a tecla Esc não serve para "escapar").

Vamos supor que você esteja usando algum editor e queira excluir uma função longa na linguagem C. Os passos simples que você faz são: posicione o cursor no início da linha e pressione Shift + seta para baixo até o final ou use o mouse. Essa ação que você teve que fazer para selecionar essas linhas exigiu que você parasse de digitar e pressionasse teclas. Não é verdade? Não me diga que você estava digitando algo e ao mesmo tempo pressionou teclas para selecionar magicamente o corpo da sua função.

Seja razoável. Você pausou a digitação e fez o trabalho de seleção para dizer ao seu editor que você quer fazer algo com esse texto (copiar/recortar/negrito/itálico/qualquer coisa).

Essa pausa que você fez é equivalente a estar no modo de comando no VI(m). Este é o momento em que você diz ao VI(m) que deseja fazer algumas ações em algumas linhas/palavra/qualquer coisa e você não vai digitar. Agora, VI(m) lança você para fora do modo de inserção e você está bloqueado para não digitar texto em seu arquivo. Obviamente, o outro modo no qual você pode realmente digitar em seu arquivo é o modo de inserção.

Aliás, se você estava se perguntando como selecionar o corpo da função sem selecionar o texto ou usar o mouse, eu faço isso colocando o cursor nas chaves de abertura e usando as teclas: d%

Sim, isso exclui o conteúdo do corpo da sua função. Não, não é uma combinação assustadora de teclas para lembrar! d indica que você quer excluir algo (do inglês, delete). % vai mover o cursor para o final da chave correspondente.

Agora que estabelecemos os modos básicos, vamos mergulhar no básico do VI(m).

Se você conhece o nome do arquivo que está escrevendo:

$ vi meuarquivo.c

Se você não tem certeza do nome do arquivo e quer começar a digitar:

$ vi

Assim que você abrir o vi, estará no modo de comando. Para entrar no modo de inserção, pressione i . Digite o que desejar. Pressione Esc para voltar ao modo de comando. Agora você tem algumas opções para sair, dependendo de como abriu o vi.

Se você deu um nome de arquivo: :w gravará essas alterações com segurança no disco. :q sairá do editor.  Você pode combinar essas ações com  :wq  e a tecla Return.

Se você não deu um nome de arquivo: :wq nomedoarquivo.c gravará o conteúdo no arquivo nomedoarquivo.c e sairá do editor. Se você não estiver interessado no texto que escreveu e desejar sair sem salvar nada: :q! e pronto! O ! é necessário no final para dizer: "Sim, tenho certeza de que não quero salvar o conteúdo e quero sair urgentemente".

[DEMO] Uso básico do Vim

Pronto! Você acabou de criar, editar e salvar (ou talvez não) seu primeiro arquivo vi. Parabéns!

Como mencionei anteriormente, esta não é uma introdução para iniciantes ao VI(m). Existem muitos outros artigos (fornecerei referências no final do artigo) para começar. Eu incluí essa introdução apenas para que você não se decepcione ao chegar nesta página e não encontrar nada para aprender.

Esta é a linha onde os iniciantes se despedem dos usuários intermediários e vão para a seção de referência em busca de mais artigos introdutórios brilhantes.

Boas-vindas aos usuários intermediários. Essas são algumas capacidades legais do VI(m) das quais eu não estava ciente, mas que, agora, uso diariamente para ser mais produtivo.

Para aqueles que preferem um resumo:

• Abas
• Sessões
• Números de linha (+ marcas) e copiar/colar
• Dobramento
• Indentação com =
• Completar ao inserir
• Netrw
• Divisões/janelas
• :! e um pouquinho sobre :make

Abas no Vim

Você mencionou abas no Vim? Eu não sabia que isso existia!

Eu sei, não é incrível? Uma aba é uma página com uma ou mais janelas com um rótulo no topo.

Se você tiver interesse em saber mais sobre janelas, buffers e abas: detalhes técnicos.

Dê uma olhada:

Passo a passo:

• Abra o Vim com qualquer arquivo ou apenas com o Vim: $ vim file1.
• Digite o conteúdo do arquivo e entre no modo de comando (pressione Esc).
• :tabedit file2 abrirá uma nova aba e o levará para editar o file2.
• :tabedit file3 abrirá uma nova aba e o levará para editar o file3.
• Para navegar entre essas abas, você pode estar no modo normal e digitar: gt para ir para a próxima aba ou gT para ir para a aba anterior. Você também pode navegar até uma aba específica usando {i}gt, onde i é o índice da sua aba. Exemplo: 2gt leva você para a segunda aba.
• Para ir diretamente para a primeira ou última aba, você pode digitar o seguinte no modo de comando: :tabfirst ou :tablast para a primeira ou para a última aba, respectivamente. Para avançar e voltar: :tabn para a próxima aba e :tabp para a aba anterior.
• Você pode listar todas as abas abertas usando: :tabs.
• Para abrir vários arquivos em abas: $ vim -p source.c source.h.
• Para fechar uma única aba: :tabclose. Para fechar todas as outras abas, exceto a atual: :tabonly. Use o sufixo ! para ignorar as alterações de arquivos não salvos.

[DEMO] Abas no VIM

Acho que essa funcionalidade nos permite economizar tempo efetivamente, compartilhando o buffer entre as abas e nos permitindo copiar/colar entre as abas e manter várias sessões de abas diferentes para cada categoria de trabalho. Por exemplo: você pode ter uma aba de terminal com todas as abas do Vim contendo apenas arquivos de código-fonte C e outra aba de terminal com todas as abas do Vim contendo arquivos de cabeçalho (.h).

As abas fornecem tanta conveniência para manter todos os meus arquivos abertos e acessá-los quando eu quiser. No entanto, não é um incômodo ter que abrir todas as abas toda vez que reinicio ou fecho e abro o terminal?

Com certeza! Todos nós gostamos de ter nossas próprias sessões de trabalho nas quais trabalhamos com um conjunto de arquivos e gostaríamos que o Vim restaurasse a sessão de abas do jeito que a deixamos. O Vim nos permite salvar e restaurar essas sessões de abas! ✋

Passo a passo:

• Abra quantas abas você quiser trabalhar.
• A partir de qualquer aba, pressione Esc e entre no modo de comando.
• Digite: :mksession header-files-work.vim e pressione Enter.
• Sua sessão atual de abas abertas será armazenada em um arquivo chamado header-files-work.vim.
• Para ver a restauração em ação, feche todas as abas e o Vim.
• Inicie o vim com sua sessão usando: $ vim -S header-files-work.vim ou abra o vim com qualquer outro arquivo e entre no modo de comando para digitar: :source header-files-work.vim e pronto! Todas as suas abas serão abertas exatamente como você as salvou!
• Se você alterar as abas da sessão (fechar/abrir novas), você pode salvá-las novamente usando: :mks! enquanto estiver na sessão.

[DEMO] Sessões no Vim

Posso copiar/cortar/colar sem precisar saber os números das linhas?

Ah, sim! Antes, eu costumava ver os números das linhas (:set nu)das funções que queria copiar/cortar. Digamos que eu queira copiar/cortar as linhas de 34 a 65. Eu usava :34,65y (Copiar/Obter) ou :34,65d (Cortar/Excluir).

Claro que contar as linhas e usar {n}yy ou {n}dd (onde n é o número de linhas) não é uma opção quando estamos falando de centenas de linhas, certo?

Pode haver algumas funções que se estendem por várias páginas e você não quer descer apenas para depois esquecer qual era o número da primeira linha. Há uma maneira simples de se fazer isso sem se preocupar com os números das linhas!

Passo a passo:

• Entre no modo normal, vá para a linha de início.
• Digite mk (marcação de um ponto com a letra 'k' ou com qualquer outra letra).
• Mova para baixo (page down ou qualquer outro) e vá para a linha final.
• y'k copiará todas as linhas do início ao fim.
• d'k cortará/excluirá todas as linhas do início ao fim.

Eu tenho algumas funções longas irritantes no topo do meu arquivo e não quero perder tempo rolando ou pulando para determinadas linhas. Sei que pode ser muito pedir isso, porque não é uma IDE, mas, por acaso, podemos fazer o "dobramento" dos blocos de código?

Com certeza! Digamos que você queira pular a etapa de lembrar os números das linhas e andar por aí com seu novo amor, os marcadores. Vá para o início do corpo da função e digite mb. Agora, vá para o final do corpo da função usando % (correspondência de chaves) ou qualquer outra técnica conveniente e pressione zf'b e pronto!

Antes e depois:

Se você se sentir confortável usando os números de linha, o comando é ainda mais fácil de lembrar: :5,16fo (fo significa "code fold" – "dobramento" de código). Depois de "dobrar" o seu código, é fácil alternar entre as visualizações abertas e fechadas usando zo (abrir a dobra de código) e zc (fechar a dobra de código). Não se preocupe tanto com isso. Basta usar za para alternar entre dobras abertas e fechadas.

Digamos que você tenha gasto bastante tempo dobrando suas funções em um arquivo grande. Obviamente, você vai querer manter essas dobras todas as vezes que abrir o arquivo, certo? Por que você gastaria sua energia dobrando-as se não fosse assim? Portanto, há uma solução direto no seu ~/.vimrc. Insira as seguintes linhas no seu~/.vimrc e suas dobras de código serão salvas e restauradas:

autocmd BufWinLeave *.* mkview
autocmd BufWinEnter *.* silent loadview

Normalmente, eu me preocupo com minha indentação, mas, às vezes, tenho que editar o código de outra pessoa que não teve a mesma preocupação com a indentação. Existem atalhos mágicos para fazer isso acontecer?

Claro! É tão simples quanto: =i{ . É isso mesmo! (i significa objeto interno)

[DEMO] Indentação no Vim

Antes e depois:

Tudo o que você precisa fazer é colocar o cursor em qualquer lugar dentro de um bloco que você deseja indentar, pressionar Esc para entrar no modo normal e, em seguida, =i{ . Pronto! Todo o corpo da função (incluindo blocos internos) será indentado.

OBSERVAÇÃO: não espere indentação em seus arquivos Python. Isso só funciona quando o Vim consegue identificar o início e o fim usando parênteses de abertura e fechamento.

Você também pode aumentar/diminuir a indentação dentro de um bloco usando: >;i{ para aumentar e nd<i{ para diminuir no modo normal.

Posso estar sonhando, mas (voz trêmula), quero dizer, eu só quero tentar, hãããã, posso estar exagerando muito com essa pergunta, mas (pausa de 5 segundos)... não importa, vamos para a próxima pergunta.

O Vim é bastante receptivo a críticas e reconhece que não é um IDE. Vamos lá, vamos ver o que você tem.

Bem, desculpe, mas, por acaso (ofegante), com algum plug-in ou algo assim, o Vim tem autocompletar como um IDE?

Você pode ficar surpreso, mas sim! Além disso, adivinha...

rufar de tambores...
rufar de tambores...
rufar de tambores...
rufar de tambores...

Sem nenhum plug-in!

Você me ouviu certo! A única condição para o Vim mostrar opções é "o Vim deve saber sobre o que você está falando". Isso pode ser através de um arquivo de origem incluído ou de funções ou variáveis definidas.

Tudo o que você precisa fazer é começar a digitar e, em seguida, pressionar Ctrl+n no modo de inserção.

Imagine só as possibilidades, especialmente se você estiver escrevendo código em C e não conseguir se lembrar da chamada exata da biblioteca OpenSSL. Tudo o que você precisa fazer é incluir o cabeçalho!

[DEMO] Recurso de autocompletar no Vim

Deixe-me lembrar novamente: sem a necessidade de plug-ins, ok?

OBSERVAÇÃO: os arquivos de cabeçalho podem estar localizados em outros locais no Mac e o Vim pode não ser capaz de encontrá-los. Eu uso um Mac para fazer login em uma máquina Linux. Então, se você estiver usando um Mac, me desculpe por isso.

Eu entendo que o Vim é apenas um editor de texto, mas se você quer que eu trabalhe sem perder o foco e sem sair do Vim o tempo todo, quais opções eu tenho se não consigo lembrar todos os nomes de arquivo?

Simples, use o explorador de arquivos fornecido pelo Vim! Sim, o Vim oferece um explorador de arquivos simples (sem nenhum plug-in). Basta digitar: Explore em qualquer janela do Vim e você verá um explorador de arquivos fácil de navegar, que pode ser percorrido usando as setas para cima ⬆ e para baixo ⬇. Pressione Enter/Return para abrir um arquivo/diretório. Use: q para sair do explorador e do Vim. Se você não deseja sair do Vim e continuar trabalhando com um arquivo aberto, você tem 3 opções:

1. Abra o explorador em uma divisão horizontal (:Sexplore) ou vertical (:Vexplore) e saia do explorador usando :q.
2. Abra o explorador em uma nova aba usando :Texplore e saia usando :q
3. Abra o explorador de arquivos na janela atual e, em seguida, descarregue o buffer atual e o remova da lista de buffers usando :bdel (excluir buffer).

OBSERVAÇÃO: você também pode usar o comando abreviado :Ex para abrir o explorador de arquivos

Às vezes, eu tenho que repetir as mesmas etapas em algumas linhas para editar algo. Tenho certeza de que o Vim tem algum recurso que me permite fazer isso. Estou certo?

100% certo! Você está falando sobre macros – e o Vim suporta macros. Repetir o último comando executado é simples e pode ser usado para tarefas repetitivas simples. No entanto, se o processamento de texto consistir em várias etapas para obter um resultado, as macros são úteis.

Considere um exemplo de um arquivo de cabeçalho em C:

void encrypt_text(char *text, int bytes)
void decrypt_text(char *text, int bytes)
void process_text(char *text, int bytes)
void another_important_function(int bytes, double precision)

Ops! Você se esqueceu de colocar um ponto e vírgula no final de cada linha e também percebeu que todas essas funções retornam um código de erro inteiro em vez de void.

Coloque o cursor no início da palavra void

• Pressione cw no modo normal para excluir a palavra void e digitar int.
• Pressione Esc , vá para o final da linha usando Shift+a para inserir o ;.
• Pressione Esc e pressione ^ para retornar ao início da linha editada.

O resultado é:

int encrypt_text(char *text, int bytes);
void decrypt_text(char *text, int bytes)
void process_text(char *text, int bytes)
void another_important_function(int bytes, double precision)

Você pode gravar essa sequência de etapas e reproduzi-la em todas as 4 linhas.

Tudo que você precisa fazer é, antes de iniciar a sequência, iniciar a gravação da macro em qualquer letra (vamos dizer a) pressionando qa no modo normal. Agora, suas etapas estarão sendo gravadas em a . Quando terminar todas as etapas, basta pressionar q no modo normal. Isso encerrará a gravação. Para reproduzir essas etapas, basta manter o cursor no mesmo lugar em que foi colocado durante a macro. Pressione @a e pronto! O Vim repetirá as mesmas etapas para você nessa linha! Para repeti-lo em várias linhas, você também pode usar @@ após usar o comando @a uma vez.

Eu sei que o Vim está longe de ser um ambiente de desenvolvimento integrado (IDE) e posso ter algumas esperanças pouco realistas, mas só uma pergunta rápida: é possível editar arquivos remotamente com o Vim?

Se você considerar os recursos disponíveis:
[1] Vim;
[2] openssh-client (vem instalado na maioria das distribuições Linux).

Você está com sorte, meu amigo! Sim, o Vim suporta a edição remota de arquivos. O Vim utiliza a conexão segura estabelecida pelo scp (cópia segura), fornecida pelo openssh-client. Há momentos em que você está trabalhando com arquivos em várias máquinas remotas e é uma perda de tempo fazer login em uma máquina apenas para editar um único arquivo! Você pode ficar tranquilo na sua máquina atual, desde que saiba as credenciais e o caminho da máquina remota.

vim scp://usuarioremoto@IP_ou_nomedohost_remoto/caminho/relativo/do/arquivo

Por exemplo: Eu preciso editar um arquivo em 10.0.18.12 armazenado em /home/dev-john/project/src/main.c e tenho as credenciais de login para dev-john, Posso acessar o main.c usando:

$ vim scp://dev-john@10.0.18.12/project/src/main.c

Posso usar o caminho relativo porque posso começar a procurar o arquivo a partir do diretório home de dev-john.

DICA: se você acessa uma máquina remota com frequência, pode criar um arquivo de configuração ssh para criar um atalho para a conexão. Crie um arquivo ~/.ssh/config com:

Host remote-dev-machine
    Hostname 10.0.18.12
    User dev-john
    IdentityFile ~/.ssh/id_rsa

Agora, você pode acessar seu arquivo usando:

$ vim scp://remote-dev-machine/project/src/main.c

Se for confuso lembrar do caminho relativo e não for intuitivo, você também pode especificá-lo de modo alternativo:

$ vim scp://maquina_dev_remota/~dev-john/project/src/main.c

Incrível! Já estou animado com as capacidades prontas para uso do Vim. Parece que você tem uma solução para muitos problemas comuns de edição. Vamos ver. Eu tenho um arquivo com mais de 2 mil linhas e as funções de meu interesse estão nas linhas 9, 768 e 1898. Eu sei que posso pular para uma linha usando o número da linha, mas não sou bom em lembrar esses números. Você tem algo para mim?

Claro que sim! O que você está procurando é uma solução de marcação local no Vim usando letras. Tudo que você precisa fazer é:

• Coloque o cursor em qualquer linha em qualquer posição.
• Pressione Esc para garantir que esteja no modo normal.
• Pressione m{lowercaseletter}, onde {lowercaseletter} é qualquer letra minúscula de a-z.
• Você acabou de criar uma marcação local para navegar em seu arquivo.

Para visualizar todas as suas marcações: pressione Esc e para entrar no modo de comando, digite :marks e pressione Enter/Return. Você verá uma lista de suas marcações. Para visitar qualquer marcação a qualquer momento, basta pressionar Esc e digitar `{lowercaseletter}. Pronto! Você será levado exatamente para a mesma localização onde marcou com o cursor. Exemplo:

Eu criei uma marcação local para a linha 21, coluna 18 usando a. Se eu estiver editando algo na linha 1783, basta pressionar Esc e digitar `a :

Para resolver seu problema, tudo que você precisa fazer é criar 3 marcações locais e pular rapidamente para elas ao verificar :marks.

Problema resolvido!

Que tal se eu dissesse que você também pode criar marcadores globais? Sim, é possível criar marcadores globais também! Eles são equivalentes aos atalhos de janelas ou GUI (links simbólicos/hardlinks no Linux), exceto pelo fato de que você não precisa criar um link real. É isso mesmo! Você pode literalmente pular de editar um arquivo em /dir1 pra outro arquivo e linha em /project/src/ no seu Vim sem sair!

Não se preocupe, não é algo novo e difícil de lembrar. Tudo que você precisa fazer é: usar uma letra maiúscula em vez de uma letra minúscula para criar um marcador global. Isso é tudo! Sério mesmo! Você navega até o marcador global usando o mesmo processo. Por exemplo: se você criou um marcador usando mP , tudo que você precisa fazer é pressionar Esc e digitar `P e pronto! Você pula para o seu marcador global (o Vim se lembra do caminho, o que faz com que você não precise digitar nada sobre o caminho).

Você pode acessar os marcadores globais da mesma maneira que os locais: :marks

:marks
mark line  col file/text
 P     53    4 ~/project/src/large-file.c
 A     11    0 ~/project/README.md

OBSERVAÇÃO: se você não estiver interessado na posição do cursor e quiser estar no início da linha marcada, use 'P em vez de `P (use uma aspa simples em vez de crase para se posicionar no início da linha).

Ouvi dizer que o Vim suporta divisão de janelas juntamente com abas! Eu entendo que as abas são ótimas e permitem trabalhar com vários arquivos abertos ao mesmo tempo. O que é essa divisão? Por que eu gostaria disso?

Cenários:

• Você pode querer editar um arquivo enquanto olha para outro arquivo simultaneamente (talvez esteja definindo uma função em C olhando para sua declaração em um arquivo de cabeçalho).
• Você pode querer editar uma parte de um arquivo enquanto olha para a parte superior/inferior do mesmo arquivo simultaneamente.
• Seu trabalho pode exigir que você edite um arquivo enquanto olha para diferentes partes de diferentes arquivos simultaneamente.

O Vim suporta a divisão da tela tanto horizontalmente quanto verticalmente. O melhor disso é que você pode até navegar pelo sistema de arquivos para abrir um arquivo quando dividir sua tela.

Aqui estão as opções disponíveis:

:split nomedoarquivo  - divide a janela na horizontal e carrega o arquivo
:vsplit nomedoarquivo - divide a janela na vertical e abre o arquivo
ctrl-w seta_para_cima - move o cursor para cima em uma janela
ctrl-w ctrl-w    - move o cursor para outra janela (ciclo)
ctrl-w _         - maximiza a janela atual na vertical
ctrl-w |         - maximiza a janela atual na horizontal
ctrl-w =         - torna todas as janelas do mesmo tamanho
:sview file      - o mesmo que split, mas somente leitura
:close           - fecha a janela atual

Maximizando uma janela para trabalhar:

Redimensionando:

CTRL-W [N] -	Diminui a altura da janela atual em N (padrão 1)
CTRL-W [N] +	Aumenta a altura da janela atual em N (padrão 1)
CTRL-W [N] <	Diminui a largura da janela atual em N (padrão 1)
CTRL-W [N} >	Aumenta a largura da janela atual em N (padrão 1)

Existe alguma maneira de usar o explorador de arquivos enquanto divido as janelas? Não consigo me lembrar e digitar sempre os nomes dos arquivos!

Claro, tudo que você precisa fazer é digitar: :Sexplore para o explorador de arquivos horizontal e :Vexplore para o explorador de arquivos vertical. Você também pode usar: :Vexplore! para abrir o explorador de arquivos no lado direito (em vez do padrão esquerdo).

Novamente, tudo isso funciona sem a necessidade de plug-ins adicionais.

Estou no meio da edição de um código e preciso executar rapidamente um comando de shell. Devo salvar meu trabalho, sair do Vim e executar meus comandos? Aposto que há uma maneira melhor com o Vim.

O Vim não quer que você saia dele e quer que você continue focado no seu trabalho. Por isso, há a opção de executar comandos de shell de dentro do Vim. Não se preocupe, todo o seu trabalho não salvo não será descartado, você apenas executa o seu comando e pronto! Você está de volta ao seu arquivo salvo/não salvo com segurança!

Digamos que você esteja no meio de uma sessão de codificação e precisa dar uma olhada na página do man das operações de arquivo porque esqueceu a assinatura! Você não precisa salvar seu trabalho, sair do Vim e depois verificar as páginas do man, nem precisa abrir outra aba apenas para a página do man. Você pode executar o comando diretamente dentro do editor Vim.

[DEMO] Comandos Unix do Vim

Adivinha! Prepare-se para se surpreender. O Vim também suporta o comando make a partir do seu arquivo! Tudo que você precisa fazer é navegar até um diretório com um Makefile. Abra qualquer arquivo (pode ser seu código-fonte) e faça todas as alterações e salve. Espere, não há necessidade de sair para ver o resultado da compilação. Você pode acionar a compilação do make diretamente do Vim:

[DEMO] Acionar a compilação do make a partir do Vim

Do mesmo modo, você pode compilar outros alvos no seu Makefile!

Exemplo – Limpeza do diretório de compilação:

Espero que esses recursos legais ajudem você a usar o Vim de modo mais produtivo.

Referências (em inglês):

• http://www.openvim.com/tutorial.html
• https://linuxconfig.org/vim-tutorial
• ftp://ftp.vim.org/pub/vim/doc/book/vimbook-OPL.pdf
• http://vim.wikia.com/wiki/Tutorial
• http://www.viemu.com/a-why-vi-vim.html
• http://robertames.com/files/vim-editing.html
• https://www.youtube.com/watch?v=wlR5gYd6um0

Digamos que você é um desenvolvedor de front-end ou que tenha trabalhado mais com o front-end recentemente.

Às vezes, você acaba usando algumas tecnologias de back-end, mas tende a ficar na sua zona de conforto, provavelmente no universo do JavaScript. É possível que você tenha criado uma pequena API com Python em algum momento também.

Você, no entanto, nunca tocou na stack de tecnologias moderna da família .NET.

Nesse sentido, este tutorial vai guiá-lo, passo a passo, na criação de uma aplicação moderna de Single-Page Application (SPA), que usará o Vue.js para o front-end e o .NET Core (C#) para o back-end.

Além disso, veremos como escrever alguns testes, tanto de unidade quanto de integração, a fim de cobrir a funcionalidade do front-end e do back-end (ao menos, parcialmente).

Se você quiser pular a leitura, aqui está o repositório do GitHub com um README detalhado.

O que vamos criar?

Vamos criar uma aplicação da web na qual os usuários podem fazer login/se cadastrar e nos dizer o quanto eles gostam de pizza ao pressionar um botão dizendo "I love it" ('Eu adoro pizza').

Não há restrições de quantas vezes cada usuário pode nos mostrar o quanto gosta de pizza. O único requisito é que apenas usuários logados podem votar.

Na página inicial, junto com os botões de login/cadastro, colocaremos um pequeno gráfico de barras, exibindo os X usuários com a maior apreciação (no eixo X) e o número de votos (no eixo Y)."

Instalação

Vamos começar pelo front-end. Faz mais sentido construir primeiro as partes visíveis da nossa aplicação. Assim, construiremos o nosso front-end com uma das bibliotecas de front-end mais famosas do mercado: o Vue.js.

Como configurar o front-end

Para instalar e configurar inicialmente o nosso front-end com Vue.js, vamos usar a CLI do Vue. Trata-se de uma ferramenta de linha de comando padrão para o desenvolvimento de aplicativos em Vue.js.

Nota da tradução: CLI é a abreviação para Command Line Interface, ou interface da linha de comando, em português.

Para instalá-la, use o comando abaixo. Observe que todos os comandos neste tutorial usam o NPM, que você precisa ter instalado na sua máquina para acompanhar.

npm install -g @vue/cli

Depois de instalar a CLI do Vue com sucesso, poderemos utilizá-la para instalar e configurar o Vue.js. Vamos fazer isso por meio deste processo:

1º Passo: crie um diretório de projeto vazio e abra-o com os seguintes abaixo.

mkdir pizza-app
cd pizza-app

Passo 2: dentro do diretório raiz do projeto, execute o comando a seguir.

vue create frontend

Em seguida, nas opções fornecidas, selecione o seguinte:

• Seleção manual de recursos "Manually select features".

• Babel
• Router
• Pré-processadores do CSS (CSS-Preprocessors, como o SASS)

Em seguida, selecione a versão 2.x na próxima tela:

Nota de tradução: o Vue.js, no momento da tradução, está em sua versão 3 e o suporte à versão 2 terminará ao final deste ano. Neste momento, no entanto, ainda é possível realizar as configurações de acordo com este tutorial seguindo as instruções.

Em seguida, selecione  'Use history mode for router?' e 'Sass/SCSS (with node-sass)', assim:

• Linter / Formatter

• Teste de unidade com Jest

• Teste de ponta a ponta (E2E) com Cypress

Depois desse último passo, finalize o processo de instalação com as opções padrão.

Agora estamos prontos para executar a aplicação usando os seguintes comandos a partir da pasta raiz do projeto:

cd frontend
npm run serve

Depois que o app estiver em execução, você poderá vê-lo no seu navegador em http://localhost:8080:

Antes de prosseguir com a criação dos componentes reais que a nossa aplicação de front-end terá, vamos instalar a parte do back-end da nossa aplicação por meio da CLI do .NET Core.

Como configurar o back-end

Como mencionado acima, usaremos outra ferramenta de linha de comando, a CLI do .NET Core, que possibilita a criação e configuração de apps .NET.

Se você ainda não tem, pode usar este link para baixá-la e, em seguida, instalá-la.

Depois de ter a CLI do .NET Core instalada, vá para o diretório raiz do seu projeto e execute o seguinte comando para criar o back-end da nossa aplicação. Criaremos uma pasta chamada backend e instalaremos um app .NET para a web dentro dela:

dotnet new web -o backend

gitignore.io

Antes de continuar com a instalação dos próximos pacotes que precisaremos, vamos organizar nosso arquivo .gitignore.

Este é um arquivo de configuração que informa ao Git o que ignorar ao fazer o commit das alterações em repositórios baseados em Git (os do GitHub).

Como queremos ter um arquivo .gitignore, ele incluirá regras para dois tipos de aplicações:

• uma baseada em Node.js, que é o nosso front-end do Vue.js; e
• uma para o .NET (C#) que é o nosso back-end.

Para isso, usaremos uma ferramenta chamada gitignore.io. Essa ferramenta vai gerar esses arquivos para nós. A vantagem de usar essa ferramenta é que ela nos permite digitar quais são nossas linguagens de programação/plataformas e gera o arquivo .gitignore para nós.

Além disso, no topo do arquivo gerado, ele salva links para criação ou edição posterior, como mostrado abaixo:

# Created by https://www.toptal.com/developers/gitignore/api/webstorm,vue,vuejs,visualstudio
# Edit at https://www.toptal.com/developers/gitignore?templates=webstorm,vue,vuejs,visualstudio

Agora, estamos prontos para instalar o restante dos pacotes que precisamos.

Primeiro, vamos instalar um pacote chamado SpaServices, que nos permitirá ter a aplicação em execução usando apenas um URL e apontando para a aplicação .NET. De sua parte, ele encaminhará solicitações para a nossa aplicação de front-end.

Para instalá-lo, abra o seu terminal, vá para a pasta backend do seu projeto e digite o seguinte comando:

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 3.1.8

Depois disso, precisamos configurar a nossa aplicação de back-end com o pacote SpaServices para ter o resultado desejado.

Todas as solicitações serão encaminhadas para a nossa aplicação de back-end .NET e, se a solicitação for destinada ao front-end, ela será encaminhada.

Para fazer isso, abra o arquivo Startup.cs e atualize seu conteúdo para ficar assim:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;

namespace backend
{
    public class Startup
    {
        public IConfiguration Configuration { get; }

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        // Este método é chamado pelo tempo de execução. Use-o para adicionar serviços ao contêiner.
        // Para obter mais informações sobre como configurar sua aplicação, acesse https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            string connectionString = Configuration.GetConnectionString("DefaultConnection");
            services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(connectionString));
            services.AddSpaStaticFiles(configuration: options => { options.RootPath = "wwwroot"; });
            services.AddControllers();
            services.AddCors(options =>
            {
                options.AddPolicy("VueCorsPolicy", builder =>
                {
                    builder
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
                    .WithOrigins("https://localhost:5001");
                });
            });
            services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options =>
                {
                    options.Authority = Configuration["Okta:Authority"];
                    options.Audience = "api://default";
                });
            services.AddMvc(option => option.EnableEndpointRouting = false);
        }

        // Este método é chamado pelo tempo de execução. Use-o para configurar o pipeline da solicitação HTTP.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ApplicationDbContext dbContext)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors("VueCorsPolicy");

            dbContext.Database.EnsureCreated();
            app.UseAuthentication();
            app.UseMvc();
            app.UseRouting();
            app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
            app.UseSpaStaticFiles();
            app.UseSpa(configuration: builder =>
            {
                if (env.IsDevelopment())
                {
                    builder.UseProxyToSpaDevelopmentServer("http://localhost:8080");
                }
            });
        }
    }
}

Essa é a versão final do arquivo Startup.cs e, por isso, você provavelmente deve ter notado algumas outras coisas nela. Voltaremos nisso um pouco mais tarde neste tutorial.

Neste ponto, você deve ser capaz de executar a sua aplicação back-end. Se quiser fazer isso, execute os seguintes comandos a partir da pasta raiz do seu projeto:

cd backend
dotnet run

Como configurar a autenticação

Como você deve se lembrar da descrição no início, nossa aplicação deve ter uma opção de registro/login.

Para atender a esse requisito, usaremos um serviço terceirizado chamado Okta. Instalaremos os pacotes necessários para usar o Okta SDK no front-end e no back-end do nosso app.

Antes disso, porém, você precisa criar uma conta no site deles e obter acesso ao painel de administração. A partir daí, você pode criar uma aplicação. Aqui vemos como fica na minha aplicação:

Agora, vamos começar com o pacote que precisamos para nosso front-end. Na pasta raiz, execute os seguintes comandos:

cd frontend
npm i @okta/okta-vue

Após esta etapa, estamos prontos para alterar nossa aplicação do Vue.js para que use as vantagens do Okta SDK.

Também instalaremos outro pacote, chamado BootstrapVue, que fornece um conjunto de componentes do Vue.js bonitos e prontos para uso. Isso nos ajudará a economizar tempo de desenvolvimento e também nos dará um front-end de boa aparência.

Para instalá-lo, execute o seguinte na sua pasta frontend:

npm i vue bootstrap-vue bootstrap

Como configurar o roteador

Chegou a hora de escrever um pouco de código. Precisamos editar nosso roteador para aplicar o que vem dos serviços de autenticação do Okta.

Você pode ver o arquivo completo no meu repositório do GitHub, mas aqui está a parte essencial que você precisa configurar com seus próprios dados (que você obteve quando se registrou no site do desenvolvedor do Okta):

Vue.use(Auth, {
  issuer: 'https://dev-914982.okta.com/oauth2/default',
  client_id: '0oatq53f87ByM08MQ4x6',
  redirect_uri: 'https://localhost:5001/implicit/callback',
  scope: 'openid profile email'
})

....

router.beforeEach(Vue.prototype.$auth.authRedirectGuard())

Tela inicial

Depois de classificar nosso roteador, podemos finalmente fazer algumas alterações na tela inicial da nossa aplicação, que ficará visível para nossos usuários.

Abra o arquivo App.vue em seu IDE e altere seu conteúdo da seguinte maneira:

<template>
  <div id="app">
    <header>
      <b-navbar toggleable="md" type="light" variant="light">
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-navbar-brand to="/">Love Pizza</b-navbar-brand>
        <b-collapse is-nav id="nav-collapse">
          <b-navbar-nav>
            <b-nav-item href="#" @click.prevent="login" v-if="!user">Login</b-nav-item>
            <b-nav-item href="#" @click.prevent="logout" v-else>Logout</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </header>
    <main>
      <div>
        Love pizza button and clicks counter here
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      user: null
    }
  },
  async created() {
    await this.refreshUser()
  },
  watch: {
    '$route': 'onRouteChange'
  },
  methods: {
    login() {
      this.$auth.loginRedirect()
    },
    async onRouteChange() {
      await this.refreshUser()
    },
    async refreshUser() {
      this.user = await this.$auth.getUser()
    },
    async logout() {
      await this.$auth.logout()
      await this.refreshUser()
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

Neste momento, sua aplicação deve ter a seguinte aparência:

Observação: não se confunda com o texto 'Love pizza button and clicks counter here' (aqui vão o botão de pizza e o contador de cliques). Ao criar as UIs, é uma boa prática deixar esses espaços reservados para componentes que serão desenvolvidos no futuro.

No nosso caso, é aqui que adicionaremos os componentes responsáveis pelo botão 'I love it' e para o contador posteriormente. Eles mostrarão o número de votos por usuário.

<main>
  <div>
  	Love pizza button and clicks counter here
  </div>
</main>

Autenticação no back-end

Até agora, configuramos nosso front-end para que use o serviço de autenticação fornecido pelo Okta. Porém, para ter toda a imagem pronta para uso, precisamos fazer o mesmo no lado do back-end.

É de onde faremos chamadas HTTP, para nos comunicarmos com o banco de dados. Como você verá mais adiante, algumas dessas chamadas precisarão ser autenticadas para serem bem-sucedidas.

Vamos começar novamente com a instalação de alguns pacotes que facilitarão nosso trabalho. No seu terminal, vá para o diretório backend e execute o seguinte:

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer --version 3.1.8
dotnet add package Microsoft.Extensions.Configuration --version 3.1.7

Então, precisamos de outro pacote que nos ajude a configurar nosso banco de dados. Usaremos o banco de dados SQLite, que é superfácil de usar, na configuração do .NET Core.

Ainda na pasta backend, execute:

dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 2.1.1

Assim que terminarmos as instalações, certifique-se de que tem o conteúdo completo do arquivo Startup.cs (e se ainda não o fez, recomendo fazer isso agora).

PizzaVotesApiService

OK, pessoal!  Configuramos nosso front-end e nosso back-end para oferecer suporte à autenticação. Adicionamos o SQLite como um banco de dados a ser usado para armazenar os votos dos usuários. Por fim, temos uma versão inicial da nossa tela inicial.

Agora, é hora de implementar um serviço no front-end que nos permitirá consumir a API do nosso back-end.

Ótimo trabalho até agora!

Antes de poder fazer chamadas HTTP do front-end para o back-end, precisamos instalar mais um pacote em nossa aplicação do Vue.js. Esse pacote se chama axios e nos dá a capacidade de fazer XMLHttpRequests a partir do navegador, que é exatamente o que precisamos.

Abra seu terminal, vá para a pasta frontend do seu projeto e execute:

npm i axios

Em seguida, em seu IDE, vá para a pasta src do front-end do seu app, crie um arquivo .js e adicione o seguinte código dentro dele:

import Vue from 'vue'
import axios from 'axios'

const client = axios.create({
    baseURL: 'http://localhost:5000/api/pizzavotes',
    json: true
})

export default {
    async execute(method, resource, data) {
        const accessToken = await Vue.prototype.$auth.getAccessToken()
        return client({
            method,
            url: resource,
            data,
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        }).then(req => {
            return req.data
        })
    },
    getAll() {
        return this.execute('get', '/')
    },
    getById(id) {
        return this.execute('get', `/${id}`)
    },
    create(data) {
        return this.execute('post', '/', data)
    },
    update(id, data) {
        return this.execute('put', `/${id}`, data)
    },
}

Eu dei nome ao meu arquivo de PizzaVotesApiService.js. Pararemos com a integração da API por um tempo e criaremos outro componente que conterá os controles que os usuários usarão para interagir com essa API.

Componente do painel

Diga "olá" para o nosso componente Dashboard.vue.

É aqui que colocaremos o botão 'I love it' ('Eu adoro pizza') e um pequeno contador de votos.

Também adicionaremos uma imagem de pizza divertida.

Também adicionaremos um belo gráfico de barras, mostrando os X principais eleitores.

Você pode copiar e colar o conteúdo completo do arquivo do meu repositório para que possamos continuar integrando tudo.

Integração da API

Vou usar um pequeno diagrama para representar o fluxo de dados. Como dizem, "uma imagem vale mais que mil palavras":

Como você pode ver no diagrama (eu espero), quando o usuário insere seus votos, os dados vão do componente do painel para o serviço de API que criamos para comunicação com a API de back-end. Em seguida, ele alcança o controlador de back-end que está de fato fazendo as chamadas HTTP.

Depois que os dados são buscados, o serviço os repassa para nossa interface do usuário, onde os mostramos por meio de nossos componentes do Vue.js. Como você verá, existe alguma lógica adicional que verifica se o usuário está autenticado para saber quais chamadas executar.

Aqui está a implementação do controller em si:

using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace backend.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class PizzaVotesController : ControllerBase
    {
        private readonly ApplicationDbContext _dbContext;

        public PizzaVotesController(ApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        // GET api/pizzavotes
        [HttpGet]
        public async Task<ActionResult<List<PizzaVotes>>> Get()
        {
            return await _dbContext.PizzaVotes.ToListAsync();
        }

        // GET api/pizzavotes/{email}
        [Authorize]
        [HttpGet("{id}")]
        public async Task<ActionResult<PizzaVotes>> Get(string id)
        {
            return await _dbContext.PizzaVotes.FindAsync(id);
        }

        // POST api/pizzavotes
        [Authorize]
        [HttpPost]
        public async Task Post(PizzaVotes model)
        {
            await _dbContext.AddAsync(model);
            await _dbContext.SaveChangesAsync();
        }

        // PUT api/pizzavotes/{email}
        [Authorize]
        [HttpPut("{id}")]
        public async Task<ActionResult> Put(string id, PizzaVotes model)
        {
            var exists = await _dbContext.PizzaVotes.AnyAsync(f => f.Id == id);
            if (!exists)
            {
                return NotFound();
            }

            _dbContext.PizzaVotes.Update(model);

            await _dbContext.SaveChangesAsync();

            return Ok();
        }
    }
}

Aqui temos quatro métodos para executar as quatro operações básicas:

• Obter todos os registros do banco de dados;
• Obter os registros de um usuário (pelo endereço de e-mail);
• Criar um novo registro de usuário;
• Atualizar os registros de um usuário existente.

Você provavelmente notou a cláusula [Authorize] acima de três dos quatro métodos. Esses métodos vão exigir que o usuário seja autenticado para executar.

Deixaremos o método GET api/pizzavotes sem autorização para obter todos os registros de propósito. Como gostaríamos de mostrar o gráfico de barras na tela inicial para todos os usuários, precisaremos poder fazer esta chamada, independentemente de o usuário estar autenticado ou não.

Permitindo o registro

Algo para se observar: se você gostaria de ter um 'Cadastre-se' em sua tela de login, você precisa permitir isso no painel de administração do Okta.

Uma vez logado, selecione no menu Users -> Registration (Usuários -> Registro):

Finalizando o back-end

Para que o back-end de sua aplicação funcione totalmente, dê uma olhada no meu repositório aqui e adicione os arquivos ausentes.

Se você acompanhou até este ponto, você deve ter os seguintes arquivos (exceto a pasta de teste, pois vamos adicioná-la mais a frente):

Finalizando o front-end

Para finalizar o trabalho do front-end da nossa aplicação, criaremos mais dois componentes.

O primeiro renderizará o gráfico de barras mencionado acima, enquanto o segundo exibirá o endereço de e-mail do usuário que está conectado no momento.

No seu IDE, vá para frontend/src/components e crie dois arquivos, chamados Username.vue e VotesChart.vue, respectivamente.

Username.vue é um componente muito curto e simples que pega o endereço de e-mail do usuário como suporte e o renderiza. Aqui está a sua implementação:

<template>
  <div class="username">{{ username }}</div>
</template>

<script>
export default {
  props: { username: String },
}
</script>

<style lang="scss">
.username {
  color: rebeccapurple;
  display: flex;
  align-items: center;
  justify-content: center;
}

.username::before {
  content: "•";
}

.username::after {
  content: "•";
}
</style>

Um único ponto que é preciso observar aqui é que estamos usando SASS/SCSS para definir os estilos dos componentes. Isso é possível por termos escolhido essa opção no início (quando estávamos instalando nossa aplicação do Vue.js).

Para desenhar o gráfico, usaremos um pacote chamado vue-chart.js. Instale-o executando o seguinte comando na sua pasta frontend:

npm i vue-chartjs chart.js

Nosso componente VotesChart.vue será uma espécie de wrapper para o componente gráfico de barras que vem do pacote vue-chartjs.

Nós o usamos para obter os dados do componente pai, Dashboard.vue, e processá-los. Classificamos o array de dados para exibir nossos principais votantes, classificados do maior para o menor número de votos.

Em seguida, passamos para o componente do gráfico de barras para visualizá-lo. Aqui está a implementação completa:

<script>
import { Bar } from 'vue-chartjs'

const TOP_N_VOTERS_TO_SHOW_ON_CHART = 10

// Usado para ordenar pelo valor dos votos - do maior para o menor (desc)
function sortByStartDate(nextUser, currentUser) {
  const nextVoteValue = nextUser.value
  const currentVoteValue = currentUser.value
  return currentVoteValue - nextVoteValue
}

export default {
  extends: Bar,
  props: { data: Array },

  watch: {
    data: async function (newVal) {
      const sortedVotes = Array.from(newVal).sort(sortByStartDate).slice(0, TOP_N_VOTERS_TO_SHOW_ON_CHART)
      this.labels = sortedVotes.map(user => user.id)
      this.values = sortedVotes.map(user => user.value)

      this.renderChart({
        labels: this.labels,
        datasets: [
          {
            label: 'Pizza Lovers',
            backgroundColor: '#f87979',
            data: this.values,
          }
        ]
      }, {
        scales: {
          yAxes: [{
            ticks: {
              stepSize: 1,
              min: 0,
              max: this.values[0]
            }
          }]
        }
      })
    }
  }
}
</script>

Observe que há uma constante na parte superior do arquivo que definirá quantos dos principais votantes gostaríamos de mostrar neste gráfico. Atualmente, está definida como 10, mas você pode alterá-la como quiser.

Quando estiver pronto com todo o front-end e quiser executar a aplicação, você pode fazer isso:

Vá para a pasta frontend e execute:

npm run serve

Vá para a pasta backend e execute:

dotnet run

Abra seu navegador e acesse https://localhost:5001.

Como testar nossas aplicações

Até agora, criamos uma aplicação de página única moderna e totalmente funcional com um back-end em .NET Core e um banco de dados SQLite. Isso é muito trabalho. Parabéns! ✨

Facilmente, poderíamos parar aqui e tomar um suco ou um café.

Poré,...

Somos razoáveis o suficiente para saber que, se não testarmos nossas aplicações, não podemos garantir que funcionarão conforme o esperado.

Também sabemos que, se quisermos tornar nosso código testável, devemos escrevê-lo de maneira bem estruturada, tendo em mente os princípios básicos do design de software (texto em inglês).

Espero ter convencido você a continuar trabalhando neste tutorial. Afinal, a única coisa que nos resta fazer é escrever alguns testes para nossas duas aplicações. Então, vamos fazê-lo!

Trataremos do funcionamento de nossa API de back-end com testes de integração e, em nosso front-end, escreveremos testes de unidade e integração.

Testes de unidade e de integração

Antes de passar para o código, gostaria de dizer algumas palavras sobre esses tipos de testes e responder a algumas das perguntas mais frequentes.

Você deve estar se perguntando, o que são testes de unidade? O que são testes de integração? Por que nós precisamos deles? Quando devemos usar cada um deles?

Partindo da primeira pergunta, um teste de unidade é um trecho de código que testa a funcionalidade de um módulo encapsulado (ou seja, outro trecho). É escrito como uma função ou algum tipo de bloco de código independente.

Eles são bons de se ter, porque fornecem um feedback rápido do tempo de desenvolvimento e mantêm o código protegido contra regressões quando novos recursos são adicionados.

Os testes de integração são úteis quando precisamos testar como vários módulos/unidades estão trabalhando juntos. Por exemplo, uma API REST e uma interação com um banco de dados.

Dependendo do tamanho da aplicação em que estamos trabalhando, podemos precisar apenas de testes de integração. Às vezes, no entanto, precisamos de testes de integração e de unidade para testar de verdade o nosso código.

Idealmente, deveríamos ter ambos, pois são partes essenciais da pirâmide de testes e são os mais baratos de implementar.

Em alguns casos, contudo, como para nosso back-end, apenas testes de integração são necessários para cobrir a funcionalidade que vale a pena ser testada. Temos apenas os métodos de API para trabalhar com o banco de dados.

Como criar nossos testes de back-end

Desta vez, começaremos criando nossa solução de teste. Para fazer isso, você precisa fazer algumas coisas.

Primeiro, instale a biblioteca xUnit executando o seguinte no diretório raiz do projeto:

dotnet add package xUnit

Em seguida, vá para a pasta de backend e crie e esvazie a pasta chamada tests. Então, dentro dessa pasta, execute:

dotnet new xunit -o PizzaVotes.Tests

Feito isso, abra backend.csproj e adicione as duas linhas a seguir ao bloco <PropertyGroup>:

<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
<GenerateTargetFrameworkAttribute>false</GenerateTargetFrameworkAttribute>

Em seguida, vá para a pasta tests e instale os seguintes pacotes:

Microsoft.AspNetCore.Mvc
Microsoft.AspNetCore.Mvc.Core
Microsoft.AspNetCore.Diagnostics
Microsoft.AspNetCore.TestHost
Microsoft.Extensions.Configuration.Json
Microsoft.AspNetCore.Mvc.Testing

Você faz isso executando cada um dos seguintes comandos em seu terminal:

dotnet add package Microsoft.AspNetCore.Mvc --version 2.2.0
dotnet add package Microsoft.AspNetCore.Mvc.Core --version 2.2.5
dotnet add package Microsoft.AspNetCore.Diagnostics --version 2.2.0
dotnet add package Microsoft.AspNetCore.TestHost --version 3.1.8
dotnet add package Microsoft.AspNetCore.Mvc.Testing --version 3.1.8

Depois de ter tudo instalado, estamos prontos para começar a escrever alguns testes.

Como você pode ver aqui, excetuando os próprios testes, adicionei mais dois arquivos que precisamos ou que são bons de se ter ao executar os testes.

Um deles é apenas um arquivo auxiliar com um método para lidar com objetos serializados e obter o conteúdo da string. O outro é o arquivo fixture, onde temos as configurações e definições do nosso servidor de teste e o client.

Claro, há também um arquivo com nossos testes.

Não vou colar o conteúdo desses arquivos aqui, pois este tutorial já ficou longo o suficiente.

Você pode simplesmente copiá-los do meu repositório.

Se você observar os testes mais de perto, poderá perceber que estamos testando apenas a primeira chamada, não autenticada, para uma resposta de sucesso. Para o restante, estamos verificando apenas a resposta HTTP 401, Unauthorized (não autorizada).

Isso ocorre porque apenas o primeiro método é público, ou seja, não precisa de autenticação.

Se tivéssemos os mesmos testes para todos os métodos, precisaríamos implementar um middleware apenas para autorizar nossa aplicação de teste na frente dos serviços de autenticação da Okta.

Como o objetivo deste tutorial é aprender uma variedade de coisas, podemos dizer que não vale a pena.

Agora a parte divertida: como executar os testes. Acontece que é muito simples. Basta ir ao seu diretório tests (onde está o arquivo tests.sln) do seu terminal e executar:  

dotnet test

Você deve ver algo assim em seu terminal (ignore os avisos amarelos):

Como criar nossos testes para o front-end

É hora de adicionar alguns testes ao nosso front-end. Aqui, faremos testes de unidade e de integração.

Testes de unidade
Como mencionei acima, os testes de unidade são adequados quando temos um módulo ou componente que não possui dependências do mundo externo.

Esses componentes acabam sendo nossos componentes Username.vue e VotesChart.vue.

Eles são componentes representacionais, que recebem os dados de que precisam para funcionar adequadamente por meio de props. Isso significa que podemos escrever nossos testes da mesma maneira: passar a eles os dados de que precisam e verificar se os resultados de sua execução são os esperados.

Aqui, há algo importante para se destacar. Isso não significa que aquilo que foi fornecido pelo pacote @vue/test-utils (que vem ao instalar o Vue.js) não tenha sido o suficiente para testar ambos os componentes.

Em vez disso, para fins educacionais, decidi instalar e usar a biblioteca de testes do Vue também. É por isso que um dos componentes abaixo é testado com @vue/test-utils, mas o outro é testado com @testing-library/vue.

Não se esqueça de instalá-la antes de executar o teste:

npm i --save-dev @testing-library/vue

Novamente, para economizar espaço, não vou colar o código do teste do componente aqui, mas você pode vê-lo facilmente aqui e aqui.

Então, para executar os testes de unidade do seu front-end, vá para a pasta frontend e execute:

npm run test:unit

Teste de integração
Esse tema é provavelmente bem interessante para alguns de vocês.

Se você se lembra do início deste tutorial, quando instalamos nossa aplicação do Vue.js, para nossa solução de testes e2e (ou de integração), selecionamos o Cypress.js.

Esta é uma ferramenta superfácil de usar, que permite aos desenvolvedores escrever testes e2e (end-to-end, ou de ponta a ponta) reais para suas aplicações, fornecendo feedback imediato.

Por experiência pessoal, eu diria que trabalhar com o Cypress é mais prazeroso do que com outros frameworks semelhantes. Se você tiver experiência anterior com estruturas como Nightwatch.js ou Selenium, o que você vê abaixo pode ser familiar para você.

Antes de executar nossos testes com o Cypress, precisamos fazer algumas pequenas alterações em sua configuração.

Encontre o arquivo de índice plugins e adicione a seguinte linha à declaração de retorno no final do arquivo:

  baseUrl: "https://localhost:5001"

Agora, atualize o conteúdo do test.js na pasta specs conforme mostrado aqui.

Depois de fazer tudo, você poderá executar seus testes e2e via Cypress. Você pode fazer isso executando o seguinte comando enquanto estiver no diretório do frontend:

npm run test:e2e

⚡Não se esqueça de iniciar sua aplicação de back-end antes de executar os testes e2e para que funcionem corretamente.

Se você fez tudo como mostramos, depois de executar o comando acima, você deve ver algo assim em seu terminal:

Uma nova janela do navegador será aberta pelo próprio Cypress.js, onde você pode usar o URI fornecido para ver e executar seus testes.

Quando todos os testes forem aprovados, você deverá ver uma tela como esta:

Conclusão

Neste tutorial, vimos como usar duas das tecnologias mais importantes do mercado para criar um front-end e um back-end.

Também aprendemos como combiná-las adequadamente para criar uma aplicação de página única pequena, mas totalmente funcional, com suporte a banco de dados.

Por fim, também escrevemos testes de unidade e de integração para ambas as pontas do projeto.

Acredito que esse tipo de exercício seja benéfico tanto para leitores experientes quanto para iniciantes, pois aborda muitas coisas diferentes passo a passo. No final, se tiver concluído todo o processo, você tem uma aplicação funcional de exemplo.

Este tutorial acabou sendo muito mais longo do que eu inicialmente pensei que seria. Se, contudo, você já fez tudo, eu admiro você! Espero que tenha sido um prazer para você ler o artigo, assim como foi para mim escrevê-lo.

Obrigado pela leitura!

Recursos

Você pode encontrar abaixo os links que foram úteis para mim, de algum modo, enquanto escrevia o artigo (recursos em inglês).

https://consultwithgriff.com/spas-with-vuejs-aspnetcore/
https://github.com/okta/okta-auth-dotnet
https://docs.microsoft.com/en-us/dotnet/core/testing/unit-testing-with-dotnet-test
https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpresponsemessage?view=netcore-3.1
https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events
https://docs.cypress.io/guides/references/configuration.html#Options
https://docs.cypress.io/guides/tooling/visual-testing.html#Functional-vs-visual-testing
https://www.codingame.com/playgrounds/35462/creating-web-api-in-asp-net-core-2-0/part-3---integration-tests
https://testing-library.com/docs/vue-testing-library/intro
https://www.valentinog.com/blog/canvas/

ATUALIZAÇÃO: 13/5/2020 – Os passos da nova caixa de diálogo de compartilhamento estão disponíveis abaixo.

Obrigado, Erica H.!

Você está construindo algum protótipo de aplicação web dinâmica e precisa da colaboração de pessoas que não possuem experiência como desenvolvedoras?

Já participei de um hackathon antes. Mesmo tendo a experiência e o conhecimento em desenvolvimento de aplicações, não tinha habilidade ou tempo suficiente para implementar um aplicação web completa na sprint de 3 dias. Era pouco tempo para ajudar e, assim, foi deixada de lado a possibilidade de assistir a tutoriais e estudar HTML e CSS.

O resultado? Aprendi muito, mas gostaria de ter contribuído mais.

Em um dos hackathons dos quais participei recentemente, encontrei um problema semelhante. Dessa vez, eu não era o novato. Havia no meu time pessoas que não eram engenheiras de software e que queriam ajudar na construção de nosso protótipo de aplicação web. Felizmente, nos deparamos com as planilhas do Google como uma maneira de essas pessoas simularem nosso banco de dados e fazerem com que os desenvolvedores de back-end se conectassem ao endpoint de JSON das planilhas do Google e pudessem, assim, analisá-lo.

Com este guia, você será capaz de:

1. Criar uma planilha nas planilhas do Google.
2. Publicar a planilha na web.
3. Gerar um endpoint de JSON.
4. Tornar a planilha pública para colaboração.
5. Passar o endpoint de JSON para o time de desenvolvedores de back-end.

Após este tutorial, você poderá entrar em equipes dizendo: "Posso ajudar com o back-end!".

Seção 1: Criando uma planilha do Google

Passo 1:

Vá até as planilhas do Google

Passo 2:

Crie uma planilha

Seção 2: Publicando suas planilhas do Google na web

Nota: a atualização da nova caixa de diálogo de compartilhamento a partir de 13/05/2020, localizada após o passo 2.

Passo 1:

Clique em "Arquivo" > "Publicar na web…" (ou, em inglês, como na imagem, File > Publish to the web...).

Passo 2:

Clique em "Publicar" (ou, em inglês, como na imagem, Publish), depois em "OK".

Passo 3:

Não há necessidade de fazer nada aqui.

ATUALIZAÇÃO: 13/05/2020 - Nova caixa de diálogo de compartilhamento

Passo 1:
Clique em "Compartilhar" (ou, em inglês, como na imagem, Share).

Passo 2:

Clique em "Alterar para qualquer pessoa com o link" (ou, em inglês, como na imagem, Change to anyone with the link).

Passo 3:

Clique em "Concluído" (ou, em inglês, como na imagem, Done).

Seção 4: usando suas planilhas das planilhas do Google como endpoint de JSON

Passo 1:

Copie o template de URL e cole na barra de endereços:

https://spreadsheets.google.com/feeds/cells/CÓDIGODASUAPLANILHAGOOGLESHEETS/NÚMERODAPÁGINADAPLANILHA/public/full?alt=json

Passo 2:

Vá até a planilha do Google aberta e verifique a barra de endereços.

Passo 3:

Vá até o template de URL e substitua

• CÓDIGODASUAPLANILHAGOOGLESHEETS por 1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs
• NÚMERODAPÁGINADAPLANILHA por 1

Passo 4:

Recupere o URL do JSON

https://spreadsheets.google.com/feeds/cells/1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs/1/public/full?alt=json

Seção 5: Tornando pública sua planilha do Google (para colaboração e entrada de dados)

Passo 1:

No canto superior direito, clique em "Compartilhar" (ou, em inglês, como na imagem, Share).

Passo 2:

Adicione um nome e clique em "Salvar" (ou, em inglês, como na imagem, Save).

Passo 3:

Clique em "Avançado" (ou, em inglês, como na imagem, Advanced).

Passo 4:

Clique em "Alterar…"  (ou, em inglês, como na imagem, Change).

Passo 5:

Clique em "Ativado — Público na web" (ou, em inglês, como na imagem, ON - Public on the web). Depois, clique em salvar "Salvar" (ou, em inglês, como na imagem, Save).

Pegadinhas comuns:

Se você receber a resposta abaixo, verifique o URL e certifique-se de estar usando o código correto das planilhas do Google na barra de endereço.

Se você receber a resposta abaixo, volte para a Seção 2: Publicando suas planilhas do Google na web.

LinkedIn do autor do texto

O Redux é um contêiner de estado previsível para aplicações escritas em JavaScript. Ele também é popularmente conhecido como uma biblioteca para o gerenciamento de estado em aplicações do React.

Utilizar o Redux junto com TypeScript oferece ao desenvolvedor uma melhor experiência, pois o TypeScript é um superconjunto do JavaScript que verifica o código para torná-lo robusto e compreensível.

Neste guia, mostrarei como usar o Redux em seu projeto com TypeScript criando uma aplicação do React que permite adicionar, excluir e exibir artigos.

Vamos lá!

• Pré-requisitos
• Configurando o projeto
• Criando os tipos
• Criando os tipos de ação
• Criando os criadores de ação
• Criando um redutor
• Criando um repositório
• Criando os componentes

Pré-requisitos

Este tutorial pressupõe que você tenha pelo menos um conhecimento básico de React, Redux e TypeScript.

Portanto, se não estiver familiarizado com essas tecnologias, tente primeiro ler este guia prático do TypeScript ou este tutorial do React Redux (textos em inglês). Caso contrário, vamos começar.

Configurando o projeto

Para usar o Redux e o TypeScript, precisamos criar uma aplicação em React.

Para isso, vamos abrir a CLI (interface de linha de comando) e executar este comando:

  npx create-react-app my-app --template typescript

A seguir, vamos estruturar o projeto do seguinte modo:

├── src
|  ├── components
|  |  ├── AddArticle.tsx
|  |  └── Article.tsx
|  ├── store
|  |  ├── actionCreators.ts
|  |  ├── actionTypes.ts
|  |  └── reducer.ts
|  ├── type.d.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  └── setupTests.ts
├── tsconfig.json
├── package.json
└── yarn.lock

A estrutura de arquivos do projeto é bastante simples. No entanto, há duas coisas que você deve prestar atenção:

• A pasta store do repositório, que contém arquivos relacionados ao React Redux.
• O arquivo type.d.ts, que contém os tipos do TypeScript, que podem ser usados agora em outros arquivos sem importar.

Dito isso, agora, podemos instalar o Redux e criar nosso primeiro repositório.

Com isso, vamos abrir o projeto e executar o seguinte comando:

  yarn add redux react-redux redux-thunk

Se, no lugar do Yarn, você estiver usando o npm, execute:

  npm install redux react-redux redux-thunk

Também precisamos instalar os tipos como dependências de desenvolvimento para ajudar o TypeScript a entender as bibliotecas.

Então, vamos executar este comando novamente na CLI.

  yarn add -D @types/redux @types/react-redux @types/redux-thunk

No npm:

  npm install -D @types/redux @types/react-redux @types/redux-thunk

Ótimo! A partir de agora podemos criar os tipos do TypeScript para o projeto na próxima seção.

Criando os tipos

Os tipos do TypeScript permitem definir tipos para suas variáveis, parâmetros de função e assim por diante.

• type.d.ts

interface IArticle {
  id: number
  title: string
  body: string
}

type ArticleState = {
  articles: IArticle[]
}

type ArticleAction = {
  type: string
  article: IArticle
}

type DispatchType = (args: ArticleAction) => ArticleAction

Aqui, começamos declarando a interface IArticle, que reflete a forma de um determinado artigo.

Em seguida, temos ArticleState, ArticleAction e DispatchType, que servirão como tipos para, respectivamente, o objeto de estado, os criadores de ação e a função de dispatch fornecida pelo Redux.

Dito isso, agora temos os tipos necessários para começar a usar o React Redux. A seguir, vamos criar os tipos de ação.

Criando os tipos de ação

• store/actionTypes.ts

export const ADD_ARTICLE = "ADD_ARTICLE"
export const REMOVE_ARTICLE = "REMOVE_ARTICLE"

Precisamos de dois tipos de ação para o repositório em Redux, um para adicionar artigos e outro para excluí-los.

Criando os criadores de ação

• store/actionCreators.ts

import * as actionTypes from "./actionTypes"

export function addArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.ADD_ARTICLE,
    article,
  }

  return simulateHttpRequest(action)
}

export function removeArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.REMOVE_ARTICLE,
    article,
  }
  return simulateHttpRequest(action)
}

export function simulateHttpRequest(action: ArticleAction) {
  return (dispatch: DispatchType) => {
    setTimeout(() => {
      dispatch(action)
    }, 500)
  }
}

Neste tutorial, simularei a solicitação HTTP atrasando-a por meio segundo. Se quiser, porém, sinta-se à vontade para usar um servidor real.

Aqui, a função addArticle fará o dispatching de uma ação para adicionar um novo artigo, enquanto o método removeArticle fará o oposto. Portanto, exclua o objeto passado como argumento.

Criando um redutor

Um redutor (em inglês, reducer) é uma função pura que recebe o estado do repositório e uma ação como parâmetro e depois retorna o estado atualizado.

• store/reducer.ts

import * as actionTypes from "./actionTypes"

const initialState: ArticleState = {
  articles: [
    {
      id: 1,
      title: "post 1",
      body:
        "Quisque cursus, metus vitae pharetra Nam libero tempore, cum soluta nobis est eligendi",
    },
    {
      id: 2,
      title: "post 2",
      body:
        "Harum quidem rerum facilis est et expedita distinctio quas molestias excepturi sint",
    },
  ],
}

Como você pode ver aqui, declaramos um estado inicial para que alguns artigos sejam exibidos quando a página for carregada. O objeto de estado precisa corresponder ao tipo ArticleState – caso contrário, o TypeScript gerará um erro.

• store/reducer.ts

const reducer = (
  state: ArticleState = initialState,
  action: ArticleAction
): ArticleState => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newArticle: IArticle = {
        id: Math.random(), // not really unique
        title: action.article.title,
        body: action.article.body,
      }
      return {
        ...state,
        articles: state.articles.concat(newArticle),
      }
    case actionTypes.REMOVE_ARTICLE:
      const updatedArticles: IArticle[] = state.articles.filter(
        article => article.id !== action.article.id
      )
      return {
        ...state,
        articles: updatedArticles,
      }
  }
  return state
}

export default reducer

Em seguida, temos a função reducer, que espera o estado anterior e uma ação para poder atualizar o repositório. Aqui, temos duas ações: uma para adicionar e outra para excluir.

Com isso definido, agora podemos manipular o estado com o redutor. Próximo passo: criar um repositório para o projeto.

Criando um repositório

O repositório em Redux é, na prática, onde vive o estado da sua aplicação.

• index.tsx

import * as React from "react"
import { render } from "react-dom"
import { createStore, applyMiddleware, Store } from "redux"
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import App from "./App"
import reducer from "./store/reducer"

const store: Store<ArticleState, ArticleAction> & {
  dispatch: DispatchType
} = createStore(reducer, applyMiddleware(thunk))

const rootElement = document.getElementById("root")
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Como você pode ver, importamos a função do redutor e a passamos como argumento para o método createStore para criar um repositório do Redux. O middleware redux-thunk precisa ser passado como um segundo parâmetro, bem como o método para poder manipular o código assíncrono.

Em seguida, conectamos o React ao Redux fornecendo o objeto store como props ao componente Provider.

Agora, podemos usar o Redux neste projeto e acessar o repositório. Então, vamos criar os componentes para obter e manipular os dados.

Criando os componentes

• components/AddArticle.tsx

import * as React from "react"

type Props = {
  saveArticle: (article: IArticle | any) => void
}

export const AddArticle: React.FC<Props> = ({ saveArticle }) => {
  const [article, setArticle] = React.useState<IArticle | {}>()

  const handleArticleData = (e: React.FormEvent<HTMLInputElement>) => {
    setArticle({
      ...article,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  const addNewArticle = (e: React.FormEvent) => {
    e.preventDefault()
    saveArticle(article)
  }

  return (
    <form onSubmit={addNewArticle} className="Add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Description"
        onChange={handleArticleData}
      />
      <button disabled={article === undefined ? true : false}>
        Add article
      </button>
    </form>
  )
}

Para adicionar um novo artigo, usaremos este componente de formulário. Ele recebe como parâmetro a função saveArticle, que permite adicionar um novo artigo ao repositório.

O objeto do artigo deve seguir o tipo IArticle para satisfazer os critérios TypeScript.

• components/Article.tsx

import * as React from "react"
import { Dispatch } from "redux"
import { useDispatch } from "react-redux"

type Props = {
  article: IArticle
  removeArticle: (article: IArticle) => void
}

export const Article: React.FC<Props> = ({ article, removeArticle }) => {
  const dispatch: Dispatch<any> = useDispatch()

  const deleteArticle = React.useCallback(
    (article: IArticle) => dispatch(removeArticle(article)),
    [dispatch, removeArticle]
  )

  return (
    <div className="Article">
      <div>
        <h1>{article.title}</h1>
        <p>{article.body}</p>
      </div>
      <button onClick={() => deleteArticle(article)}>Delete</button>
    </div>
  )
}

O componente Article mostra um objeto de artigo.

A função removeArticle deve fazer o dispatching para acessar o repositório e, em seguida, excluir um determinado artigo. Essa é a razão pela qual usamos o hook useDispatch aqui, que permite que o Redux complete a ação de remoção.

Por conseguinte, o uso de useCallback ajuda a evitar renderizações desnecessárias ao memorizar valores como dependências.

Finalmente, temos os componentes que precisamos para adicionar e mostrar os artigos. Agora, vamos adicionar a última peça ao quebra-cabeça, usando tudo isso no arquivo App.tsx.

• App.tsx

import * as React from "react"
import { useSelector, shallowEqual, useDispatch } from "react-redux"
import "./styles.css"

import { Article } from "./components/Article"
import { AddArticle } from "./components/AddArticle"
import { addArticle, removeArticle } from "./store/actionCreators"
import { Dispatch } from "redux"

const App: React.FC = () => {
  const articles: readonly IArticle[] = useSelector(
    (state: ArticleState) => state.articles,
    shallowEqual
  )

  const dispatch: Dispatch<any> = useDispatch()

  const saveArticle = React.useCallback(
    (article: IArticle) => dispatch(addArticle(article)),
    [dispatch]
  )

  return (
    <main>
      <h1>My Articles</h1>
      <AddArticle saveArticle={saveArticle} />
      {articles.map((article: IArticle) => (
        <Article
          key={article.id}
          article={article}
          removeArticle={removeArticle}
        />
      ))}
    </main>
  )
}

export default App

O hook useSelector permite o acesso ao estado do repositório. Aqui, passamos o shallowEqual como um segundo argumento para o método, de modo a dizer ao Redux para usar a igualdade rasa (shallow equality, em inglês) ao verificar as alterações.

Em seguida, contamos com useDispatch para fazer o dispatching de uma ação com o propósito de adicionar artigos no repositório. Por fim, percorremos o array de artigos e passamos cada um deles para o componente Article para que seja mostrado.

Com isso, podemos navegar até a raiz do projeto e executar este comando:

  yarn start

No npm:

  npm start

Se você abrir http://localhost:3000/ no navegador, deverá ver isto:

Ótimo! Nossa aplicação está funcionando. Com isso, terminamos de mostrar o uso do Redux em uma aplicação do React com TypeScript.

Você pode encontrar o projeto completo nesta CodeSandbox.

Você pode encontrar outros conteúdos excelentes como este no blog do autor ou segui-lo no Twitter para ser notificado sobre novos textos produzidos por ele.

Obrigado pela leitura.

Boas notícias – os novos recursos do ES2020 já estão disponíveis! Isso significa que agora temos uma visão completa das mudanças que ocorreram com a chegada do ES2020, a nova e aprimorada especificação do JavaScript. Então, vamos ver quais mudanças foram essas!

Nº 1: BigInt

BigInt, um dos recursos mais esperados no JavaScript, finalmente chegou. Ele permite que os desenvolvedores tenham a representação de um inteiro, escrito em JS, muito maior para processamento de dados à medida que você os manipula.

No momento, o número máximo que você pode armazenar como um inteiro em JavaScript é pow(2, 53) - 1 . Com o BigInt, porém, você consegue muito mais.

Entretanto, você precisa ter um  n anexado no final do número, como pode ver acima. Este n significa que o número é um BigInt e deve ser tratado de modo diferente pela JavaScript Engine (pela engine v8 ou qualquer engine que esteja usando).

Essa melhoria não é compatível com versões anteriores, pois o sistema numérico tradicional é o IEEE754 (que não suporta números desse tamanho).

Nº 2: Importação dinâmica

As importações dinâmicas (em inglês, dynamic imports) em JavaScript oferecem a opção de importar arquivos em JS de modo dinâmico, como módulos em sua aplicação nativa. Ou seja, a mesma coisa que você consegue fazer com o Webpack e o Babel no momento.

Esse recurso ajudará você a enviar código de solicitação sob demanda, mais conhecido como code splitting (divisão de código), sem a sobrecarga do Webpack ou de outros empacotadores de módulos. Se preferir, você também pode carregar código de modo condicional em um bloco if-else.

O interessante é que você está realmente importando o módulo e, portanto, evitando de poluir o namespace global.

Nº 3: Coalescência nula

A coalescência nula (em inglês, nullish coalescing) adiciona a capacidade de verificar verdadeiramente valores nullish em vez de valores falsey. Nesse ponto, você pode se perguntar: qual é a diferença entre valores nullish e falsey?

Em JavaScript, muitos valores são falsey, como strings vazias, o número 0, undefined, null, false, NaN e assim por diante.

No entanto, muitas vezes, você pode querer verificar se uma variável é nula – isto é, se é undefined ou null, como quando não há problema em uma variável ter uma string vazia ou até mesmo um valor falso.

Nesse caso, você usará o novo operador de "coalescência nula", ??

Você pode ver claramente como o operador OR sempre retorna um valor verdadeiro, enquanto o operador nulo retorna um valor não nulo.

Nº 4: Encadeamento opcional

A sintaxe do encadeamento opcional (do inglês, optional chaining) permite que você acesse propriedades de objetos profundamente aninhados sem se preocupar se a propriedade existe ou não. Se existir, ótimo! Caso contrário, será retornado um undefined.

Isso não funciona apenas em propriedades de objetos, mas também em chamadas de funções e arrays. Muito conveniente! Aqui está um exemplo:

Nº 5: Promise.allSettled

O método Promise.allSettled aceita um array de Promises e só o resolve quando todas as Promises são resolvidas ou rejeitadas.

Isso não estava disponível de modo nativo antes, embora algumas implementações próximas, como race e all, já estivessem disponíveis.

Agora, é possível "apenas executar todas as Promises - sem se importar com os resultados" nativamente para o JavaScript.

Nº 6: String#matchAll

matchAll é um novo método adicionado ao protótipo String, que está relacionado a Expressões Regulares. Ele retorna um iterador, que, por sua vez, retorna todos os grupos correspondentes, um após o outro. Vejamos um exemplo simples:

Nº 7: globalThis

Se você escrevesse algum código JS multiplataforma que pudesse ser executado no Node, no ambiente do navegador e também dentro de web-workers, você teria dificuldade em obter o objeto global.

Isso ocorre porque o ambiente global é window para os navegadores, global para Node e self para os web-workers. Se houver mais tempos de execução, o objeto global também será diferente para eles.

Então, você precisaria ter sua própria implementação de detecção de tempo de execução e então usar o global correto – ao menos, até agora.

O ES2020 nos traz globalThis, que sempre se refere ao objeto global, não importando onde você esteja executando seu código:

Nº 8: Módulo Namespace Exports

Nos módulos do JavaScript, já era possível utilizar a seguinte sintaxe:

import * as utils from './utils.mjs'

No entanto, nenhuma sintaxe de export simétrica existia, até agora:

export * as utils from './utils.mjs'

A linha acima equivale a:

import * as utils from './utils.mjs'
export { utils }

Nº 9: Ordem de entrada bem definida

A especificação ECMA não definiu em qual ordem for (x in y)  deve ser executado. Embora os navegadores tenham implementado uma ordem consistente por conta própria até então, isso foi oficialmente padronizado no ES2020.

Nº 10: import.meta

O objeto import.meta foi criado pela implementação do ECMAScript com um protótipo null.

Considere um módulo, module.js:

<script type="module" src="module.js"></script>

Você pode acessar as metainformações sobre o módulo usando o objeto import.meta:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Ele retorna um objeto com uma propriedade url indicando o URL de base do módulo. Este será o URL a partir do qual o script foi obtido (para scripts externos) ou o URL de base do documento que o contém (para scripts incorporados).

Conclusão

Adoro a consistência e a velocidade na qual a comunidade do JavaScript evoluiu e está evoluindo. É realmente incrível e maravilhoso ver como o JavaScript veio de uma linguagem que era bastante criticada, há 10 anos, para uma das linguagens mais fortes, flexíveis e versáteis atualmente.

Você deseja aprender JavaScript e outras linguagens de programação de uma maneira completamente nova? Acesse a nova plataforma para desenvolvedores na qual o autor está trabalhando atualmente e teste-a.

Qual é o seu recurso favorito do ES2020? Informe o autor por meio de mensagem ou conecte-se com ele pelo Twitter ou pelo Instagram!

Este artigo é baseado em um vídeo do autor sobre o mesmo tópico. Seria muito importante para ele que você apoiasse esse material, curtindo-o e compartilhando-o.