Angular v16 está aqui!
Compartilhe este conteúdo:
Seis meses atrás, atingimos um marco significativo na simplicidade e na experiência do desenvolvedor do Angular, graduando as APIs independentes da visualização do desenvolvedor. Hoje, estamos entusiasmados em compartilhar que estamos continuando o Angular Momentum com o maior lançamento desde o lançamento inicial do Angular ; dando grandes saltos em reatividade, renderização do lado do servidor e ferramentas. Tudo isso vem com dezenas de melhorias de qualidade de vida em solicitações de recursos, com mais de 2.500 curtidas combinadas no GitHub!
Esta postagem inclui muito conteúdo, capturando a maioria das melhorias que fizemos nos últimos seis meses.
Repensando a reatividade
Como parte da versão v16, temos o prazer de compartilhar uma prévia do desenvolvedor de um novo modelo de reatividade para Angular, que traz melhorias significativas para o desempenho e a experiência do desenvolvedor.
É totalmente compatível com versões anteriores e interoperável com o sistema atual e permite :
- Melhor desempenho do tempo de execução reduzindo o número de cálculos durante a detecção de alterações. Após o lançamento completo do Angular Signals, esperamos melhorias significativas da métrica INP Core Web Vital para aplicativos criados com sinais
- Traz um modelo mental mais simples para reatividade, deixando claro quais são as dependências da view e qual é o fluxo de dados pelo app
- Permite reatividade refinada , que em versões futuras nos permitirá verificar alterações apenas nos componentes afetados
- Torna o Zone.js opcional em versões futuras usando sinais para notificar a estrutura quando o modelo for alterado
- Fornece propriedades computadas sem a penalidade de recálculo em cada ciclo de detecção de alteração
- Permite uma melhor interoperabilidade com o RxJS , delineando um plano para introduzir entradas reativas
A discussão inicial do GitHub atingiu 682 comentários e, desde então, compartilhamos uma série de RFCs que receberam mais de 1.000!
Na v16, você pode encontrar uma nova biblioteca de sinais que faz parte @angular/core
e um pacote de interoperabilidade RxJS — @angular/core/rxjs-interop
, a integração completa do signal estrutura será lançada ainda este ano.
Angular Signals
A biblioteca de sinais Angular permite definir valores reativos e expressar dependências entre eles. Você pode aprender mais sobre as propriedades da biblioteca no RFC correspondente . Aqui está um exemplo simples de como usá-lo com Angular:
@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} <button (click)="setName('John')">Click</button> `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } }
O trecho acima cria um valor computado fullName
, que depende dos sinais firstName
e lastName
. Também declaramos um efeito, cujo retorno de chamada será executado toda vez que alterarmos o valor de qualquer um dos sinais que ele lê — neste caso fullName
, o que significa que também depende transitivamente de firstName
e lastName
.
Quando definimos o valor de firstName
como ”John”, o navegador fará login no console:
"Name changed: John Doe"
Interoperabilidade RxJS
Você será capaz de “levantar” facilmente sinais para observáveis por meio de funções @angular/core/rxjs-interop
que estão na visualização do desenvolvedor como parte da versão v16!
Veja como você pode converter um signal em observable:
import { toObservable } from '@angular/core/rxjs-interop'; @Component({...}) export class App { count = signal(0); count$ = toObservable(this.count); ngOnInit() { this.count$.subscribe(() => ...); } }
…e aqui está um exemplo de como você pode converter um observable em signal para evitar o uso do canal assíncrono:
import {toSignal} from '@angular/core/rxjs-interop'; @Component({ template: ` <li *ngFor="let row of data()"> {{ row }} </li> ` }) export class App { dataService = inject(DataService); data = toSignal(this.dataService.data$, []); }
Os usuários angulares geralmente desejam concluir um fluxo quando um assunto relacionado é concluído. O seguinte padrão ilustrativo é bastante comum:
destroyed$ = new ReplaySubject<void>(1); data$ = http.get('...').pipe(takeUntil(this.destroyed$)); ngOnDestroy() { this.destroyed$.next(); }
Estamos introduzindo um novo operador RxJS chamado takeUntilDestroyed
, que simplifica este exemplo no seguinte:
data$ = http.get('…').pipe(takeUntilDestroyed());
Por padrão, esse operador injetará o contexto de limpeza atual. Por exemplo, usado em um componente, ele usará o tempo de vida do componente.
takeUntilDestroyed
é especialmente útil quando você deseja vincular o ciclo de vida de um Observable ao ciclo de vida de um componente específico.
Próximas etapas para signals
Em seguida, trabalharemos em componentes baseados em sinais que possuem um conjunto simplificado de ganchos de ciclo de vida e uma maneira alternativa e mais simples de declarar entradas e saídas. Também trabalharemos em um conjunto mais completo de exemplos e documentação.
Um dos problemas mais populares no repositório Angular é “ Proposal: Input as Observable ”. Alguns meses atrás, respondemos que queríamos oferecer suporte a esse caso de uso como parte de um esforço maior na estrutura. Estamos felizes em compartilhar que, ainda este ano, lançaremos um recurso que permitirá entradas baseadas em sinais — você poderá transformar as entradas em observáveis por meio do pacote de interoperabilidade!
Texto retirado e traduzido do blog angular!!!
2 Comentários