Angular 12 z nowymi funkcjami i zmianami w kompilatorze

Właśnie wydano Angulara 12, który jest obecnie najnowszą wersją otwartego frameworka TypeScriptu. Twórcy wprowadzili szereg nowych funkcji i usprawnień, w tym zmiany w kompilatorze, nowości usprawniające wydajności i wiele innych wartościowych rzeczy. Wszystkie one pojawiały się przy okazji niezliczonych wydań beta i release candidates. W tym artykule przyjrzymy się bliżej i postaramy się dokładniej omówić te najważniejsze.

Zaczynajmy!

“Ivy Everywhere”

Wraz z wersją 12, Angular coraz bardziej zbliża się do realizacji wizji “Ivy everywhere”, która polega na wprowadzeniu jeszcze lepszego kompilatora, oferując kompilowanie typu ahead-of-time oraz usprawnione renderowanie. 

Twórcy piszą też w związku z powyższym, że View Engine będzie teraz funkcjonowało jako przestarzałe rozwiązanie. Zniknie on zupełnie przy okazji wydania Angulara 13. Wszystkie biblioteki, które korzystają z View Engine nadal będą pracować z nowym Angularem, ale autorzy powinni zacząć planować migrację do Ivy.

nullish coalescing operator (??)

Operator ten już od jakiegoś czasu pomagał developerom pisać prostszy i bardziej przejrzysty kod w TypeScript, a od teraz będzie go można również używać w szablonach Angulara. Spójrzmy na poniższy przykład, który obrazuje wykorzystanie nullish coalescing operator w szablonach do uproszczenia skomplikowanej składni. A więc coś takiego:

{{age !== null && age !== undefined ? age : calculateAge() }}

staje się czymś takim:

{{ age ?? calculateAge() }}

Odejście od starych identyfikatorów wiadomości w i18n

Twórcy piszą, że w systemie i18n jest obecnie wiele przestarzałych identyfikatorów wiadomości. Mogą one sprawiać problemy ze względu na znaki białe, swoje szablony formatowania oraz wyrażenia ICU - twórcy zamierzają więc zrezygnować ze wszystkich identyfikatorów legacy. Nowy format wiadomości ma być natomiast bardziej odporny na te czynniki oraz bardziej intuicyjny.

Wraz z wersją 11, nowe projekty były już automatycznie konfigurowane, w taki sposób, aby mogły korzystać z nowych identyfikatorów wiadomości. Twórcy twierdzą, że teraz mają już odpowiednie narzędzia do tego, aby projekty dobrze migrowały.

Usprawnienia dotyczące stylu

W Angularze 12 pojawiło się również sporo usprawnień dotyczących stylu. Mamy więc, na przykład, obsługę inline Sass w komponentach Angulara - dotyczą one pola styles należącego do dekoratora @Component. Wcześniej Sass był jedynie dostępny z poziomu źródeł zewnętrznych, co było ograniczeniem kompilatora Angulara. Aby włączyć powyższą funkcję w istniejących już aplikacjach, trzeba w angular.json dodać "inlineStyleLanguage": "scss”.

Twórcy dodali również obsługę Tailwind CSS - aby zacząć tego używać w swoim projekcie, zainstaluj pakiet tailwindcss z npm, a następnie uruchom Tailwind i utwórz tailwind.config.js w swoim projekcie. 

Co więcej, Angular CDK oraz Angular Material będą teraz wewnętrznie korzystać z nowego systemu modułów Sass. Twórcy zaznaczają, że jeśli Twoja aplikacja korzysta z jednego z powyższych, to musisz się upewnić, czy przeszedłeś z node sass na pakiet npm o nazwie sass. node sass nie jest już obsługiwany.

IE11 jako przestarzałe rozwiązanie

Od teraz użytkownicy Angulara będą dostawali ostrzeżenie o tym, że IE11 jest przestarzałą przeglądarką. Obsługa tej wersji Internet Explorera zostanie całkowicie usunięta w Angularze 13. 

Twórcy argumentują takie posunięcie chęcią skupienia się na nowych i bardziej aktualnych rozwiązaniach, tak aby developerom lepiej i łatwiej się pracowało.

Inne usprawnienia

ng build będzie się od teraz domyślnie uruchamiany w trybie produkcyjnym. Zaoszczędzi to trochę czasu i pozwoli uniknąć budowania w trybie deweloperskim na produkcji. Kolejnym usprawnieniem jest to, że Strict mode będzie działał domyślnie w CLI - pomaga on w szybszym wyłapywaniu błędów podczas cyklu developerskiego. 

Twórcy mówią również, że aktualizują obsługiwaną wersję TypeScript do 4.2. W Angularze 12 pojawia się również eksperymentalna obsługa Webpack 5, które będzie od teraz gotowa do wykorzystania na produkcji. 

Podsumowanie

Angular 12 to dość spore wydanie, które przynosi ze sobą mnóstwo nowości i wartościowych usprawnień. Z niecierpliwością czekamy na postępy w pracy nad nową wersją i ostateczne wydanie Angulara 13.