Ciekawostki z branży IT z tagiem Angular

Dostosuj wyszukiwanie do swoich preferencji

Tagi

AWS HTML JavaScript CSS WordPress TypeScript React Angular Vue.js Node.js PHP SQL .NET MongoDB API Git DevOps Linux iOS Android GitLab CI/CD Cloud Security SEO UI/UX AI IoT Agile Scrum Docker Firebase Azure

Autorzy

zlecenia-it

2 wyniki

Dodano

14 paź 2023

•

Autor

zlecenia-it

•

Frontend

Nowości w Angular v16: Rewolucja w reaktywności, renderowanie po stronie serwera i narzędzia dla komponentów niezależnych

W minionym roku zespół Angulara wprowadził standalone API jako część wersji deweloperskiej. Teraz prezentujemy nową, przełomową aktualizację Angulara w wersji 16, która przynosi znaczący postęp w obszarze reaktywności, renderowania po stronie serwera oraz nowych narzędzi. Wszystko jest rezultatem dziesiątek ulepszeń w odpowiedzi na sugestie użytkowników. Rewolucja w reaktywności W ramach wydania v16 prezentowana jest wersja deweloperska zupełnie nowego modelu reaktywności dla Angulara, który przynosi znaczące ulepszenia w zakresie wydajności i doświadczenia programistycznego. Jest w pełni kompatybilny wstecz i interoperacyjny z obecnym systemem oraz umożliwia: Poprawiona wydajność w czasie rzeczywistym dzięki ograniczeniu obliczeń podczas wykrywania zmian. Po wdrożeniu sygnałów Angulara, spodziewamy się znaczącego poprawienia wskaźnika INP Core Web Vital w przypadku aplikacji opartych na sygnałach. Wprowadza prostszy model myślowy dotyczący reaktywności, który jasno określa zależności między widokiem a przepływem danych w całej aplikacji. Umożliwia bardziej dokładną reaktywność, co w przyszłych wersjach umożliwi nam monitorowanie zmian tylko w dotkniętych komponentach. Czyni Zone.js opcjonalnym w przyszłych wersjach, używając sygnałów do powiadamiania frameworka o zmianach w modelu. Dostarcza obliczenia właściwości bez kary za ponowne obliczenia w każdym cyklu wykrywania zmian. Umożliwia lepszą interoperacyjność z RxJS, przez przedstawienie planu wprowadzenia reaktywnych wejść. W wersji v16 znajdziesz nową bibliotekę sygnałów, która jest częścią @angular/core, a także pakiet interop dla RxJS - @angular/core/rxjs-interop. Angular Signals Biblioteka sygnałów Angulara pozwala na definiowanie reaktywnych wartości i wyrażanie zależności między nimi. Możesz dowiedzieć się więcej o właściwościach biblioteki w odpowiednim dokumencie RFC. Oto prosty przykład jej użycia w Angularze: Powyższy fragment kodu tworzy obliczeniową wartość fullName, która zależy od sygnałów firstName i lastName. Deklarujemy również efekt, którego funkcja zwrotna zostanie uruchomiona za każdym razem, gdy zmienimy wartość któregoś z odczytywanych sygnałów - w tym przypadku fullName, co oznacza, że pośrednio zależy również od firstName i lastName. Gdy ustawimy wartość firstName na Mark, przeglądarka zarejestruje w konsoli: Name changed: Mark Doe Interoperalność z RxJS Będziesz w stanie łatwo podnieść sygnały na observable za pomocą funkcji z pakietu @angular/core/rxjs-interop, który jest dostępny jako część wydania v16! Oto, jak możesz przekształcić signal w observable: .. a oto przykład przekształcenia observable w signal, aby uniknąć używania async pipe: Często użytkownicy Angulara pragną zakończyć przepływ danych, gdy działanie związane z danym tematem dobiega końca. Poniższy wzorzec ilustruje to zjawisko i jest dość powszechny: Nowy operator RxJS o nazwie takeUntilDestroyed został wprowadzony, upraszczając ten przykład do następującej formy: Domyślnie ten operator będzie wstrzykiwać bieżący kontekst czyszczenia. Na przykład, w komponencie będzie używać cyklu życia komponentu. takeUntilDestroyed jest szczególnie przydatny, gdy chcesz wiązać cykl życia obserwowalnego z cyklem życia konkretnego komponentu. Renderowanie po stronie serwera i hybrydyzacja Na podstawie corocznych badań deweloperów, renderowanie po stronie serwera wyłania się jako kluczowa możliwość usprawnienia w Angularze. W ostatnich kilku miesiącach team Angular nawiązał współpracę z zespołem Chrome Aurora w celu zwiększenia wydajności i poprawienia doświadczeń programistycznych w obszarze hybrydyzacji i renderowania po stronie serwera. I teraz dostępna jest wersja deweloperska pełnej hybrydyzacji, która nie zakłóca działania aplikacji. Hybrydyzacja Angulara - nowa opcja. W nowej pełnej hybrydyzacji bez destrukcji Angular przestaje odtwarzać aplikację od podstaw. Framework identyfikuje istniejące węzły DOM, tworzy wewnętrzne struktury danych i przypisuje nasłuchiwaczy zdarzeń do tych węzłów. Korzyści to: Brak migotania treści na stronie dla użytkowników końcowych. Lepsze wskaźniki Web Core Vitals w pewnych scenariuszach. Architektura przygotowana na przyszłość, umożliwiająca ładowanie kodu o drobnej granulacji za pomocą elementów, które dostarczymy później w tym roku. Obecnie widoczne jest to w postaci progresywnego opóźniania hybrydyzacji tras. Łatwa integracja z istniejącymi aplikacjami, w zaledwie kilku linijkach kodu. Inkrementalne przyjęcie hybrydyzacji z atrybutem ngSkipHydration w szablonach komponentów wykonujących ręczne manipulacje DOM. W wczesnych testach zobaczyliśmy nawet do 45% poprawy Largest Contentful Paint dzięki pełnej hybrydyzacji! Aby rozpocząć, wystarczy dodać kilka linijek kodu do pliku main.ts: Nowe funkcje renderowania po stronie serwera W wydaniu v16 została dokonana aktualizacja schematu rozszerzania ng dla Angular Universal, co teraz umożliwia dodanie renderowania po stronie serwera do projektów wykorzystujących samodzielne API. Ponadto, obsługujemy teraz bardziej rygorystyczną politykę zabezpieczeń zawartości. Ulepszenia narzędzi dla standalone components, dyrektyw i pipes W celu wsparcia deweloperów w procesie przenoszenia swoich aplikacji na samodzielne API, zostały opracowane schematy migracji oraz przewodnik dotyczący migracji do standalone API. Gdy znajdujesz się w katalogu projektu, wykonaj następującą komendę: Schematy dokonają przekształceń w Twoim kodzie, usuną niepotrzebne klasy NgModules i zmienią sposób uruchamiania projektu na użycie standalone API. Konfiguracja Zone.js Dodano konfigurację Zone.js za pomocą nowego API bootstrapApplication w przypadku korzystania z standalone API. Dodaliśmy tę opcję, która pozwala na konfigurację Zone.js przy użyciu nowego API provideZoneChangeDetection: Rozwijanie narzędzi deweloperskich Kilka najważniejszych funkcji z Angular CLI i usługi języka. Wersja deweloperska systemu budowy opartego na esbuild W Wersji 16 Angulara system budowy oparty na esbuild wchodzi w fazę deweloperskiego podglądu! Wcześniejsze testy wykazały poprawę wydajności budowy produkcyjnej o ponad 72%. Teraz w ng serve będzie użyty Vite jako serwer deweloperski, a esbuild zasila zarówno proces deweloperski, jak i produkcję! Aby włączyć to funkcję należy w angular.json: Lepsze testowanie jednostkowe z Jest i Web Test Runner Dodano eksperymentalne wsparcie dla Jesta, a w przyszłych wersją możliwa jest migracja z Karma na Web Test Runner Usprawnienie doświadczenia programisty Wymagane inputy W wersji 16 możesz teraz oznaczyć dane wejściowe jako wymagane: Przekazywanie danych routera jako danych wejściowych dla komponentu Teraz możesz przekazywać następujące dane jako dane wejściowe do komponentu routingu: Parametry ścieżki Parametry zapytania Dane z lokalizacji Możesz włączyć tę funkcję, korzystając z withComponentInputBinding jako części dostarczanego routera. Elastyczny ngOnDestroy Hooki cyklu życia Angulara zapewniają wiele możliwości do podłączenia się do różnych momentów wykonywania twojej aplikacji. Jedną z okazji w ciągu lat było umożliwienie większej elastyczności, na przykład dostępu do OnDestroy jako observowalnej funkcji. W wersji 16 wprowadzono możliwość wstrzyknięcia OnDestroy, co daje programistom większą elastyczność, o którą prosili. Ta nowa funkcja umożliwia wstrzyknięcie DestroyRef odpowiadającego komponentowi, dyrektywie, usłudze lub w pipe, a także rejestrację hooka onDestroy. DestroyRef można wstrzyknąć w dowolnym miejscu w kontekście wstrzykiwania, nawet poza komponentem, w takim przypadku hooka onDestroy zostanie uruchomiony, gdy zostanie zniszczony odpowiedni wstrzykiwacz. Tagi samozamykające się Dodano samozamykające tagi, oto przykład:

Angular

zobacz więcej

https://zlecenia-it.s3.eu-central-1.amazonaws.com/it-insights/4/ang.webp

Dodano

12 paź 2023

•

Autor

zlecenia-it

•

Frontend

Aktualizacja Wersji Angulara w Projekcie: Krok po Kroku

Czasami zachodzi potrzeba podniesienia wersji Angulara w naszym projekcie, aby korzystać z najnowszych funkcji, naprawić błędy lub zwiększyć wydajność aplikacji. W tym przewodniku krok po kroku dowiesz się, jak to zrobić. Krok 1: Sprawdź Aktualną Wersję Angulara Zanim rozpoczniesz aktualizację Angulara, warto dowiedzieć się, jaką wersję Angulara obecnie używasz. Możesz to sprawdzić, przechodząc do katalogu projektu i uruchamiając następującą komendę w wierszu poleceń: Ta komenda wyświetli informacje o aktualnej wersji Angulara i innych narzędzi CLI używanych w projekcie. Zapisz te informacje, aby móc porównać je z nową wersją po aktualizacji. Krok 2: Zaktualizuj Angular CLI Angular CLI jest narzędziem do zarządzania projektem Angular. Zaleca się, aby zaktualizować CLI jako pierwszy krok. Możesz to zrobić, wykonując następującą komendę: To polecenie automatycznie zaktualizuje Angular CLI do najnowszej dostępnej wersji. Po zakończeniu aktualizacji sprawdź, czy nowa wersja CLI jest zainstalowana poprawnie, uruchamiając ponownie komendę ng version. Krok 3: Zaktualizuj Wersję Angulara Teraz, gdy Angular CLI jest zaktualizowane, możesz przejść do aktualizacji samego Angulara. Użyj następującej komendy, aby zaktualizować Angular: CLI automatycznie zaktualizuje Angular do najnowszej dostępnej wersji. To może potrwać kilka chwil w zależności od ilości zmian w nowej wersji. Krok 4: Rozwiąż Konflikty i Błędy Po aktualizacji, warto przetestować projekt i sprawdzić, czy wszystko działa poprawnie. Często, nowa wersja Angulara wprowadza zmiany w API lub wewnętrzne struktury projektu, co może prowadzić do konfliktów lub błędów. Jeśli napotkasz błędy, przeczytaj informacje zwrotne z konsoli, które pomogą zidentyfikować problem. Następnie, postępuj zgodnie z zaleceniami, aby rozwiązać błędy. Pamiętaj, że to ważny krok, aby upewnić się, że Twój projekt działa stabilnie po aktualizacji. Krok 5: Aktualizuj Zależności Podczas aktualizacji Angulara, może się okazać, że konieczne jest również zaktualizowanie innych zależności projektu, takich jak biblioteki, moduły, narzędzia lub skrypty. Upewnij się, że wszystkie zależności są zaktualizowane do wersji kompatybilnych z nową wersją Angulara. To jest szczególnie ważne, aby uniknąć konfliktów i błędów w trakcie działania projektu. Krok 6: Testuj Projekt Po zakończeniu procesu aktualizacji projektu, przetestuj go, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami. Wykonaj testy jednostkowe, sprawdź stronę, przeklikuj ją i sprawdź, czy wszystkie funkcje działają poprawnie. To jest kluczowy etap, aby upewnić

Angular

zobacz więcej

Tag

Ciekawostki z branży IT z tagiem Angular

Ciekawostki o Angular - Nowoczesnym Frameworku do Tworzenia Aplikacji Webowych

Angular to popularny framework do tworzenia aplikacji webowych, który oferuje narzędzia do budowy skalowalnych, dynamicznych interfejsów użytkownika. Poznajmy kilka fascynujących ciekawostek związanych z Angular:

Komponentowa Struktura

Angular opiera się na komponentowej strukturze. To oznacza, że interfejsy użytkownika są tworzone za pomocą komponentów, które można wielokrotnie wykorzystywać i łączyć w bardziej złożone aplikacje.

Język TypeScript

Angular został napisany w języku TypeScript, co oznacza, że programiści korzystają z zaawansowanego statycznego typowania. To pomaga w wykrywaniu błędów na etapie kompilacji i tworzeniu bardziej niezawodnego kodu.

Wieloplatformowość

Angular umożliwia tworzenie aplikacji, które mogą być uruchamiane na różnych platformach, w tym na przeglądarkach internetowych, systemach mobilnych i desktopowych. To znacząco zwiększa zasięg aplikacji.

Angular CLI

Angular CLI to narzędzie wiersza poleceń, które ułatwia tworzenie, rozwijanie i testowanie aplikacji Angular. To narzędzie dostarcza gotowe szablony i komendy do automatyzacji wielu zadań.

Silna Społeczność

Angular posiada rozwiniętą społeczność programistyczną, która dostarcza wiele materiałów, narzędzi i rozszerzeń. Dzięki temu, programiści mają dostęp do wsparcia i zasobów.

Rozszerzenia i Biblioteki

Angular posiada obszerny ekosystem rozszerzeń i bibliotek, które pozwalają na dodawanie różnych funkcji do aplikacji. Wśród nich znajdują się narzędzia do zarządzania stanem, routingu, obsługi zdarzeń i wiele innych.

Wysoka Wydajność

Angular skupia się na wydajności i efektywności. Dzięki mechanizmom takim jak Ahead-of-Time (AOT) kompilacja i Lazy Loading, aplikacje Angular są szybkie i efektywne w użyciu.

Formularze Reaktywne

Angular oferuje formularze reaktywne, które pozwalają na łatwe zarządzanie danymi wejściowymi i wyjściowymi w aplikacji. To ułatwia walidację i obsługę formularzy.

Przyszłość Angulara

Angular ciągle się rozwija, a deweloperzy Google oraz społeczność programistyczna pracują nad nowymi funkcjami i usprawnieniami. Planowane są również aktualizacje i udoskonalenia, co czyni Angular nowoczesnym narzędziem do tworzenia aplikacji.

Rozwinięte Narzędzia Deweloperskie

Angular dostarcza zaawansowane narzędzia deweloperskie, które pozwalają na analizowanie i debugowanie aplikacji. Angular DevTools oraz Angular Console ułatwiają pracę programistom.

Modułowość

Angular zachęca do modułowego projektowania. Aplikacje Angular są zorganizowane w moduły, co ułatwia zarządzanie i skalowanie projektów.

Obsługa Stanu

Angular oferuje różne podejścia do zarządzania stanem w aplikacjach, w tym przy użyciu narzędzi takich jak NgRx, co pomaga w tworzeniu bardziej przejrzystych i skalowalnych aplikacji.

Internationalization (i18n)

Angular wspiera internacjonalizację (i18n), co oznacza, że aplikacje można łatwo tłumaczyć na różne języki i dostosowywać do różnych regionów geograficznych.

Bezpieczeństwo

Angular dba o bezpieczeństwo aplikacji, oferując mechanizmy ochrony przed atakami typu XSS (Cross-Site Scripting) i innymi zagrożeniami.

Współpraca z Innymi Technologiami

Angular jest elastyczny i umożliwia współpracę z innymi technologiami, takimi jak Web Components czy różnymi serwerami backendowymi. To daje programistom duże możliwości integracji z istniejącymi systemami.