{"id":9935,"date":"2022-08-05T13:09:07","date_gmt":"2022-08-05T11:09:07","guid":{"rendered":"https:\/\/vived.io\/szybszy-node-js-juz-tu-jest-frontend-weekly-vol-99\/"},"modified":"2022-09-19T13:24:35","modified_gmt":"2022-09-19T11:24:35","slug":"szybszy-node-js-juz-tu-jest-frontend-weekly-vol-99","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/szybszy-node-js-juz-tu-jest-frontend-weekly-vol-99\/","title":{"rendered":"Szybszy Node.js ju\u017c tu jest – Frontend Weekly vol. 99"},"content":{"rendered":"\n

1. Bun – alternatywa typu drop-in dla Node.js i Deno<\/h2>\n\n\n\n

Musz\u0119 przyzna\u0107, \u017ce kiedy informacja o wydaniu Bun po raz pierwszy obieg\u0142a internet \u015bwiadomie postanowi\u0142em j\u0105 zignorowa\u0107. Uzna\u0142em, \u017ce to po prostu kolejny projekt ciekawostka, kt\u00f3ry nie ma szans przebi\u0107 si\u0119 do produkcyjnych aplikacji. Nadal zdania nie zmieni\u0142em (co nie przeszkadza mi trzyma\u0107 za projekt kciuk\u00f3w), ale wok\u00f3\u0142 narz\u0119dzia wyros\u0142o w ostatnich tygodniach tyle artyku\u0142\u00f3w i dyskusji, \u017ce po prostu jestem zmuszony Wam o nim opowiedzie\u0107.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Bun to alternatywa typu drop-in dla Node.js i Deno. O ile Deno sw\u00f3j marketing skupia na rozwi\u0105zywaniu problem\u00f3w Node.js, to Bun stawia nacisk na wydajno\u015b\u0107. Je\u015bli wierzy\u0107 benchmarkom opublikowanym przez autora, to naprawd\u0119 wygl\u0105da to imponuj\u0105co.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Wydajno\u015b\u0107 Buna wynika z dw\u00f3ch czynnik\u00f3w. Po pierwsze w odr\u00f3\u017cnieniu od konkurencji jest on napisany nie w C++, a w j\u0119zyku Zig. Je\u015bli jeszcze o nim nie s\u0142yszeli\u015bcie, to nie macie si\u0119 czym martwi\u0107, bo nadal jest on dosy\u0107 niszow\u0105 alternatyw\u0105 dla C++ i Rust. <\/p>\n\n\n

\n
\"\"
Nie pytajcie mnie w czym Zig jest lepszy ni\u017c Rust. Pr\u00f3bowa\u0142em si\u0119 dowiedzie\u0107, ale poleg\u0142em.<\/figcaption><\/figure><\/div>\n\n\n

Drugim czynnikiem wp\u0142ywaj\u0105cym na wydajno\u015b\u0107 Buna jest wykorzystanie silnika JavaScriptCore od Apple. Pr\u00f3bowa\u0142em znale\u017a\u0107 w sieci benchmarki potwierdzaj\u0105ce to stwierdzenie i niewiele uda\u0142o mi si\u0119 znale\u017a\u0107. Natrafi\u0142em natomiast na film Chris Hey, w kt\u00f3rym por\u00f3wna\u0142 on wydajno\u015b\u0107 Node, Deno i Bun, ale r\u00f3wnie\u017c czystego V8 i JavaScriptCore. Jak si\u0119 okazuje, JavaScriptCore rzeczywi\u015bcie jest szybszy od V8. R\u00f3\u017cnica jest natomiast stosunkowo niewielka i to nie z niej wynikaj\u0105 g\u0142\u00f3wne r\u00f3\u017cnice w wydajno\u015bci mi\u0119dzy Node i Bun.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

W ten oto spos\u00f3b dochodzimy do (moim zdaniem) clue zar\u00f3wno imponuj\u0105cej wydajno\u015bci jak i do powodu dla kt\u00f3rego przed Bun jeszcze d\u0142uga i wyboista droga. Obecnie Bun implementuje oko\u0142o 90% Node API. Jak g\u0142osi jedna ze s\u0142ynnych zasad projekt\u00f3w informatycznych ostatnie 10% pracy kosztuje 80% pracy. Jak g\u0142osi inna zasada projekt\u00f3w informatycznych, cykl \u017cycia biblioteki zaczyna si\u0119 od ma\u0142ego wydajnego projektu, nast\u0119pnie odbudowywany on jest w kolejne zale\u017cno\u015bci, aby ostatecznie sta\u0107 si\u0119 oci\u0119\u017ca\u0142ym i doczeka\u0107 si\u0119 ma\u0142ej i wydajnej alternatywy. Bior\u0105c pod uwag\u0119 te dwie prawdy programistyczne, przed Bun jeszcze d\u0142uga droga na ko\u0144cu kt\u00f3rej benchmarki wydajno\u015bci mog\u0105 wygl\u0105da\u0107 zupe\u0142nie inaczej.<\/p>\n\n\n\n

O tym jak Bun radzi sobie w produkcyjnym \u015brodowisku postanowi\u0142 przekona\u0107 si\u0119 autor kilku ksi\u0105\u017cek na temat Node.js – David Herron. Jak s\u0142usznie zwraca on uwag\u0119, proste benchmarki prawie nigdy nie oddaj\u0105 reali\u00f3w produkcyjnych aplikacji. Dlatego postanowi\u0142 on uruchomi\u0107 rozwijan\u0105 przez siebie bibliotek\u0119 CMS przy u\u017cyciu Buna.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Jak si\u0119 pewnie domy\u015blacie przedsi\u0119wzi\u0119cie zako\u0144czy\u0142o si\u0119 fiaskiem. Brakuj\u0105ce 10% funkcjonalno\u015bci uniemo\u017cliwi\u0142o trywialn\u0105 migracj\u0119. Z sukcesem uda\u0142o si\u0119 natomiast uruchomi\u0107 kilka podmodu\u0142\u00f3w aplikacji. Wyniki okaza\u0142y si\u0119 niejednoznaczne. W cz\u0119\u015bci modu\u0142\u00f3w wydajno\u015b\u0107 znacz\u0105co wzros\u0142a, a w cz\u0119\u015bci w\u0142a\u015bciwie nie uleg\u0142a zmianie.<\/p>\n\n\n\n

\/\/Source: https:\/\/techsparx.com\/nodejs\/bun\/speed-test.html\n$ npm run bench\n\n> bench@1.0.0 bench\n> npm-run-all render:node render:bun\n\n> bench@1.0.0 render:node\n> node render-node.mjs\n\ncpu: Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz\nruntime: node v18.6.0 (x64-linux)\n\nbenchmark            time (avg)             (min \u2026 max)\n-------------------------------------------------------\nliteral          133.73 ns\/iter (119.76 ns \u2026 661.32 ns)\nliquid-join       30.26 \u00b5s\/iter    (18.04 \u00b5s \u2026 3.66 ms)\ncheerio          130.17 \u00b5s\/iter    (78.42 \u00b5s \u2026 5.04 ms)\n\n> bench@1.0.0 render:bun\n> bun render-bun.js\n\ncpu: Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz\nruntime: bun 0.1.4 (x64-linux)\n\nbenchmark                 time (avg)             (min \u2026 max)\n------------------------------------------------------------\nliteral               129.64 ns\/iter (107.87 ns \u2026 534.11 ns)\nliquid-list           125.84 \u00b5s\/iter    (87.41 \u00b5s \u2026 2.12 ms)\ncheerio                68.81 \u00b5s\/iter    (43.25 \u00b5s \u2026 2.09 ms)<\/code><\/pre>\n\n\n
\n
\"\"
Pierwsze benchmarki Davida Gerron, kt\u00f3re rozesz\u0142y si\u0119 po sieci, wskazywa\u0142y na prawie identyczn\u0105 wydajno\u015b\u0107 Node.js i Bun. Jak si\u0119 potem okaza\u0142o, ze wzgl\u0119du na bug w interpretacji hashbang przez Bun, wszystkie testy by\u0142y odpalane na Node.js <\/figcaption><\/figure><\/div>\n\n\n
David Gerron w swoim blogpo\u015bcie zwraca r\u00f3wnie\u017c uwag\u0119 na konsekwencje dla ca\u0142ego \u015brodowiska jakie mo\u017ce przynie\u015b\u0107 rozw\u00f3j Buna. W ekosystemie Javy rozwijanych jest wiele implementacji JVM, a do weryfikacji ich kompatybilno\u015bci wykorzystywany jest zestaw test\u00f3w nazywanych TCK. Do tej pory nie doczekali\u015bmy si\u0119 odpowiednika takich test\u00f3w dla Node, ale z du\u017cym prawdopodobie\u0144stwem testy tworzone na potrzeby Buna b\u0119d\u0105 \u015bwietnym zal\u0105\u017ckiem do dalszej pracy. Kto wie, mo\u017ce za kilka lat w \u015brodowisku Node.js b\u0119dziemy mie\u0107 tak\u0105 sam\u0105 r\u00f3\u017cnorodno\u015b\u0107 \u015brodowisk uruchomieniowych z jak\u0105 mamy do czynienia teraz w Javie.<\/p>\n\n\n\n
Mam wra\u017cenie, \u017ce agresywny marketing wok\u00f3\u0142 wydajno\u015bci odbi\u0142 si\u0119 Bun troch\u0119 czkawk\u0105. Pod przykrywk\u0105 alternatywy dla Node.js wprowadza on bowiem ca\u0142kiem sporo usprawnie\u0144. Podobnie jak w przypadku Deno, TypeScript jest natywnie wspieranym j\u0119zykiem. Bun jest te\u017c alternatyw\u0105 dla NPM, kt\u00f3ra jest nawet do 100x szybsza. To sprawia, \u017ce bez problemu mo\u017ce stawa\u0107 w szranki chocia\u017cby z pnpm. Bun udost\u0119pnia  te\u017c API do tworzenia makr, czyli kodu generowanego podczas kompilacji z dost\u0119pem do drzewa AST i metadanych typ\u00f3w. Do pakowania aplikacji Bun wykorzystuje niesamowicie szybkiego esbuild skompilowanego przy u\u017cyciu Ziga. Szczerze m\u00f3wi\u0105c ,wszystkie te funkcjonalno\u015bci brzmi\u0105 du\u017co ciekawiej ni\u017c pusty slogan: szybszy Node.js.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/bun.sh\/<\/a>
https:\/\/techsparx.com\/nodejs\/bun\/1st-trial.html<\/a>
https:\/\/techsparx.com\/nodejs\/bun\/speed-test.html<\/a>
https:\/\/www.lunasec.io\/docs\/blog\/bun-first-look\/<\/a>
https:\/\/www.youtube.com\/watch?v=8wTulvlllGQ<\/a><\/p>\n\n\n\n
2. Discord na Androidzie zosta\u0142 przepisany do React Native<\/h2>\n\n\n\n
W minionym tygodniu Discord og\u0142osi\u0142, \u017ce ich aplikacja na Androida zosta\u0142a przepisana do React Native. Do tej pory wersja komunikatora dla systemu Android by\u0142a t\u0105, kt\u00f3ra pod wzgl\u0119dem funkcjonalno\u015bci pozostawa\u0142a w tyle. Dzi\u0119ki migracji do React Native niezale\u017cnie od urz\u0105dzenia, u\u017cytkownicy wreszcie b\u0119d\u0105 mogli cieszy\u0107 si\u0119 sp\u00f3jnym do\u015bwiadczeniem.<\/p>\n\n\n\n
Decyzja o migracji zosta\u0142a podj\u0119ta przede wszystkim ze wzgl\u0119du na potencjaln\u0105 mo\u017cliwo\u015b\u0107 wsp\u00f3\u0142dzielenia sporej cz\u0119\u015bci kodu pomi\u0119dzy r\u00f3\u017cnymi wersjami aplikacji. Wersja Discord na iOS u\u017cywa React Native w\u0142a\u015bciwie od pierwszego wydania tego narz\u0119dzia. Wersja desktopowa jest aplikacj\u0105 webow\u0105 zapakowan\u0105 w Electrona. Oznacza to, \u017ce wszystkie wersje Discorda oparte s\u0105 aktualnie o JavaScript.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Na koniec warto podkre\u015bli\u0107 jeszcze, \u017ce zesp\u00f3\u0142 Discorda nie zdecydowa\u0142 si\u0119 ca\u0142kowicie uwsp\u00f3lni\u0107 aplikacji na iOS i Androida. Taka architektura ma pozwoli\u0107 na optymalne wykorzystanie mo\u017cliwo\u015bci jakie daje konkretny system operacyjny.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/discord.com\/blog\/android-react-native-framework-update<\/a>
https:\/\/www.theverge.com\/2022\/8\/1\/23286860\/discord-react-native-android-new-app-ios-new-updates-features<\/a><\/p>\n\n\n\n
3. Lepsza enkapsulacja `transform` dost\u0119pna ju\u017c we wszystkich przegl\u0105darkach<\/h2>\n\n\n\n
Wydany pocz\u0105tkiem miesi\u0105ca Chrome 104 dostarczy\u0142 funkcjonalno\u015b\u0107 umo\u017cliwiaj\u0105c\u0105 rozdzielenie jednego `transform` na 3 osobne w\u0142a\u015bciwo\u015bci – `scale`, `rotate` i `translate`. Tym samym funkcjonalno\u015b\u0107 ta dost\u0119pna jest ju\u017c we wszystkich popularnych przegl\u0105darkach i bez obaw mo\u017cemy zacz\u0105\u0107 u\u017cywa\u0107 jej w naszych aplikacjach.<\/p>\n\n\n\n
Z nowej funkcjonalno\u015bci skorzystamy przede wszystkim przy tworzeniu animacji. Do tej pory je\u015bli chcieli\u015bmy do animacji wykorzysta\u0107 kilka w\u0142a\u015bciwo\u015bci to nale\u017ca\u0142o wyliczy\u0107 ich stan we wszystkich klatkach kluczowych. Teraz dzi\u0119ki mo\u017cliwo\u015bci rozdzielenia w\u0142a\u015bciwo\u015bci wymagane b\u0119dzie zadeklarowanie tylko tych, kt\u00f3re podlega\u0107 b\u0119d\u0105 zmianie. Je\u015bli t\u0142umacz\u0119 to zbyt zawile, to przyk\u0142ad poni\u017cej powinien rozwia\u0107 Wasze w\u0105tpliwo\u015bci.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
\/* Old syntax *\/\n@keyframes anim {\n  0% { transform: translateX(0%); }\n  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }\n  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }\n  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }\n  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }\n  100% { transform: translateX(100%) rotate(360deg); }\n}\n\n.target {\n  animation: anim 2s;\n  animation-fill-mode: forwards;\n}<\/code><\/pre>\n\n\n\n
\/* New syntax *\/\n@keyframes anim {\n  0% { translate: 0% 0; }\n  100% { translate: 100% 0; }\n\n  0%, 100% { scale: 1; }\n  5%, 95% { scale: 1.2; }\n\n  0% { rotate: 0deg; }\n  10%, 90% { rotate: 180deg; }\n  100% { rotate: 360deg; }\n}\n\n.target {\n  animation: anim 2s;\n  animation-fill-mode: forwards;\n}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/web.dev\/css-individual-transform-properties\/<\/a><\/p>\n\n\n\n
4. Docusaurus 2.0<\/h2>\n\n\n\n
Docusaurus to narz\u0119dzie do tworzenia rozbudowanych dokumentacji.O ile o samym projekcie mogli\u015bcie do tej pory nie s\u0142ysze\u0107, to na pewno mieli\u015bcie ju\u017c okazj\u0119 korzysta\u0107 z opartych o niego stron. W\u015br\u00f3d najpopularniejszych bibliotek wykorzystuj\u0105cych Docusaurus znajdziemy bowiem mi\u0119dzy innymi  Prettiera, Babela, React Native czy Ionica.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
W minionym tygodniu po 4 latach rozwoju wreszcie doczekali\u015bmy si\u0119 kolejnej wersji narz\u0119dzia oznaczonej numerkiem 2.0. W\u015br\u00f3d nowo\u015bci znajdziemy mi\u0119dzy innymi:<\/p>\n\n\n\n