Safari z wsparciem dla Web Push Notifications – Frontend Weekly vol. 105

1. Safari 16.0

Pociągi releasów (nie przekonacie mnie do zaprzestania nieudolnego tłumaczenia angielskich zwrotów) mają właściwie same zalety. Nowe funkcjonalności dostarczane są regularnie, a zmiany są niewielkie i łatwo się do nich dostosować. Niestety wraz z powolnym i stabilnym wzrostem znika ekscytacja dotycząca nowości. Większość zmian nabiera znaczenia dopiero kiedy spojrzymy na nie z perspektywy kilku releasów. Mamy tu do czynienia z ewolucją, a nie rewolucją.

Jednym z dobrych przykładów tego, jak rzadkie duże releasy wzbudzają zainteresowanie, jest polityka releasów Apple. W sieci bardzo rzadko czyta się o nowościach w kolejnych wersjach Windows czy Chrome, a artykuły o nowym iOS, macOS i Safari rozchodzą się wręcz viralowo. Różnica polega na tym, że te pierwsze stosują pociąg releasów, a te drugie publikują duże zmiany raz do roku.

Kończąc mój przydługawy wywód na temat releasowania aplikacji, w minionym tygodniu w ręce użytkowników trafiło wreszcie Safari 16. Może i nie znajdziecie tutaj zbyt wielu rewolucyjnych funkcjonalności, ale za to do Internet Explorera naszych czasów trafiło sporo funkcjonalności, które w innych przeglądarkach znajdziecie już od dawna. Zapnijcie pasy, bo wyruszamy na krótką wycieczkę po zmianach w Safari 16.

Web Push Notifications (na razie na macOS, ale wkrótce również na iOS)

Wiecie, że to Apple wymyśliło koncepcję instalowanych aplikacji PWA? Niestety, gdzieś po drodze firma zorientowała się, że nad aplikacjami tego typu nie da się sprawować kontroli (np. wymuszać płatności przez Apple Pay) ani pobierać od nich należnego cła. Nigdy nie zostało to potwierdzone oficjalnie, ale to prawdopodobnie właśnie z tego powodu przycisk instalacji PWA na iOS jest tak skrzętnie ukryty. Również z tego powodu do Safari nigdy nie trafiły Web Push Notifications, czyli jeden z najważniejszych wyróżników aplikacji mobilnych. Apple jak to Apple, oficjalnie tłumaczyło się dobrem swoich użytkowników. W końcu aplikacje w AppStore przechodzą skomplikowany proces akceptacji, a w internecie każdy może opublikować słabą, albo co gorsza złośliwą aplikację.

Jak można domyślić się z nagłówka, do Safari 16 trafiły właśnie Web Push Notifications. Co skłoniło firmę do zaimplementowania tej funkcjonalności po prawie 7 latach od czasu kiedy po raz pierwszy pojawiły się one u konkurencji? No cóż, Apple ponownie milczy w tej sprawie, ale internet jak zwykle internet ma swoje zdanie na ten temat. Apple w ostatnich latach coraz większy nacisk stawia na oferty usługi, jak na przykład Apple Music, Apple TV, czy Apple Fitness. Jeśli zyski firmy mają być nastawione na usługi, to nic nie stoi na przeszkodzie, aby trochę poluzować politykę w ramach sklepu.

Innym powodem może być wdrażany przez Unię Europejską Digital Marketing Act, którego celem jest wprowadzenie kontroli nad technologicznymi monopolistami. W jego ramach Apple może być zmuszone na przykład do dodania portu USB C do swoich telefonów, ułatwienie użytkownikom dostępu do nie-domyślnych aplikacji czy do wdrożenia brakujących standardów w ich oprogramowaniu. Co prawda ustawodawstwo to nie weszło jeszcze oficjalnie w życie, ale być może Apple postanowił w tej kwestii zadziałać trochę reaktywnie.

Container Queries

O Container Queries w internecie napisane zostało już chyba wszystko. Od kiedy kilka lat temu do sieci trafiły pierwsze szkice API, wszyscy frontend deweloperzy zakochali się po uszy i z niecierpliwością czekali, aż trafią one w ich ręce. Ten moment właśnie nadszedł bo zarówno Chrome 105 jak i Safari 16 obsługują tą technologię. Niestety w Firefox wciąż nie widać jej na horyzoncie (i kto tu teraz jest IE naszych czasów), ale na szczęście od jakiegoś czasu dostępny jest działający przyzwoicie polyfill.

Czym są Container Queries? Na pewno w swojej karierza chociaż raz korzystaliście z Media Queries, które pozwalają nam przygotować różny zbiór CSSów w zależności od wysokości czy szerokości ekranu. Container Queries to takie Media Queries, tylko, że umożliwiają one obserwowanie parametrów dowolnego elementu HTML. Jeśli szukacie dobrego źródła wprowadzającego w tajniki Container Queries, to ja gorąco polecam ten artykuł.

Web Inspector Extensions

Nie znam nikogo, kto na co dzień do developmentu korzystałby z Safari. Pewnie to dlatego, jest to przeglądarka na której najczęściej doświadczyć można drobnych bugów i glitchy. Safari 16 wprowadza szereg usprawnień, jeśli chodzi narzędzia do debugowania aplikacji, takich jak chociażby Flexbox inspector czy Screenshots timeline.

Absolutna funkcjonalność zabójca (jak już mówiłem, nie przekonacie mnie do rezygnacji z spolszczeń), to natomiast wsparcie dla Web Inspector Extensions – API niezbędnego do działania wtyczek od twórców frameworków i bibliotek. Oznacza to, że prawdopodobnie doczekamy się w końcu Angular DevTools czy React Developer Tools dla Safari.

Osobiście raczej nie zamierzam przerzucić się na co dzień do Safari, a inspektor oferowany przez Chrome pozostaje dla mnie niezastąpiony. Natomiast dzięki małym usprawnieniom w Safari 16, krótkie wycieczki do przeglądarki od Apple na potrzeby testów i naprawy błędów, będą trochę przyjemniejsze.

Passkeys

Passkeys to technologia, która może służyć jako alternatywa dla haseł, która pozwala logować się na podstawie potwierdzenia tożsamości dostarczonego przez nasze urządzenie. Pod spodem całość przy rejestracji tworzy klucz kryptograficzny zapisywany na urządzeniu, który potem wykorzystywany jest do autentykacji. Całość jest bardziej funkcjonalnością macOS 16 i iOS 16, ale Safari 16 dostało wszystkie niezbędne do obsługi nowego mechanizmy API. Nie wiem, czy zamierzacie dodać nowy sposób logowania do Waszych aplikacji, ale z perspektywy użytkownika wygląda to naprawdę ciekawie (dowód poniżej)

Źródła:

https://webkit.org/blog/13152/webkit-features-in-safari-16-0/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. MemLab: Wycieki pamięci? – nigdy więcej!

Zanim przejdziemy do sedna, chciałbym podzielić się z Wami małą łamigłówką. Czy poniższy kod zawiera wyciek pamięci?

var obj = {};
console.log(obj);
obj = null;

Jak to często w programowaniu bywa, poprawna odpowiedź brzmi – to zależy. Okazuje się, że niektóre środowiska (np. Chrome), nigdy nie zwolnią z pamięci obiektów, które zostały wyświetlone w konsoli. Na pierwszy rzut oka może wydawać się to podejrzane, ale z drugiej strony niesamowicie ułatwia debugowanie. Gdyby obiekt wyświetlony w konsoli był czyszczony z pamięci nie moglibyśmy łatwo się do niego dobrać i manipulować nim według własnego widzimisię.

MemLab to narzędzie którego Facebook używa do wykrywania i monitorowania wycieków pamięci w aplikacjach. Ich monitorowanie jest o tyle ważne, że zazwyczaj drobne wycieki nie mają wpływu na wydajność aplikacji i pozostają niezauważone. Kiedy jednak korzystamy z aplikacji dłużej, drobne wycieki kumulują się, doprowadzając do powolnego obniżenia wydajności i ostecznie do OutOfMemoryException. Problem polega na tym, że podczas rozwijania aplikacji bardzo rzadko symulujemy tak długie sesje. Nawet jeśli takie sesje przytrafią nam się od czasu do czasu, to zazwyczaj mają one miejsce na wydajnym komputerze i bardzo łatwo jest nam ignorować drobne spowolnienia.

MemLab działa w stosunkowo prosty sposób. Przy pomocy Puppeteera uruchamia on przeglądarkę, nawiguje na stronę główną aplikacji oraz wykonuje snapshot stosu JavaScript. Następnie wykonywana jest nawigacja na testowaną podstronę i po raz kolejny zapisywany jest snapshot stosu JavaScript. Ostatni krok to powrót na stronę główną oraz wykonanie jeszcze jednego snapshotu. Na podstawie porównania trzech snapshotów stosu JavaScript, MemLab jest w stanie wykryć potencjalne wycieki pamięci.

Poza wykrywaniem wycieków pamięci, MemLab oferuje też swego rodzaju debugger stosu JavaScript. Pozwala on przekształcić stos obiektów do postaci grafu zależności. Dzięki temu znalezienie obiektu, który przechowuje nadmiarowe referencje staje się dużo łatwiejsze.

W minionym tygodniu Facebook upublicznił MemLab jako narzędzie OpenSource. Nie wiem jak Wy, ale ja już nie mogę doczekać się, aż znajdę chwilę, żeby pobawić się nim osobiście.

Źródła:

https://engineering.fb.com/2022/09/12/open-source/memlab/

3. React Router 6.4

React Router jest de facto standardową biblioteką do routingu w React. Prawie rok temu doczekał się on 6 wersji i tradycyjnie dla już tej biblioteki, pełny był breaking changes. Trzeba jednak przyznać, że wprowadził też kilka interesujących nowości, na zawsze zakończył żywot alternatywnego `reach-router` i postawił podwaliny pod budowę Remixa (w sporym uproszczeniu alternatywy dla Next.js).

React Router 6.4 to pierwsze od tego czasu werska biblioteki, które wprowadza interesujące nowości. Zacznijmy od zgrabnego API, do obsługi asynchronicznego ładowania danych. Składa się ono z propsa `loader` dodanego do komponentu `` oraz hooka `useLoaderData()`. Dane potrzebne do załadowania wszystkich dopasowanych ścieżek pobierane są równolegle, a biblioteka dba o to, żeby dane nie były pobierane kilkukrotnie. Ponadto react-router pozwala teraz na wykorzystanie Suspense z React 18, aby zoptymalizować proces renderowania.

<Route
  path="/"
  loader={async ({ request }) => {
    const res = await fetch("/api/user.json", {
      signal: request.signal,
    });
    const user = await res.json();
    return user;
  }}
  element={<Root />}
>
  <Route
    path=":teamId"
    loader={({ params }) => {
      return fetch(`/api/teams/${params.teamId}`);
    }}
    element={<Team />}
  >
</Route>

function Root() {
  const user = useLoaderData();
  // data from <Route path="/">
}

function Team() {
  const team = useLoaderData();
  // data from <Route path=":teamId">
}

Nieodzowną częścią asynchronicznego ładowania danych jest obsługa błędów. Tej też nie zabrakło w nowym react-router.

<Route
  path="/"
  loader={() => {
    somethingThatThrowsAnError();
  }}
  // this will not be rendered
  element={<HappyPath />}
  // but this will instead
  errorElement={<ErrorBoundary />}
/>

Ostatnia spora nowość to obsługa formularzy. Jak twierdzą twórcy biblioteki, mutacja danych przez formularze HTML powinna być wydarzeniem routingu. Ciężko się z nimi nie zgodzić – natywne formularze zbudowane zostały zbudowane tak, aby wraz z ich zaakceptowaniem wysyłać zapytanie do serwera, które przenosi użytkownika na nową stronę. Standardowe obecnie rozwiązania z wywoływaniem `event.preventDefault()`, są więc sporym hakiem, a nawigacją na nową stronę byłoby rozwiązaniem zdecydowanie bliższym oryginalnej architektury.

Od teraz react-router będzie w stanie dopasować zapytania typu POST, PUT i PATCH, do zdefiniowanych ścieżek. Następnie wywołana zostanie funkcja przekazana do ścieżki jako props action.

​​<Route
  path="/song/:songId/edit"
  element={<EditSong />}
  action={async ({ params, request }) => {
    let formData = await request.formData();
    return fakeUpdateSong(params.songId, formData);
  }}
/>

function EditSong() {
  return (<Form method="post" action="/songs/123/edit" />)
}

Źródła:

https://remix.run/blog/react-router-v6.4

Bonus #1: Adobe kupuje Figmę!

Na pewno kojarzycie Figmę, czyli narzędzie do tworzenia designu aplikacji. Na przestrzeni ostatnich kilku lat stało się ono właściwie rynkowym standardem. Było to trochę nie na rękę Adobe, które do tej pory właściwie posiadało monopol w tej kategorii. Z tego względu postanowili oni zakupić młodego potentata.

Z notatki informującej o przejęciu dowiadujemy się, że tak naprawdę z perspektywy klientów niewiele się zmieni. Z perspektywy firmy pojawia się natomiast szansa na przyspieszenie rozwoju i skorzystanie z wiedzy Adobe na temat video, 3d czy sztucznej inteligencji,

Źródła:

https://www.figma.com/blog/a-new-collaboration-with-adobe/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Bonus #2: ng-cong 2022 Angular Team Keynote

Początkiem września w Salt Lake City miała miejsce największa i najważniejsza Angularowa konferencja – ng-conf 2022. Niestety, nie wszystkie prezentacje są już dostępne na YouTube. Dostępny jest już natomiast Angular Team Keynote, który jest świetnym miejscem jeśli chcecie przypomnieć sobie co w ostatnich miesiącach zmieniło się w Angularze i jakich zmian możemy oczekiwać w kilku kolejnych.