typeofweb x michalczukm #23 | server-driven UI wraca oknem
Siema!
Poniżej to ja podczas próby napisania newslettera we wtorek wieczorem. Jak widzicie - nie udało się, zostałem pokonany przez grawitację.
Zatem z 1 dniową obsuwą zapraszam was na kolejne wydanie newslettera gdzie piszę o tym jak server-driven UI wraca na tapet, kolejni bad-actors chcą dobrać się do naszych danych przez npm supply chain ataki a szaleni ludzie uruchamiają JS w Pythonie. Enjoy!
🧑💻 Michał Michalczuk | michalczukm.xyz
Kolejny npm supply chain atak prze Lazarus Group
Ostatnio pisałem o serii artykułów “State Of Npm 2023” popełnionych przez Sandworm z którego wynikało że ok 500 000 nowych pakietów to spam.
Spam to jedno. Część z nich to złośliwy kod, który chce się dobrać do waszych danych. Nihil novi, ale schemat ataku grupy Lazarus odkryty przez badaczy jest błyskotliwy (niech będzie - złowieszczo błyszczący). A opis znajdziecie na blogu Socket.
Targetem byli badacze bezpieczeństwa, oraz ludzie pracujący z krypto i blockchainem.
A jak to wyglądało.
1. Socjotechnika
Klasyczek. Atakujący podszywali się pod rekruterów, badaczy security, lub developerów szukających pomocy lub chcących pomóc przy projektach.
Kontaktowali się przez GitHub, LinkedIn, Slack czy Telegram a celem było zaproszenie do pracy nad projektem na GitHub’ie, który zawierał w zależnościach pakiety npm z malware.
2. Uruchomienie kodu
Gdy cel pobrał repo i zainstalował zależności podczas uruchomienia projektu złośliwe pakiety działały w tandemie.
Pierwsza z zależności pobierała token potrzebny do uruchomienia drugiej. Dobrym przykładem jest pakiet tslib-reac
Następnie ta sama paczka (lub inna w zależności od schematu) odczytywała zapisany wcześniej token i z jego pomocą pobierała skrypt i wykonywała go.
Makao i po makale.
Artykuł wymienia 24 pakiety npm które brały udział w atakach. Najbardziej urzekła mnie paczka snykaudit-helper, która podszywa się pod kod pracujący z narzędziem security jakim jest snyk 🥲
Przy okazji Socket dostał ostatnio $20M finansowania serii A od Andreessen Horowitz. Brawo oni!
Server-driven UI, znowu czuje się jak w 2010
Yoav Ganbar
Zawsze jak słyszę hasło server-driven UI mam przed oczami bardziej deklaratywną wersję Vaadin 😀 To chyba PTSD, chociaż sam miałem okazję pracować z takimi rozwiązaniami również w JS i działało to bardzo rozsądnie.
Ale ale, o co chodzi. Server-driven UI to dynamiczny sposób sterowania UI, który dostaje użytkownik dosłownie z poziomu back-end’u.
💻 Klient dostaje obiekt JSON z drzewem komponentów do zbudowania i wyświetlenia. Brzmi jak mieszanie odpowiedzialności i zbędne budowanie complexity w aplikacjach webowych, ale zanim z krzykiem zamkniecie ten newsletter pomyślcie o zastosowaniu tego w aplikacjach mobilnych. Wykorzystuje to między innymi Instagram, Lyft, Airbnb czy Allegro (mają własny rendering tool MBox, pozdrawiam!)
Aplikacje mobilne mają o wiele dłuższy release cycle niż klienci web, ponieważ użytkownik musi pobrać naszą aktualizację z AppStore/PlayStore/InnyStore.
I krytyczny bug który uniemożliwia zarabianie lub użytkowanie naszej aplikacji musi grzecznie poczekać na to aż user zaktualizuję aplikacje. W między czasie może zdążyć ją odinstalować z “co to za 💩” na ustach.
Wprowadzając takie rozwiązania jak server-driven UI skracamy ten loop do minimum, bo klient dostaje na bierząco kształt UI do wyświetlenia.
🛣️ Nie jest to lekka droga. Poza zmianą mental modelu wytwarzania aplikacji i rozwiązania tego technicznie mamy jeszcze guidelines sklepów z aplikacjami które musimy spełniać które nie przepadają za takimi dynamicznymi rozwiązaniami podczas audytów.
W artykule znajdziecie więcej szczegółów oraz live z inżynierem Instagram (wł. Meta), który opowiada jak oni to robią.
Odszyfrowując payload React Server Components
Poprzedni wpis o server-driven UI to idealny wstęp do tego newsa. Jeśli mieliście okazję korzystać już z RSC (React Server Components) i zaglądaliście w zakładkę network aby sprawdzić czy wasz komponent został poprawnie ze-streamowany do klienta to mogła was uderzyć hmm … niska czytelność “wire format”.
Jeśli otworzycie DevToolsy i network na podlinkowanym blogu → przenawigujcie na inną stronę a dostaniecie stream komponentu jak poniżej.
Alternatywnie tutaj możecie się pobawić innym przykładem - demo na Stackblitz.
Jak narazie brak toolingu który wspomógłby nam w debugowaniu i optymalizacji RSC nie pomaga. Ale Alvar Lagerlöf stworzył
i pracuje nad rozszerzeniem do chroma, które oszczędzi nam copy-paste i zwiększy DX pracy z RSC ❤️
Trzymam kciuki! W artykule znajdziecie więcej szczegółów o tym jak autor odszyfrował “wire format”.
Przed Next13 Masters
Michał Miszczyszyn i Jakuba "Zaiste" Neander w ramach startu NEXT13 MASTERS odpalają kolejne live.
Nie jeden, nie dwa, a trzy (to brzmi cheesy, ale wiecie o co chodzi 😀 )
- 17 SIERPNIA | 20:00-21:30 - Zoptymalizuj wydajność, popraw SEO i zwiększ konwersję
- 22 SIERPNIA | 20:00-21:30 - Dlaczego Next.js wyprzedza swoją epokę? 5 najważniejszych różnic między Next.js 13 a innymi narzędziami
- 29 SIERPNIA | 20:00-21:30 - Czego nauczyliśmy się przez 10+ lat jako full stack developerzy?
Na wszystkie wydarzenia możecie zapisać się na stronie. Do zobaczenia!
Omijanie blokad anti-debugging
Jeśli mieliście kiedyś okazję debugować w przeglądarce kod 3rd party, do którego nie macie dostępu wiecie jak wspaniała to zabawa.
Być może próbowaliście robić reverse engineering [which is potential illegal 💩] i wpadliście na zabezpieczenia przeciwko debuggowaniu jak ciągłe zatrzymywanie się na debugger;
Dlaczego do ominięcia tego autor zbudował customową wersję Firefox’a 😮 - szczegóły w tekście.
PythonMonkey 🐍 ❤️ 🐵
Will Pringle
🌴 Kącik egzotyczny na dzisiaj.
PythonMonkey to kolejne podejście (w artykule znajdziecie pokrewne projekty) na stworzenie interop’u pomiędzy Python’em a JavaScript.
Zatem możemy uruchomić kod JavaScript w Python’ie
async def someAsyncStuff():
two_sec_promise = pythonmonkey.eval("""
new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
""")
print("before calling the 2 second timer")
await two_sec_promise
print("two seconds have now passed")
To rozwiązanie jest unikatowe z paru powodów:
- Działamy w event-loop, mamy mikrotaski więc można używać Promises w kodzie JS ❤️
- Wykorzystuje SpiderMonkey, silnik JS od Mozilla
- Z pythona można odpalić kod kod w WebAssembly wykonywany z SpiderMonkey (i to jeszcze z Promises!)
Poza uruchamianiem JS w Pythonie, możemy też uruchomić kod Python w JS. PythonMonkey przychodzi z PMJS który to umożliwia.
const { getStringLength } = require('./my-python-module');
function printStringLength(s) {
console.log(`String: "${s}" has a length of ${getStringLength(s)}`);
}
module.exports = { printStringLength, };
Jakie mamy zastosowania? You name it - oba środowiska mają swoje unikatowe zalety oraz ekosystem pakietów który może nam pomóc.
Autorzy wskazują jeszcze inny case - jeśli chcemy aby nasze rozwiązało działało zarówno w Pythonie jak i JS (SDK, biblioteka, etc) zamiast tworzyć adaptery lub implementować to samo rozwiązanie w wielu językach możemy wykorzystać PythonMonkey i napisać binding.
🌴 Koniec kącika egzotycznego na dzisiaj.
CFP na 4Developers Gdańsk do 14.08
Wydłużyliśmy o tydzień termin CFP na gdańską edycje 4Developers.
Ja (Michał Michalczuk) wraz z Bartkiem Cytrowskim opiekujemy się ścieżką JavaScript, nie krępujcie się i nawrzucajcie nam … tematów 😎 Więcej - o tym kogo szukamy na stronie.
Oraz wpadajcie na konferencje! Do zobaczenia 👋
dnt - Deno to Node transform
Aby opublikować pakiet na npm który będzie szeroko używany powinien być opublikowany jako ESM, CommonJS, z typami TypeScript, działać w Node.js, Deno i przeglądarce (jeśli zasadne).
Dodaje to 👷♂️ pracy i złożoności do procesu budowania.
Deno możemy wydało dnt który zrobi za nas tą robotę jeśli napiszemy kod w… Deno. To kolejna cegiełka do zwiększenia adopcji Deno przez możliwość połączenia go z ekosystemem Node.js i npm.
react-tweet = 16kb bez layout shift
Vercel
Embeddowanie tweetów (chyba wciąż się tak nazywają 🤔) na stronie wiązało się z pobraniem ~550kb JavaScript’u w iframe który ładujemy na stronę. Dodatkowo dostawaliśmy layout shift, który nie poprawiał wrażenia. Sprawdźcie na https://publish.twitter.com.
Vercel wydał react-tweet, który rozwiązuje te problemy dostarczając własne komponenty UI do wyświetlenia treści oraz fetchuje zawartość tweeta bez logowania się do ich API.
Aby pobrać treść tweeta korzystają z CDN twittera - https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/api/get-tweet.ts
Doceniam to obejście 🙂
Tailwind connect
W lipcu Tailwind zorganizował pierwsze spotkanie in-person, które miało być małym meetupem a wyszło z tego spotkanie na 200 osób i poziom realizacji którego nie powstydziła by się poważna konferencja. Tak wyszło.
Jak na “ot taki meetup” padło tam sporo konkretnych ogłoszeń.
- Oxide to nowy silnik Tailwind CSS, który wykorzystuje Lightning CSS - all-in-one parser/bundler/minifikator w Rust’cie stworzony i wykorzystywany w Parcel’u. Oxide ma wyjść w Tailwind v3.4 i poza uproszczeniem konfiguracji ma przynieść skrócenie czasu budowania projektu o 50%
- Catalyst to zestaw komponentów React, który chce się porozpychać na rynku bibliotek komponentów. Jego przewagą ma być pełna komponowalność
Spotkanie otwiera keynote Adama Watchman’a, który opowiada jak Tailwind z małego projektu urósł do rozwiązania które zjadło rynek i aktualnie ma 25M pobrań miesięcznie 😲
Generator palet kolorów do Tailwind
Pozostając w temacie Tailwind’a. Małe i przydatne narzędzie do wygenerowania palet kolorów.
To tyle na dzisiaj, do przeczytania za 2 tygodnie 👋
Stopka
Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!
