Frontend Thursday vol. 91 - Safari z wsparciem dla Web Push Notifications i Angular 14

1. WWDC – Safari z wsparciem dla Web Push Notifications API

W minionym tygodniu wraz z konferencją WWDC zakończyliśmy wiosenny sezon konferencji deweloperski. Ku mojemu zaskoczeniu, konferencja Apple przyniosła całkiem sporo nowinek ze świata Web Developmentu (również jeśli chodzi o ekosystem Apple, ale o tym na pewno przeczytacie więcej w sobotnim przeglądzie).

Zacznijmy od bomby jaką zrzuciło Apple. Safari 16 będzie wspierać Web Push Notification API, a w 2023 roku podobnego wsparcia możemy się spodziewać też w mobilnym Safari. Oznacza to, że jesteśmy o krok bliżej, aby możliwe stało się zastąpienie natywnych aplikacji PWA. Gdyby tylko Apple zgodziło się jeszcze wyświetlać użytkownikowi zachętę do instalacji PWA, albo chociaż przeniosło przycisk do tego służący w odrobinę bardziej widoczne miejsce…

Kolejną nowością jest wsparcie dla Container Queries, czyli funkcjonalności na którą czekałem już od bardzo dawna (pierwszy raz pisaliśmy o nich już w Frontend Thursday vol. 38). Container Queries pozwalają nam tworzyć responsywne komponenty, ale ich zachowanie uzależnione jest od wysokości i szerokości kontenera (dowolny element HTML), a nie całej strony. Dzięki nowemu API będziemy mogli stworzyć na przykład responsywny baner, który w zależności od umiejscowienia na stronie będzie wyglądał odrobinę inaczej. Mam nadzieję, że ruch ze strony Apple zmusi do działania również Google (który również zaimplementował tę funkcjonalność, ale do tej pory ukrywał ją za feature flagą) i Mozillę. Czekam z niecierpliwością, aż Container Queries staną się ogólnie wspiera funkcjonalnością – to będzie nowy wspanialszy świat.

/* when the parent container is smaller than 850px, 
remove the .links div and decrease the font size on 
the episode time marker */
@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Safari 16 to też sporo usprawnień dla deweloperów. Nowa wersja przeglądarki od Apple dostarczy Web Inspector Extensions. Oznacza to, że twórcy narzędzi deweloperskich będą mogli przygotować porty debuggerów do Angulara, Vue czy Reacta dla Safari. Jeśli jesteśmy już w temacie debugowania, to do nowego Safari trafi też Flexbox Inspector. Niestety, patrząc na dostarczone przez Apple screenshoty, nie umywa się do tego znanego z Chrome.

To jeszcze nie koniec nowości, bo do Safari zmierza również wsparcie dla subgrid czy Shared Workers. Kto by się spodziewał, że Internet Explorer naszych czasów tak pozytywnie nas zaskoczy. Aczkolwiek może to być również kwestia tego, że Safari nie jest wydawane w tzw. Release Train. Gdyby zagregować największe nowości z Chrome na przestrzeni ostatniego roku, to też byłoby tego sporo.

Źródła:

https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/
https://webkit.org/blog/12945/meet-web-push/

2. Angular 14

Angularowy pociąg wydań ponownie dojechał na stację z punktualnością godną szwajcarskiego zegarka. Co więcej, w odróżnieniu od kilku ostatnich wydań, Angular 14 przynosi wreszcie ciekawe usprawnienia. Ba, rozwiązane zostało kilka z najpopularniejszych Issues na GitHubie!

Największą nowością są zapowiadane od dawna Standalone Components. Zanim przejdziemy do konkretów, odrobina kontekstu dla tych z Was, którzy z Angularem nie mają na co dzień do czynienia. Dependency Injection to mechanizm w Angularze, dzięki któremu Angular w “auto-magiczny” sposób wie jak tworzyć komponenty, serwisy czy dyrektywy. Aby Dependency Injection działało poprawnie, każdy komponent, serwis, czy dyrektywa musi być częścią Angularowego Modułu. Tutaj warto zatrzymać się na chwilę i zaznaczyć, że Angularowe moduły mają niewiele wspólnego z JavaScriptowymi modułami. Te drugie pozwalają podzielić aplikację na wiele plików i zarządzać udostępnianym API. Te pierwsze mają na celu zapewniać konfigurację zależności dla Dependency Injection.

W ostatnich latach Angularowa społeczność powoli zmierzała w kierunku tworzenia osobnych modułów dla każdego komponentu. Jak możecie sobie wyobrazić generowało to niesamowite ilości wtórnego kodu. Wraz z Angularem 14 będziemy mogli wreszcie pozbyć się nadmiarowych modułów i zastąpić je dwoma dodatkowymi parametrami w dyrektywie @Component. Oczywiście nie oznacza to, że moduły całkowicie znikają z Angulara – w wielu miejscach nadal są one nie do zastąpienia i raczej nic nie zapowiada zmiany stanu rzeczy w najbliższych miesiącach.

Kolejną wyczekiwaną przez społeczność nowością jest lepsze wsparcie dla typów w Angular Reactive Forms. Do tej pory Reactive Forms w dużej mierze opierały się o typ `any`. To już nie rok 2010, więc społeczność od lat regularnie podnosi problem i pozostawiona bez wsparcia próbowała radzić sobie samemu. Ilość bibliotek dodających typy do Reactive Forms zdecydowanie nie przystoi zopiniowanemu frameworkowi jakim jest Angular. Na szczęście lepiej późno niż wcale zespół Angulara wysłuchał społeczność i dodał upragnione typy do formularzy.

Wśród nowości znajdziemy jeszcze kilka drobnych usprawnień. Na szczególną uwagę zasługuje możliwość definiowania tytułów stron w konfiguracji routingu, lepsze wiadomości błędów i odblokowanie dostępu do pól oznaczonych jako `protected` w template’ach.

Angular 14 wydaje się być naprawdę ciekawym releasem. Trzeba jednak przyznać, że nowości z React 18 przyćmiewają jego blask. Jasne, React 18 powstawał prawie 3 lata, ale mimo wszystko ciężko nie zauważyć, że React nieustannie stara się wprowadzać do Frontendu nowe koncepty, podczas gdy Angular skupia się na naprawianiu istniejących od lat problemów.

PS: Jeśli szukacie dobrych materiałów trochę dogłębniej opisujących nowości Anuglara to zdecydowanie polecam tę serię artykułów od Netanel Basala

Źródła:

https://blog.angular.io/angular-v14-is-now-available-391a6db736af

Bonus 1 – Microsoft Word jako silnik gier 2D? Czemu nie!

Wiedzieliście, że Microsoft kilka tygodni temu dodał do swojego edytora tekstu mechanizm add-ins, dzięki któremu możemy zautomatyzować często powtarzane czynności. Nie musieliśmy długo czekać, aż ktoś pomyślał “Microsoft Word to świetny silnik do pisanie gier 2D” i postanowił wykorzystać nowe możliwości, aby stworzyć prostą grę 2D. Może i nie jest to najpotrzebniejsza wiedza, ale przyjemnie popatrzeć jak ktoś próbuje wykorzystać API stworzone w bardzo konkretnym celu do czegoś zupełnie innego.

Bonus 2 – useEffect źródłem wszelkiego zła we wszechświecie?

Nie od dziś wiadomo, że useEffect to najbardziej skomplikowany koncepcyjnie hook w Reactie. Nieskończona pętla? Nic trudnego, wystarczy zapomnieć o tablicy z zależnościami. Memory Leak? Również nic trudnego, wystarczy zapomnieć o poprawnej implementacji funkcji zwracanej z `useEffect`. Kto nigdy nie wprowadził buga, źle używając `useEffect` niech pierwszy rzuci kamieniem.

Autor Frontend Thursday w momencie jego publikacji – koloryzowane

W podlinkowanej poniżej prezentacji z ostatniego Reactathon znajdziecie jeszcze więcej podobnych przykładów, a ponadto trochę wzorców, które pozwolą Wam unikać nadmiarowych wywołań `useEffect`. Zdecydowanie polecam!

Frontend Thursday vol. 91 – Safari z wsparciem dla Web Push Notifications i Angular 14

1. WWDC – Safari z wsparciem dla Web Push Notifications API

Źródła:

2. Angular 14

Źródła:

Bonus 1 – Microsoft Word jako silnik gier 2D? Czemu nie!

Bonus 2 – useEffect źródłem wszelkiego zła we wszechświecie?

Odkryj więcej świetnych treści!