Frontend Thursday (Friday?) vol. 42

1. V8 – Import assertions i JSON modules

Pojawienie się w Chrome 91 import assertions i JSON modules jakimś cudem przemknęło poza naszym radarem. Na szczęście Google w swoim stylu nie omieszkał pochwalić się tą funkcjonalnością w osobnym blogpoście. Całość jest o tyle ciekawa, że nowości te nie przeszły jeszcze w całości procesu grupy TC39, więc oficjalnie nie są częścią specyfikacji JavaScript. Przejdźmy jednak do konkretów i w telegraficznym skrócie przyjrzyjmy się, o co chodzi.

Do tej pory, jeśli chcieliśmy zaimportować plik JSON do naszego kodu (i nie chcieliśmy używać pluginu do Webpacka), to zmuszeni byliśmy opakować go w zmienną i wyeksportować ją z pliku. Od teraz dzięki połączeniu import assertions i JSON modules możliwe będzie importowanie plików JSON do naszego kodu w sposób analogiczny do standardowych importów.

// foo.json
{ "answer": 42 }
// main.mjs
import json from './foo.json' assert { type: 'json' };
console.log(json.answer); // 42

Jeśli zastanawiacie się, dlaczego słowo kluczowe assert jest nam w ogóle potrzebne, to jak zwykle odpowiedzią jest bezpieczeństwo. W teorii cały mechanizm można by oprzeć o MIME Type, ale często importujemy pliki od zewnętrznych dostawców, którzy mogliby podmienić plik na taki, który wykonuje na naszym serwerze swój kod. Dzięki odpowiedniej asercji taki atak skończy się fiaskiem.

Przyglądając się draftowi import assertions, możemy oczekiwać, że wkrótce możliwe będzie importowanie także innych typów plików. Draft na ten moment wspomina o plikach WebAssembly, ale w mojej głowie kłębi się kilka pomysłów, o które można by rozszerzyć ten mechanizm.

Źródła:

https://v8.dev/features/import-assertions

2. Chrome memory inspector

Macie czasem ochotę wsiąść do wehikułu czasu i wybrać się w podróż do czasów studiów, zajęć z Assemblera i mikrokontrolerów? Dzięki inżynierom z Google możecie wybrać się na taką wycieczkę już dziś, bo do Chrome trafił inspektor Memory Inspector umożliwiający analizę pamięci dla ArrayBuffer, TypedArray, DataView i Wasm Memory. W mojej karierze nigdy jeszcze nie pojawiła się potrzeba tak dogłębnej analizy, ale czuję w kościach, że mały promil programistów (zwłaszcza tych korzystających z WASM) jest teraz bardzo wdzięczny ludziom odpowiedzialnym za tę funkcję.

Źródła:

https://developer.chrome.com/blog/memory-inspector/

3. Google przedstawia projekt Aurora

W dzisiejszym przeglądzie chyba każdy punkt w mniejszym lub większym stopniu obraca się wokół Google. Tym razem gigant z Mountain View chwali się projektem o kodowej nazwie Aurora, w ramach którego niewielki zespół będzie współpracować bezpośrednio z twórcami frameworków w celu wprowadzania usprawnień i optymalizacji. Nie jest to zupełnie nowa inicjatywa, bo w ramach dotychczasowych działań wprowadzono już kilka usprawnień do Angulara i Next.js (np. automatyczne inlineowani czcionek w Angularze czy nowy komponent do ładowania obrazów w Next.js). W 2021 możemy spodziewać się jeszcze kilku usprawnień, bo w planach jest praca nad zgodnością najlepszych praktyk wśród wszystkich popularnych frameworków, optymalizacja początkowego ładowania stron i ładowania zewnętrznych skryptów.

Źródła:

https://web.dev/introducing-aurora/

4. Storybook dla Angular 12

Nowy silnik renderowania dla Angulara pojawił się już prawie półtora roku temu (ależ ten czas leci ), ale dopiero teraz doczekaliśmy wersji Storybooka, która będzie wspierać ten silnik (no prawie, bo póki co dostępny jest tylko RC, ale na dniach możemy spodziewać się wersji bez przyrostka). Do nowej wersji trafia też wsparcie dla Webpack 5, z którego korzysta Angular 12. Raczej nie ma tutaj powodów do ekscytacji, ale podrzucamy Wam tę informację, bo być może jesteście tak samo jak my zblokowani z migracją do nowego Angulara właśnie ze względu na problemy z kompatybilnością z Storybookiem.