Melhorias de performance recentes no ecossistema JavaScript
Tags: javascript, frontend, node, braziliandevs
Published: 2023-04-24 19:39:04

Houve muitas melhorias recentes nas principais ferramentas JS.
Vamos focar aqui apenas nas voltadas a performance nas versões recentes do [Angular 16](#angular-16), [Next.js 13](#next-13) e [Node.js 20](#node-20).

## Angular 16

**Servidor de desenvolvimento baseado no vite**

Com a performance muito superior ao Webpack, a ferramenta aproveita duas melhorias feitas recentemente no ecossistema JavaScript: a disponibilidade de ES Modules no navegador e as ferramentas de empacotamento de compilação para nativo, como esbuild.
Teremos uma execução e atualização mais rápida no ng serve ao usar a configuração abaixo ou no angular 16.1 `ng serve --force-esbuild`.

```json
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "forceEsbuild": true,
  }
},
```

**Hidratação não destrutiva**

Já disponível há algum tempo no Next.js, a hidratação no desenvolvimento da Web refere-se ao processo de conversão de conteúdo HTML renderizado do lado do servidor em uma página da Web totalmente interativa e funcional no lado do cliente, anexando comportamento JavaScript e ouvintes de evento. Isso reduz o tempo de interação. [Documentação para implementação.](https://angular.io/guide/hydration)

**Signals**

São uma nova maneira de gerenciar mudanças de estado em aplicativos Angular, inspirados no Solid.js.

É poderoso como o RxJS, mas com uma sintaxe mais simples. As assinaturas são criadas e destruídas automaticamente, então ao contrário do RxJS, não precisamos inscrever e cancelar a inscrição.

Graças ao Signals, podemos usar o Angular sem zone.js, que não possui uma boa performance.

```js
const counter = signal(0);

counter.set(2);
counter.update(count => count + 1);
```

**Testes**

Por padrão o Angular sempre utilizou o framework de testes Jasmine com o executor Karma, que utiliza um navegador real. Agora há o suporte experimental para o Jest, que possui execução direta no Node sem usar um navegador real e por isso tem um desempenho melhor. É necessário uma modificação do arquivo `angular.json` para substituir o framework de testes para Jest.

```json
{ 
  "projects" :  { 
    "my-app" :  { 
      "architect" :  { 
        "test" :  { 
          "builder" :  "@angular-devkit/build-angular:jest" , 
          "options" :  { 
            "tsConfig" :  " tsconfig.spec.json " , 
            "polyfills" :  [ "zone.js" ,  "zone.js/testing" ] 
          }
        } 
      } 
    }
  } 
}
```

A equipe do Angular ainda vê valor em testes baseados em navegador (como o Jasmine). Foi adicionado o Web Test Runner para substituir o executor de testes Karma, integrado com o Jasmine. Você pode executar `ng update` para migrar os testes Karma existentes para o Web Test Runner.

**NgOptimizedImage**

Do Angular 15, mas inclui por ainda não ser tão conhecido.
Essa diretiva é responsável por implementar as melhores práticas de desempenho ao carregar imagens.

```js
import { NgOptimizedImage } from '@angular/common'

<img ngSrc="cat.jpg">
```
**Observação**

Temos visto nas últimas versões do Angular uma buscar em diminuir a curva de aprendizagem e grandes melhorias de performance. Pontos que eram muito mais fortes no React.

Confira também meu artigo sobre [componentes autônomos.](https://raphaelramos.dev/blog/angular-standalone-components/)


## Next 13

**React Server Components**

O Next 13 possui a pasta /app, que diferente da /pages, os componentes dentro dela são React Server Components por padrão.
Combinando a interatividade dos aplicativos do lado do cliente com o desempenho aprimorado da renderização tradicional do servidor.
Os layouts nessa pasta permanecem interativos e não são renderizados novamente ao navegar entre várias páginas. Estável a partir da versão 13.4.
[Doc migração pages para app](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app).

**Turbopack**

A Vercel, mantenedora do Next.js, afirmou que, em aplicativos de grande escala, o Turbopack, escrito em Rust, atualiza 10 vezes mais rápido que o Vite e 700 vezes mais rápido que o Webpack.
Ainda na versão beta, é necessário iniciar o servidor com a flag `next dev --turbo`

**Componente de imagem**
Agora o componente usa carregamento lento em vez de hidratação, tornando os tempos de carregamento mais rápidos e envia menos JavaScript do lado do cliente.

```js
import Image from 'next/image'

const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      fill
    />
  </div>
)
```


**Otimização de fontes**

Otimizará automaticamente suas fontes (incluindo fontes personalizadas) e removerá solicitações de rede externa para melhorar a privacidade e o desempenho.

```js
// pages/index.js
import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--inter-font',
})
```

```css
/* styles/component.module.css */
.text {
  font-family: var(--inter-font);
  font-weight: 200;
  font-style: italic;
}
```

## Node 20

Atualização da engine V8 para 11.3, parte do Chromium 113, trazendo melhor desempenho e novos recursos de linguagem.
Melhorias no tempo de tempo de execução em `URL`, `fetch()`e `EventTarget`. Além disso, o pacote inclui o lançamento de um analisador de URL de alto desempenho: Ada 2.0, escrito em C++.