Ultimele îmbunătățiri în Angular 17: tot ce trebuie să știți

Pe baza cercetărilor efectuate de Statista, Angular este cel mai folosit cadru de dezvoltare web, exploatat de 17,46% dintre respondenți ^[i] . Pentru a menține această poziție, a îmbunătăți performanța și a simplifica codarea, echipa Angular a lansat noua sa versiune - Angular 17 pe 11 septembrie 2023.

Cadrul Angular reînnoit este ghidat de viziunea lui Sarah Drashner, director de inginerie la Google și șeful echipei Angular. Aduce îmbunătățiri incrementale, asigurând compatibilitatea cu versiunea anterioară, aliniându-se în același timp cu cele mai recente tendințe în cadrul framework-urilor front-end.

Cu Angular 17, companiile și dezvoltatorii își pot imagina o experiență de dezvoltare îmbunătățită. Aici, noua sintaxă a fluxului de control, suport îmbunătățit pentru server-Side Rendering (SSR), un CLI turboalimentat de esbuild și alte actualizări contribuie la un flux de lucru de dezvoltare mai fluid și mai dinamic.

În această postare pe blog, puteți decoda noile îmbunătățiri și actualizări ale cadrului de dezvoltare web Angular 17. Veți înțelege, de asemenea, de ce dezvoltatorii ar trebui să-l folosească, facilitând colaborarea, încurajând reutilizarea codului și asigurând crearea de aplicații web scalabile și care pot fi întreținute.

Sa incepem!

Caracteristici cheie și îmbunătățiri în Angular 17

1. Documentație orientată spre viitor

Angular 17 introduce o îmbunătățire semnificativă a documentației sale prin dezvoltarea unei noi case la angular.dev. Această revizuire include o structură reînnoită, ghiduri actualizate, conținut îmbogățit și o platformă de ultimă oră care încurajează o călătorie interactivă de învățare pentru interfața de comandă angulară și angulară (CLI).

Previzualizarea beta a angular.dev marchează începutul unei noi ere, cu planuri de a face din acesta site-ul web implicit pentru Angular în versiunea 18. Elementul culminant încorporează WebContainers, permițând utilizatorilor să valorifice puterea Angular CLI direct într-un browser web modern. Acest lucru promite în continuare o experiență de documentare captivantă și de viitor.

2. Flux de control încorporat

În Angular 17, o îmbunătățire notabilă este introducerea unei noi sintaxe a blocurilor de control, înlocuind directivele structurale tradiționale precum *ngIf, *ngFor și *ngSwitch. Această evoluție oferă dezvoltatorilor o mai mare flexibilitate și o lizibilitate îmbunătățită în codul șablon.

De exemplu, blocurile @if și @else oferă o modalitate mai curată de a reda conținut condiționat, folosind expresii logice. Blocul @for simplifică repetarea colecțiilor, permițând cod mai expresiv și mai concis. În plus, blocurile @switch, @case și @default facilitează fluxul de control eficient, îmbunătățind gestionarea mai multor condiții.

Pentru a îmbrățișa aceste îmbunătățiri, dezvoltatorii pot migra șabloanele existente folosind schema furnizată. Acest lucru va duce la o abordare mai modernă și mai eficientă a dezvoltării șablonului în Angular 17.

3. Built-in @for Loop

Caracteristica încorporată @for loop, în Angular 17, prezintă o îmbunătățire semnificativă atât a experienței dezvoltatorului, cât și a vitezei de randare. Această sintaxă abordează un blocaj de performanță obișnuit observat în aplicațiile care se bazează pe *ngFor prin obligarea utilizării „track” pentru detectarea eficientă a schimbărilor. De asemenea, asigură un proces de randare mai rapid.

Spre deosebire de predecesorul său, funcționalitatea de „pistă” este încorporată fără probleme ca expresie în șablon, eliminând necesitatea unei metode suplimentare în clasa componentei. În special, bucla @for încorporată oferă, de asemenea, o comandă rapidă convenabilă pentru gestionarea colecțiilor cu zero articole printr-un bloc opțional @empty. Această caracteristică nu numai că eficientizează dezvoltarea, ci și îmbunătățește semnificativ performanța aplicațiilor Angular, marcând o etapă demnă de remarcat în evoluția cadrului.

4. Vizualizări amânate

În Angular 17, o îmbunătățire semnificativă numită Deferrable Views a fost introdusă ca răspuns la solicitarea comunității Angular pentru un mecanism intuitiv de încărcare leneșă a componentelor, directivelor și conductelor.

Această nouă caracteristică își propune să facă procesul de încărcare amânată a dependențelor mai intuitiv și mai convenabil. Vizualizările amânate le permit dezvoltatorilor să încarce declarativ porțiuni din șabloanele lor până când acestea sunt necesare, optimizând dimensiunea inițială a pachetului și îmbunătățind timpul inițial de încărcare a aplicației. Acest lucru se realizează prin utilizarea noii sintaxe a fluxului de control „@-syntax” în șabloane.

Deoarece Deferrable Views oferă soluții încorporate și gestionate pentru încărcarea amânată, dezvoltatorii își pot exprima intenția fără a gestiona importurile dinamice detaliate, observatorii de intersecții sau gestionanții de evenimente. Această caracteristică acceptă, de asemenea, preîncărcarea pentru o disponibilitate mai rapidă a resurselor.

În plus, dezvoltatorii pot folosi declanșatoare integrate și condiții personalizate pentru a specifica când și cum ar trebui să aibă loc încărcarea amânată. În plus, Deferrable Views reduce codul standard, gestionând automat gestionarea dependenței în culise.

5. Randare îmbunătățită pe partea serverului (SSR)

Capacitățile de redare pe partea serverului ale Angular 17 le permit dezvoltatorilor să mărească performanța aplicațiilor și experiența utilizatorului. Funcția Hydration Boost eficientizează procesul de hidratare JavaScript la nivelul clientului, minimizând pâlpâirea și asigurând o tranziție mai lină la paginile web interactive.

Angular 17 adoptă, de asemenea, formatul standardizat EcmaScript Modules (ESM) pentru SSR, simplificând versiunile și sporind compatibilitatea cu instrumentele populare. În plus, se concentrează pe reducerea dimensiunilor pachetelor SSR prin tehnici de divizare a codului, ceea ce duce la răspunsuri mai rapide ale serverului și la optimizarea îmbunătățită a motorului de căutare. Aceste progrese poziționează Angular 17 ca o alegere convingătoare pentru construirea de aplicații web de înaltă performanță și prietenoase cu SEO.

6. Semnal stabil

Angular 17 introduce o dezvoltare revoluționară cu stabilizarea semnalelor, un instrument esențial pentru pasionații de reactivitate. Renunțând la eticheta „previzualizarea dezvoltatorului”, Signals reprezintă acum o soluție robustă pentru gestionarea stării și facilitarea actualizărilor componentelor.

Integrarea semnalelor cu Change Detection.OnPush aduce un nivel de precizie. Acest lucru asigură reîmprospătarea componentelor numai atunci când semnalul lor specific se modifică, optimizând performanța prin evitarea redărilor inutile. Retragerea metodei mutante în favoarea actualizărilor imuabile îmbunătățește și mai mult predictibilitatea și curățenia în menținerea istoriei statului. În timp ce Signals este în centrul atenției, Effects, încă în previzualizare pentru dezvoltatori, oferă o privire asupra viitorului managementului stării Angular, prezentând capabilități puternice pentru operațiuni asincrone.

În esență, Angular 17 echipează dezvoltatorii cu un set de instrumente rafinat, inclusiv semnale stabile, integrare OnPush, actualizări imuabile și potențialul de evoluție al efectelor. Acest lucru încurajează în cele din urmă crearea de aplicații bine structurate.

7. Construirea performanței cu esbuild

Adoptarea esbuild-ului în Angular 17 marchează un pas semnificativ în îmbunătățirea performanței de construcție pentru proiectele Angular. Bazându-se inițial pe Webpack, Angular CLI a trecut la utilizarea esbuild, un instrument mai nou celebrat pentru natura sa ușor de utilizat și viteza remarcabilă, cu peste 20.000 de descărcări săptămânale.

Integrarea esbuild a fost implementată în Angular 16 ca o previzualizare a dezvoltatorului și s-a maturizat acum într-o implementare stabilă în Angular 17. Această integrare a devenit generatorul implicit pentru proiecte noi prin Application Builder. Pentru proiectele existente, dezvoltatorii sunt încurajați să ia în considerare trecerea la esbuild prin actualizarea intrării de constructor în angular.json.

Cu această integrare, atât operațiunile de servire, cât și cele de construire prezintă o creștere substanțială a vitezei, utilizând serverul de dezvoltare Vite pentru construirea eficientă a pachetelor npm numai atunci când este necesar. Încorporarea de către echipa CLI a diferitelor optimizări ale performanței contribuie și mai mult la un proces de construire accelerat, ng build atingând adesea o îmbunătățire a vitezei de la 2 la 4. Această tranziție subliniază angajamentul Angular de a oferi dezvoltatorilor instrumente care nu numai că simplifică fluxurile de lucru, ci și îmbunătățesc semnificativ eficiența construirii proiectelor.

8. Componente independente

„Componentele autonome” este o caracteristică revoluționară în Angular 17, care permite crearea și utilizarea componentelor fără a fi nevoie de un modul părinte. În această schimbare de paradigmă, componenta rădăcină, exemplificată de „AppComponent”, este marcată ca independentă folosind proprietatea „standalone: ​​true” din decoratorul de componente. Acest atribut înseamnă că componenta funcționează independent de un modul părinte. În plus, în loc să se bazeze pe un modul, componenta utilizează matricea „imports” pentru a aduce dependențele necesare, cum ar fi modulul routerului.

Funcția „bootstrapApplication” este apoi folosită pentru a iniția aplicația, demonstrând o abatere de la abordarea tradițională centrată pe NgModule. Noua flexibilitate a componentelor de sine stătătoare facilitează un stil de dezvoltare modular și încapsulat, demonstrând angajamentul Angular de a evolua și de a îmbunătăți arhitectura componentelor.

Cum să migrezi la Angular 17?

Pentru a actualiza aplicația Angular existentă la versiunea 17, urmați acești pași:

• În primul rând, actualizați global CLI-ul Angular la versiunea 17 folosind comanda „npm install -g @angular/cli@17”.

• Apoi, actualizați pachetele de bază Angular rulând „ng update @angular/core”.

• Dacă utilizați pachete Angular suplimentare, actualizați-le individual, folosind cod, cum ar fi „ng update @angular/material” pentru Angular Material.

• Apoi, testați-vă temeinic aplicația pentru a vă asigura că funcționează conform așteptărilor după actualizări.

Unele sfaturi pe care le puteți urma aici includ actualizarea la versiuni minore între actualizările majore, copierea de rezervă a codului și a bazei de date înainte de actualizare și verificarea compatibilității bibliotecilor terțe. De asemenea, ar trebui să consultați documentația Angular și forumurile comunității pentru asistență dacă apar probleme în timpul procesului de actualizare. Acești pași simplificați vor asigura o tranziție lină la cea mai recentă versiune Angular, minimizând în același timp potențialele provocări.

Sunteți gata să creați aplicații robuste, bogate în funcții și moderne cu Angular? Discutați cu experții noștri!

Referinte:

^[i] Statista