Image for post
Image for post

WebSockets são uma ferramenta para comunicação bidirecional entre um cliente de navegador e um servidor. Em particular, os WebSockets permitem que o servidor envie dados para o cliente. Isso é diferente de sua solicitação HTTP padrão usando fetch() ou Axios porque o servidor não pode se comunicar com o cliente a menos que o cliente envie uma solicitação primeiro.

WebSockets são mais flexíveis, mas também são mais difíceis de implementar e escalar. Os WebSockets sobrecarregam ainda mais o desenvolvedor, portanto, use-os com moderação e apenas quando for absolutamente necessário. …


Image for post
Image for post

As funções generator assíncronas são um novo recurso no ES2018. Node.js adicionou suporte para funções generator assíncrona no Node.js 10. As funções generator assíncrona podem parecer um recurso de nicho bonito, mas apresentam uma ótima oportunidade para estruturar websockets em Node.js. Neste artigo, explicarei como uma estrutura de websocket Node.js pode usar funções generator assíncronas.

Classificando frameworks HTTP

Primeiro, pense em frameworks de servidor HTTP, como Express ou Hapi . Em geral, a maioria das estruturas de servidor HTTP se enquadra em uma das 3 classes:

  1. Resposta explícita — Para enviar uma resposta HTTP no Express, você deve chamar res.end(), res.json() ou alguma outra função no objeto res. …


Image for post
Image for post

O useEffect é um poderoso hook para realizar efeitos em suas aplicações React usando a sintaxe de componentes em funções.

Ao retornar uma função dentro do useEffect estamos entrando na faze de limpeza do efeito.

Como mostra a documentação, em componentes de classe, usaríamos os ciclos de vida componentDidMount e componentWillUnmount:

class FriendStatus extends React.Component {
constructor(props) { ... }
componentDidMount() { // [ A ]
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
componentWillUnmount() { // [ B ]
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
handleStatusChange(status) { ... } render() { ... }
}

O exemplo acima pode ser resumido em:

  • [ A ]: Ao montar o componente, criamos uma inscrição/escuta na API ChatAPI.subscribeToFriendStatus e iremos executar a função handleStatusChange para cada…


Image for post
Image for post

A proposta do TC39 de iteradores assíncronos que trouxe for/await/of para o JavaScript também introduziu o conceito de uma função generator assíncrona . Agora, o JavaScript tem 6 tipos distintos de funções:

  • Funções normais function() {}
  • Funções de seta () => {}
  • Funções assíncronas async function() {}
  • Funções de seta assíncrona async () => {}
  • Funções generator function*() {}
  • Funções generator assíncrona async function*() {}

As funções generator assíncronas são especiais porque você pode usar ambos await e yield em uma função generator assíncrona. As funções generator assíncrona diferem das funções assíncrona e funções generator porque não retornam uma promessa ou um iterador, mas sim um iterador assíncrono. …


Image for post
Image for post

Créditos da Imagem

O Array.map () é uma função muito útil, mas, infelizmente, só funciona com funções síncronas. Uma solução simples para executar funções async é usar o Promose.all() ou seu irmão mais tolerante Promise.allSettled():

// Falha no momento que UMA função do .map falhar
const results = await Promise.all(array.map(asynMapFunction))
// Continua executando mesmo se uma função falhar
const results = await Promise.allSettled(array.map(asynMapFunction))

Funciona assim: o .map()irá converter cada item do array em uma Promise, então teremos um array de Promises para resolver. Há duas maneiras de fazer isso:

  • Promise.all(): joga um erro se a função no .map …


Tenho lutado para encontrar referências sobre isso online, mas ouvi o nome ser usado várias vezes este ano ao descrever a abordagem descrita aqui.

A ideia geral de uma arquitetura em “ilhas” é aparentemente simples: renderizar páginas HTML no servidor e injetar espaços reservados ou slots em regiões altamente dinâmicas. Esses espaços reservados / slots contêm a saída HTML renderizada pelo servidor de seu widget correspondente. Eles denotam regiões que podem então ser “hidratadas” no cliente em pequenos widgets independentes, reutilizando seu HTML inicial renderizado pelo servidor.

Você pode pensar nisso como um documento HTML estático que contém vários aplicativos incorporados…


Image for post
Image for post

Trabalhar com datas em JavaScript é uma dor. Os métodos de datas nativo costumam ser prolixos e ocasionalmente inconsistentes — algo que também os torna sujeitos a erros. Mas boas notícias estão à mão. Existem várias bibliotecas para lidar com a manipulação de datas e removem essa dor. Essas bibliotecas são para datas em JavaScript, o que jQuery é para a API DOM nativa.

Aqui está um exemplo. Esta é a resposta aceita para uma pergunta do Stack Overflow perguntando como obter o último dia do mês:

var t = new Date();
alert( new Date(t.getFullYear(), t.getMonth() …


Image for post
Image for post
https://graphql-mesh.com/

GraphQL foi originalmente criado para fornecer facilmente uma API poderosa em cima do código existente. A abordagem atual que as pessoas estão usando ao migrar de API REST para o GraphQL é criar um novo esquema e usar o GraphQL como um proxy. Isso traz muitos benefícios, porque nos dá a oportunidade de repensar a API e melhorá-la, sem alterar os serviços por baixo dela.

Vamos primeiro começar observando essa abordagem:

Implementando um back-end de proxy GraphQL

Digamos que você tenha um endereço /user que faz todas as operações CRUD para a entidade User, com diferentes métodos HTTP, e você precisaria de um esquema GraphQL como…


Image for post
Image for post

Créditos da Imagem por Kai Pilger

Créditos

Neste guia, você aprenderá como implementar a autenticação em um aplicativo Next.js. Abordarei autenticação de cliente, páginas autenticadas renderizadas no servidor, rotas de API autenticadas, rotas protegidas e redirecionamentos.

O serviço de autenticação será implementado com AWS Amplify, mas as ideias e estratégias abordadas aqui funcionarão para qualquer serviço de autenticação como Auth0 / Okta ou mesmo uma implementação de back-end personalizada, desde que forneça uma maneira de gerenciar sessões no cliente e servidor.

O código para este projeto está localizado aqui . …


Image for post
Image for post

Eu amo modelos mentais. Eles são cruciais para a compreensão de sistemas complexos, nos permitindo compreender e resolver problemas complexos de forma intuitiva.

Este é o segundo de uma série de três artigos sobre os modelos mentais do React. Vou mostrar os modelos mentais exatos que uso com complexos componentes React, construindo-os do zero e usando várias explicações visuais.

Recomendo que você leia a parte 1 primeiro, pois os modelos mentais neste artigo se baseiam nos que expliquei lá. Se você quiser uma atualização, aqui está o modelo mental completo para a parte 1

Mesmo que você já trabalhe com o React há anos ou esteja apenas começando, ter um modelo mental útil é, na minha opinião, é a maneira mais rápida de se sentir confiante trabalhando com ele.

About

Eduardo Rabelo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store