{"id":10176,"date":"2021-02-25T09:30:00","date_gmt":"2021-02-25T08:30:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-26\/"},"modified":"2022-09-19T13:16:45","modified_gmt":"2022-09-19T11:16:45","slug":"frontend-thursday-vol-26","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/","title":{"rendered":"Frontend Thursday vol. 26"},"content":{"rendered":"<h1 id=\"1-typescript-4-2\">1. Typescript 4.2<\/h1>\n<p>W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich <s>frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w<\/s> TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym momencie o C# to znaczy, \u017ce nie p\u0142ynie w Was czysta frontendowa krew!). Mamy do czynienia z minor release, wi\u0119c nie nale\u017cy oczekiwa\u0107 rewolucji, a raczej ma\u0142ych usprawnie\u0144. Je\u015bli macie wi\u0119cej czasu, to koniecznie przeczytajcie ca\u0142y artyku\u0142 zamieszczony w \u017ar\u00f3d\u0142ach, bo Microsoft jak zwykle zadba\u0142 o to, \u017ceby \u015bwietnie wyt\u0142umaczy\u0107 i zakomunikowa\u0107, co nowego. Dla tych, kt\u00f3rzy nie maj\u0105 czasu i \u0142akn\u0105 wiedzy tu i teraz postaram si\u0119 stre\u015bci\u0107 najwa\u017cniejsze moim zdaniem zmiany.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Frontend Deweloperzy widz\u0105c now\u0105 wersj\u0119 TypeScriptu<\/figcaption><\/figure>\n<p>Zacznijmy od dw\u00f3ch zmian w inferowaniu typ\u00f3w. Pierwsza z nich, to poprawa wnioskowania typ\u00f3w, kt\u00f3ra powinna znacz\u0105co poprawi\u0107 czytelno\u015b\u0107 (ci\u0119\u017cko to zwi\u0119\u017ale wyt\u0142umaczy\u0107, wi\u0119c najlepiej zerknijcie na przyk\u0142ad zamieszczony poni\u017cej). Druga zmiana to rozwini\u0119cie krotek (uwielbiam to spolszczenie od `Tuple`), umo\u017cliwiaj\u0105ce zdefiniowanie typu \u2018reszty\u2019 element\u00f3w w tablice. Wspomniana reszta mo\u017ce znajdowa\u0107 si\u0119 na pocz\u0105tku, w \u015brodku lub na ko\u0144cu tabeli, ale krotka mo\u017ce posiada\u0107 tylko jedn\u0105 \u2018reszt\u0119\u2019.<\/p>\n<p><!--kg-card-begin: markdown--><\/p>\n<pre><code>type BasicPrimitive = number | string | boolean;\n\/\/ In Typescript 4.1 inferred return type was number | string | boolean | undefined\n\/\/ In Typescript 4.2 infers return type BasicPrimitive | undefined\nexport function doStuff(value: BasicPrimitive) {\n    if (Math.random() &lt; 0.5) {\n        return undefined;\n    }\n    return x;\n}\n<\/code><\/pre>\n<p><!--kg-card-end: markdown--><!--kg-card-begin: markdown--><\/p>\n<pre><code>let bar: [boolean, ...string[], boolean];\nbar = [true, false];\nbar = [true, &quot;some text&quot;, false];\nbar = [true, &quot;some&quot;, &quot;separated&quot;, &quot;text&quot;, false];\n<\/code><\/pre>\n<p><!--kg-card-end: markdown--><\/p>\n<p>Kolejn\u0105 interesuj\u0105c\u0105 zmian\u0105, jest \u00a0umo\u017cliwienie zadeklarowania funkcji b\u0119d\u0105cej konstruktorem abstrakcyjnej klasy lub interfejsu. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce do tej pory taka deklaracja nie by\u0142a mo\u017cliwa.<\/p>\n<p><!--kg-card-begin: markdown--><\/p>\n<pre><code>abstract class Shape {\n    abstract getArea(): number;\n}\ninterface HasArea {\n    getArea(): number;\n}\n\/\/ Not Works! :(\nlet Ctor: new () =&gt; HasArea = Shape;\n\/\/ Works! :D\nlet Ctor: abstract new () =&gt; HasArea = Shape;\n<\/code><\/pre>\n<p><!--kg-card-end: markdown--><\/p>\n<p>Na zako\u0144czenie tematu (oczywi\u015bcie nie wyczerpa\u0142em ca\u0142ej listy zmian, ale po wi\u0119cej odsy\u0142am Was do \u017ar\u00f3d\u0142a) chcia\u0142em podzieli\u0107 si\u0119 z Wami now\u0105 flag\u0105 do kompilatora tsc. Po dodaniu `&#8211;explainFiles`, kompilator postara si\u0119 wyt\u0142umaczy\u0107 nam, dlaczego plik znalaz\u0142 si\u0119 w wynikowym bundlu. Brzmi interesuj\u0105co i na pewno nie raz przyda si\u0119 w debugowaniu skomplikowanych zale\u017cno\u015bci.<\/p>\n<p><!--kg-card-begin: markdown--><\/p>\n<pre><code>$ tsc --explainFiles &gt; expanation.txt\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es5.d.ts\n  Library referenced via &#039;es5&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts\n  Library referenced via &#039;es2015&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts\n  Library referenced via &#039;es2016&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts\n  Library referenced via &#039;es2017&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts\n  Library referenced via &#039;es2018&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts\n  Library referenced via &#039;es2019&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts\n  Library referenced via &#039;es2020&#039; from file &#039;TS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts&#039;\nTS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts\n  Library &#039;lib.esnext.d.ts&#039; specified in compilerOptions\n... More Library References...\nfoo.ts\n  Matched by include pattern &#039;**\/*&#039; in &#039;tsconfig.json&#039;\n<\/code><\/pre>\n<p><!--kg-card-end: markdown--><\/p>\n<p>Czy Vived b\u0119dzie wkr\u00f3tce korzysta\u0142 z TypeScriptu w wersji 4.2? Prawdopodobnie tak, ale wynika to bardziej z naszego zami\u0142owania do korzystania ze wszystkiego co najnowsze, ni\u017c z obecno\u015bci kt\u00f3rejkolwiek z nowych funkcjonalno\u015bci. Nie zdziwi\u0119 si\u0119 natomiast, je\u015bli TypeScript 4.2 przejdzie dla wielu niezauwa\u017cenie i nie traktuj\u0119 tego jednak jako wad\u0119. Powolna ewolucja to dobra droga dla dojrza\u0142ego j\u0119zyka, jakim jest ju\u017c od dawna TypeScript.<\/p>\n<h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/<\/a><\/p>\n<h1 id=\"2-vite-2-0\">2. Vite 2.0<\/h1>\n<p>Zesz\u0142y tydzie\u0144 obfitowa\u0142 w nowo\u015bci, bo opr\u00f3cz nowego TypeScriptu, ukaza\u0142a si\u0119 te\u017c nowa wersja Vite. Do tej pory mogli\u015bcie kojarzy\u0107 to narz\u0119dzie przede wszystkim z budowaniem aplikacji korzystaj\u0105cych z Vue, ale z now\u0105 wersj\u0105 otwiera si\u0119 ono te\u017c na inne biblioteki i frameworki.<\/p>\n<p>Przyznam, \u017ce z ciekawo\u015bci\u0105 \u015bledzi\u0142em twitty Evana You (tw\u00f3rcy Vue, kt\u00f3ry stoi r\u00f3wnie\u017c za Vite), pokazuj\u0105ce Vite w akcji. Natychmiastowy start serwera deweloperskiego i niesamowicie szybki HMR brzmi\u0105 jak mokry sen wi\u0119kszo\u015bci z deweloper\u00f3w. W ostatecznym rozrachunku nie mog\u0142em si\u0119 oprze\u0107, \u017ce gdzie\u015b ju\u017c s\u0142ysza\u0142em te wszystkie zapewnienia\u2026<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf599f2c.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure>\n<p>Niespe\u0142na kilka tygodni temu dzieli\u0142am si\u0119 z Wami informacj\u0105 o pojawieniu si\u0119 Snowpack v3 i je\u015bli si\u0119gni\u0119cie w dalekie zakamarki swojej pami\u0119ci (albo wr\u00f3cicie tutaj), to przypomnicie sobie, \u017ce obietnice by\u0142y podobne. Czy\u017cby Evan You stworzy\u0142 narz\u0119dzie, kt\u00f3re dost\u0119pne jest ju\u017c na rynku? Detektyw, kt\u00f3ry si\u0119 we mnie obudzi\u0142 nie m\u00f3g\u0142 zostawi\u0107 tego pytania bez odpowiedzi.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf66acb1.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure>\n<p>Po burzliwym \u015bledztwie uda\u0142o mi si\u0119 ustali\u0107 fakty i zmuszony jestem oczy\u015bci\u0107 Evan You ze stawianych mu zarzut\u00f3w. Podobna wydajno\u015b\u0107 i zbi\u00f3r funkcji obu narz\u0119dzi wynika z zastosowania pod spodem esbuild, kt\u00f3ry odpowiedzialny jest za wi\u0119kszo\u015b\u0107 efektu wow. Je\u015bli zastanawia Was natomiast, dlaczego ten diabe\u0142 dzia\u0142a tak szybko, to dzieje si\u0119 to za spraw\u0105 zastosowania wielow\u0105tkowego go (kt\u00f3ry bije w wydajnoi\u015bci JavaScript) i wykorzystania esmodules. Jaka jest wi\u0119c r\u00f3\u017cnica mi\u0119dzy Snowpackiem i Vite? <s>Ten pierwszy korzysta z Webpacka\/Parcela, a ten drugi z Rollupa<\/s>*. Je\u015bli wierzy\u0107 obietnicom, pisanie Plugin\u00f3w to Vite powinno by\u0107 te\u017c prostsze ni\u017c do Snowpacka, ale tutaj opieramy si\u0119 na razie tylko na s\u0142owie samego tw\u00f3rcy.<\/p>\n<p>\u015aledztwo zako\u0144czone, sprawa rozwi\u0105zana. Zar\u00f3wno Vite jak i Snowpack oferuj\u0105 wydajno\u015b\u0107 niepor\u00f3wnywaln\u0105 z innymi narz\u0119dziami obecnymi aktualnie na rynku. Ja tymczasem wracam do budowania Angulara i mam subiektywne wra\u017cenie, \u017ce ca\u0142y proces spowolni\u0142 si\u0119, co najmniej kilkukrotnie od kiedy zacz\u0105\u0142em swoje ma\u0142e \u015bledztwo\u2026<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf798f67.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Tw\u00f3rca Frontendowego Czwartku czekaj\u0105cy na uruchomienie si\u0119 serwera deweloperskiego Angulara<\/figcaption><\/figure>\n<h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a\">https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a<\/a><\/p>\n<p>*- Jak s\u0142usznie wytkni\u0119to mi na <a href=\"https:\/\/www.facebook.com\/groups\/217169631654737\/\">facebookowej grupie JS News<\/a> (gor\u0105co zapraszam je\u015bli bo zda\u017caj\u0105 si\u0119 tam ciekawe dyskusje) min\u0105\u0142em si\u0119 tutaj troch\u0119 z prawd\u0105  Snowpack pozwala wybra\u0107 budnler przez dobranie pluginu (aktualnie wspierany jest webpack i Rollup, nie ma natomiast wsparcia dla Parcela). Vite jest natomiast \u015bci\u015ble powi\u0105zany z Rollupem przez co ma oferowa\u0107 wydajno\u015b\u0107 i optymalizacj\u0119 out-of-the box oraz lepsze wsparcie dla Plugin\u00f3w.<\/p>\n<h1 id=\"3-benchmark-of-webassembly-runtimes\">3. Benchmark of WebAssembly runtimes<\/h1>\n<p>Na koniec dzisiejszego podsumowania mam co\u015b dla wszystkich, kt\u00f3rzy zd\u0105\u017cyli st\u0119skni\u0107 si\u0119 za tabelkami i wykresami. Tw\u00f3rca Libsodium (biblioteki do szyfrowania) postanowi\u0142 wykorzysta\u0107 swoj\u0105 prac\u0119 do sprawdzenia wydajno\u015bci r\u00f3\u017cnych \u015brodowisk uruchomieniowych WebAssembly. Je\u015bli nie siedzicie w temacie, to raport mo\u017ce okaza\u0107 si\u0119 dla Was troch\u0119 zbyt suchy, ale wnioski powinny ju\u017c zaciekawi\u0107 wszystkich.<\/p>\n<p>W tej edycji testu wszystkie implementacje poradzi\u0142y sobie poprawnie z wykonaniem kodu. Nie uda\u0142o mi si\u0119 znale\u017a\u0107 poprzednich edycji, ale powo\u0142uj\u0105c si\u0119 na s\u0142owa autora, jeszcze nie tak dawno nie by\u0142o to oczywiste. Oznacza to, \u017ce WebAssembly powoli osi\u0105ga dojrza\u0142o\u015b\u0107.<\/p>\n<p>Drugi ciekawy wniosek to rekomendacja Node.js jako domy\u015blnego \u015brodowiska. Wsparcie dla WebAssembly jest tam, co prawda nadal eksperymentalne, ale NodeJs w\u0142a\u015bciwie we wszystkich kategoriach uplasowa\u0142 si\u0119 tu\u017c za czo\u0142\u00f3wk\u0105. Ciekawe, czy wyj\u015bcie z fazy experimental wypchnie Nodea na pierwsze miejsce\u2026<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf83c4dc.png\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>\u015awiat gdyby w sieci standardem by\u0142 WebAssembly<\/figcaption><\/figure>\n<h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1\">https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Typescript 4.2 W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10176","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"6"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 26 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 26 - Vived\" \/>\n<meta property=\"og:description\" content=\"1. Typescript 4.2 W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-25T08:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 26\",\"datePublished\":\"2021-02-25T08:30:00+00:00\",\"dateModified\":\"2022-09-19T11:16:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\"},\"wordCount\":1068,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\",\"name\":\"Frontend Thursday vol. 26 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\",\"datePublished\":\"2021-02-25T08:30:00+00:00\",\"dateModified\":\"2022-09-19T11:16:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 26\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 26 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 26 - Vived","og_description":"1. Typescript 4.2 W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym [&hellip;]","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/","og_site_name":"Vived","article_published_time":"2021-02-25T08:30:00+00:00","article_modified_time":"2022-09-19T11:16:45+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif","type":"","width":"","height":""}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 26","datePublished":"2021-02-25T08:30:00+00:00","dateModified":"2022-09-19T11:16:45+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/"},"wordCount":1068,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/","name":"Frontend Thursday vol. 26 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif","datePublished":"2021-02-25T08:30:00+00:00","dateModified":"2022-09-19T11:16:45+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-26\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 26"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"<h1 id=\"1-typescript-4-2\">1. Typescript 4.2<\/h1><p>W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich <s>frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w<\/s> TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym momencie o C# to znaczy, \u017ce nie p\u0142ynie w Was czysta frontendowa krew!). Mamy do czynienia z minor release, wi\u0119c nie nale\u017cy oczekiwa\u0107 rewolucji, a raczej ma\u0142ych usprawnie\u0144. Je\u015bli macie wi\u0119cej czasu, to koniecznie przeczytajcie ca\u0142y artyku\u0142 zamieszczony w \u017ar\u00f3d\u0142ach, bo Microsoft jak zwykle zadba\u0142 o to, \u017ceby \u015bwietnie wyt\u0142umaczy\u0107 i zakomunikowa\u0107, co nowego. Dla tych, kt\u00f3rzy nie maj\u0105 czasu i \u0142akn\u0105 wiedzy tu i teraz postaram si\u0119 stre\u015bci\u0107 najwa\u017cniejsze moim zdaniem zmiany.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Frontend Deweloperzy widz\u0105c now\u0105 wersj\u0119 TypeScriptu<\/figcaption><\/figure><p>Zacznijmy od dw\u00f3ch zmian w inferowaniu typ\u00f3w. Pierwsza z nich, to poprawa wnioskowania typ\u00f3w, kt\u00f3ra powinna znacz\u0105co poprawi\u0107 czytelno\u015b\u0107 (ci\u0119\u017cko to zwi\u0119\u017ale wyt\u0142umaczy\u0107, wi\u0119c najlepiej zerknijcie na przyk\u0142ad zamieszczony poni\u017cej). Druga zmiana to rozwini\u0119cie krotek (uwielbiam to spolszczenie od `Tuple`), umo\u017cliwiaj\u0105ce zdefiniowanie typu \u2018reszty\u2019 element\u00f3w w tablice. Wspomniana reszta mo\u017ce znajdowa\u0107 si\u0119 na pocz\u0105tku, w \u015brodku lub na ko\u0144cu tabeli, ale krotka mo\u017ce posiada\u0107 tylko jedn\u0105 \u2018reszt\u0119\u2019.<\/p><!--kg-card-begin: markdown--><pre><code>type BasicPrimitive = number | string | boolean;\n\/\/ In Typescript 4.1 inferred return type was number | string | boolean | undefined\n\/\/ In Typescript 4.2 infers return type BasicPrimitive | undefined\nexport function doStuff(value: BasicPrimitive) {\n    if (Math.random() &lt; 0.5) {\n        return undefined;\n    }\n    return x;\n}\n<\/code><\/pre>\n<!--kg-card-end: markdown--><!--kg-card-begin: markdown--><pre><code>let bar: [boolean, ...string[], boolean];\nbar = [true, false];\nbar = [true, &quot;some text&quot;, false];\nbar = [true, &quot;some&quot;, &quot;separated&quot;, &quot;text&quot;, false];\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Kolejn\u0105 interesuj\u0105c\u0105 zmian\u0105, jest \u00a0umo\u017cliwienie zadeklarowania funkcji b\u0119d\u0105cej konstruktorem abstrakcyjnej klasy lub interfejsu. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce do tej pory taka deklaracja nie by\u0142a mo\u017cliwa.<\/p><!--kg-card-begin: markdown--><pre><code>abstract class Shape {\n    abstract getArea(): number;\n}\ninterface HasArea {\n    getArea(): number;\n}\n\/\/ Not Works! :(\nlet Ctor: new () =&gt; HasArea = Shape;\n\/\/ Works! :D\nlet Ctor: abstract new () =&gt; HasArea = Shape;\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Na zako\u0144czenie tematu (oczywi\u015bcie nie wyczerpa\u0142em ca\u0142ej listy zmian, ale po wi\u0119cej odsy\u0142am Was do \u017ar\u00f3d\u0142a) chcia\u0142em podzieli\u0107 si\u0119 z Wami now\u0105 flag\u0105 do kompilatora tsc. Po dodaniu `--explainFiles`, kompilator postara si\u0119 wyt\u0142umaczy\u0107 nam, dlaczego plik znalaz\u0142 si\u0119 w wynikowym bundlu. Brzmi interesuj\u0105co i na pewno nie raz przyda si\u0119 w debugowaniu skomplikowanych zale\u017cno\u015bci.<\/p><!--kg-card-begin: markdown--><pre><code>$ tsc --explainFiles &gt; expanation.txt\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es5.d.ts\n  Library referenced via 'es5' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts\n  Library referenced via 'es2015' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts\n  Library referenced via 'es2016' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts\n  Library referenced via 'es2017' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts\n  Library referenced via 'es2018' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts\n  Library referenced via 'es2019' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts\n  Library referenced via 'es2020' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts\n  Library 'lib.esnext.d.ts' specified in compilerOptions\n... More Library References...\nfoo.ts\n  Matched by include pattern '**\/*' in 'tsconfig.json'\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Czy Vived b\u0119dzie wkr\u00f3tce korzysta\u0142 z TypeScriptu w wersji 4.2? Prawdopodobnie tak, ale wynika to bardziej z naszego zami\u0142owania do korzystania ze wszystkiego co najnowsze, ni\u017c z obecno\u015bci kt\u00f3rejkolwiek z nowych funkcjonalno\u015bci. Nie zdziwi\u0119 si\u0119 natomiast, je\u015bli TypeScript 4.2 przejdzie dla wielu niezauwa\u017cenie i nie traktuj\u0119 tego jednak jako wad\u0119. Powolna ewolucja to dobra droga dla dojrza\u0142ego j\u0119zyka, jakim jest ju\u017c od dawna TypeScript.<\/p><h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/<\/a><br \/><\/p><h1 id=\"2-vite-2-0\">2. Vite 2.0<\/h1><p>Zesz\u0142y tydzie\u0144 obfitowa\u0142 w nowo\u015bci, bo opr\u00f3cz nowego TypeScriptu, ukaza\u0142a si\u0119 te\u017c nowa wersja Vite. Do tej pory mogli\u015bcie kojarzy\u0107 to narz\u0119dzie przede wszystkim z budowaniem aplikacji korzystaj\u0105cych z Vue, ale z now\u0105 wersj\u0105 otwiera si\u0119 ono te\u017c na inne biblioteki i frameworki.<\/p><p>Przyznam, \u017ce z ciekawo\u015bci\u0105 \u015bledzi\u0142em twitty Evana You (tw\u00f3rcy Vue, kt\u00f3ry stoi r\u00f3wnie\u017c za Vite), pokazuj\u0105ce Vite w akcji. Natychmiastowy start serwera deweloperskiego i niesamowicie szybki HMR brzmi\u0105 jak mokry sen wi\u0119kszo\u015bci z deweloper\u00f3w. W ostatecznym rozrachunku nie mog\u0142em si\u0119 oprze\u0107, \u017ce gdzie\u015b ju\u017c s\u0142ysza\u0142em te wszystkie zapewnienia\u2026<\/p><figure class=\"kg-card kg-image-card\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf599f2c.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure><p>Niespe\u0142na kilka tygodni temu dzieli\u0142am si\u0119 z Wami informacj\u0105 o pojawieniu si\u0119 Snowpack v3 i je\u015bli si\u0119gni\u0119cie w dalekie zakamarki swojej pami\u0119ci (albo wr\u00f3cicie tutaj), to przypomnicie sobie, \u017ce obietnice by\u0142y podobne. Czy\u017cby Evan You stworzy\u0142 narz\u0119dzie, kt\u00f3re dost\u0119pne jest ju\u017c na rynku? Detektyw, kt\u00f3ry si\u0119 we mnie obudzi\u0142 nie m\u00f3g\u0142 zostawi\u0107 tego pytania bez odpowiedzi.<\/p><figure class=\"kg-card kg-image-card\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf66acb1.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure><p>Po burzliwym \u015bledztwie uda\u0142o mi si\u0119 ustali\u0107 fakty i zmuszony jestem oczy\u015bci\u0107 Evan You ze stawianych mu zarzut\u00f3w. Podobna wydajno\u015b\u0107 i zbi\u00f3r funkcji obu narz\u0119dzi wynika z zastosowania pod spodem esbuild, kt\u00f3ry odpowiedzialny jest za wi\u0119kszo\u015b\u0107 efektu wow. Je\u015bli zastanawia Was natomiast, dlaczego ten diabe\u0142 dzia\u0142a tak szybko, to dzieje si\u0119 to za spraw\u0105 zastosowania wielow\u0105tkowego go (kt\u00f3ry bije w wydajnoi\u015bci JavaScript) i wykorzystania esmodules. Jaka jest wi\u0119c r\u00f3\u017cnica mi\u0119dzy Snowpackiem i Vite? <s>Ten pierwszy korzysta z Webpacka\/Parcela, a ten drugi z Rollupa<\/s>*. Je\u015bli wierzy\u0107 obietnicom, pisanie Plugin\u00f3w to Vite powinno by\u0107 te\u017c prostsze ni\u017c do Snowpacka, ale tutaj opieramy si\u0119 na razie tylko na s\u0142owie samego tw\u00f3rcy.<\/p><p>\u015aledztwo zako\u0144czone, sprawa rozwi\u0105zana. Zar\u00f3wno Vite jak i Snowpack oferuj\u0105 wydajno\u015b\u0107 niepor\u00f3wnywaln\u0105 z innymi narz\u0119dziami obecnymi aktualnie na rynku. Ja tymczasem wracam do budowania Angulara i mam subiektywne wra\u017cenie, \u017ce ca\u0142y proces spowolni\u0142 si\u0119, co najmniej kilkukrotnie od kiedy zacz\u0105\u0142em swoje ma\u0142e \u015bledztwo\u2026<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf798f67.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Tw\u00f3rca Frontendowego Czwartku czekaj\u0105cy na uruchomienie si\u0119 serwera deweloperskiego Angulara<\/figcaption><\/figure><h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a\">https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a<\/a><\/p><p>*- Jak s\u0142usznie wytkni\u0119to mi na <a href=\"https:\/\/www.facebook.com\/groups\/217169631654737\/\">facebookowej grupie JS News<\/a> (gor\u0105co zapraszam je\u015bli bo zda\u017caj\u0105 si\u0119 tam ciekawe dyskusje) min\u0105\u0142em si\u0119 tutaj troch\u0119 z prawd\u0105  Snowpack pozwala wybra\u0107 budnler przez dobranie pluginu (aktualnie wspierany jest webpack i Rollup, nie ma natomiast wsparcia dla Parcela). Vite jest natomiast \u015bci\u015ble powi\u0105zany z Rollupem przez co ma oferowa\u0107 wydajno\u015b\u0107 i optymalizacj\u0119 out-of-the box oraz lepsze wsparcie dla Plugin\u00f3w.<\/p><h1 id=\"3-benchmark-of-webassembly-runtimes\">3. Benchmark of WebAssembly runtimes<\/h1><p>Na koniec dzisiejszego podsumowania mam co\u015b dla wszystkich, kt\u00f3rzy zd\u0105\u017cyli st\u0119skni\u0107 si\u0119 za tabelkami i wykresami. Tw\u00f3rca Libsodium (biblioteki do szyfrowania) postanowi\u0142 wykorzysta\u0107 swoj\u0105 prac\u0119 do sprawdzenia wydajno\u015bci r\u00f3\u017cnych \u015brodowisk uruchomieniowych WebAssembly. Je\u015bli nie siedzicie w temacie, to raport mo\u017ce okaza\u0107 si\u0119 dla Was troch\u0119 zbyt suchy, ale wnioski powinny ju\u017c zaciekawi\u0107 wszystkich.<\/p><p>W tej edycji testu wszystkie implementacje poradzi\u0142y sobie poprawnie z wykonaniem kodu. Nie uda\u0142o mi si\u0119 znale\u017a\u0107 poprzednich edycji, ale powo\u0142uj\u0105c si\u0119 na s\u0142owa autora, jeszcze nie tak dawno nie by\u0142o to oczywiste. Oznacza to, \u017ce WebAssembly powoli osi\u0105ga dojrza\u0142o\u015b\u0107.<\/p><p>Drugi ciekawy wniosek to rekomendacja Node.js jako domy\u015blnego \u015brodowiska. Wsparcie dla WebAssembly jest tam, co prawda nadal eksperymentalne, ale NodeJs w\u0142a\u015bciwie we wszystkich kategoriach uplasowa\u0142 si\u0119 tu\u017c za czo\u0142\u00f3wk\u0105. Ciekawe, czy wyj\u015bcie z fazy experimental wypchnie Nodea na pierwsze miejsce\u2026<br \/><\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf83c4dc.png\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>\u015awiat gdyby w sieci standardem by\u0142 WebAssembly<\/figcaption><\/figure><h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1\">https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1<\/a><\/p>","innerContent":["<h1 id=\"1-typescript-4-2\">1. Typescript 4.2<\/h1><p>W minionym tygodniu mia\u0142o miejsce wydarzenie, kt\u00f3re zawsze jest nie lada gratk\u0105 \u00a0dla wszystkich <s>frontend developer\u00f3w patrz\u0105cych z wy\u017cszo\u015bci\u0105 na maluczkich u\u017cywaj\u0105cych JavaScriptu i nie maj\u0105cych poj\u0119cia o systemie typ\u00f3w<\/s> TypeScript deweloper\u00f3w. Po kilku iteracjach bety i release candidates, Microsoft w ko\u0144cu opublikowa\u0142 wersj\u0119 4.2 ich flagowego j\u0119zyka (je\u015bli pomy\u015bleli\u015bcie w tym momencie o C# to znaczy, \u017ce nie p\u0142ynie w Was czysta frontendowa krew!). Mamy do czynienia z minor release, wi\u0119c nie nale\u017cy oczekiwa\u0107 rewolucji, a raczej ma\u0142ych usprawnie\u0144. Je\u015bli macie wi\u0119cej czasu, to koniecznie przeczytajcie ca\u0142y artyku\u0142 zamieszczony w \u017ar\u00f3d\u0142ach, bo Microsoft jak zwykle zadba\u0142 o to, \u017ceby \u015bwietnie wyt\u0142umaczy\u0107 i zakomunikowa\u0107, co nowego. Dla tych, kt\u00f3rzy nie maj\u0105 czasu i \u0142akn\u0105 wiedzy tu i teraz postaram si\u0119 stre\u015bci\u0107 najwa\u017cniejsze moim zdaniem zmiany.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf3f1666.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Frontend Deweloperzy widz\u0105c now\u0105 wersj\u0119 TypeScriptu<\/figcaption><\/figure><p>Zacznijmy od dw\u00f3ch zmian w inferowaniu typ\u00f3w. Pierwsza z nich, to poprawa wnioskowania typ\u00f3w, kt\u00f3ra powinna znacz\u0105co poprawi\u0107 czytelno\u015b\u0107 (ci\u0119\u017cko to zwi\u0119\u017ale wyt\u0142umaczy\u0107, wi\u0119c najlepiej zerknijcie na przyk\u0142ad zamieszczony poni\u017cej). Druga zmiana to rozwini\u0119cie krotek (uwielbiam to spolszczenie od `Tuple`), umo\u017cliwiaj\u0105ce zdefiniowanie typu \u2018reszty\u2019 element\u00f3w w tablice. Wspomniana reszta mo\u017ce znajdowa\u0107 si\u0119 na pocz\u0105tku, w \u015brodku lub na ko\u0144cu tabeli, ale krotka mo\u017ce posiada\u0107 tylko jedn\u0105 \u2018reszt\u0119\u2019.<\/p><!--kg-card-begin: markdown--><pre><code>type BasicPrimitive = number | string | boolean;\n\/\/ In Typescript 4.1 inferred return type was number | string | boolean | undefined\n\/\/ In Typescript 4.2 infers return type BasicPrimitive | undefined\nexport function doStuff(value: BasicPrimitive) {\n    if (Math.random() &lt; 0.5) {\n        return undefined;\n    }\n    return x;\n}\n<\/code><\/pre>\n<!--kg-card-end: markdown--><!--kg-card-begin: markdown--><pre><code>let bar: [boolean, ...string[], boolean];\nbar = [true, false];\nbar = [true, &quot;some text&quot;, false];\nbar = [true, &quot;some&quot;, &quot;separated&quot;, &quot;text&quot;, false];\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Kolejn\u0105 interesuj\u0105c\u0105 zmian\u0105, jest \u00a0umo\u017cliwienie zadeklarowania funkcji b\u0119d\u0105cej konstruktorem abstrakcyjnej klasy lub interfejsu. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce do tej pory taka deklaracja nie by\u0142a mo\u017cliwa.<\/p><!--kg-card-begin: markdown--><pre><code>abstract class Shape {\n    abstract getArea(): number;\n}\ninterface HasArea {\n    getArea(): number;\n}\n\/\/ Not Works! :(\nlet Ctor: new () =&gt; HasArea = Shape;\n\/\/ Works! :D\nlet Ctor: abstract new () =&gt; HasArea = Shape;\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Na zako\u0144czenie tematu (oczywi\u015bcie nie wyczerpa\u0142em ca\u0142ej listy zmian, ale po wi\u0119cej odsy\u0142am Was do \u017ar\u00f3d\u0142a) chcia\u0142em podzieli\u0107 si\u0119 z Wami now\u0105 flag\u0105 do kompilatora tsc. Po dodaniu `--explainFiles`, kompilator postara si\u0119 wyt\u0142umaczy\u0107 nam, dlaczego plik znalaz\u0142 si\u0119 w wynikowym bundlu. Brzmi interesuj\u0105co i na pewno nie raz przyda si\u0119 w debugowaniu skomplikowanych zale\u017cno\u015bci.<\/p><!--kg-card-begin: markdown--><pre><code>$ tsc --explainFiles &gt; expanation.txt\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es5.d.ts\n  Library referenced via 'es5' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2015.d.ts\n  Library referenced via 'es2015' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2016.d.ts\n  Library referenced via 'es2016' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2017.d.ts\n  Library referenced via 'es2017' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2018.d.ts\n  Library referenced via 'es2018' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2019.d.ts\n  Library referenced via 'es2019' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.es2020.d.ts\n  Library referenced via 'es2020' from file 'TS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts'\nTS_Compiler_Directory\/4.2.2\/lib\/lib.esnext.d.ts\n  Library 'lib.esnext.d.ts' specified in compilerOptions\n... More Library References...\nfoo.ts\n  Matched by include pattern '**\/*' in 'tsconfig.json'\n<\/code><\/pre>\n<!--kg-card-end: markdown--><p>Czy Vived b\u0119dzie wkr\u00f3tce korzysta\u0142 z TypeScriptu w wersji 4.2? Prawdopodobnie tak, ale wynika to bardziej z naszego zami\u0142owania do korzystania ze wszystkiego co najnowsze, ni\u017c z obecno\u015bci kt\u00f3rejkolwiek z nowych funkcjonalno\u015bci. Nie zdziwi\u0119 si\u0119 natomiast, je\u015bli TypeScript 4.2 przejdzie dla wielu niezauwa\u017cenie i nie traktuj\u0119 tego jednak jako wad\u0119. Powolna ewolucja to dobra droga dla dojrza\u0142ego j\u0119zyka, jakim jest ju\u017c od dawna TypeScript.<\/p><h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-2\/<\/a><br \/><\/p><h1 id=\"2-vite-2-0\">2. Vite 2.0<\/h1><p>Zesz\u0142y tydzie\u0144 obfitowa\u0142 w nowo\u015bci, bo opr\u00f3cz nowego TypeScriptu, ukaza\u0142a si\u0119 te\u017c nowa wersja Vite. Do tej pory mogli\u015bcie kojarzy\u0107 to narz\u0119dzie przede wszystkim z budowaniem aplikacji korzystaj\u0105cych z Vue, ale z now\u0105 wersj\u0105 otwiera si\u0119 ono te\u017c na inne biblioteki i frameworki.<\/p><p>Przyznam, \u017ce z ciekawo\u015bci\u0105 \u015bledzi\u0142em twitty Evana You (tw\u00f3rcy Vue, kt\u00f3ry stoi r\u00f3wnie\u017c za Vite), pokazuj\u0105ce Vite w akcji. Natychmiastowy start serwera deweloperskiego i niesamowicie szybki HMR brzmi\u0105 jak mokry sen wi\u0119kszo\u015bci z deweloper\u00f3w. W ostatecznym rozrachunku nie mog\u0142em si\u0119 oprze\u0107, \u017ce gdzie\u015b ju\u017c s\u0142ysza\u0142em te wszystkie zapewnienia\u2026<\/p><figure class=\"kg-card kg-image-card\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf599f2c.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure><p>Niespe\u0142na kilka tygodni temu dzieli\u0142am si\u0119 z Wami informacj\u0105 o pojawieniu si\u0119 Snowpack v3 i je\u015bli si\u0119gni\u0119cie w dalekie zakamarki swojej pami\u0119ci (albo wr\u00f3cicie tutaj), to przypomnicie sobie, \u017ce obietnice by\u0142y podobne. Czy\u017cby Evan You stworzy\u0142 narz\u0119dzie, kt\u00f3re dost\u0119pne jest ju\u017c na rynku? Detektyw, kt\u00f3ry si\u0119 we mnie obudzi\u0142 nie m\u00f3g\u0142 zostawi\u0107 tego pytania bez odpowiedzi.<\/p><figure class=\"kg-card kg-image-card\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf66acb1.gif\" class=\"kg-image\" alt loading=\"lazy\"><\/figure><p>Po burzliwym \u015bledztwie uda\u0142o mi si\u0119 ustali\u0107 fakty i zmuszony jestem oczy\u015bci\u0107 Evan You ze stawianych mu zarzut\u00f3w. Podobna wydajno\u015b\u0107 i zbi\u00f3r funkcji obu narz\u0119dzi wynika z zastosowania pod spodem esbuild, kt\u00f3ry odpowiedzialny jest za wi\u0119kszo\u015b\u0107 efektu wow. Je\u015bli zastanawia Was natomiast, dlaczego ten diabe\u0142 dzia\u0142a tak szybko, to dzieje si\u0119 to za spraw\u0105 zastosowania wielow\u0105tkowego go (kt\u00f3ry bije w wydajnoi\u015bci JavaScript) i wykorzystania esmodules. Jaka jest wi\u0119c r\u00f3\u017cnica mi\u0119dzy Snowpackiem i Vite? <s>Ten pierwszy korzysta z Webpacka\/Parcela, a ten drugi z Rollupa<\/s>*. Je\u015bli wierzy\u0107 obietnicom, pisanie Plugin\u00f3w to Vite powinno by\u0107 te\u017c prostsze ni\u017c do Snowpacka, ale tutaj opieramy si\u0119 na razie tylko na s\u0142owie samego tw\u00f3rcy.<\/p><p>\u015aledztwo zako\u0144czone, sprawa rozwi\u0105zana. Zar\u00f3wno Vite jak i Snowpack oferuj\u0105 wydajno\u015b\u0107 niepor\u00f3wnywaln\u0105 z innymi narz\u0119dziami obecnymi aktualnie na rynku. Ja tymczasem wracam do budowania Angulara i mam subiektywne wra\u017cenie, \u017ce ca\u0142y proces spowolni\u0142 si\u0119, co najmniej kilkukrotnie od kiedy zacz\u0105\u0142em swoje ma\u0142e \u015bledztwo\u2026<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf798f67.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Tw\u00f3rca Frontendowego Czwartku czekaj\u0105cy na uruchomienie si\u0119 serwera deweloperskiego Angulara<\/figcaption><\/figure><h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a\">https:\/\/dev.to\/yyx990803\/announcing-vite-2-0-2f0a<\/a><\/p><p>*- Jak s\u0142usznie wytkni\u0119to mi na <a href=\"https:\/\/www.facebook.com\/groups\/217169631654737\/\">facebookowej grupie JS News<\/a> (gor\u0105co zapraszam je\u015bli bo zda\u017caj\u0105 si\u0119 tam ciekawe dyskusje) min\u0105\u0142em si\u0119 tutaj troch\u0119 z prawd\u0105  Snowpack pozwala wybra\u0107 budnler przez dobranie pluginu (aktualnie wspierany jest webpack i Rollup, nie ma natomiast wsparcia dla Parcela). Vite jest natomiast \u015bci\u015ble powi\u0105zany z Rollupem przez co ma oferowa\u0107 wydajno\u015b\u0107 i optymalizacj\u0119 out-of-the box oraz lepsze wsparcie dla Plugin\u00f3w.<\/p><h1 id=\"3-benchmark-of-webassembly-runtimes\">3. Benchmark of WebAssembly runtimes<\/h1><p>Na koniec dzisiejszego podsumowania mam co\u015b dla wszystkich, kt\u00f3rzy zd\u0105\u017cyli st\u0119skni\u0107 si\u0119 za tabelkami i wykresami. Tw\u00f3rca Libsodium (biblioteki do szyfrowania) postanowi\u0142 wykorzysta\u0107 swoj\u0105 prac\u0119 do sprawdzenia wydajno\u015bci r\u00f3\u017cnych \u015brodowisk uruchomieniowych WebAssembly. Je\u015bli nie siedzicie w temacie, to raport mo\u017ce okaza\u0107 si\u0119 dla Was troch\u0119 zbyt suchy, ale wnioski powinny ju\u017c zaciekawi\u0107 wszystkich.<\/p><p>W tej edycji testu wszystkie implementacje poradzi\u0142y sobie poprawnie z wykonaniem kodu. Nie uda\u0142o mi si\u0119 znale\u017a\u0107 poprzednich edycji, ale powo\u0142uj\u0105c si\u0119 na s\u0142owa autora, jeszcze nie tak dawno nie by\u0142o to oczywiste. Oznacza to, \u017ce WebAssembly powoli osi\u0105ga dojrza\u0142o\u015b\u0107.<\/p><p>Drugi ciekawy wniosek to rekomendacja Node.js jako domy\u015blnego \u015brodowiska. Wsparcie dla WebAssembly jest tam, co prawda nadal eksperymentalne, ale NodeJs w\u0142a\u015bciwie we wszystkich kategoriach uplasowa\u0142 si\u0119 tu\u017c za czo\u0142\u00f3wk\u0105. Ciekawe, czy wyj\u015bcie z fazy experimental wypchnie Nodea na pierwsze miejsce\u2026<br \/><\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0bf83c4dc.png\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>\u015awiat gdyby w sieci standardem by\u0142 WebAssembly<\/figcaption><\/figure><h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1\">https:\/\/github.com\/jedisct1\/webassembly-benchmarks\/tree\/master\/2021-Q1<\/a><\/p>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10176"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10176\/revisions"}],"predecessor-version":[{"id":10650,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10176\/revisions\/10650"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}