O que é SPA?

SPA é a sigla para Single Page Application (aplicação de uma página). Este tipo de aplicação tem por característica possuir um carregamento um pouco mais demorado ao ser aberto pois ela irá trazer todos os assets (arquivos, imagens, etc..) para a máquina do usuário, mas após isso, se o sistema foi bem feito a navegação deverá ser muito rápida e fluida.

As SPA se tornaram populares graças as implementações de performance que o V8 engine da Google proporcionou ao JavaScript. Essas melhoras tornaram as páginas mais rápidas permitiram proporcionar uma agilidade antes vista apenas em aplicativos desktops. Uma das aplicações mais famosas que começaram a utilizar este conceito foi o Gmail, o qual era possível navegar entre as opções sem que a página fosse recarregada.

Todos os processos são executados no lado do cliente e a comunicação com o servidor só ocorrerá com chamadas Ajax quando a aplicação precisar enviar ou buscar novos dados. Para este tipo de aplicação não interessa qual a tecnologia, quantas aplicações ou onde o sistema está hospedado, ela precisa apenas saber os endpoints que serão consumidos. Uma desvantagem de tudo ocorrer no front é que algumas regras podem ficar fragmentadas entre o front-end e back-end.

 

Como é de se esperar, em aplicações SPA todo o código fonte fica no browser e para evitar que outros copiem o código, existem ferramentas que ajudam a comprimir e alterar o código de forma que ele seja praticamente impossível de ler.

Normalmente, SPAs possuem um componente chamado Router que gerencia a navegação do usuário mesmo que ele atualize a tela. SPAs trabalham muito com armazenamento local no navegador, de forma que após um refresh seja possível buscar no armazenamento as informações e remontar o estado anterior da tela.

Com o passar do tempo várias técnicas e ferramentas para dar suporte a criação de SPAs foram sendo criadas, algumas com a ideia de ser uma solução completa com tudo que o desenvolvedor precisaria para desenvolver uma aplicação, e outras que procuravam solucionar alguns problemas mais pontualmente.

Continue lendo “O que é SPA?”

O custo do JavaScript 2019

Se você tem interesse em saber mais sobre os impactos de performance do JavaScript nos navegadores, esse artigo é para você.

Este post é uma adaptação do meu entendimento do vídeo e artigo sobre o custo do JavaScript que foi apresentado por Addy Osmani (Link no final do post) que fala sobre as mudanças que ele observou no custo do JavaScript entre o ano 2018 e 2019.

De acordo com ele, uma das grandes mudanças no custo do JavaScript nos últimos anos se deve nas melhorias como os navegadores conseguem processar scripts. Em 2019 o custo foco está no tempo de download e execução dos scripts.

O que isso quer dizer para os desenvolvedores?

Como a compilação e analise de dados não é mais tão lenta com antes, atualmente é importante considerar 3 coisas nos bundles de JavaScript

  1. Melhorar o tempo de download: Evite ter bundles maiores que 100kb (50kb para dispositivos móveis) pois eles consomem muito a rede e memória do dispositivo. Aproveite as funcionalidades do HTTTP2 para reduzir o overhead de chamadas adicionais.
  2. Melhorar o tempo de execução: Evite tarefas que consomem muito da thread principal. A execução do script após o download é um dos custos dominantes.
  3. Evite scripts inline muito grandes: Uma boa regra genérica e evitar scripts inline que sejam superiores a 1kb pois eles são processados pela thread principal e podem atrasar interatividade da página.

Custo do JavaScript para smartphones.


Tarefas longas monopolizam a thread principal. Tente quebra-las.

Por que a o download e a execução do código são importantes?

Apesar de estarmos começando no mundo do 5G e existirem smartphones com alta capacidade de processamento, a média da capacidade de download (mesmo em países de primeiro mundo) ainda se compara ao 3G. Junto com o fato que muitos destes dispositivos não terem o poder de processamento necessário para rodar eficiente alguns aplicativos, temos ai a receita para uma péssima experiencia para o usuário.

O que o V8 fez para melhorar o tempo de processamento?

O V8 reduziu a quantidade de trabalhos de análise e compilação na thread principal em uma média de 40% (por exemplo, 46% no Facebook, 62% no Pinterest) com a maior melhoria sendo 81% (YouTube), analisando e compilando um trabalhador fio. Isso é um acréscimo ao parsing / compilação de fluxo de threads fora da linha principal existente.

Conclusões

O download e o tempo de execução são os principais bottlenecks para o carregamento de scripts em 2019. Divida pacotes de forma que o usuário só baixe aquilo que precisa quando for necessário. No celular, você deve enviar muito menos script devido à rede, ao consumo de memória e ao tempo de execução para CPUs serem mais lentas.

Fonte:

Blog

Youtube

NaN e typeof.

Uma análise da propriedade NaN e por que ela é considerada um tipo de número.

typeof NaN
//'number'

Primeiramente, NaN é uma propriedado do objeto global, e não uma palavra-chave (diferente de true, false, null, entre outros). O valor de NaN é o mesmo que o valor de Number.NaN:

NaN; // NaN
Number.NaN; // NaN

Existem várias formas em que o NaN pode acontecer:

  • Divisão de zero por zero;
  • Dividindo um infinito por um infinito;
  • Multiplicação de um infinito por um zero;
  • Qualquer operação na qual NaN é um operando;
  • Convertendo uma String não numérica ou indefinida em um número.

Por que o tipo NaN retorna “number”?

typeof NaN; // "number"

O padrão ECMAScript indica que os números devem ser dados de ponto flutuante IEEE-754. Isso inclui Infinity, -Infinity e também, NaN. Por definição, NaN é o valor de retorno de operações que possuem um resultado numérico indefinido. Daí porque, em JavaScript, além de fazer parte do objeto global, também faz parte do objeto Number: Number.NaN.

Ainda é um tipo de dados numérico, mas é indefinido como um número real. O NaN também representa qualquer número fora do domínio de definição do ECMAScript.

A aritmética computacional é limitada:

Considere a seguinte operação:

(3.2317006071311 * 10e616) / (3.2317006071311 * 10e616); // NaN
Como a Wikipedia declara:

“A aritmética computacional não pode operar diretamente em números reais, mas apenas em um subconjunto finito de números racionais, limitado pelo número de bits usados para armazená-los.”

Na aritmética ordinária, 3,2317006071311 * 10616 é um número real finito, mas, pelos padrões ECMAScript, é simplesmente muito grande (ou seja, consideravelmente maior que Number.MAX_VALUE) e, portanto, é representado como Infinity.

A tentativa de dividir Infinity por Infinity produzirá NaN. Na aritmética comum, ambos são operandos finitos, a operação claramente é igual a 1. Neste caso, o NaN está no lugar de um numero real que não pôde ser computado devido ao tamanho dos operandos. Pareceria contra-intuitivo se os tipos NaN retornassem algo diferente de “número”. Afinal, no exemplo dado, NaN simplesmente representa um valor que não pôde ser determinado pela aritmética computacional.

NaN é desordenado:

De acordo com o padrão de ponto flutuante IEEE 754, a comparação com NaN sempre retorna um resultado não ordenado. Ou seja, NaN não é igual a, maior que ou menor que qualquer coisa, incluindo ele mesmo:

NaN < 1;    // false
NaN > 1;    // false
NaN == NaN; // false
// Mas ainda podemos verificar por NaN:
isNaN(NaN); // true

É por isso que você não pode determinar se um dado valor é NaN comparando-o com NaN e, em vez disso, deve usar a função isNaN().

Não surpreende, portanto, que a implementação nativa da função isNaN() possa ser simplesmente substituída por:

// Implementacao Nativa
function isNaN(x) {
  x = Number(x);
  // se x é NaN, NaN! = NaN é verdadeiro, senão é falso
  return x != x;
}

A implementação nativa de isNaN() retorna true mesmo se o valor for indefinido ou se o valor não puder ser coagido em um tipo de dados de número primitivo. Existem algumas bibliotecas que apresentam as suas próprias implementações. Por exemplo, a do Underscore é a seguinte:

_.isNaN = function(obj) {
  // `NaN` é o único valor para o qual` === `não é reflexivo.
  return obj !== obj;
};

Mas, seu comportamento não é o mesmo que a função isNaN() nativa:

let x;            // undefined
isNaN(x);         // true
isNaN(undefined); // true
isNaN("a");       // true
Comparado ao Underscore:
let x;              // undefined
_.isNaN(x);         // false
_.isNaN(undefined); // false
_.isNaN("a");       // false

Booleanos não são NaNs:

Considerando o código a seguir:

isNaN(true);  // false
isNaN(false); // false

Isso ocorre porque os valores booleanos são considerados e implementados como valores numéricos com um único dígito binário (ou seja, bit), portanto, eles são coagidos em suas respectivas representações de bits:

Number(true);  // 1
Number(false); // 0

Gostou deste artigo? Comente abaixo!

Diferenças entre innerHTML, innerText e textContent.

Você conhece a diferença entre innerText, textContent e innerHTML?

São utilizados na manipulação do DOM (Document Object Model). Cada uma destas propriedades retorna algo, e descobriremos o que elas retornam neste artigo.

Diferenças:

Utilizando o exemplo a seguir, criaremos as propriedades:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemplo innerHTML, innerText e textContent</title>
</head>
<body>
    <!-- Criando um parágrafo com formatação CSS inline nos textos -->
    <p id="textoHtml">
        <span style="display: none">Hakuna</span><strong>Matata</strong>
        <span style="visibility: hidden;">Mundo</span>
        <span>JS</span>
    </p>

    <script src="main.js"></script>
</body>
</html>

innerHTML:

Utilizado na manipulação do DOM, o innerHTML retorna todo o texto e o html que existem no elemento. Ele retorna todo o html existente, retornando também às tags, e não somente o texto.

// Criando uma variável que irá buscar o elemento HTML pelo Id
let exemploInner = document.getElementById("textoHtml");
        
console.log("------ USANDO innerHTML ------");
console.log(exemploInner.innerHTML);

Importante:

O innerHTML pode ser usado para inserção de tags, textos e imagens em uma página web, gerando um risco de segurança. Parecido com um cross-site scripting, mas inofensivo, pois o HTML5 especifica que uma tag <script> inserida via innerHTML em uma página web não deve ser executada. Entretanto, existem formas de executar JavaScript sem usar <script>, portanto, ainda há um risco de segurança ao utilizar o innerHTML. Por esta razão, recomenda-se não utilizar o innerHTML para inserção de texto puro.

innerText:

Já o innerText retorna apenas o texto. Ele ignora todas as tags HTML que estão dentro do elemento, mas ainda assim, “entende” o css do elemento, retornando apenas textos visíveis. Utiliza-se quando queremos buscar apenas o texto visível disponível no elemento.

console.log("------ USANDO innerText ------");
console.log(exemploInner.innerText);

textContent:

O textContent funciona de forma muito semelhante ao innerText, porém, retornando todo o conteúdo de texto, incluindo o texto oculto pelo css, bem como as quebras de linha (\n). Utilizamos o textContent quando queremos buscar todo o texto disponível no elemento.

console.log("------ USANDO textContent ------");
console.log(exemploInner.textContent);

Gostou deste artigo? Compartilhe com seus amigos e comente abaixo!

Aplicações nativas em JavaScript com Capacitor

Capacitor, o novo framework da Ionic.

Você sabe o que é o Ionic? É uma ferramenta para criar aplicativos mobile, utilizando HTML, CSS e JavaScript.

Capacitor é uma cross-plataform API que facilita chamar SDKs nativos a partir de código da Web e fornece suporte de progressive web apps. Criada pela Ionic, é uma alternativa ao Apache Cordova, que foi lançado em 2009. O Capacitor foi criado devido ao sistema de plugins desatualizados do Apache Cordova e pela restrição ao gerenciamento de plataformas nativas.

Ele foi projetado pela equipe do Ionic Framework como uma alternativa ao Cordova. O Capacitor pode ser usado sem o Ionic, mas em breve se tornará uma parte essencial do mesmo.

Continue lendo “Aplicações nativas em JavaScript com Capacitor”

Recursão e a Pilha (Stack)

Se você não é novato em programação, e até aqueles que já fizeram algumas cadeiras/módulos de programação, provavelmente já ouviu os termos recursão e pilha.

Recursão é um método de programação onde o código executa uma função que chama a si mesma um número X de vezes para resolver um problema que apresenta um padrão repetitivo. Ela tem uma funcionalidade muito similar aos loops, mas sem explicitamente mostrar que está fazendo o mesmo trabalho repetidas vezes.

Quais as vantagens de usar recursão?

Essa é uma duvida bem comum, devo iterar? ou usar a recursão? Nos seguintes casos, seria melhor usar a recursão:

  • Reduzir o código e deixar torna-lo mais simples de ler: Para quem não está acostumado isso parece estranho, mas em grande maioria dos casos é possível escrever a mesma lógica com um número menor de linhas, tornando-o mais fácil de entender e debugar.
  • Quando você está trabalhando com uma linguagem funcional: Linguagens funcionais lidam com recursão muito melhor que imperativas. Já as linguagens imperativas lidam com iteração melhor, então leve isso em consideração quando estiver desenvolvendo seu programa ou script
  • A recursão é melhor na travessia de árvores. Este é um pouco mais avançado. Uma versão extremamente simplificada do que isso significa é a seguinte: Uma árvore é uma coleção de objetos que estão ligados um ao outro (imagine folhas em uma árvore conectada por ramos que por sua vez estão conectados a outros ramos até as raízes). Uma das maneiras mais eficientes de percorrer essas árvores ao procurar por uma folha (ou nó) específica é seguir, de maneira recursiva, uma única ramificação até o final dessa ramificação até encontrar o valor que você está procurando.

Exemplos de Recursão

Digamos que queremos criar algo simples, como uma função que faz que calcula a potencia N de um valor X (exemplo 2^3 = 8, X^N = 8).

let valor = potencia(2, 2);
//Exibe o valor 4
console.log(valor);

valor = potencia (2, 3);
//Exibe o valor 8
console.log(valor);

valor = potencia (2, 4);
//Exibe o valor 16
console.log(valor);

Importante: Este é apenas um exemplo, utilizem o objeto Math do JavaScript para esse tipo de calculo.

Poderíamos faze-lo com o Loop For

function potencia(x, n) {
  let result = 1;

  // Multiplica o resultado X N vezes para obter a resposta
  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

Console.log(potencia(2, 3) ); // 8

Agora utilizando a recursão

function potencia(x, n) {
  if (n == 1) {
    // Quando n finalmente é 1, não executa mais a recursão para finalizar o calculo
    return x;
  } else {
    //obtém a resposta do próximo pedaço do calculo chamando a função novamente
    let recursao = potencia(x, n - 1)

    return x * recursao;
  }
}

console.log(potencia(2, 3) ); // 8

Então, o que está acontecendo exatamente?

No caso da recursão deste algoritmo, quebramos a lógica em pequenos passos que fazem a multiplicação de X pelo resultado anterior até chegar em um ponto onde não é feita mais a chamada recursiva. Quando isso ocorre, as funções começam a ser retornadas e resolvidas.

No caso do exemplo acima, se fizéssemos 2^3, a ultima recursão ser no n==1 que retornaria 2 para a função anterior. Ela multiplicaria 2 * 2, resultando em quatro e retornaria para a primeira chamada que resultaria em 8 e terminaria a função.

A recursão normalmente possui menos linhas de código

A recursão normalmente é menor que a iteração. Abaixo está o mesmo exemplo que fizemos acima, mas usando o mínimo de comandos, retornos e de linhas possíveis.

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

Pilha

Uma pilha é uma região na memória, que opera no modo First-In-Last-Out, exatamente como a pilha que você deve ter estudado em estrutura de dados. Para cada nova ação que precisa ser executada, esta é “empilhada” e terá que ser processada antes da ação anterior voltar a ser trabalhada.

Note que as pilhas não tem tamanho infinito e quando você cria uma função recursiva muito grande ou mau feita, causará o famoso erro que chamamos de stack-overflow

Para ter uma ideia, execute o seguinte código

let i=0;
function estourarPilha() {
    console.log(i++);
    estourarPilha();
}
estourarPilha();

Para cada navegador os valores serão diferentes, mas eventualmente eles irão parar de funcionar pois você conseguiu quebra-los. Mas fique tranquilo, basta reinicia-lo que tudo voltará ao normal.

Conclusão

Esta foi uma introdução bem básica sobre recursão e a pilha no JavaScript, espero que você tenha aprendido com o exemplo e caso tenha alguma duvida ou sugestão por favor deixe seu comentário abaixo.

J2CL: Um transpilador Java para JavaScript

Criado, desenvolvido pela Google, este compilador open source realiza source-to-source converte Java para JavaScript. Os desenvolvedores do J2CL dizem que o compilador permite um uso fluido do Java nas suas aplicações JavaScript.

O J2CL tenta resolver um problema diferente que frameworks similares como o GWT e não foi jeito para substituir estes framworks. Ao invés disto, o J2CL se preocupa interoperabilidade e a reutilização de código entre as plataformas. Você pode usar o J2CL para fazer um pedaço de código acessível no JavaScript ou converter uma aplicação inteira com ele.

A ferramenta foi desenvolvida com flexibilidade em mente e pode ser aplicada de diversas formas diferentes. Uma forma que você pode utiliza-la seria para implementar um algoritmo complexo em múltiplas tecnologias que atuam em plataformas diferentes.

Segundo Thomas Deegan (ex-contribuidor do projeto), um exemplo deste tipo de implementação ocorreu com a migração do Google Docs que precisava ser reescrito para se tornar uma aplicação web. Neste caso, o j2CL transpilou todas a lógica de renderização e manipulação dos documentos para JavaScript.

Mas a sua utilidade não para ai, você poderia aproveita-lo para converter para o back-end JavaScript (Node.js) criando bibliotecas que originalmente foram desenvolvidas em Java.

Infelizmente, nem todas as APIs Java, como a Java Reflection, tem suporte. Por default, o Código transpilado não é publico e diversos anotações Java (Java Annotations) fo JsInterop podem ser utilizadas para identificar quais classes, métodos, intancias de variáveis, etc… podem ser expostos.

O projeto possui um exemplo simples de “Hello World” para demonstrar sua utilização. Veja abaixo um exemplo similar utilizando uma anotação Java como ela pode ser utilizada no JavaScript.

package com.acme

import jsinterop.annotations.JsType;

@JsType
public class HelloWorld {
    public static String getHelloWorld() {
        return "Hello from Java!";
    }
}

Pode ser utilizado da seguinte forma:

const HelloWorld = goog.require('com.acme');
console.log(HelloWorld.getHelloWorld());

De acordo com os desenvolvedores, o J2CL está em faze de produção e tem servido como a tecnologia utilizada para em diversos apps importantes do GSuites como Gmail, Inbox, Docs, Slides e Calendário.

Para mais informações, visite o guia básico do projeto no Github.

 

Qual a diferença entre JSON e um objeto JavaScript?

Neste post mostrarei brevemente o que é um JSON e o que é um objeto literal JavaScript e qual a diferença entre eles.

JSON

JSON é a abreviação de JavaScript Object Notation e é uma maneira de armazenar e comunicar informações de maneira organizada e fácil de acessar. Em resumo, o JSON nos dá uma coleção de dados legíveis por humanos que podemos acessar de uma maneira realmente lógica.

Atualmente o JSON tem sido muito utilizado para facilitar a comunicação e passagem de dados entre sistemas construídos em linguagens de programação diferentes. Em especial, muitas APIs usam o JSON como seu formato de recebimento e retorno de dados

Exemplo JSON

{
    "nome":"Paulo",
    "idade": 34
}

 

Objeto JavaScript

Um objeto JavaScript é uma representação abstrata de um modelo de dados composto, assim como nas outras linguagens de programação.

Exemplo:

let objeto = { 
    nome:"Paulo", 
    idade: 34 
}

Devido a semelhança entre o JSON e o Objeto Literal, quando o JavaScript lê o JSON ele o reconhece com se fosse um objeto literal. Isso facilita a programação e recebimento de dados, mas acaba confundindo alguns iniciantes.

 

Onde que o JavaScript e o JSON diferem?

Mesmo assim, existem algumas diferenças entre ambos que importante conhecer. Veja abaixo:

Criação de atributos

Como você deve ter notado no exemplo, no JSON é necessário criar as propriedades usando aspas duplas, enquanto no objeto apenas o nome é necessário.

//Obj Literal
let objeto = {
    umaProp: "Lorem Ipsum"
}

//JSON
let objeto2 = {
    "umaProp": "Lorem Ipsum"
}

Uso de aspas

Enquanto o objeto permite o uso de aspas simples ou dupla para expressar strings, o JSON já funciona de maneira mais uniforme e permite apenas o uso de aspas duplas.

// Os seguintes exemplos não são JSONs válidos
{
    'prop': "propriedade"
}

{
    "prop": 'propriedade'
}

Importante: Note que se você estiver utilizando o JavaScript, não ocorrerá erro pois ele interpretará seu objeto como sendo literal.

Tipos de Dados:

JSON: O Json pode armazenar os seguintes valores

  • String
  • Número
  • Objeto JSON
  • Vetor
  • Booleano
  • Null

Objeto: Além dos valores acima, o objeto possuí alguns valores que não são válidos no JSON

  • Objeto Literal
  • Data (no formato Date)
  • Função
  • Undefined

É isso aí, espero que esta explicação rápida ajude mais alguém. Se você conhece outras diferenças, deixe aqui nos comentários que atualizarei a postagem conforme aparecerem contribuições.

Laço FOR em JavaScript

O laço FOR é uma estrutura de repetição muito utilizada em JavaScript. Este laço de repetição utiliza uma variável, que controlará a contagem do loop, podendo ser utilizada na forma de incremento ou decremento. É um comando que se faz muito útil quando se sabe de antemão quantas vezes a repetição será executada.

No JavaScript, o laço de repetição FOR poderá ser utilizado de quatro formas diferentes, sendo a mais usual:

PRIMEIRA FORMA (FOR)

Laço for com INCREMENTO:
// O laço de repetição for utiliza uma variável de varredura
// e irá retornar os valores do vetor, de forma crescente ou decrescente
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index++) {
    console.log(vetor[index]);
}

Sendo nesta forma, normalmente serão passados como parâmetros uma variável auxiliar, que será utilizada para a varredura no laço, uma condição de saída/pause no laço e um incremento, que realizará uma varredura de forma crescente.

Laço for com DECREMENTO:
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index--) {
    console.log(array[index]);
}

Nesta forma, o laço executará o loop de forma decrescente.


SEGUNDA FORMA (FOR…OF)

// O laço de repetição for...of percorre de forma iterativa e crescente
// e retorna os valores do vetor
let vetor=[11, 22, 33, 44];
for (const item of vetor) {
    console.log(item);
}

Nesta forma, chamada for…of, o laço percorre objetos de forma iterativa e crescente, chamando a função personalizada com instruções a serem executadas para o valor de cada objeto.


TERCEIRA FORMA (FOR…IN)

// O laço de repetição for...in percorre de forma iterativa e crescente
// e retornará quais são as posições em que os valores se encontram no vetor
let vetor=[11, 22, 33, 44];
for (const item in vetor) {
    console.log(item);
}

Na chamada for…in, o laço de repetição irá iterar sobre as propriedades do objeto de modo arbitrário. O loop irá iterar sobre todas as propriedades do próprio objeto, enumerando-as. Em suma, este laço enumerará quantas posições estão dispostas no vetor, retornando as suas posições.


QUARTA FORMA (FOREACH)

// O laço forEach usará de forma iterativa uma função
// para retornar os valores do vetor.
vetor.forEach(item => {
    console.log(item);
});

O laço forEach funciona de maneira semelhante ao laço forof, pois, de maneira iterativa e crescente, percorre os itens do laço e retorna os valores do vetor.

Nest.js 6 melhora a integração GraphQL

Nest.js anunciou recentemente o lançamento da versão 6 de sua estrutura TypeScript. O Nest.js 6 melhora o suporte ao GraphQL e também separa as partes específicas da plataforma de sua estrutura para suportar aplicativos além da arquitetura tradicional baseada em Express e Node.js.

Kamil Mysliwiec, criador do Nest.js e co-fundador do Trilon.io, explica as mudanças no Nest.js 6 com o GraphQL:

Um dos problemas mais comuns com aplicativos GraphQL é um tipo de redundância. Para resolver esse problema, na versão anterior do Nest, adicionamos um compilador que permite compilar definições escritas em SDL para as interfaces (ou classes) TypeScript. Com o 6.0.0, o Nest foi integrado com um pacote amazingtype-graphqlque permite gerar seus arquivos GraphQL usando apenas decoradores TypeScript! Agora você pode escolher qual abordagem é mais adequada às suas necessidades – ambas estão disponíveis no pacote @nestjs/graphql

Outra mudança significativa com a versão 6 é a mudança da Nest.js para além de seu foco principal como uma estrutura do lado do servidor para ser uma estrutura mais flexível e de propósito geral. Mysliwiec explica:

A independência de plataforma possibilita a criação de partes lógicas reutilizáveis ​​que os desenvolvedores podem usar em diferentes tipos de aplicativos. Com o Nest, você pode criar facilmente um aplicativo da Web, CLI, uma fila de trabalhos ou qualquer outra coisa em que possa pensar!

Os planos atuais para a próxima grande parte do Nest.js incluem reescrever o módulo Nest.js Swagger para alavancar o TypeScript AST para reduzir o suporte ao decorador e adicionar suporte a genéricos, interfaces, dependências circulares e geração de esquemas de resposta automática. A equipe Nest.js também planeja melhorar o fluxo de trabalho do DevOps para suporte e implantação em ambientes sem servidor.

Para aplicativos do lado do servidor, o Nest.js aproveita as estruturas do HTTP Server, como Express e Fastify, e fornece fácil integração com vários módulos de terceiros, como o TypeORM. Nest.js fornece uma ampla variedade de padrões e decoradores de arquitetura, incluindo controladores, roteamento, provedores, middleware, guardas e interceptadores. O Nest.js fornece uma inversão da arquitetura do contêiner do controlador (IoC).

Os usuários do Nest.js que desejam migrar para a versão 6 devem seguir o guia de migração do Nest.js(Inglês). Desenvolvedores novatos no Nest.js devem seguir o guia de primeiros passos Nest.js.

Nest.js é um software de código aberto disponível sob a licença MIT. Contribuições e feedback são incentivados através do projeto Nest.js do GitHub e devem seguir as diretrizes de contribuição Nest.js.