Meta tworzy swój fork WebView dla Androida - Frontend Weekly vol. 108

1. Meta stworzyła swoją implementację WebView dla Androida

W 102 edycji naszego przeglądu podrzucaliśmy Wam narzędzie inAppBrowser.com, za pomocą którego sprawdzać można było co śledzą przeglądarki wbudowane w poszczególne aplikacje. Narzędzie to skupiało się na systemie iOS, ale nie to jest tutaj ważne. Z raportu przygotowanego przez autora narzędzia wyczytać możemy na przykład, że TikTok śledzi wszystkie interakcje z otwartą stroną, a Instagram śledzi wszystkie pola wejściowe włączając w to hasła.

W kontekście tych informacji, trochę ciężko uwierzyć mi w dobre intencje Mety tworzącej własny fork WebView dla Androida. Jak wynika z danych zgromadzonych przez korporację, spora grupa użytkowników regularnie aktualizuje aplikację Facebooka, ale bardzo rzadko aktualizuje WebView i Chrome. W przypadku takich użytkowników strony otwierane w aplikacji podatne są na liczne luki bezpieczeństwa. Aby chronić bezbronnych użytkowników Facebook zamierza do swojej aplikacji dołączać własną przeglądarkę – zawsze aktualną i zawsze bezpieczną.

Poza bezpieczeństwem programiści Facebooka uważają również, że ich implementacja WebView będzie odrobinę szybsza od tej dostarczanej systemowo. Wynika to z faktu, że Facebook zawsze wie jakich rozmiarów będzie otwierane okno przeglądarki, co pozwala uprościć logikę inicjalizacji. W raporcie nie pojawiają się jednak żadne twarde dane, a argument ten zepchnięty jest raczej na drugi plan całego przedsięwzięcia.

Na papierze intencje Mety wyglądają dobre. Wszystko sprowadza się jednak do zaufania. Fork WebView utworzony przez Metę jest i przynajmniej na razie pozostanie prywatny. Oznacza to, że korporacja bez większych problemów może modyfikować fragmenty Chromium jak i po cichu wstrzykiwać właściwie dowolny kod. Bezpieczną opcja pozostaje wciąż jedna: otwierać linki w zewnętrznej, aktualnej przeglądarce.

Źródła:

https://engineering.fb.com/2022/09/30/android/launching-a-new-chromium-based-webview-for-android/

2. zx 7.1.0 – mały update, duże nowości

zx to narzędzie rozwijane przez google, które jest JavaScriptową alternatywą dla bashowych skryptów. Od starego i dobrze znanego Node.js odróżnia je przede wszystkim cała masa drobnych usprawnień, które znacząco odchudzają kod. Zobaczcie tylko na poniższy przykład:

#!/usr/bin/env zx

let name = await $`cat package.json | grep name`
let branch = await $`git branch --show-current`

await $`echo Deploying package ${name} from branch ${branch}`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo Progress 33%`,
  $`sleep 2; echo Progress 66%`,
  $`sleep 3; echo Progress 100%`,
]);

Możecie zastanawiać się dlaczego po raz pierwszy od wydania zx 1.0 wracamy do niego w naszym przeglądzie. Od tego czasu ukazało się w końcu aż 6 wersji major i jeszcze więcej wersji minor. Otóż zx 7.1.0 wprowadza funkcjonalność automatycznej instalacji modułów z npm! Wystarczy, że do komendy dodamy flagę `–install`, a reszta wydarzy się sama. Dzięki temu bez obaw i dodatkowej konfiguracji korzystać możemy z wszelakich utlisów i helperów.

zx --install script.mjs

import sh from 'tinysh@1.0.0';
import { kebabCase } from ‘lodash@4.17.21’;

let name = await $`cat package.json | grep name`
sh.say('Package name in kebab case is ${kebabCase(name)}')

Źródła:

https://github.com/google/zx

3. Nowy hook useEvent wraca na ławkę rezerwowych

W maju świeżo po wydaniu React 18 na GitHubie pojawiło się obiecujące RFC, które szerokim echem rozniosło się wśród społeczności. Nowy hook miał nazywać się `useEvent` i zwracać funkcję o stałej referencji. We wnętrzu hooka stan zawsze miał odpowiadać aktualnemu stanowi komponentu. Jak możecie się domyślać, zachowanie to miało skutecznie minimalizować zbędne rendery, na przykład dla funkcji nasłuchujących na kliknięcie przycisku.

function Chat() {
  const [text, setText] = useState('');

  // 🟡 A different function whenever `text` changes
  const onClick = useCallback(() => {
    sendMessage(text);
  }, [text]);

  return <SendButton onClick={onClick} />;
}

function Chat() {
  const [text, setText] = useState('');

  // ✅ Always the same function (even if `text` changes)
  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

Niestety pomimo początkowego optymizmu, `useEvent` nie trafi jednak do Reacta. Jak raportuje Dan Abramov (ten sam, który w 2018 zaprezentował światu hooki), API w obecnej postaci boryka się z kilkoma problemami.

Po pierwsze w obecnej postaci użytkownicy mogą zinterpretować nowy hook jako lepszą wersję `useCallback`. Co za tym idzie pojawić może się chęć, aby po prostu pozbyć się go ze swojego kodu. Oba hooki mają jednak inną rolę, dla obu jest miejsce w React i ich zastosowanie powinno być jasne dla użytkowników.

Po drugie, równolegle do useEvent rozwijany jest kompilator, który umożliwia automatyczną memonizację (więcej o nim możecie dowiedzieć się z tej prezentacji na React Conf 2021), Oba RFC próbują adresować podobne problemy, dlatego równoległa praca nad nimi okazała się zbyt uciążliwa.

Na szczęście fakt, że prace nad RFC useEvent zostały zatrzymane, nie oznacza, że problemy, które próbował rozwiązać nigdy nie zostaną zaadresowane. Jak twierdzą autorzy RFC, jego alternatywa jest już w przygotowaniu i za kilka tygodni lub miesięcy powinna ona ujrzeć światło dzienne.

Źródła:

https://github.com/reactjs/rfcs/pull/220#issuecomment-1259938816

4. Po 8 latach wreszcie doczekaliśmy się axios 1.0

Axios to jedna z najpopularniejszych klientów HTTP zarówno dla przeglądarek jak i Node.js. Pomimo, że czasy kiedy korzystać musieliśmy z `XMLHttpRequest` mamy już dawno za sobą, a dużo przystępniejsze Fetch API wspierane jest przez wszystkie znaczące środowiska, popularność biblioteki nie maleje. Na GitHubie zgromadziła ona już prawie 100 tysięcy gwiazdek, a tylko w ostatnim tygodniu z npm pobraną ją ponad 32 miliony razy. Aż cięźko uwierzyć, że tak popularna biblioteka dopiero teraz doczekałą się stabilnego API i wersji 1.0.

Jeśli zastanawiacie się, co nowego wprowadza axios 1.0 to już śpieszę z odpowiedzią – niewiele. Nowości to przede wszystkim usprawnienia w systemie typowania i garść bugfixów i kilka drobnych zmian w API. Zresztą niczego innego oczekiwać nie można po bibliotece, która spędziła całe 8 lat w wersji beta.

Źródła:

https://github.com/axios/axios/blob/v1.x/CHANGELOG.md

5. TypeScript ma już 10 lat!

Jest kwiecień 2012 roku. Barack Obama właśnie po raz drugi wygrał wybory prezydenckie w Stanach Zjednoczonych, na ekranach kin pojawiają się pierwsi Avengers, a Polacy z wielkimi nadziejami wyczekują nadchodzącego Euro 2012. W tym samym czasie Microsoft prezentuje zupełnie nowy język, będący rozszerzeniem JavaScript o typy podobne do tych znanych z Javy czy C#.

Świętując urodziny TypeScript pamiętajcie, ciastko nie jest prawdziwe

Z dzisiejszej perspektywy może wydawać się, że TypeScript od początku skazany był na sukces. W rzeczywistości, w 2012 roku nie było to takie pewne. Spora część JavaScriptowej społeczności przez lata przyzwyczajona do pełnej swobody odrzucała zalety jakie wnosił TypeScript. Do tego po drugiej strony barykady Google próbował promować swoją alternatywę w postaci Darta, a kilka lat później Facebook wyjdzie ze swoją alternatywą w postaci Flow.

Po 10 latach coraz ciężej znaleźć już krytyków TypeScript. Bez wahania można powiedzieć, że język przebił się do mainstreamu. Od 2019 roku znajduje się on w top 10 najpopularniejszych języków programowania według Stackoverflow Survey, a w ostatniej edycji uplasował się aż na 5 miejscu. O jego wpływie na społeczność JavaScript najlepiej świadczy fakt, że w ankiecie State of JS statyczne typowanie od 2020 roku wybierane jest najbardziej pożądaną funkcjonalnością JavaScript. Społeczność była w tej kwestii na tyle wokalna, że Microsoft przygotował i objął swoim patronatem odpowiednie RFC, która wprowadza typowanie do standardu JavaScript (na razie utkwiło ono w Stage 1, więc zanim trafi ono do standardu przyjdzie nam jeszcze trochę poczekać).

Na zakończenie tej nostalgicznej podróży do przyszłości mała ciekawostka. Czy wiecie, że Google podczas prac na Angular 2 rozwijał równolegle wersję w TypeScript jak i Dart? A czy wiecie, że ze względu na brak wsparcia dla dekoratorów w standardzie TypeScript Google chciał rozwijać i utrzymywać własny fork TypeScript? Na szczęście obie korporacje ostatecznie doszły do porozumienia. Kto wie czy TypeScript byłby tu gdzie jest teraz, gdyby już na początku jego historii doszło do podziału społeczności.

Źródła:

https://devblogs.microsoft.com/typescript/ten-years-of-typescript/

Bonus #1: State of CSS Survey 2022

Ruszyła ankieta State of CSS 2022 i link do niej znajdziecie w źródłach poniżej. Jak co roku, każdemu gorąco polecam poświęcić jej kilka minut. Nawet jeśli nie dlatego, żeby wspomóc społeczność, to dlatego, że jest to świetne źródło, z którego dowiecie się jakie nowe funkcjonalności ominęły Was w ostatnich latach. Na końcu ankiety otrzymacie zarówno procentowe podsumowanie Waszej wiedzy w poszczególnych obszarach jak i zestaw linków, dzięki którym szybko nadrobicie braki.

Źródła:

https://survey.devographics.com/survey/state-of-css/2022

Bonus #2: Wybrano składnię zagnieżdżonych CSS-ów

W lipcu tego roku, Google poprosił społeczność o opinię na temat możliwych składni zagnieżdżonych CSS-ów. W tym tygodniu korporacja z Mountain View podzieliła się ze światem wynikami. Z miażdżącą przewagą wygrała składnia `@nest`.

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

Niestety wyniki ankiety nie przekładają się bezpośrednio na standard CSS. Google zapowiada jednak, że będzie ciężko pracować wraz z CSS Working Group, aby proponowana składnia jak najszybciej trafiła do standardu.

Źródła

https://developer.chrome.com/en/blog/help-css-nesting-results/

Meta tworzy swój fork WebView dla Androida – Frontend Weekly vol. 108

1. Meta stworzyła swoją implementację WebView dla Androida

Źródła:

2. zx 7.1.0 – mały update, duże nowości

Źródła:

3. Nowy hook useEvent wraca na ławkę rezerwowych

Źródła:

4. Po 8 latach wreszcie doczekaliśmy się axios 1.0

Źródła:

5. TypeScript ma już 10 lat!

Źródła:

Bonus #1: State of CSS Survey 2022

Źródła:

Bonus #2: Wybrano składnię zagnieżdżonych CSS-ów

Źródła

Odkryj więcej świetnych treści!