Angular va llançar la seva versió número 15 el novembre de 2022 i una versió 15.2 aquest febrer.

La nova versió inclou grans característiques: Components autònoms, Image Directive, entre altres millores a tot el seu ecosistema i comunitat.

Una nova versió d’Angular

Angular llança la seva 15a versió i això ja és normal dins el seu ecosistema, ja que cada sis mesos hi ha una versió amb millores, actualitzacions i noves funcionalitats per crear aplicacions més potents.

Això no hauria de causar cap preocupació si teniu projectes Angular amb qualsevol altra versió. No importa en quina versió esteu treballant, simplement podeu fer clic al botó d’actualització i continuar treballant sense cap problema.

Com puc actualitzar Angular?

Angular ha facilitat molt la feina d’actualització i només cal que executeu l’ordre ng update per actualitzar.

Tingueu en compte que ho heu de fer gradualment. És a dir, si esteu treballant en un projecte a Angular amb la versió 13, primer heu d’actualitzar a la versió 14 i després a la versió 15, per fer-ho executeu l’ordre indicant la versió que voleu actualitzar.

Si voleu més detalls podeu anar a la pàgina oficial d’Angular, on indiqueu la versió en què us trobeu i a quina voleu actualitzar. Allà teniu més detalls sobre com fer-ho, però, el 99% del treball ja està fet amb l’ordre ng update .

Què hi ha de nou a la versió 15 d’Angular?

Hem de recordar que Angular és tota una plataforma que ens permet utilitzar diverses eines per construir aplicacions potents, per tant, quan hi ha una nova versió els canvis i noves característiques provenen de molts dels seus paquets.

Aplicacions sense mòduls

Components autònoms és una de les innovacions més importants. Es tracta de desenvolupar aplicacions sense necessitat de mòduls.

Un dels objectius d’Angular és minimitzar la corba d’aprenentatge de les persones noves que aprenen aquest marc i els mòduls és un dels conceptes difícils d’entendre al principi. Com que la versió 14 ja havia llançat una versió preliminar dels components autònoms, ara tenim una API més robusta per donar-hi suport. Per exemple, amb un sol fitxer podríeu executar una aplicació Angular sense utilitzar mòduls.

Això no vol dir que els mòduls ja no es faran servir. Més aviat, ara teniu la possibilitat de gestionar ambdues estructures. I, a més, Angular és retrocompatible, és a dir, aquesta nova forma és opcional, si voleu seguir treballant amb mòduls podeu continuar fent-ho o fins i tot disposar d’híbrids de mòduls i Components Autònoms.

Càrrega mandrosa de components

Quan voleu implementar el patró Lazy Loading ho feu mitjançant un mòdul; però, ara gràcies a Standalone Components ho podràs fer directament en components i no cal que resolguis la promesa d’importació dinàmica, es fa automàticament.

Càrrega de la imatge millorada

Una altra novetat és que tenim una nova directiva a Angular per millorar la càrrega d’imatges i així reduir els temps de càrrega en un lloc web. Per exemple, tenim un lloc de prova que triga 4 segons a carregar una imatge; aplicant la nova directiva caldria menys temps.

Per utilitzar-lo, tot el que heu de fer és importar el mòdul NgOptimizedImage on voleu utilitzar-lo i després utilitzar l’attr ngSrc a les vostres imatges.

Un exemple de l’impacte d’aquesta directiva és el lloc de comerç electrònic Land’s End. Com que utilitza moltes imatges, després d’aplicar aquesta funció, va veure una millora del 75% en els temps de càrrega del lloc, segons l’informe del far.

Format d’error millorat

La depuració és una de les tasques principals d’un desenvolupador web i Angular sempre ha estat per davant de la corba en oferir-nos millors eines per analitzar errors. Ara teniu una manera més completa de saber com i per què s’ha produït un error, amb un format més clar.

Ara a la versió 15 els errors són petits, amb informació rellevant i t’indica on es produeix l’error amb més precisió.

Material angular alineat amb Material Design 3

Angular Material és un d’aquests paquets que podeu utilitzar o no a Angular, recordeu que trieu quines parts del framework utilitzareu. En aquest cas, Angular Material seria una biblioteca de components amb un estil visual seguint el sistema de disseny Material Design de Google per a aplicacions i van llançar la versió número 3 d’aquest sistema de disseny.

Què canvia en aquesta versió? Precisament, Google està fent una actualització del seu sistema de disseny i com a part d’aquest llançament eines per a Android, Flutter i Web on és més fàcil d’implementar i seguir les seves directrius.

Ara, l’equip de Material Angular utilitzarà aquestes eines de disseny de materials directament, facilitant el manteniment i la implementació del sistema de disseny de manera més fidel.

Si utilitzeu Angular Material i voleu actualitzar a la versió 15 si heu de fer passos addicionals, ja que aquest canvi modificarà la manera de treballar amb Angular Material però Angular sempre pensa en vosaltres i podeu fer aquesta migració amb les ordres.

També és nou en aquesta nova versió el suport per al component mat-slider amb rangs.

Nova utilitat a Angular CDK

L’Angular CDK és un conjunt d’eines per a comportaments de la interfície d’usuari que són agònics per a l’estil visual, el que significa que podeu estalviar moltes línies de codi fent comportaments com arrossegar i deixar anar, modals, superposicions, però afegiu el vostre propi estil visual.

Un exemple d’això és utilitzar l’Angular CDK + TailwindCSS per crear una interfície com trello.

I aquesta nova versió inclou un nou comportament de CDK Listbox.

En utilitzar @angular/cdk/listbox , obteniu tots els comportaments esperats d’una llista, inclosa l’accessibilitat, la interacció del teclat, la gestió del focus, etc.

Construcció més ràpida amb ESBuild

En aquesta versió milloren el suport per a ESBuild, un paquet que està escrit a GO i que seria el reemplaçament de Webpack. Amb això, executar ordres com ng build triga menys temps i fins i tot podeu carregar en directe amb ng build –watch .

A la versió 14 es va publicar una versió prèvia, aquesta versió ja inclou el procés d’embalatge amb aquesta eina i inclou el processament de fitxers sass, svg i fileReplacement.

Menys fitxers

Quan inicieu un nou projecte a Angular, notareu que hi ha una diferència notable amb la disminució del nombre de fitxers.

Què passa amb els fitxers que desapareixen? Angular gestiona aquestes configuracions al backend i algunes d’elles desapareixen i d’altres haureu d’habilitar-les si realment les feu servir.

Per exemple, ja no trobareu la carpeta d’entorns si realment necessiteu gestionar els entorns i col·locar-hi les claus, llavors habiliteu el fitxer manualment. No us preocupeu si ja heu gestionat els fitxers amb una configuració personalitzada, Angular els conservarà.

Trieu la vostra eina de prova per a e2e

Angular recentment ha desaprovat el Protractor com a eina per escriure proves e2e. Llavors, què utilitzar? Hi ha eines a la indústria que estan fent un gran treball per a aquest tipus de proves i ara Angular us ofereix la possibilitat de triar amb quina voleu treballar quan executeu l’ordre ng e2e .

Beneficis de la integració Angular 15 i Stripe

Stripe és una plataforma de pagament en línia que permet a les empreses processar transaccions de manera segura i eficient. La integració de Stripe en una aplicació Angular pot proporcionar una àmplia gamma d’avantatges per als usuaris i els propietaris d’empreses.

Aquests són els avantatges d’integrar Stripe Integration en una aplicació desenvolupada per Angular 15.

Processament de pagaments segur

Stripe és una plataforma de pagament de confiança que utilitza els estàndards de seguretat més alts del sector per protegir la informació de pagament dels usuaris. En incorporar Stripe a una aplicació Angular, els usuaris poden estar segurs que les seves dades de pagament estaran protegides i no es compartiran amb tercers. Això pot augmentar la confiança dels usuaris en l’aplicació i la marca que hi ha darrere.

Flexibilitat en el processament de pagaments

Stripe ofereix una gran varietat d’opcions de processament de pagaments, com ara targetes de crèdit i dèbit, Apple Pay, Google Pay i altres. En incorporar Stripe a una aplicació Angular, els empresaris poden oferir als usuaris una gran varietat d’opcions de pagament, que poden augmentar la satisfacció del client i la conversió de vendes.

Facilitat d’integració

Stripe ofereix una API fàcil d’utilitzar que permet una integració ràpida i senzilla amb les aplicacions Angular. En incorporar Stripe a una aplicació Angular, els empresaris poden estalviar temps i recursos en no haver de desenvolupar una solució de pagament personalitzada des de zero.

Gestió centralitzada de pagaments

Stripe ofereix una plataforma de gestió de pagaments centralitzada que permet als propietaris de negocis fer un seguiment de les transaccions, emetre reemborsaments i realitzar altres tasques de gestió de pagaments. En incorporar Stripe a una aplicació Angular, els empresaris poden gestionar totes les transaccions de l’aplicació en un sol lloc, cosa que pot simplificar el procés de gestió de pagaments.

Experiència d’usuari millorada

En incorporar Stripe a una aplicació Angular, els usuaris poden experimentar un procés de pagament ràpid i sense problemes. Això pot millorar l’experiència de l’usuari i augmentar la satisfacció del client. Els usuaris poden pagar els productes o serveis que desitgen de manera fàcil i ràpida, sense haver de preocupar-se per problemes tècnics o de seguretat.

Ampliació de la base de clients

En oferir una varietat d’opcions de pagament als usuaris, els empresaris poden ampliar la seva base de clients. En incorporar Stripe a una aplicació Angular, els empresaris poden atraure usuaris que prefereixen pagar amb una opció de pagament específica, la qual cosa pot augmentar les vendes i la rendibilitat de l’aplicació.

Reducció del frau

Stripe disposa d’eines i mesures de seguretat per detectar i prevenir el frau en les transaccions de pagament, que poden ajudar a protegir tant els propietaris d’empreses com els usuaris d’aplicacions.

Accés a les dades de pagament

Mitjançant l’ús de Stripe, els propietaris d’empreses poden accedir a informació valuosa sobre les transaccions de pagament, com ara la freqüència de compra, el valor mitjà de compra i altres dades rellevants. Aquestes dades poden ajudar els empresaris a prendre decisions informades sobre la seva estratègia de vendes i màrqueting.

Integració amb altres eines empresarials

Stripe s’integra amb una gran varietat d’eines empresarials, com ara plataformes de comerç electrònic, serveis de facturació i comptabilitat, entre d’altres. En incorporar Stripe a una aplicació Angular, els empresaris poden aprofitar aquestes integracions per millorar l’eficiència i l’eficàcia del seu negoci.

Suport tècnic i recursos d’aprenentatge

Stripe ofereix un excel·lent suport tècnic i una àmplia varietat de recursos d’aprenentatge per ajudar els propietaris d’empreses a utilitzar la plataforma de manera eficaç. Això pot ajudar els propietaris d’empreses a resoldre problemes tècnics i a aprendre noves estratègies per millorar el processament i la gestió de pagaments.

Aviat donarem notícies sobre la propera versió 16 d’Angular que es publicarà aquest maig.