{"id":13549,"date":"2023-01-09T14:51:31","date_gmt":"2023-01-09T13:51:31","guid":{"rendered":"https:\/\/vived.io\/?p=13549"},"modified":"2023-01-10T17:10:18","modified_gmt":"2023-01-10T16:10:18","slug":"frontend-weekly-vol-119","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/","title":{"rendered":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119"},"content":{"rendered":"\n

1. TypeScript w 2022<\/h2>\n\n\n\n

Na przestrzeni tegorocznych przegl\u0105d\u00f3w wielokrotnie powtarza\u0142em, \u017ce TypeScript bardzo dojrza\u0142, a co za tym idzie sta\u0142 si\u0119 nudny jak flaki z olejem. Patrz\u0105c na rok 2022 okazuje si\u0119 jednak, \u017ce nawet w takim dojrza\u0142ym i stabilnym ekosystemie wydarzy\u0142o si\u0119 kilka ciekawych rzeczy.<\/p>\n\n\n\n

Typy zmierzaj\u0105 do JavaScript?<\/h3>\n\n\n\n

Pocz\u0105tkiem marca Microsoft, czyli firma stoj\u0105ca z TypeScript, przygotowa\u0142a proposal do standardu JavaScript. Jego tre\u015b\u0107 skupia\u0142a si\u0119 na wzbogaceniu sk\u0142adni o typy podobne do tych znanych z TypeScript. Aby zachowa\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 oraz nie zmienia\u0107 fundamentalnych za\u0142o\u017ce\u0144 j\u0119zyka, Microsoft zaproponowa\u0142, \u017ce interpreter b\u0119dzie traktowa\u0142 typy tak samo jak komentarze (tj. b\u0119dzie je kompletnie ignorowa\u0142). Dzi\u0119ki temu typy nie b\u0119d\u0105 mia\u0142y wp\u0142ywu na logik\u0119, ale sprawi\u0105, \u017ce kod b\u0119dzie czytelniejszy, a deweloperzy b\u0119d\u0105 znacznie wydajniejsi dzi\u0119ki podpi\u0119ciu language servera i type checkera do swojego IDE.<\/p>\n\n\n

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

Przedstawione powy\u017cej zachowanie mo\u017ce do z\u0142udzenia przypomina\u0107 obecne zachowanie JSDoc. Nowy proposal ma jednak znaczn\u0105 przewag\u0119 nad tym rozwi\u0105zaniem. Po pierwsze proponowany przez Microsoft format jest znacznie zwi\u0119\u017alejszy i czytelniejszy ni\u017c JSDoc. Po drugie mo\u017cliwo\u015bci JSDoc s\u0105 mocno ograniczone (za jego pomoc\u0105 ci\u0119\u017cko jest zdefiniowa\u0107 chocia\u017cby generyki).<\/p>\n\n\n\n

\/\/ \u2014-----------------------------------\n\/\/ JSDoc\n\/\/ \u2014-----------------------------------\n\n\/**\n * @param {string}  p1 - A string param.\n * @param {string=} p2 - An optional param (Closure syntax)\n * @param {string} [p3] - Another optional param (JSDoc syntax).\n * @param {string} [p4="test"] - An optional param with a default value\n * @return {string} This is the result\n *\/\nfunction stringsStringStrings(p1, p2, p3, p4) {\n   \/* ... *\/\n}\n\n\n\/\/ \u2014-----------------------------------\n\/\/ JavaScript with type annotations\n\/\/ \u2014-----------------------------------\nfunction stringsStringStrings(p1: string, p2?: string, p3?: string, p4 = "test"): string {\n    \/* ... *\/\n}<\/code><\/pre>\n\n\n\n
Czy typy w JavaScript oznaczaj\u0105 koniec TypeScript? To zale\u017cy. W pocz\u0105tkowych etapach typy w JavaScript prawdopodobnie b\u0119d\u0105 du\u017co bardziej prymitywne ni\u017c te znane z JavaScript. TypeScript oferuje te\u017c funkcjonalno\u015bci opieraj\u0105ce si\u0119 na transpilacji kodu, takie jak chocia\u017cby enumy. Pod tym wzgl\u0119dem JavaScript raczej nigdny nie dogoni TypeScript.<\/p>\n\n\n\n
Od marca prace nad Proposalem nie posun\u0119\u0142y si\u0119 znacznie do przodu i utkn\u0119\u0142y w Stage 1 (ca\u0142y proces sk\u0142ada si\u0119 z 4 etap\u00f3w). Proposalem opiekuje si\u0119 jednak Microsoft, wi\u0119c wydaje mi si\u0119, \u017ce tamat wr\u00f3ci jeszcze na tapet w 2023 roku.<\/p>\n\n\n\n
Nowe funkcjoalno\u015bci w TypeScript<\/h3>\n\n\n\n
Na przestrzeni minionego roku dostali\u015bmy a\u017c 3 nowe wersje TypeScript: 4.7, 4.8 i 4.9. Nie ma jednak sensu, \u017ceby\u015bcie zag\u0142\u0119biali si\u0119 w poszczeg\u00f3lne wersje, bo… s\u0105 nudne jak flaki z olejem. Programi\u015bci pracuj\u0105cy nad TypeScriptem po\u015bwi\u0119cili mas\u0119 czasu na optymalizacj\u0119 wydajno\u015b\u0107i i lepsz\u0105 obs\u0142ug\u0119 kolejnych przypadk\u00f3w brzegowych. W\u015br\u00f3d nowo\u015bci na pierwszy plan przebija si\u0119 jednak jedna nowa funkcjonalno\u015b\u0107 – operator satisfies<\/code>.<\/p>\n\n\n\n
T\u0142umacz\u0105c dzia\u0142anie nowego operatora pos\u0142u\u017c\u0119 si\u0119 przyk\u0142adem z dokumentacji od Microsoftu. Za\u0142\u00f3\u017cmy, \u017ce potrzebujemy otypowa\u0107 nast\u0119puj\u0105cy kod:<\/p>\n\n\n\n
\/\/ Each property can be a string or an RGB tuple.\nconst palette = {\n    red: [255, 0, 0],\n    green: "#00ff00",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = palette.red.at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = palette.green.toUpperCase();<\/code><\/pre>\n\n\n\n
W pierwszej chwili do g\u0142owy przyj\u015b\u0107 mo\u017ce zdefiniowanie typu Color<\/code> oraz wykorzystanie typu Record<\/code>. Niestety, w takim przypadku zmuszeni jeste\u015bmy wykonywa\u0107 niebezpieczn\u0105 operacj\u0119 rzutowania:<\/p>\n\n\n\n
type Color = "red" | "green" | "blue";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette: Palette = {\n    red: [255, 0, 0],\n    green: "#00ff00",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = (palette.red as RGB).at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = (palette.green as string).toUpperCase();<\/code><\/pre>\n\n\n\n
Obej\u015bciem tego problemu ma by\u0107 nowy operator satisfies, kt\u00f3ry b\u0119dzie walidowa\u0142 typ w momencie przypisania, ale nie b\u0119dzie mia\u0142 wp\u0142ywu na typ ewaluowany przez TypeScript. Brzmi skomplikowanie, ale na prostym przyk\u0142adzie dobrze wida\u0107, o co chodzi:<\/p>\n\n\n\n
type Color = "red" | "green" | "blue";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette = {\n    red: [255, 0, 0],\n    green: "#00ff00",\n    blue: [0, 0, 255]\n} satisfies Palette;\n\n\/\/ Both of these methods are still accessible!\nconst redComponent = palette.red.at(0);\nconst greenNormalized = palette.green.toUpperCase();\n\n\/\/ \u2014-----------------------------------\n\/\/ Example errors caught by satisfies\n\/\/  \u2014-----------------------------------\n\nconst spelloPalette = {\n    red: [255, 0, 0],\n    green: "#00ff00",\n    bleu: [0, 0, 255] \/\/ Such typos are now caught\n} satisfies Palette;\n\n\/\/ Missing properties are now caught\nconst missingColorPalette = {\n    red: [255, 0, 0],\n    bleu: [0, 0, 255]\n} satisfies Palette;\n\nconst wrongColorTypePalette = {\n    red: [255, 0], \/\/ Such typos are now also caught\n    green: "#00ff00",\n    bleu: [0, 0, 255]\n} satisfies Palette;<\/code><\/pre>\n\n\n\n
Zastosowanie nowego oparetara znalaz\u0142em ju\u017c chocia\u017cby w SvelteKit i jestem przekonany, \u017ce przyda si\u0119 on w niejednym projekcie.<\/p>\n\n\n\n
Przysz\u0142o\u015b\u0107 TypeScript<\/h3>\n\n\n\n
Przysz\u0142y rok zaczniemy od releasu TypeScript 5.0 pocz\u0105tkiem marca. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie nowa du\u017ca wersja powinna przynie\u015b\u0107 paczk\u0119 du\u017cych i ekscytuj\u0105cych zmian, ale nie koniecznie brakinc changes. Buszuj\u0105 po repozytorium TypeScript mo\u017cemy doszyka\u0107 si\u0119 kilku nadchodz\u0105cych nowo\u015bci. Po pierwsze TypeScript przepisany zosta\u0142 do modu\u0142\u00f3w (do tej pory bazowa\u0142 na namespace), co zmniejszy\u0142o paczk\u0119 o 25% i przy\u015bpieszy\u0142o kompilacj\u0119 o 10%. Dekoratory z funkcjonalno\u015bci nie wychodz\u0105cej poza kompilator, maj\u0105 sta\u0107 si\u0119 kompatybilne z dekoratorami znajduj\u0105cymi sie w 3-cim etapie standaryzacji JavaScript (przyp: standaryzacja sk\u0142ada si\u0119 z 4 etap\u00f3w, bardzo rzadko zdarza si\u0119 sytuacja kiedy funkcjonalno\u015b\u0107 na 3-cim etapie zostaje usuni\u0119ta). TypeScript pracuje te\u017c nad natywnym wsparciem import\u00f3w dla dowolnego typu plik\u00f3w.  Jak widzicie jest tego sporo i wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce rok 2023 b\u0119dzi\u0119 dla TypeScript zdecydowanie ciekawszy ni\u017c 2022.<\/p>\n\n\n\n
2. React w 2022<\/h2>\n\n\n\n
W tym roku wreszcie si\u0119 doczekali\u015bmy! Po dw\u00f3ch latach od opublikowania React 17, \u015bwiat\u0142o dzienne ujrza\u0142a kolejna wersja frameworka od Mety. W odr\u00f3\u017cnieniu od poprzedniej wersji, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci. <\/p>\n\n\n\n
React 18 i Concurrent Mode <\/h3>\n\n\n\n
Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n\n\n\n
Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3wm, takie akcje nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n\n\n\n
Wystarczy ju\u017c teorii \u2013 przejd\u017amy do mi\u0119ska. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 startTransition<\/code>, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook useTransition()<\/code>.<\/p>\n\n\n\n
export default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n\n\n\n
Do API trafi\u0142 r\u00f3wnie\u017c hook useDeferredValue<\/code>. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent.<\/p>\n\n\n\n
\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n\n\n\n
Co czeka React w 2023 roku?<\/h3>\n\n\n\n
W 2023 roku raczej nie doczekamy si\u0119 kolejego du\u017cego wydania Reacta. Nie zmienia to faktu, \u017ce wiemy nad czym obecnie pracuje zesp\u00f3\u0142 rozwijaj\u0105cy bibliotek\u0119. Mo\u017cemy si\u0119 r\u00f3wnie\u017c spodziewa\u0107, \u017ce cze\u015b\u0107 z tych funkcjonalno\u015bci nie b\u0119dzie czeka\u0107 na React 19 i trafi do kolejnych wersji React 18.<\/p>\n\n\n\n
Chyba najwi\u0119ksz\u0105 i najbardziej wyczekiwan\u0105 funkcjonalno\u015bci\u0105 nad kt\u00f3r\u0105 obecnie trwaj\u0105 prace s\u0105 React Server Components. Wi\u0119cej o nich przeczytacie w jendej z kolejnej sekcji tego posta. Nie s\u0105 to jednak jedyna aktualnie rozwijana funkjonalno\u015b\u0107. Zesp\u00f3\u0142 pracuje r\u00f3wnie\u017c nad komponentem <Offscreen \/><\/code>, kt\u00f3rym umo\u017cliwi renderowanie komponent\u00f3w poza ekranem, bez konieczno\u015bci montowania ich do struktury HTML. Inn\u0105 rozwijan\u0105 w pocie czo\u0142a funkcjonalno\u015bci\u0105 jest kompilator automatycznie dodaj\u0105cy useMemo<\/code> i useCallback<\/code> wsz\u0119dzie tam gdzie to potrzebne. <\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
3. Angular w 2022<\/h2>\n\n\n\n
W 2022 roku w ekosystemie Angulara dzia\u0142o si\u0119 naprawd\u0119 sporo. Rok zacz\u0119lismy od po\u017cegnania angular.js. Nied\u0142ugo p\u00f3\u017aniej wraz z Angularem 14 zaprezentowana zosta\u0142a pierwsza eksperymentalna implementacja Standalone Componetns. Na przestrzeni ca\u0142ego roku zesp\u00f3\u0142 z Google pracowa\u0142 w pocie czo\u0142a i Angular 15 dostarczy\u0142 nam stabiln\u0105 wersj\u0119 tej od dawna wyczekiwanej funkcjonalno\u015bci.<\/p>\n\n\n\n
Koniec wsparcia dla angular.js<\/h3>\n\n\n\n
Wsparcie dla angular.js mia\u0142o zosta\u0107 wycofane ju\u017c w lipcu 2021 roku. Nied\u0142ugo po wybuchu pandemii ze wzgl\u0119du na wywo\u0142ane przez ni\u0105 perturbacje, Google zdecydowa\u0142 si\u0119 da\u0107 firmom dodatkowe p\u00f3\u0142 roku wsparcia. Dodatkowy czas dobieg\u0142 ko\u0144ca z pocz\u0105tkiem 2022 roku. Wtedy to oficjalnie po\u017cegnali\u015bmy angular.js, (znany te\u017c jako Angular 1.x). Oczywi\u015bcie framework dalej dost\u0119pny jest w npm, ale Google nie planuje ju\u017c dalszych \u0142atek.<\/p>\n\n\n\n
Angular 14 i 15<\/h3>\n\n\n\n
Miniony rok w ekosystemie Angulara up\u0142yn\u0105\u0142 w\u0142a\u015bciwie pod jednym has\u0142em: Standalone Components. Co wa\u017cne, nie m\u00f3wimy tutaj o funkcjonalno\u015bci samej w sobie, ale tak\u017ce o masie pracy wykonanej naoko\u0142o. Aby umo\u017cliwi\u0107 tworzenie aplikacji pozbawionych modu\u0142\u00f3w zespu\u0142 przygotowa\u0142 mi\u0119dzy innymi funkcj\u0119 inject()<\/code>, API do towrzenia funkcyjnych guard\u00f3w czt nowe API do inicjalizacji aplikacji.<\/p>\n\n\n\n
Angularowe modu\u0142y maj\u0105 niewiele wsp\u00f3lnego z modu\u0142ami znanym z JavaScriptu. Natywne modu\u0142y pozwalaj\u0105 podzieli\u0107 aplikacj\u0119 na wiele plik\u00f3w i zarz\u0105dza\u0107 API, jakie udost\u0119pniamy. Angularowe modu\u0142y maj\u0105 na celu zapewnia\u0107 konfiguracj\u0119 zale\u017cno\u015bci dla Dependency Injection. W Angularze ka\u017cdy komponent czy dyrektywa musi by\u0107 cz\u0119\u015bci\u0105 jakiego\u015b modu\u0142u, co czyni je najbardziej atomicznym elementem frameworku. Co ciekawe, modu\u0142y trafi\u0142y do Angulara dopiero w wersji 2.0.0-rc.5 i by\u0142y odpowiedzi\u0105 na problemy z publikowanie Angularowych bibliotek w npm. Z racji, \u017ce framework by\u0142 ju\u017c na etapie Release Candidate, to ca\u0142e rozwi\u0105zanie powsta\u0142o w przy\u015bpieszonym tempie, i jak to bywa z takimi rozwi\u0105zaniami zosta\u0142o z nami na d\u0142u\u017cej.<\/p>\n\n\n\n
Na przestrzeni lat dobre praktyki wok\u00f3\u0142 Angulara ewoluowa\u0142y i obecnie najcz\u0119\u015bciej uskuteczniamy jest schemat SCAM ( Single Component Angular Module). Jedgo jedyn\u0105 wad\u0105 takiego podej\u015bcia jest spora ilo\u015b\u0107 generowanego boilerplate.<\/p>\n\n\n\n
@Component({\n  selector: 'vived-my-component',\n  template:`\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n  `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}\n\n@NgModule({\n  imports:      [ CommonModule, CustomComponentModule ],\n  declarations: [ MyComponent ],\n  exports:      [ MyComponent ],\n})\nexport class MyComponentModule { }<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Pocz\u0105wszy od Angulara 15, wi\u0119kszo\u015b\u0107 modu\u0142\u00f3w mo\u017ce by\u0107 generowana automatycznie dzi\u0119ki dodaniu do dekoratora parametru standalone<\/code>.  Za pomoc\u0105 tego jednego prostego triku Angular poddany zosta\u0142 bardzo skutecznej diecie.<\/p>\n\n\n\n
@Component({\n  selector: 'vived-my-component',\n  standalone: true.,\n  imports: [ CommonModule, CustomComponent ]\n  template: `\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n    `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}<\/code><\/pre>\n\n\n\n
W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci dodane do Angulara w 2022 roku, skupione by\u0142y ukruceniu zb\u0119dnego boilerpate’u. Zobaczcie tylko, jak odchudzono chocia\u017cby Router API.<\/p>\n\n\n\n
\/\/ This is how you bootstrap application with modules\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    RouterModule.forRoot(\n      [\n        { path: '\/home', component: HomeComponent },\n        { path: '**', redirectTo: '\/home' },\n      ],\n      {\n        preloadingStrategy: PreloadAllModules,\n      }\n    ),\n  ],\n  providers: [\n    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)<\/code><\/pre>\n\n\n\n
\/\/ This is how you bootstrap application without modules\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideRouter([\n      { path: '\/home', component: HomeComponent },\n      { path: '**', redirectTo: '\/home' },\n    ], withPreloading(PreloadAllModules)),\n    provideHttpClient(withInterceptors([AuthInterceptor]))\n  ]\n});<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Angular 16 i 17<\/h3>\n\n\n\n
Przgl\u0105daj\u0105c oficjaln\u0105 roadmap\u0119 i GitHub’a Angulara mo\u017cemy ju\u017c zgadywa\u0107 na czym skupia\u0142 si\u0119 b\u0119dzie zespu\u0142 Angulara w 2023 roku. Po pierwsze minony rok kr\u0119ci\u0142 si\u0119 wok\u00f3\u0142 renderowania po stronie serwera i nie umkn\u0119\u0142o to uwadze zespo\u0142u. W 2023 roku mo\u017cemy si\u0119 wi\u0119c spodziewa\u0107 powrotu do tematu i kilku ciekawych RFC w tym obszarze. Po drugie, kolejnym du\u017cym tematej jest umo\u017cliwienie wyci\u0119cia z zale\u017cno\u015bci Angulara biblioteki zone.js. Dla przypomnienia, jest to troch\u0119 nadgryziona z\u0119bem czasu biblioteka, kt\u00f3ra patchuje wi\u0119kszo\u015b\u0107 API przegl\u0105darki i umo\u017cliwia Angularowi „magiczne” wykrywanie zmian w aplikacji. <\/p>\n\n\n\n
4. Vue w 2022 <\/h2>\n\n\n\n
W 2022 roku ukaza\u0142a si\u0119 tylko jedna du\u017ca wersja Vue. Co zaskakuj\u0105ce, nie by\u0142o to kolejne Vue 3, ale finalna wersja Vue 2. Poza tym wreszcie doczekali\u015bmy si\u0119 renderowania po stonie serwera z prawdziwego zdarzenia  w postaci Nuxt 3.<\/p>\n\n\n\n
Vue 2.7<\/h3>\n\n\n\n
Vue 2.7 to ostatnie wydanie Vue 2 i b\u0119dzie ono wspierane do ko\u0144ca 2023 roku. W najwi\u0119kszym skr\u00f3cie, wersja ta dodaje najwa\u017cniejsze funkcjonalno\u015bci z Vue 3 do Vue 2. Dzi\u0119ki takiemu podej\u015bciu, inkrementalna migracja powinna sta\u0107 si\u0119 znacznie prostsza. Czy tak rzeczywi\u015bcie b\u0119dzie? O tym przekonamy sie pod koniec 2023 roku, kiedy to oka\u017ce si\u0119 jak du\u017co projekt\u00f3w nie wyrobi\u0142o si\u0119 z ow\u0105 migracj\u0105 na czas.<\/p>\n\n\n\n
Najwi\u0119ksz\u0105 funkcjonalno\u015bci\u0105 jaka trafi\u0142a do Vue 2.7 jest Composition API<\/code>, przez wielu \u017cartobliwie nazywane React Hooks dla Vue. Na API to sk\u0142adaj\u0105 si\u0119 3 sk\u0142adowe: Reactivity API (ref<\/code> i reactive<\/code>), Lifecycle Hooks (onMounted<\/code>\/onUnmounted<\/code>) oraz Dependency Injection (provide<\/code>\/inject<\/code>). Co wa\u017cne, zar\u00f3wno zachowanie jak i typy wszystkich nowych funkcjonalno\u015bci s\u0105 w 100% kompatybilne z Vue 3.<\/p>\n\n\n\n
\/\/ Old Options API\n<script>\nexport default {\n  data() {\n    return {\n      name: 'John',\n    };\n  },\n  mounted() {\n    console.log(`Hello ${this.name}`);\n  },\n};\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n\n\n\n
\/\/ New Composition API\n<script setup> \nconst name = ref(0);\n\nonMounted(() => {\n  console.log(`Hello ${name.value}`);\n});\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Vue 3.3<\/h3>\n\n\n\n
Vue 3.3 mia\u0142o ukaza\u0107 si\u0119 pod koniec 2022 roku, ale jego premiera zosta\u0142a przeniesiona na rok 2023. Mo\u017cemy ju\u017c jednak uchyli\u0107 r\u0105bka tajemnicy i zerkn\u0105\u0107 na to, co czeka nas w Vue w przysz\u0142ym roku.<\/p>\n\n\n\n
<Suspense><\/code> umo\u017cliwia\u0107 ma renderowania tymczasowego komponentu do czasu, a\u017c wszystkie asynchroniczne komponenty w drzewie zostan\u0105 za\u0142adowane.<\/p>\n\n\n\n
<Suspense>\n  <!-- component with nested async dependencies -->\n  <Dashboard \/>\n\n  <!-- loading state via #fallback slot -->\n  <template #fallback>\n    Loading...\n  <\/template>\n<\/Suspense><\/code><\/pre>\n\n\n\n
Drug\u0105 wyczekiwan\u0105 funkcjonalno\u015bci\u0105 jest Reactivity Transform<\/code>, czyli szereg usprawnie\u0144 do Composition API<\/code>. Wszystkie metody z Reactive API<\/code> (m.in ref<\/code> i computed<\/code>) doczekaj\u0105 si\u0119 wersji poprzedzonych $<\/code>. B\u0119d\u0105 to makra, kt\u00f3re umo\u017cliwi\u0105 \u0142atwiejszy dost\u0119p do danych, kosztem dodatkowego kroku kompilacji.<\/p>\n\n\n\n
\/\/ Before Vue 3.3\n<script setup>\nimport { ref } from 'vue'\n\nlet count = ref(0)\n\nconsole.log(count.value)\n\nfunction increment() {\n  count.value++\n}\n<\/script>\n\n<template>\n  <button @click="increment">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n\n\n\n
\/\/ Vue 3.3\n<script setup>\nlet count = $ref(0)\n\nconsole.log(count)\n\nfunction increment() {\n  count++\n}\n<\/script>\n\n<template>\n  <button @click="increment">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n\n\n\n
Podczas Vue Amsterdam Evan You podzieli\u0142 si\u0119 te\u017c dalekosi\u0119\u017cnymi planami zespo\u0142u. Jak zaznacza, na razie plany te s\u0105 w powijakach i mog\u0105 jeszcze ulec zmianom. Po zako\u0144czeniu pracy nad Vue 3.3 zesp\u00f3\u0142 rozwa\u017ca skupienie si\u0119 nad now\u0105 strategi\u0105 kompilacji na wz\u00f3r tej znanej z SolidJS. Dla przypomnienia, SolidJS to framework do z\u0142udzenia przypominaj\u0105cy Reacta, ale chwal\u0105cy si\u0119 lepsz\u0105 wydajno\u015bci\u0105 ze wzgl\u0119du na porzucenie Virtual DOM. Opcjonalne wyci\u0119cie Virtual DOM mog\u0142oby znacz\u0105co odchudzi\u0107 paczk\u0119 pobieran\u0105 przez klienta i pozwoli\u0142oby oszcz\u0119dzi\u0107 pami\u0119c potrzebn\u0105 na przechowywanie wirtualnej struktury komponent\u00f3w.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
5. Renderowanie po stronie serwera w 2022<\/h2>\n\n\n\n
Ach, co to by\u0142 za rok dla renderowania po stronie serwera! W\u0142a\u015bciwie ka\u017cdy du\u017cy framework otrzyma\u0142 albo spor\u0105 aktualizacj\u0119 w tym temacie, albo zupe\u0142nie now\u0105 bibliotek\u0119 z mas\u0105 nowo\u015bci (Vue – Nuxt 3, Svelte – SvelteKit, React – React Server Components, Remix, Next.js 13). Na rynku pojawi\u0142o si\u0119 te\u017c sporo innowacyjnych rozwi\u0105za\u0144, nie powi\u0105zanych z istniej\u0105cymi frameworkami. W tym miejscu namieni\u0107 musz\u0119 chodzia\u017cby Qwik, kt\u00f3ry stara si\u0119 zrewolucjonizowa\u0107 podej\u015bcie do hydracji, czy Astro, kt\u00f3ry spopularyzowa\u0142 innowacyjne podej\u015bcie Dynami Islands.<\/p>\n\n\n\n
React Server Components i Next.js 13<\/h3>\n\n\n\n
Od kiedy komponenty renderowane po stronie serwera zosta\u0142y zaprezentowane \u015bwiatu przez Dana Abramova min\u0119\u0142y ju\u017c ponad dwa lata. Je\u015bli nie kojarzycie koncepcji, to w du\u017cym skr\u00f3cie React umo\u017cliwia\u0142 b\u0119dzie wyrenderowanie pojedynczego komponentu po stronie serwera i przes\u0142anie kodu HTML do klienta. Mi podej\u015bcie takie mocno przypomina na PHP, bo mo\u017cliwe jest wykonywanie zapyta\u0144 do bazy danych bezpo\u015brednio z komponent\u00f3w. <\/p>\n\n\n\n
\/\/ Note.js - Server Component\nimport db from 'db'; \n\nasync function Note(props) {\n  const note = await db.posts.get(props.id);\n  \n  return (\n    <div>\n      <h1>{note.title}<\/h1>\n      <section>{note.body}<\/section>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
Niestety React Server Components maj\u0105 te\u017c swoje ograniczenia. Komponenty tego typu nie mog\u0105 przechowywa\u0107 stanu (useState<\/code> jest zakazany), nie mog\u0105 by\u0107 importowane przez komponenty renderowane po stronie klienta i do dzia\u0142ania wymagaj\u0105 meta frameworku jak Next.js, Hyrdogen czy Gatsby. Temat ten jest niezwykle zawi\u0142y i zas\u0142uguje na osobny wpis na naszym blogu, ale je\u015bli chcieliby\u015bcie dowiedzie\u0107 si\u0119 wi\u0119cej, to gor\u0105co polecam ten artyku\u0142<\/a>.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Pomimo tego, \u017ce React Server Components nadal znajduj\u0105 sie w fazie alphy, na rynku pojawi\u0142y si\u0119 ju\u017c pierwsze frameworki, kt\u00f3re je wykorzystuj\u0105 (Next.js, Gatsby). W szczeg\u00f3lno\u015bci Next.js 13 odbi\u0142 si\u0119 szerokim echem spo\u0142eczno\u015bci, bo now\u0105 architektur\u0119 opar\u0142 ca\u0142kowicie na React Server Components. Interesuj\u0105cym efektem ubocznym takiej architektury jest fakt, \u017ce dop\u00f3ki wprost nie zdefiniujemy komponentu jako renderowanego po stronie klienta, to ca\u0142a aplikacja renderowana b\u0119dzie tylko i wy\u0142\u0105cznie po stronie serwra.<\/p>\n\n\n\n
Qwik<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Qwik wywraca do g\u00f3ry nogami paradygmaty wszystkich wsp\u00f3\u0142czesnych narz\u0119dzi do renderowania po stronie serwera, poprzez podwa\u017cenie zasadno\u015bci procesu hydracji. Hydracja, to proces po stronie klienta, podczas kt\u00f3rego wyrenderowana po stronie serwera aplikacja \u0142aduje kod JavaScript, a nast\u0119pnie powtarza ca\u0142\u0105 logik\u0119 inicjalizacyjn\u0105. Dopiero po zako\u0144czeniu procesu hydracji aplikacja staje si\u0119 responsywna. Dzi\u0119ki takiej taktyce, klient w\u0142a\u015bciwie od razu widzi docelow\u0105 tre\u015b\u0107 i dopiero po chwili mo\u017ce z ni\u0105 wej\u015b\u0107 w interakcj\u0119.<\/p>\n\n\n\n
Alternatywa, kt\u00f3r\u0105 oferuje Qwik, to wznawiane wykonania (ang. Resumable). Paradygmat ten pozwala zapisa\u0107 stan aplikacji po stronie serwera w taki spos\u00f3b, aby po stronie klienta mo\u017cliwe by\u0142o natychmiastowe wznowienie wykonywania kodu. Brzmi skomplikowanie? Na szcz\u0119\u015bcie skomplikowana logika skrz\u0119tnie schowana jest pod przyst\u0119pnym API, kt\u00f3re ca\u0142\u0105 magi\u0119 chowa przed programist\u0105.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
No dobra, a co je\u015bli naprawd\u0119 chc\u0119 wiedzie\u0107 jak ta magia dzia\u0142a pod spodem? W kr\u00f3tkiej formie jak\u0105 s\u0105 nasze przegl\u0105dy nie podejm\u0119 si\u0119 wyt\u0142umaczenia jak dzia\u0142aj\u0105 bebechy frameworka i najlepiej b\u0119dzie je\u015bli sami si\u0119gni\u0119cie do dokumentacji. W ogromnym skr\u00f3cie, kod komponent\u00f3w kompilowany jest do osobnych paczek, a sam stan aplikacji zapisywany jest w DOM w \u201cJSONie na sterydach\u201d. Do klienta wysy\u0142any jest wyrenderowany HTML oraz 1KB kody samego Qwika. Ten od razu pobiera kodu wszystkich niezb\u0119dnych komponent\u00f3w, jednak zamiast \u0142\u0105czy\u0107 je od razu z DOM\u2019em czeka na pierwsze interakcje u\u017cytkownika.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Na zko\u0144czenie, jeszcze ma\u0142a wzmianka o tym, dlaczego warto \u015bledzi\u0107 dalsze losy Qwika. Za jego rozw\u00f3j odpowiedzialny jest prawdziwy zesp\u00f3\u0142 All-Stars – Mi\u0161ko Hevery (tw\u00f3rca anguar.js), Manu Almeida (tw\u00f3rca Gina i Stencila) oraz Adam Bradley (tw\u00f3rca Ionica i Stencila). Je\u015bli kto\u015b ma zrewolucjonizowa\u0107 Frontend, to w\u0142a\u015bnie zep\u00f3\u0142 takich wteran\u00f3w.<\/p>\n\n\n\n
Astro<\/h3>\n\n\n\n
Astro to framework, kt\u00f3ry spopularyzowa\u0142 tak zwan\u0105 architektur\u0119 wyspow\u0105. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Astro wyposa\u017cony zosta\u0142 w bardzo zaawansowany mechanizm definiowania kiedy ma zostac pobrany kod dynamicznych komponent\u00f3w oraz kiedy powinny one zosta\u0107 poddane hydracji. W\u015br\u00f3d dost\u0119pnych opcj mamy mi\u0119dzy innymi do\u0142adowanie dopiero kiedy komponent b\u0119dzie widoczny na ekranie czy do\u0142adowanie tylko i wy\u0142\u0105cznie kiedy spe\u0142nione s\u0105 odpowiednie media-query.<\/p>\n\n\n\n
Astro na tle konkurencji wyr\u00f3\u017cnia si\u0119 te\u017c niezale\u017cno\u015bci\u0105 od frameworku. Jest to pierwsza biblioteka od bardzo dawna, kt\u00f3ra naprawd\u0119 nie faworyzuje \u017cadnego rozwi\u0105zania, a na dodatek pozwala miesza\u0107 je dowoli mi\u0119dzy soba. <\/p>\n\n\n\n
\u2014\nimport HomeLayout from '..\/layouts\/HomeLayout.astro'\nimport MyReactComponent from '..\/components\/MyReactComponent.jsx';\nimport MySvelteComponent from '..\/components\/MySvelteComponent.svelte';\n\nconst data = await fetch('API_URL').then(r => r.json());\n---\n<HomeLayout>\n  <MyReactComponent client:load name={data.name}>\n    <MySvelteComponent avatar={data.avatar}\/>\n  <\/MyReactComponent>\n<\/HomeLayout><\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
6. Node.js, Deno i Bun w 2022<\/h2>\n\n\n\n
Rok temu wydawa\u0142o si\u0119, \u017ce sytuacja je\u015bli chodzi o \u015brodowiska uruchomieniowe JavaScript jest raczej stabilna. Node dominuje siln\u0105 r\u0119k\u0105, a Deno z roku na rok skrupulatnie powi\u0119ksza swoj\u0105 nisz\u0119. W po\u0142owie tego roku nast\u0105pi\u0142o jednak prawdziwe trz\u0119sienie ziemi, gdy do gry wkroczy\u0142 Bun z finansowaniem 7M$.<\/p>\n\n\n\n
Bun<\/h3>\n\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. Wed\u0142ug benchmark\u00f3w opublikowanych przez autora nowego \u015brodowiska uruchomieniowego przewaga jest naprawd\u0119 istotna <\/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
Drugim czynnikiem wp\u0142ywaj\u0105cym na wydajno\u015b\u0107 Buna jest wykorzystanie silnika JavaScriptCore od Apple. Jak si\u0119 okazuje, JavaScriptCore 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
Bun wprowadze te\u017c ca\u0142kiem sporo usprawnie\u0144 wzgl\u0119dem Node.js . 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\u00a0 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 szybki bundler. 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
Deno<\/h3>\n\n\n\n
Na odpowied\u017a Deno na pojawienie si\u0119 nowego gracza nie musieli\u015bmy d\u0142ugo czeka\u0107. Ju\u017c kilka tygodni po premierze wersji alpha Buna, zesp\u00f3\u0142 stoj\u0105cy za Deno zapowiedzia\u0142 dodanie kompatybilno\u015bci z npm oraz spor\u0105 poprawy wydajno\u015bci serwera http.<\/p>\n\n\n\n
Wsparcie dla npma by\u0142o szczeg\u00f3lnie kontrowersyj\u0105 decyzj\u0105, bior\u0105c pod uwag\u0119 jak d\u0142ugo Deno odcina\u0142o si\u0119 od niego grub\u0105 kresk\u0105 dopatruj\u0105c si\u0119 w nim \u017ar\u00f3d\u0142a wielu problem\u00f3w naszego ekosystemu.  Trzeba jednak pamieta\u0107, \u017ce npm w po\u0142\u0105czeniu z Deno b\u0119dzie dzia\u0142a\u0142 zupe\u0142nie inaczej ni\u017c w po\u0142\u0105czeniu z Node.js. Po pierwsze, Deno nie b\u0119dzie wymaga\u0107 uruchamiania npm install<\/code>. Po drugie, Deno nie b\u0119dzie tworzy\u0107 katalogu node_modules<\/code>,a pobrane paczki przechowywane b\u0119d\u0105 globalnie. Po trzecie, importy z npm b\u0119d\u0105 oznaczone specjalnym prefixem npm:<\/code><\/p>\n\n\n\n
import { chalk } from "npm:chalk@5";<\/code><\/pre>\n\n\n\n
Node.js<\/h3>\n\n\n\n
Node.js nie rozwija si\u0119 a\u017c tak dynamicznie jak Bun czy Deno. Wszyscy zgodzimy si\u0119 jednak, \u017ce w przypadku takiego staruszka cenimy raczej stabilno\u015b\u0107 i przewidywalno\u015b\u0107, ni\u017c wywracaj\u0105ce \u015bwiat do g\u00f3ry nogami funkcjonalno\u015bci. Niemniej, Node.js r\u00f3wnie\u017c dostarczy\u0142 w tym roku kilka ciekawych nowo\u015bci.<\/p>\n\n\n\n
Zaczniem od funkcjonalno\u015bci, kt\u00f3ra ucieszy\u0142a wszystkich, kt\u00f3rzy kiedykolwiek pr\u00f3bowali pisa\u0107 kod uruchamiany zar\u00f3wno na serwerze jak i w przegl\u0105darce. Do Node 18 trafi\u0142o bowiem wsparcie dla metody fetch()<\/code> oparte o popularn\u0105 bibliotek\u0119 Undici<\/code>. Co prawda implementacja fetch()<\/code> w przegl\u0105darkach i Node.js nie s\u0105 w 100% kompatybilne, ale r\u00f3\u017cnice s\u0105 na tyle niewielkie, \u017ce wi\u0119kszo\u015bci projekt\u00f3w nawet ich nie zauwa\u017cycie. <\/p>\n\n\n\n
fetch("http:\/\/example.com\/api\/endpoint")\n  .then((response) => {\n    \/\/ Do something with response\n  })\n  .catch(function (err) {\n    console.log("Unable to fetch -", err);\n  });<\/code><\/pre>\n\n\n\n
Kolejn\u0105 ciekaw\u0105 now\u0105 funkcjonalno\u015bci\u0105 jest wbudowany test runner. Oznacza to, \u017ce do testowania Node nie b\u0119dziemy ju\u017c wi\u0119cej potrzebowa\u0107 bibliotek takich jak Jest czy Vitest.<\/p>\n\n\n\n
test('synchronous passing test', (t) => {\n  \/\/ This test passes because it does not throw an exception.\n  assert.strictEqual(1, 1);\n});\n\ntest('asynchronous passing test', async (t) => {\n  \/\/ This test passes because the Promise returned by the async\n  \/\/ function is not rejected.\n  assert.strictEqual(1, 1);\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Pocz\u0105tek roku, to okres pe\u0142en motywacji i nowych postanowie\u0144. Zanim ruszymy do przodu, warto jednak rzuci\u0107 okiem za siebie i podsumowa\u0107 najwa\u017cniejsze wydarzenia w ekosystemie JavaScript w 2022 roku.<\/p>\n","protected":false},"author":12,"featured_media":13644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273,1],"tags":[],"class_list":["post-13549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","category-no-category"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","feature_image_blog":{"ID":13644,"id":13644,"title":"pexels-william-fortunato-6140470","filename":"pexels-william-fortunato-6140470.jpg","filesize":312231,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","link":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/pexels-william-fortunato-6140470\/","alt":"","author":"12","description":"","caption":"","name":"pexels-william-fortunato-6140470","status":"inherit","uploaded_to":13549,"date":"2023-01-09 12:43:56","modified":"2023-01-09 12:43:56","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1280,"height":853,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470-300x200.jpg","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470-768x512.jpg","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470-1024x682.jpg","large-width":1024,"large-height":682,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","1536x1536-width":1280,"1536x1536-height":853,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","2048x2048-width":1280,"2048x2048-height":853,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}},"estimated_reading_time":"22"},"yoast_head":"\nJavaScript Wrapped 2022 | Frontend Weekly vol. 119 - 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-weekly-vol-119\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Wrapped 2022 | Frontend Weekly vol. 119 - Vived\" \/>\n<meta property=\"og:description\" content=\"Pocz\u0105tek roku, to okres pe\u0142en motywacji i nowych postanowie\u0144. Zanim ruszymy do przodu, warto jednak rzuci\u0107 okiem za siebie i podsumowa\u0107 najwa\u017cniejsze wydarzenia w ekosystemie JavaScript w 2022 roku.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-09T13:51:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-10T16:10:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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-weekly-vol-119\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"JavaScript Wrapped 2022 | Frontend Weekly vol. 119\",\"datePublished\":\"2023-01-09T13:51:31+00:00\",\"dateModified\":\"2023-01-10T16:10:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\"},\"wordCount\":3603,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg\",\"articleSection\":[\"Frontend\",\"No category\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\",\"name\":\"JavaScript Wrapped 2022 | Frontend Weekly vol. 119 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg\",\"datePublished\":\"2023-01-09T13:51:31+00:00\",\"dateModified\":\"2023-01-10T16:10:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Wrapped 2022 | Frontend Weekly vol. 119\"}]},{\"@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":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119 - 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-weekly-vol-119\/","og_locale":"pl_PL","og_type":"article","og_title":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119 - Vived","og_description":"Pocz\u0105tek roku, to okres pe\u0142en motywacji i nowych postanowie\u0144. Zanim ruszymy do przodu, warto jednak rzuci\u0107 okiem za siebie i podsumowa\u0107 najwa\u017cniejsze wydarzenia w ekosystemie JavaScript w 2022 roku.","og_url":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/","og_site_name":"Vived","article_published_time":"2023-01-09T13:51:31+00:00","article_modified_time":"2023-01-10T16:10:18+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","type":"image\/jpeg"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119","datePublished":"2023-01-09T13:51:31+00:00","dateModified":"2023-01-10T16:10:18+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/"},"wordCount":3603,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","articleSection":["Frontend","No category"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/","url":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/","name":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","datePublished":"2023-01-09T13:51:31+00:00","dateModified":"2023-01-10T16:10:18+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/pexels-william-fortunato-6140470.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-weekly-vol-119\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"JavaScript Wrapped 2022 | Frontend Weekly vol. 119"}]},{"@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":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. TypeScript w 2022<\/h2>\n","innerContent":["\n<h2>1. TypeScript w 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na przestrzeni tegorocznych przegl\u0105d\u00f3w wielokrotnie powtarza\u0142em, \u017ce TypeScript bardzo dojrza\u0142, a co za tym idzie sta\u0142 si\u0119 nudny jak flaki z olejem. Patrz\u0105c na rok 2022 okazuje si\u0119 jednak, \u017ce nawet w takim dojrza\u0142ym i stabilnym ekosystemie wydarzy\u0142o si\u0119 kilka ciekawych rzeczy.<\/p>\n","innerContent":["\n<p>Na przestrzeni tegorocznych przegl\u0105d\u00f3w wielokrotnie powtarza\u0142em, \u017ce TypeScript bardzo dojrza\u0142, a co za tym idzie sta\u0142 si\u0119 nudny jak flaki z olejem. Patrz\u0105c na rok 2022 okazuje si\u0119 jednak, \u017ce nawet w takim dojrza\u0142ym i stabilnym ekosystemie wydarzy\u0142o si\u0119 kilka ciekawych rzeczy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Typy zmierzaj\u0105 do JavaScript?<\/h3>\n","innerContent":["\n<h3>Typy zmierzaj\u0105 do JavaScript?<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pocz\u0105tkiem marca Microsoft, czyli firma stoj\u0105ca z TypeScript, przygotowa\u0142a proposal do standardu JavaScript. Jego tre\u015b\u0107 skupia\u0142a si\u0119 na wzbogaceniu sk\u0142adni o typy podobne do tych znanych z TypeScript. Aby zachowa\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 oraz nie zmienia\u0107 fundamentalnych za\u0142o\u017ce\u0144 j\u0119zyka, Microsoft zaproponowa\u0142, \u017ce interpreter b\u0119dzie traktowa\u0142 typy tak samo jak komentarze (tj. b\u0119dzie je kompletnie ignorowa\u0142). Dzi\u0119ki temu typy nie b\u0119d\u0105 mia\u0142y wp\u0142ywu na logik\u0119, ale sprawi\u0105, \u017ce kod b\u0119dzie czytelniejszy, a deweloperzy b\u0119d\u0105 znacznie wydajniejsi dzi\u0119ki podpi\u0119ciu language servera i type checkera do swojego IDE.<\/p>\n","innerContent":["\n<p>Pocz\u0105tkiem marca Microsoft, czyli firma stoj\u0105ca z TypeScript, przygotowa\u0142a proposal do standardu JavaScript. Jego tre\u015b\u0107 skupia\u0142a si\u0119 na wzbogaceniu sk\u0142adni o typy podobne do tych znanych z TypeScript. Aby zachowa\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 oraz nie zmienia\u0107 fundamentalnych za\u0142o\u017ce\u0144 j\u0119zyka, Microsoft zaproponowa\u0142, \u017ce interpreter b\u0119dzie traktowa\u0142 typy tak samo jak komentarze (tj. b\u0119dzie je kompletnie ignorowa\u0142). Dzi\u0119ki temu typy nie b\u0119d\u0105 mia\u0142y wp\u0142ywu na logik\u0119, ale sprawi\u0105, \u017ce kod b\u0119dzie czytelniejszy, a deweloperzy b\u0119d\u0105 znacznie wydajniejsi dzi\u0119ki podpi\u0119ciu language servera i type checkera do swojego IDE.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13570,"width":697,"height":358,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/tac-announcement-today-proposed-1024x526.jpeg\" alt=\"\" class=\"wp-image-13570\" width=\"697\" height=\"358\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/tac-announcement-today-proposed-1024x526.jpeg\" alt=\"\" class=\"wp-image-13570\" width=\"697\" height=\"358\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przedstawione powy\u017cej zachowanie mo\u017ce do z\u0142udzenia przypomina\u0107 obecne zachowanie JSDoc. Nowy proposal ma jednak znaczn\u0105 przewag\u0119 nad tym rozwi\u0105zaniem. Po pierwsze proponowany przez Microsoft format jest znacznie zwi\u0119\u017alejszy i czytelniejszy ni\u017c JSDoc. Po drugie mo\u017cliwo\u015bci JSDoc s\u0105 mocno ograniczone (za jego pomoc\u0105 ci\u0119\u017cko jest zdefiniowa\u0107 chocia\u017cby generyki).<\/p>\n","innerContent":["\n<p>Przedstawione powy\u017cej zachowanie mo\u017ce do z\u0142udzenia przypomina\u0107 obecne zachowanie JSDoc. Nowy proposal ma jednak znaczn\u0105 przewag\u0119 nad tym rozwi\u0105zaniem. Po pierwsze proponowany przez Microsoft format jest znacznie zwi\u0119\u017alejszy i czytelniejszy ni\u017c JSDoc. Po drugie mo\u017cliwo\u015bci JSDoc s\u0105 mocno ograniczone (za jego pomoc\u0105 ci\u0119\u017cko jest zdefiniowa\u0107 chocia\u017cby generyki).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u2014-----------------------------------\n\/\/ JSDoc\n\/\/ \u2014-----------------------------------\n\n\/**\n * @param {string}  p1 - A string param.\n * @param {string=} p2 - An optional param (Closure syntax)\n * @param {string} [p3] - Another optional param (JSDoc syntax).\n * @param {string} [p4=\"test\"] - An optional param with a default value\n * @return {string} This is the result\n *\/\nfunction stringsStringStrings(p1, p2, p3, p4) {\n   \/* ... *\/\n}\n\n\n\/\/ \u2014-----------------------------------\n\/\/ JavaScript with type annotations\n\/\/ \u2014-----------------------------------\nfunction stringsStringStrings(p1: string, p2?: string, p3?: string, p4 = \"test\"): string {\n    \/* ... *\/\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u2014-----------------------------------\n\/\/ JSDoc\n\/\/ \u2014-----------------------------------\n\n\/**\n * @param {string}  p1 - A string param.\n * @param {string=} p2 - An optional param (Closure syntax)\n * @param {string} [p3] - Another optional param (JSDoc syntax).\n * @param {string} [p4=\"test\"] - An optional param with a default value\n * @return {string} This is the result\n *\/\nfunction stringsStringStrings(p1, p2, p3, p4) {\n   \/* ... *\/\n}\n\n\n\/\/ \u2014-----------------------------------\n\/\/ JavaScript with type annotations\n\/\/ \u2014-----------------------------------\nfunction stringsStringStrings(p1: string, p2?: string, p3?: string, p4 = \"test\"): string {\n    \/* ... *\/\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czy typy w JavaScript oznaczaj\u0105 koniec TypeScript? To zale\u017cy. W pocz\u0105tkowych etapach typy w JavaScript prawdopodobnie b\u0119d\u0105 du\u017co bardziej prymitywne ni\u017c te znane z JavaScript. TypeScript oferuje te\u017c funkcjonalno\u015bci opieraj\u0105ce si\u0119 na transpilacji kodu, takie jak chocia\u017cby enumy. Pod tym wzgl\u0119dem JavaScript raczej nigdny nie dogoni TypeScript.<\/p>\n","innerContent":["\n<p>Czy typy w JavaScript oznaczaj\u0105 koniec TypeScript? To zale\u017cy. W pocz\u0105tkowych etapach typy w JavaScript prawdopodobnie b\u0119d\u0105 du\u017co bardziej prymitywne ni\u017c te znane z JavaScript. TypeScript oferuje te\u017c funkcjonalno\u015bci opieraj\u0105ce si\u0119 na transpilacji kodu, takie jak chocia\u017cby enumy. Pod tym wzgl\u0119dem JavaScript raczej nigdny nie dogoni TypeScript.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Od marca prace nad Proposalem nie posun\u0119\u0142y si\u0119 znacznie do przodu i utkn\u0119\u0142y w Stage 1 (ca\u0142y proces sk\u0142ada si\u0119 z 4 etap\u00f3w). Proposalem opiekuje si\u0119 jednak Microsoft, wi\u0119c wydaje mi si\u0119, \u017ce tamat wr\u00f3ci jeszcze na tapet w 2023 roku.<\/p>\n","innerContent":["\n<p>Od marca prace nad Proposalem nie posun\u0119\u0142y si\u0119 znacznie do przodu i utkn\u0119\u0142y w Stage 1 (ca\u0142y proces sk\u0142ada si\u0119 z 4 etap\u00f3w). Proposalem opiekuje si\u0119 jednak Microsoft, wi\u0119c wydaje mi si\u0119, \u017ce tamat wr\u00f3ci jeszcze na tapet w 2023 roku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Nowe funkcjoalno\u015bci w TypeScript<\/h3>\n","innerContent":["\n<h3>Nowe funkcjoalno\u015bci w TypeScript<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na przestrzeni minionego roku dostali\u015bmy a\u017c 3 nowe wersje TypeScript: 4.7, 4.8 i 4.9. Nie ma jednak sensu, \u017ceby\u015bcie zag\u0142\u0119biali si\u0119 w poszczeg\u00f3lne wersje, bo... s\u0105 nudne jak flaki z olejem. Programi\u015bci pracuj\u0105cy nad TypeScriptem po\u015bwi\u0119cili mas\u0119 czasu na optymalizacj\u0119 wydajno\u015b\u0107i i lepsz\u0105 obs\u0142ug\u0119 kolejnych przypadk\u00f3w brzegowych. W\u015br\u00f3d nowo\u015bci na pierwszy plan przebija si\u0119 jednak jedna nowa funkcjonalno\u015b\u0107 - operator <code>satisfies<\/code>.<\/p>\n","innerContent":["\n<p>Na przestrzeni minionego roku dostali\u015bmy a\u017c 3 nowe wersje TypeScript: 4.7, 4.8 i 4.9. Nie ma jednak sensu, \u017ceby\u015bcie zag\u0142\u0119biali si\u0119 w poszczeg\u00f3lne wersje, bo... s\u0105 nudne jak flaki z olejem. Programi\u015bci pracuj\u0105cy nad TypeScriptem po\u015bwi\u0119cili mas\u0119 czasu na optymalizacj\u0119 wydajno\u015b\u0107i i lepsz\u0105 obs\u0142ug\u0119 kolejnych przypadk\u00f3w brzegowych. W\u015br\u00f3d nowo\u015bci na pierwszy plan przebija si\u0119 jednak jedna nowa funkcjonalno\u015b\u0107 - operator <code>satisfies<\/code>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>T\u0142umacz\u0105c dzia\u0142anie nowego operatora pos\u0142u\u017c\u0119 si\u0119 przyk\u0142adem z dokumentacji od Microsoftu. Za\u0142\u00f3\u017cmy, \u017ce potrzebujemy otypowa\u0107 nast\u0119puj\u0105cy kod:<\/p>\n","innerContent":["\n<p>T\u0142umacz\u0105c dzia\u0142anie nowego operatora pos\u0142u\u017c\u0119 si\u0119 przyk\u0142adem z dokumentacji od Microsoftu. Za\u0142\u00f3\u017cmy, \u017ce potrzebujemy otypowa\u0107 nast\u0119puj\u0105cy kod:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Each property can be a string or an RGB tuple.\nconst palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = palette.red.at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = palette.green.toUpperCase();<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Each property can be a string or an RGB tuple.\nconst palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = palette.red.at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = palette.green.toUpperCase();<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W pierwszej chwili do g\u0142owy przyj\u015b\u0107 mo\u017ce zdefiniowanie typu <code>Color<\/code> oraz wykorzystanie typu <code>Record<\/code>. Niestety, w takim przypadku zmuszeni jeste\u015bmy wykonywa\u0107 niebezpieczn\u0105 operacj\u0119 rzutowania:<\/p>\n","innerContent":["\n<p>W pierwszej chwili do g\u0142owy przyj\u015b\u0107 mo\u017ce zdefiniowanie typu <code>Color<\/code> oraz wykorzystanie typu <code>Record<\/code>. Niestety, w takim przypadku zmuszeni jeste\u015bmy wykonywa\u0107 niebezpieczn\u0105 operacj\u0119 rzutowania:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type Color = \"red\" | \"green\" | \"blue\";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette: Palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = (palette.red as RGB).at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = (palette.green as string).toUpperCase();<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type Color = \"red\" | \"green\" | \"blue\";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette: Palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n};\n\n\/\/ We want to be able to use array methods on 'red'...\nconst redComponent = (palette.red as RGB).at(0);\n\n\/\/ or string methods on 'green'...\nconst greenNormalized = (palette.green as string).toUpperCase();<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Obej\u015bciem tego problemu ma by\u0107 nowy operator satisfies, kt\u00f3ry b\u0119dzie walidowa\u0142 typ w momencie przypisania, ale nie b\u0119dzie mia\u0142 wp\u0142ywu na typ ewaluowany przez TypeScript. Brzmi skomplikowanie, ale na prostym przyk\u0142adzie dobrze wida\u0107, o co chodzi:<\/p>\n","innerContent":["\n<p>Obej\u015bciem tego problemu ma by\u0107 nowy operator satisfies, kt\u00f3ry b\u0119dzie walidowa\u0142 typ w momencie przypisania, ale nie b\u0119dzie mia\u0142 wp\u0142ywu na typ ewaluowany przez TypeScript. Brzmi skomplikowanie, ale na prostym przyk\u0142adzie dobrze wida\u0107, o co chodzi:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type Color = \"red\" | \"green\" | \"blue\";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n} satisfies Palette;\n\n\/\/ Both of these methods are still accessible!\nconst redComponent = palette.red.at(0);\nconst greenNormalized = palette.green.toUpperCase();\n\n\/\/ \u2014-----------------------------------\n\/\/ Example errors caught by satisfies\n\/\/  \u2014-----------------------------------\n\nconst spelloPalette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    bleu: [0, 0, 255] \/\/ Such typos are now caught\n} satisfies Palette;\n\n\/\/ Missing properties are now caught\nconst missingColorPalette = {\n    red: [255, 0, 0],\n    bleu: [0, 0, 255]\n} satisfies Palette;\n\nconst wrongColorTypePalette = {\n    red: [255, 0], \/\/ Such typos are now also caught\n    green: \"#00ff00\",\n    bleu: [0, 0, 255]\n} satisfies Palette;<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type Color = \"red\" | \"green\" | \"blue\";\ntype RGB = [red: number, green: number, blue: number];\n\ntype Palette = Record<Color, string | RGB>\n\nconst palette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    blue: [0, 0, 255]\n} satisfies Palette;\n\n\/\/ Both of these methods are still accessible!\nconst redComponent = palette.red.at(0);\nconst greenNormalized = palette.green.toUpperCase();\n\n\/\/ \u2014-----------------------------------\n\/\/ Example errors caught by satisfies\n\/\/  \u2014-----------------------------------\n\nconst spelloPalette = {\n    red: [255, 0, 0],\n    green: \"#00ff00\",\n    bleu: [0, 0, 255] \/\/ Such typos are now caught\n} satisfies Palette;\n\n\/\/ Missing properties are now caught\nconst missingColorPalette = {\n    red: [255, 0, 0],\n    bleu: [0, 0, 255]\n} satisfies Palette;\n\nconst wrongColorTypePalette = {\n    red: [255, 0], \/\/ Such typos are now also caught\n    green: \"#00ff00\",\n    bleu: [0, 0, 255]\n} satisfies Palette;<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zastosowanie nowego oparetara znalaz\u0142em ju\u017c chocia\u017cby w SvelteKit i jestem przekonany, \u017ce przyda si\u0119 on w niejednym projekcie.<\/p>\n","innerContent":["\n<p>Zastosowanie nowego oparetara znalaz\u0142em ju\u017c chocia\u017cby w SvelteKit i jestem przekonany, \u017ce przyda si\u0119 on w niejednym projekcie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Przysz\u0142o\u015b\u0107 TypeScript<\/h3>\n","innerContent":["\n<h3>Przysz\u0142o\u015b\u0107 TypeScript<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przysz\u0142y rok zaczniemy od releasu TypeScript 5.0 pocz\u0105tkiem marca. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie nowa du\u017ca wersja powinna przynie\u015b\u0107 paczk\u0119 du\u017cych i ekscytuj\u0105cych zmian, ale nie koniecznie brakinc changes. Buszuj\u0105 po repozytorium TypeScript mo\u017cemy doszyka\u0107 si\u0119 kilku nadchodz\u0105cych nowo\u015bci. Po pierwsze TypeScript przepisany zosta\u0142 do modu\u0142\u00f3w (do tej pory bazowa\u0142 na namespace), co zmniejszy\u0142o paczk\u0119 o 25% i przy\u015bpieszy\u0142o kompilacj\u0119 o 10%. Dekoratory z funkcjonalno\u015bci nie wychodz\u0105cej poza kompilator, maj\u0105 sta\u0107 si\u0119 kompatybilne z dekoratorami znajduj\u0105cymi sie w 3-cim etapie standaryzacji JavaScript (przyp: standaryzacja sk\u0142ada si\u0119 z 4 etap\u00f3w, bardzo rzadko zdarza si\u0119 sytuacja kiedy funkcjonalno\u015b\u0107 na 3-cim etapie zostaje usuni\u0119ta). TypeScript pracuje te\u017c nad natywnym wsparciem import\u00f3w dla dowolnego typu plik\u00f3w.  Jak widzicie jest tego sporo i wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce rok 2023 b\u0119dzi\u0119 dla TypeScript zdecydowanie ciekawszy ni\u017c 2022.<\/p>\n","innerContent":["\n<p>Przysz\u0142y rok zaczniemy od releasu TypeScript 5.0 pocz\u0105tkiem marca. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie nowa du\u017ca wersja powinna przynie\u015b\u0107 paczk\u0119 du\u017cych i ekscytuj\u0105cych zmian, ale nie koniecznie brakinc changes. Buszuj\u0105 po repozytorium TypeScript mo\u017cemy doszyka\u0107 si\u0119 kilku nadchodz\u0105cych nowo\u015bci. Po pierwsze TypeScript przepisany zosta\u0142 do modu\u0142\u00f3w (do tej pory bazowa\u0142 na namespace), co zmniejszy\u0142o paczk\u0119 o 25% i przy\u015bpieszy\u0142o kompilacj\u0119 o 10%. Dekoratory z funkcjonalno\u015bci nie wychodz\u0105cej poza kompilator, maj\u0105 sta\u0107 si\u0119 kompatybilne z dekoratorami znajduj\u0105cymi sie w 3-cim etapie standaryzacji JavaScript (przyp: standaryzacja sk\u0142ada si\u0119 z 4 etap\u00f3w, bardzo rzadko zdarza si\u0119 sytuacja kiedy funkcjonalno\u015b\u0107 na 3-cim etapie zostaje usuni\u0119ta). TypeScript pracuje te\u017c nad natywnym wsparciem import\u00f3w dla dowolnego typu plik\u00f3w.  Jak widzicie jest tego sporo i wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce rok 2023 b\u0119dzi\u0119 dla TypeScript zdecydowanie ciekawszy ni\u017c 2022.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. React w 2022<\/h2>\n","innerContent":["\n<h2>2. React w 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W tym roku wreszcie si\u0119 doczekali\u015bmy! Po dw\u00f3ch latach od opublikowania React 17, \u015bwiat\u0142o dzienne ujrza\u0142a kolejna wersja frameworka od Mety. W odr\u00f3\u017cnieniu od poprzedniej wersji, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci. <\/p>\n","innerContent":["\n<p>W tym roku wreszcie si\u0119 doczekali\u015bmy! Po dw\u00f3ch latach od opublikowania React 17, \u015bwiat\u0142o dzienne ujrza\u0142a kolejna wersja frameworka od Mety. W odr\u00f3\u017cnieniu od poprzedniej wersji, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>React 18 i Concurrent Mode <\/h3>\n","innerContent":["\n<h3>React 18 i Concurrent Mode <\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n","innerContent":["\n<p>Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13621,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6auoc5.jpeg\" alt=\"\" class=\"wp-image-13621\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6auoc5.jpeg\" alt=\"\" class=\"wp-image-13621\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n","innerContent":["\n<p>Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n","innerContent":["\n<p>Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13623,"width":734,"height":413,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6auqav.jpeg\" alt=\"\" class=\"wp-image-13623\" width=\"734\" height=\"413\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6auqav.jpeg\" alt=\"\" class=\"wp-image-13623\" width=\"734\" height=\"413\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3wm, takie akcje nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n","innerContent":["\n<p>Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3wm, takie akcje nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wystarczy ju\u017c teorii \u2013 przejd\u017amy do mi\u0119ska. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 <code>startTransition<\/code>, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook <code>useTransition()<\/code>.<\/p>\n","innerContent":["\n<p>Wystarczy ju\u017c teorii \u2013 przejd\u017amy do mi\u0119ska. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 <code>startTransition<\/code>, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook <code>useTransition()<\/code>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">export default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">export default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do API trafi\u0142 r\u00f3wnie\u017c hook <code>useDeferredValue<\/code>. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent.<\/p>\n","innerContent":["\n<p>Do API trafi\u0142 r\u00f3wnie\u017c hook <code>useDeferredValue<\/code>. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Co czeka React w 2023 roku?<\/h3>\n","innerContent":["\n<h3>Co czeka React w 2023 roku?<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W 2023 roku raczej nie doczekamy si\u0119 kolejego du\u017cego wydania Reacta. Nie zmienia to faktu, \u017ce wiemy nad czym obecnie pracuje zesp\u00f3\u0142 rozwijaj\u0105cy bibliotek\u0119. Mo\u017cemy si\u0119 r\u00f3wnie\u017c spodziewa\u0107, \u017ce cze\u015b\u0107 z tych funkcjonalno\u015bci nie b\u0119dzie czeka\u0107 na React 19 i trafi do kolejnych wersji React 18.<\/p>\n","innerContent":["\n<p>W 2023 roku raczej nie doczekamy si\u0119 kolejego du\u017cego wydania Reacta. Nie zmienia to faktu, \u017ce wiemy nad czym obecnie pracuje zesp\u00f3\u0142 rozwijaj\u0105cy bibliotek\u0119. Mo\u017cemy si\u0119 r\u00f3wnie\u017c spodziewa\u0107, \u017ce cze\u015b\u0107 z tych funkcjonalno\u015bci nie b\u0119dzie czeka\u0107 na React 19 i trafi do kolejnych wersji React 18.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Chyba najwi\u0119ksz\u0105 i najbardziej wyczekiwan\u0105 funkcjonalno\u015bci\u0105 nad kt\u00f3r\u0105 obecnie trwaj\u0105 prace s\u0105 React Server Components. Wi\u0119cej o nich przeczytacie w jendej z kolejnej sekcji tego posta. Nie s\u0105 to jednak jedyna aktualnie rozwijana funkjonalno\u015b\u0107. Zesp\u00f3\u0142 pracuje r\u00f3wnie\u017c nad komponentem <code><Offscreen \/><\/code>, kt\u00f3rym umo\u017cliwi renderowanie komponent\u00f3w poza ekranem, bez konieczno\u015bci montowania ich do struktury HTML. Inn\u0105 rozwijan\u0105 w pocie czo\u0142a funkcjonalno\u015bci\u0105 jest kompilator automatycznie dodaj\u0105cy <code>useMemo<\/code> i <code>useCallback<\/code> wsz\u0119dzie tam gdzie to potrzebne. <\/p>\n","innerContent":["\n<p>Chyba najwi\u0119ksz\u0105 i najbardziej wyczekiwan\u0105 funkcjonalno\u015bci\u0105 nad kt\u00f3r\u0105 obecnie trwaj\u0105 prace s\u0105 React Server Components. Wi\u0119cej o nich przeczytacie w jendej z kolejnej sekcji tego posta. Nie s\u0105 to jednak jedyna aktualnie rozwijana funkjonalno\u015b\u0107. Zesp\u00f3\u0142 pracuje r\u00f3wnie\u017c nad komponentem <code><Offscreen \/><\/code>, kt\u00f3rym umo\u017cliwi renderowanie komponent\u00f3w poza ekranem, bez konieczno\u015bci montowania ich do struktury HTML. Inn\u0105 rozwijan\u0105 w pocie czo\u0142a funkcjonalno\u015bci\u0105 jest kompilator automatycznie dodaj\u0105cy <code>useMemo<\/code> i <code>useCallback<\/code> wsz\u0119dzie tam gdzie to potrzebne. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13625,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6klws6-1.jpeg\" alt=\"\" class=\"wp-image-13625\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6klws6-1.jpeg\" alt=\"\" class=\"wp-image-13625\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Angular w 2022<\/h2>\n","innerContent":["\n<h2>3. Angular w 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W 2022 roku w ekosystemie Angulara dzia\u0142o si\u0119 naprawd\u0119 sporo. Rok zacz\u0119lismy od po\u017cegnania angular.js. Nied\u0142ugo p\u00f3\u017aniej wraz z Angularem 14 zaprezentowana zosta\u0142a pierwsza eksperymentalna implementacja Standalone Componetns. Na przestrzeni ca\u0142ego roku zesp\u00f3\u0142 z Google pracowa\u0142 w pocie czo\u0142a i Angular 15 dostarczy\u0142 nam stabiln\u0105 wersj\u0119 tej od dawna wyczekiwanej funkcjonalno\u015bci.<\/p>\n","innerContent":["\n<p>W 2022 roku w ekosystemie Angulara dzia\u0142o si\u0119 naprawd\u0119 sporo. Rok zacz\u0119lismy od po\u017cegnania angular.js. Nied\u0142ugo p\u00f3\u017aniej wraz z Angularem 14 zaprezentowana zosta\u0142a pierwsza eksperymentalna implementacja Standalone Componetns. Na przestrzeni ca\u0142ego roku zesp\u00f3\u0142 z Google pracowa\u0142 w pocie czo\u0142a i Angular 15 dostarczy\u0142 nam stabiln\u0105 wersj\u0119 tej od dawna wyczekiwanej funkcjonalno\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Koniec wsparcia dla angular.js<\/h3>\n","innerContent":["\n<h3>Koniec wsparcia dla angular.js<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wsparcie dla angular.js mia\u0142o zosta\u0107 wycofane ju\u017c w lipcu 2021 roku. Nied\u0142ugo po wybuchu pandemii ze wzgl\u0119du na wywo\u0142ane przez ni\u0105 perturbacje, Google zdecydowa\u0142 si\u0119 da\u0107 firmom dodatkowe p\u00f3\u0142 roku wsparcia. Dodatkowy czas dobieg\u0142 ko\u0144ca z pocz\u0105tkiem 2022 roku. Wtedy to oficjalnie po\u017cegnali\u015bmy angular.js, (znany te\u017c jako Angular 1.x). Oczywi\u015bcie framework dalej dost\u0119pny jest w npm, ale Google nie planuje ju\u017c dalszych \u0142atek.<\/p>\n","innerContent":["\n<p>Wsparcie dla angular.js mia\u0142o zosta\u0107 wycofane ju\u017c w lipcu 2021 roku. Nied\u0142ugo po wybuchu pandemii ze wzgl\u0119du na wywo\u0142ane przez ni\u0105 perturbacje, Google zdecydowa\u0142 si\u0119 da\u0107 firmom dodatkowe p\u00f3\u0142 roku wsparcia. Dodatkowy czas dobieg\u0142 ko\u0144ca z pocz\u0105tkiem 2022 roku. Wtedy to oficjalnie po\u017cegnali\u015bmy angular.js, (znany te\u017c jako Angular 1.x). Oczywi\u015bcie framework dalej dost\u0119pny jest w npm, ale Google nie planuje ju\u017c dalszych \u0142atek.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Angular 14 i 15<\/h3>\n","innerContent":["\n<h3>Angular 14 i 15<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Miniony rok w ekosystemie Angulara up\u0142yn\u0105\u0142 w\u0142a\u015bciwie pod jednym has\u0142em: Standalone Components. Co wa\u017cne, nie m\u00f3wimy tutaj o funkcjonalno\u015bci samej w sobie, ale tak\u017ce o masie pracy wykonanej naoko\u0142o. Aby umo\u017cliwi\u0107 tworzenie aplikacji pozbawionych modu\u0142\u00f3w zespu\u0142 przygotowa\u0142 mi\u0119dzy innymi funkcj\u0119 <code>inject()<\/code>, API do towrzenia funkcyjnych guard\u00f3w czt nowe API do inicjalizacji aplikacji.<\/p>\n","innerContent":["\n<p>Miniony rok w ekosystemie Angulara up\u0142yn\u0105\u0142 w\u0142a\u015bciwie pod jednym has\u0142em: Standalone Components. Co wa\u017cne, nie m\u00f3wimy tutaj o funkcjonalno\u015bci samej w sobie, ale tak\u017ce o masie pracy wykonanej naoko\u0142o. Aby umo\u017cliwi\u0107 tworzenie aplikacji pozbawionych modu\u0142\u00f3w zespu\u0142 przygotowa\u0142 mi\u0119dzy innymi funkcj\u0119 <code>inject()<\/code>, API do towrzenia funkcyjnych guard\u00f3w czt nowe API do inicjalizacji aplikacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Angularowe modu\u0142y maj\u0105 niewiele wsp\u00f3lnego z modu\u0142ami znanym z JavaScriptu. Natywne modu\u0142y pozwalaj\u0105 podzieli\u0107 aplikacj\u0119 na wiele plik\u00f3w i zarz\u0105dza\u0107 API, jakie udost\u0119pniamy. Angularowe modu\u0142y maj\u0105 na celu zapewnia\u0107 konfiguracj\u0119 zale\u017cno\u015bci dla Dependency Injection. W Angularze ka\u017cdy komponent czy dyrektywa musi by\u0107 cz\u0119\u015bci\u0105 jakiego\u015b modu\u0142u, co czyni je najbardziej atomicznym elementem frameworku. Co ciekawe, modu\u0142y trafi\u0142y do Angulara dopiero w wersji 2.0.0-rc.5 i by\u0142y odpowiedzi\u0105 na problemy z publikowanie Angularowych bibliotek w npm. Z racji, \u017ce framework by\u0142 ju\u017c na etapie Release Candidate, to ca\u0142e rozwi\u0105zanie powsta\u0142o w przy\u015bpieszonym tempie, i jak to bywa z takimi rozwi\u0105zaniami zosta\u0142o z nami na d\u0142u\u017cej.<\/p>\n","innerContent":["\n<p>Angularowe modu\u0142y maj\u0105 niewiele wsp\u00f3lnego z modu\u0142ami znanym z JavaScriptu. Natywne modu\u0142y pozwalaj\u0105 podzieli\u0107 aplikacj\u0119 na wiele plik\u00f3w i zarz\u0105dza\u0107 API, jakie udost\u0119pniamy. Angularowe modu\u0142y maj\u0105 na celu zapewnia\u0107 konfiguracj\u0119 zale\u017cno\u015bci dla Dependency Injection. W Angularze ka\u017cdy komponent czy dyrektywa musi by\u0107 cz\u0119\u015bci\u0105 jakiego\u015b modu\u0142u, co czyni je najbardziej atomicznym elementem frameworku. Co ciekawe, modu\u0142y trafi\u0142y do Angulara dopiero w wersji 2.0.0-rc.5 i by\u0142y odpowiedzi\u0105 na problemy z publikowanie Angularowych bibliotek w npm. Z racji, \u017ce framework by\u0142 ju\u017c na etapie Release Candidate, to ca\u0142e rozwi\u0105zanie powsta\u0142o w przy\u015bpieszonym tempie, i jak to bywa z takimi rozwi\u0105zaniami zosta\u0142o z nami na d\u0142u\u017cej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na przestrzeni lat dobre praktyki wok\u00f3\u0142 Angulara ewoluowa\u0142y i obecnie najcz\u0119\u015bciej uskuteczniamy jest schemat SCAM ( Single Component Angular Module). Jedgo jedyn\u0105 wad\u0105 takiego podej\u015bcia jest spora ilo\u015b\u0107 generowanego boilerplate.<\/p>\n","innerContent":["\n<p>Na przestrzeni lat dobre praktyki wok\u00f3\u0142 Angulara ewoluowa\u0142y i obecnie najcz\u0119\u015bciej uskuteczniamy jest schemat SCAM ( Single Component Angular Module). Jedgo jedyn\u0105 wad\u0105 takiego podej\u015bcia jest spora ilo\u015b\u0107 generowanego boilerplate.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">@Component({\n  selector: 'vived-my-component',\n  template:`\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n  `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}\n\n@NgModule({\n  imports:      [ CommonModule, CustomComponentModule ],\n  declarations: [ MyComponent ],\n  exports:      [ MyComponent ],\n})\nexport class MyComponentModule { }<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">@Component({\n  selector: 'vived-my-component',\n  template:`\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n  `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}\n\n@NgModule({\n  imports:      [ CommonModule, CustomComponentModule ],\n  declarations: [ MyComponent ],\n  exports:      [ MyComponent ],\n})\nexport class MyComponentModule { }<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13629,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download-50.jpeg\" alt=\"\" class=\"wp-image-13629\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download-50.jpeg\" alt=\"\" class=\"wp-image-13629\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pocz\u0105wszy od Angulara 15, wi\u0119kszo\u015b\u0107 modu\u0142\u00f3w mo\u017ce by\u0107 generowana automatycznie dzi\u0119ki dodaniu do dekoratora parametru <code>standalone<\/code>.  Za pomoc\u0105 tego jednego prostego triku Angular poddany zosta\u0142 bardzo skutecznej diecie.<\/p>\n","innerContent":["\n<p>Pocz\u0105wszy od Angulara 15, wi\u0119kszo\u015b\u0107 modu\u0142\u00f3w mo\u017ce by\u0107 generowana automatycznie dzi\u0119ki dodaniu do dekoratora parametru <code>standalone<\/code>.  Za pomoc\u0105 tego jednego prostego triku Angular poddany zosta\u0142 bardzo skutecznej diecie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">@Component({\n  selector: 'vived-my-component',\n  standalone: true.,\n  imports: [ CommonModule, CustomComponent ]\n  template: `\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n    `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">@Component({\n  selector: 'vived-my-component',\n  standalone: true.,\n  imports: [ CommonModule, CustomComponent ]\n  template: `\n    <div>\n      <h2>Today is {{today | date}} <\/h2>'\n      <CustomComponent \/>\n    <\/div>\n    `\n})\nexport class MyComponent {\n  readonly today = new Date();\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci dodane do Angulara w 2022 roku, skupione by\u0142y ukruceniu zb\u0119dnego boilerpate'u. Zobaczcie tylko, jak odchudzono chocia\u017cby Router API.<\/p>\n","innerContent":["\n<p>W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci dodane do Angulara w 2022 roku, skupione by\u0142y ukruceniu zb\u0119dnego boilerpate'u. Zobaczcie tylko, jak odchudzono chocia\u017cby Router API.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ This is how you bootstrap application with modules\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    RouterModule.forRoot(\n      [\n        { path: '\/home', component: HomeComponent },\n        { path: '**', redirectTo: '\/home' },\n      ],\n      {\n        preloadingStrategy: PreloadAllModules,\n      }\n    ),\n  ],\n  providers: [\n    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ This is how you bootstrap application with modules\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    RouterModule.forRoot(\n      [\n        { path: '\/home', component: HomeComponent },\n        { path: '**', redirectTo: '\/home' },\n      ],\n      {\n        preloadingStrategy: PreloadAllModules,\n      }\n    ),\n  ],\n  providers: [\n    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ This is how you bootstrap application without modules\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideRouter([\n      { path: '\/home', component: HomeComponent },\n      { path: '**', redirectTo: '\/home' },\n    ], withPreloading(PreloadAllModules)),\n    provideHttpClient(withInterceptors([AuthInterceptor]))\n  ]\n});<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ This is how you bootstrap application without modules\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideRouter([\n      { path: '\/home', component: HomeComponent },\n      { path: '**', redirectTo: '\/home' },\n    ], withPreloading(PreloadAllModules)),\n    provideHttpClient(withInterceptors([AuthInterceptor]))\n  ]\n});<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13631,"width":553,"height":274,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/716bku-1.gif\" alt=\"\" class=\"wp-image-13631\" width=\"553\" height=\"274\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/716bku-1.gif\" alt=\"\" class=\"wp-image-13631\" width=\"553\" height=\"274\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Angular 16 i 17<\/h3>\n","innerContent":["\n<h3>Angular 16 i 17<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przgl\u0105daj\u0105c oficjaln\u0105 roadmap\u0119 i GitHub'a Angulara mo\u017cemy ju\u017c zgadywa\u0107 na czym skupia\u0142 si\u0119 b\u0119dzie zespu\u0142 Angulara w 2023 roku. Po pierwsze minony rok kr\u0119ci\u0142 si\u0119 wok\u00f3\u0142 renderowania po stronie serwera i nie umkn\u0119\u0142o to uwadze zespo\u0142u. W 2023 roku mo\u017cemy si\u0119 wi\u0119c spodziewa\u0107 powrotu do tematu i kilku ciekawych RFC w tym obszarze. Po drugie, kolejnym du\u017cym tematej jest umo\u017cliwienie wyci\u0119cia z zale\u017cno\u015bci Angulara biblioteki zone.js. Dla przypomnienia, jest to troch\u0119 nadgryziona z\u0119bem czasu biblioteka, kt\u00f3ra patchuje wi\u0119kszo\u015b\u0107 API przegl\u0105darki i umo\u017cliwia Angularowi \"magiczne\" wykrywanie zmian w aplikacji. <\/p>\n","innerContent":["\n<p>Przgl\u0105daj\u0105c oficjaln\u0105 roadmap\u0119 i GitHub'a Angulara mo\u017cemy ju\u017c zgadywa\u0107 na czym skupia\u0142 si\u0119 b\u0119dzie zespu\u0142 Angulara w 2023 roku. Po pierwsze minony rok kr\u0119ci\u0142 si\u0119 wok\u00f3\u0142 renderowania po stronie serwera i nie umkn\u0119\u0142o to uwadze zespo\u0142u. W 2023 roku mo\u017cemy si\u0119 wi\u0119c spodziewa\u0107 powrotu do tematu i kilku ciekawych RFC w tym obszarze. Po drugie, kolejnym du\u017cym tematej jest umo\u017cliwienie wyci\u0119cia z zale\u017cno\u015bci Angulara biblioteki zone.js. Dla przypomnienia, jest to troch\u0119 nadgryziona z\u0119bem czasu biblioteka, kt\u00f3ra patchuje wi\u0119kszo\u015b\u0107 API przegl\u0105darki i umo\u017cliwia Angularowi \"magiczne\" wykrywanie zmian w aplikacji. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. Vue w 2022 <\/h2>\n","innerContent":["\n<h2>4. Vue w 2022 <\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W 2022 roku ukaza\u0142a si\u0119 tylko jedna du\u017ca wersja Vue. Co zaskakuj\u0105ce, nie by\u0142o to kolejne Vue 3, ale finalna wersja Vue 2. Poza tym wreszcie doczekali\u015bmy si\u0119 renderowania po stonie serwera z prawdziwego zdarzenia  w postaci Nuxt 3.<\/p>\n","innerContent":["\n<p>W 2022 roku ukaza\u0142a si\u0119 tylko jedna du\u017ca wersja Vue. Co zaskakuj\u0105ce, nie by\u0142o to kolejne Vue 3, ale finalna wersja Vue 2. Poza tym wreszcie doczekali\u015bmy si\u0119 renderowania po stonie serwera z prawdziwego zdarzenia  w postaci Nuxt 3.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Vue 2.7<\/h3>\n","innerContent":["\n<h3>Vue 2.7<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vue 2.7 to ostatnie wydanie Vue 2 i b\u0119dzie ono wspierane do ko\u0144ca 2023 roku. W najwi\u0119kszym skr\u00f3cie, wersja ta dodaje najwa\u017cniejsze funkcjonalno\u015bci z Vue 3 do Vue 2. Dzi\u0119ki takiemu podej\u015bciu, inkrementalna migracja powinna sta\u0107 si\u0119 znacznie prostsza. Czy tak rzeczywi\u015bcie b\u0119dzie? O tym przekonamy sie pod koniec 2023 roku, kiedy to oka\u017ce si\u0119 jak du\u017co projekt\u00f3w nie wyrobi\u0142o si\u0119 z ow\u0105 migracj\u0105 na czas.<\/p>\n","innerContent":["\n<p>Vue 2.7 to ostatnie wydanie Vue 2 i b\u0119dzie ono wspierane do ko\u0144ca 2023 roku. W najwi\u0119kszym skr\u00f3cie, wersja ta dodaje najwa\u017cniejsze funkcjonalno\u015bci z Vue 3 do Vue 2. Dzi\u0119ki takiemu podej\u015bciu, inkrementalna migracja powinna sta\u0107 si\u0119 znacznie prostsza. Czy tak rzeczywi\u015bcie b\u0119dzie? O tym przekonamy sie pod koniec 2023 roku, kiedy to oka\u017ce si\u0119 jak du\u017co projekt\u00f3w nie wyrobi\u0142o si\u0119 z ow\u0105 migracj\u0105 na czas.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najwi\u0119ksz\u0105 funkcjonalno\u015bci\u0105 jaka trafi\u0142a do Vue 2.7 jest <code>Composition API<\/code>, przez wielu \u017cartobliwie nazywane React Hooks dla Vue. Na API to sk\u0142adaj\u0105 si\u0119 3 sk\u0142adowe: Reactivity API (<code>ref<\/code> i <code>reactive<\/code>), Lifecycle Hooks (<code>onMounted<\/code>\/<code>onUnmounted<\/code>) oraz Dependency Injection (<code>provide<\/code>\/<code>inject<\/code>). Co wa\u017cne, zar\u00f3wno zachowanie jak i typy wszystkich nowych funkcjonalno\u015bci s\u0105 w 100% kompatybilne z Vue 3.<\/p>\n","innerContent":["\n<p>Najwi\u0119ksz\u0105 funkcjonalno\u015bci\u0105 jaka trafi\u0142a do Vue 2.7 jest <code>Composition API<\/code>, przez wielu \u017cartobliwie nazywane React Hooks dla Vue. Na API to sk\u0142adaj\u0105 si\u0119 3 sk\u0142adowe: Reactivity API (<code>ref<\/code> i <code>reactive<\/code>), Lifecycle Hooks (<code>onMounted<\/code>\/<code>onUnmounted<\/code>) oraz Dependency Injection (<code>provide<\/code>\/<code>inject<\/code>). Co wa\u017cne, zar\u00f3wno zachowanie jak i typy wszystkich nowych funkcjonalno\u015bci s\u0105 w 100% kompatybilne z Vue 3.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Old Options API\n<script>\nexport default {\n  data() {\n    return {\n      name: 'John',\n    };\n  },\n  mounted() {\n    console.log(`Hello ${this.name}`);\n  },\n};\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Old Options API\n<script>\nexport default {\n  data() {\n    return {\n      name: 'John',\n    };\n  },\n  mounted() {\n    console.log(`Hello ${this.name}`);\n  },\n};\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ New Composition API\n<script setup> \nconst name = ref(0);\n\nonMounted(() => {\n  console.log(`Hello ${name.value}`);\n});\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ New Composition API\n<script setup> \nconst name = ref(0);\n\nonMounted(() => {\n  console.log(`Hello ${name.value}`);\n});\n<\/script>\n\n<template>\n  <p>Hello {{ name }}!<\/p>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13633,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6m1ts7.jpeg\" alt=\"\" class=\"wp-image-13633\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6m1ts7.jpeg\" alt=\"\" class=\"wp-image-13633\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Vue 3.3<\/h3>\n","innerContent":["\n<h3>Vue 3.3<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vue 3.3 mia\u0142o ukaza\u0107 si\u0119 pod koniec 2022 roku, ale jego premiera zosta\u0142a przeniesiona na rok 2023. Mo\u017cemy ju\u017c jednak uchyli\u0107 r\u0105bka tajemnicy i zerkn\u0105\u0107 na to, co czeka nas w Vue w przysz\u0142ym roku.<\/p>\n","innerContent":["\n<p>Vue 3.3 mia\u0142o ukaza\u0107 si\u0119 pod koniec 2022 roku, ale jego premiera zosta\u0142a przeniesiona na rok 2023. Mo\u017cemy ju\u017c jednak uchyli\u0107 r\u0105bka tajemnicy i zerkn\u0105\u0107 na to, co czeka nas w Vue w przysz\u0142ym roku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><code><Suspense><\/code> umo\u017cliwia\u0107 ma renderowania tymczasowego komponentu do czasu, a\u017c wszystkie asynchroniczne komponenty w drzewie zostan\u0105 za\u0142adowane.<\/p>\n","innerContent":["\n<p><code><Suspense><\/code> umo\u017cliwia\u0107 ma renderowania tymczasowego komponentu do czasu, a\u017c wszystkie asynchroniczne komponenty w drzewie zostan\u0105 za\u0142adowane.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><Suspense>\n  <!-- component with nested async dependencies -->\n  <Dashboard \/>\n\n  <!-- loading state via #fallback slot -->\n  <template #fallback>\n    Loading...\n  <\/template>\n<\/Suspense><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><Suspense>\n  <!-- component with nested async dependencies -->\n  <Dashboard \/>\n\n  <!-- loading state via #fallback slot -->\n  <template #fallback>\n    Loading...\n  <\/template>\n<\/Suspense><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Drug\u0105 wyczekiwan\u0105 funkcjonalno\u015bci\u0105 jest <code>Reactivity Transform<\/code>, czyli szereg usprawnie\u0144 do <code>Composition API<\/code>. Wszystkie metody z <code>Reactive API<\/code> (m.in <code>ref<\/code> i <code>computed<\/code>) doczekaj\u0105 si\u0119 wersji poprzedzonych <code>$<\/code>. B\u0119d\u0105 to makra, kt\u00f3re umo\u017cliwi\u0105 \u0142atwiejszy dost\u0119p do danych, kosztem dodatkowego kroku kompilacji.<\/p>\n","innerContent":["\n<p>Drug\u0105 wyczekiwan\u0105 funkcjonalno\u015bci\u0105 jest <code>Reactivity Transform<\/code>, czyli szereg usprawnie\u0144 do <code>Composition API<\/code>. Wszystkie metody z <code>Reactive API<\/code> (m.in <code>ref<\/code> i <code>computed<\/code>) doczekaj\u0105 si\u0119 wersji poprzedzonych <code>$<\/code>. B\u0119d\u0105 to makra, kt\u00f3re umo\u017cliwi\u0105 \u0142atwiejszy dost\u0119p do danych, kosztem dodatkowego kroku kompilacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Before Vue 3.3\n<script setup>\nimport { ref } from 'vue'\n\nlet count = ref(0)\n\nconsole.log(count.value)\n\nfunction increment() {\n  count.value++\n}\n<\/script>\n\n<template>\n  <button @click=\"increment\">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Before Vue 3.3\n<script setup>\nimport { ref } from 'vue'\n\nlet count = ref(0)\n\nconsole.log(count.value)\n\nfunction increment() {\n  count.value++\n}\n<\/script>\n\n<template>\n  <button @click=\"increment\">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Vue 3.3\n<script setup>\nlet count = $ref(0)\n\nconsole.log(count)\n\nfunction increment() {\n  count++\n}\n<\/script>\n\n<template>\n  <button @click=\"increment\">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ Vue 3.3\n<script setup>\nlet count = $ref(0)\n\nconsole.log(count)\n\nfunction increment() {\n  count++\n}\n<\/script>\n\n<template>\n  <button @click=\"increment\">{{ count }}<\/button>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Podczas Vue Amsterdam Evan You podzieli\u0142 si\u0119 te\u017c dalekosi\u0119\u017cnymi planami zespo\u0142u. Jak zaznacza, na razie plany te s\u0105 w powijakach i mog\u0105 jeszcze ulec zmianom. Po zako\u0144czeniu pracy nad Vue 3.3 zesp\u00f3\u0142 rozwa\u017ca skupienie si\u0119 nad now\u0105 strategi\u0105 kompilacji na wz\u00f3r tej znanej z SolidJS. Dla przypomnienia, SolidJS to framework do z\u0142udzenia przypominaj\u0105cy Reacta, ale chwal\u0105cy si\u0119 lepsz\u0105 wydajno\u015bci\u0105 ze wzgl\u0119du na porzucenie Virtual DOM. Opcjonalne wyci\u0119cie Virtual DOM mog\u0142oby znacz\u0105co odchudzi\u0107 paczk\u0119 pobieran\u0105 przez klienta i pozwoli\u0142oby oszcz\u0119dzi\u0107 pami\u0119c potrzebn\u0105 na przechowywanie wirtualnej struktury komponent\u00f3w.<\/p>\n","innerContent":["\n<p>Podczas Vue Amsterdam Evan You podzieli\u0142 si\u0119 te\u017c dalekosi\u0119\u017cnymi planami zespo\u0142u. Jak zaznacza, na razie plany te s\u0105 w powijakach i mog\u0105 jeszcze ulec zmianom. Po zako\u0144czeniu pracy nad Vue 3.3 zesp\u00f3\u0142 rozwa\u017ca skupienie si\u0119 nad now\u0105 strategi\u0105 kompilacji na wz\u00f3r tej znanej z SolidJS. Dla przypomnienia, SolidJS to framework do z\u0142udzenia przypominaj\u0105cy Reacta, ale chwal\u0105cy si\u0119 lepsz\u0105 wydajno\u015bci\u0105 ze wzgl\u0119du na porzucenie Virtual DOM. Opcjonalne wyci\u0119cie Virtual DOM mog\u0142oby znacz\u0105co odchudzi\u0107 paczk\u0119 pobieran\u0105 przez klienta i pozwoli\u0142oby oszcz\u0119dzi\u0107 pami\u0119c potrzebn\u0105 na przechowywanie wirtualnej struktury komponent\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13635,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download-4.jpeg\" alt=\"\" class=\"wp-image-13635\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download-4.jpeg\" alt=\"\" class=\"wp-image-13635\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>5. Renderowanie po stronie serwera w 2022<\/h2>\n","innerContent":["\n<h2>5. Renderowanie po stronie serwera w 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ach, co to by\u0142 za rok dla renderowania po stronie serwera! W\u0142a\u015bciwie ka\u017cdy du\u017cy framework otrzyma\u0142 albo spor\u0105 aktualizacj\u0119 w tym temacie, albo zupe\u0142nie now\u0105 bibliotek\u0119 z mas\u0105 nowo\u015bci (Vue - Nuxt 3, Svelte - SvelteKit, React - React Server Components, Remix, Next.js 13). Na rynku pojawi\u0142o si\u0119 te\u017c sporo innowacyjnych rozwi\u0105za\u0144, nie powi\u0105zanych z istniej\u0105cymi frameworkami. W tym miejscu namieni\u0107 musz\u0119 chodzia\u017cby Qwik, kt\u00f3ry stara si\u0119 zrewolucjonizowa\u0107 podej\u015bcie do hydracji, czy Astro, kt\u00f3ry spopularyzowa\u0142 innowacyjne podej\u015bcie Dynami Islands.<\/p>\n","innerContent":["\n<p>Ach, co to by\u0142 za rok dla renderowania po stronie serwera! W\u0142a\u015bciwie ka\u017cdy du\u017cy framework otrzyma\u0142 albo spor\u0105 aktualizacj\u0119 w tym temacie, albo zupe\u0142nie now\u0105 bibliotek\u0119 z mas\u0105 nowo\u015bci (Vue - Nuxt 3, Svelte - SvelteKit, React - React Server Components, Remix, Next.js 13). Na rynku pojawi\u0142o si\u0119 te\u017c sporo innowacyjnych rozwi\u0105za\u0144, nie powi\u0105zanych z istniej\u0105cymi frameworkami. W tym miejscu namieni\u0107 musz\u0119 chodzia\u017cby Qwik, kt\u00f3ry stara si\u0119 zrewolucjonizowa\u0107 podej\u015bcie do hydracji, czy Astro, kt\u00f3ry spopularyzowa\u0142 innowacyjne podej\u015bcie Dynami Islands.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>React Server Components i Next.js 13<\/h3>\n","innerContent":["\n<h3>React Server Components i Next.js 13<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Od kiedy komponenty renderowane po stronie serwera zosta\u0142y zaprezentowane \u015bwiatu przez Dana Abramova min\u0119\u0142y ju\u017c ponad dwa lata. Je\u015bli nie kojarzycie koncepcji, to w du\u017cym skr\u00f3cie React umo\u017cliwia\u0142 b\u0119dzie wyrenderowanie pojedynczego komponentu po stronie serwera i przes\u0142anie kodu HTML do klienta. Mi podej\u015bcie takie mocno przypomina na PHP, bo mo\u017cliwe jest wykonywanie zapyta\u0144 do bazy danych bezpo\u015brednio z komponent\u00f3w. <\/p>\n","innerContent":["\n<p>Od kiedy komponenty renderowane po stronie serwera zosta\u0142y zaprezentowane \u015bwiatu przez Dana Abramova min\u0119\u0142y ju\u017c ponad dwa lata. Je\u015bli nie kojarzycie koncepcji, to w du\u017cym skr\u00f3cie React umo\u017cliwia\u0142 b\u0119dzie wyrenderowanie pojedynczego komponentu po stronie serwera i przes\u0142anie kodu HTML do klienta. Mi podej\u015bcie takie mocno przypomina na PHP, bo mo\u017cliwe jest wykonywanie zapyta\u0144 do bazy danych bezpo\u015brednio z komponent\u00f3w. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Note.js - Server Component\nimport db from 'db'; \n\nasync function Note(props) {\n  const note = await db.posts.get(props.id);\n  \n  return (\n    <div>\n      <h1>{note.title}<\/h1>\n      <section>{note.body}<\/section>\n    <\/div>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Note.js - Server Component\nimport db from 'db'; \n\nasync function Note(props) {\n  const note = await db.posts.get(props.id);\n  \n  return (\n    <div>\n      <h1>{note.title}<\/h1>\n      <section>{note.body}<\/section>\n    <\/div>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Niestety React Server Components maj\u0105 te\u017c swoje ograniczenia. Komponenty tego typu nie mog\u0105 przechowywa\u0107 stanu (<code>useState<\/code> jest zakazany), nie mog\u0105 by\u0107 importowane przez komponenty renderowane po stronie klienta i do dzia\u0142ania wymagaj\u0105 meta frameworku jak Next.js, Hyrdogen czy Gatsby. Temat ten jest niezwykle zawi\u0142y i zas\u0142uguje na osobny wpis na naszym blogu, ale je\u015bli chcieliby\u015bcie dowiedzie\u0107 si\u0119 wi\u0119cej, to gor\u0105co polecam <a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener\">ten artyku\u0142<\/a>.<\/p>\n","innerContent":["\n<p>Niestety React Server Components maj\u0105 te\u017c swoje ograniczenia. Komponenty tego typu nie mog\u0105 przechowywa\u0107 stanu (<code>useState<\/code> jest zakazany), nie mog\u0105 by\u0107 importowane przez komponenty renderowane po stronie klienta i do dzia\u0142ania wymagaj\u0105 meta frameworku jak Next.js, Hyrdogen czy Gatsby. Temat ten jest niezwykle zawi\u0142y i zas\u0142uguje na osobny wpis na naszym blogu, ale je\u015bli chcieliby\u015bcie dowiedzie\u0107 si\u0119 wi\u0119cej, to gor\u0105co polecam <a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener\">ten artyku\u0142<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13627,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6klws6-1-1.jpeg\" alt=\"\" class=\"wp-image-13627\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/6klws6-1-1.jpeg\" alt=\"\" class=\"wp-image-13627\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pomimo tego, \u017ce React Server Components nadal znajduj\u0105 sie w fazie alphy, na rynku pojawi\u0142y si\u0119 ju\u017c pierwsze frameworki, kt\u00f3re je wykorzystuj\u0105 (Next.js, Gatsby). W szczeg\u00f3lno\u015bci Next.js 13 odbi\u0142 si\u0119 szerokim echem spo\u0142eczno\u015bci, bo now\u0105 architektur\u0119 opar\u0142 ca\u0142kowicie na React Server Components. Interesuj\u0105cym efektem ubocznym takiej architektury jest fakt, \u017ce dop\u00f3ki wprost nie zdefiniujemy komponentu jako renderowanego po stronie klienta, to ca\u0142a aplikacja renderowana b\u0119dzie tylko i wy\u0142\u0105cznie po stronie serwra.<\/p>\n","innerContent":["\n<p>Pomimo tego, \u017ce React Server Components nadal znajduj\u0105 sie w fazie alphy, na rynku pojawi\u0142y si\u0119 ju\u017c pierwsze frameworki, kt\u00f3re je wykorzystuj\u0105 (Next.js, Gatsby). W szczeg\u00f3lno\u015bci Next.js 13 odbi\u0142 si\u0119 szerokim echem spo\u0142eczno\u015bci, bo now\u0105 architektur\u0119 opar\u0142 ca\u0142kowicie na React Server Components. Interesuj\u0105cym efektem ubocznym takiej architektury jest fakt, \u017ce dop\u00f3ki wprost nie zdefiniujemy komponentu jako renderowanego po stronie klienta, to ca\u0142a aplikacja renderowana b\u0119dzie tylko i wy\u0142\u0105cznie po stronie serwra.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Qwik<\/h3>\n","innerContent":["\n<h3>Qwik<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13637,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image10-2.jpeg\" alt=\"\" class=\"wp-image-13637\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image10-2.jpeg\" alt=\"\" class=\"wp-image-13637\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Qwik wywraca do g\u00f3ry nogami paradygmaty wszystkich wsp\u00f3\u0142czesnych narz\u0119dzi do renderowania po stronie serwera, poprzez podwa\u017cenie zasadno\u015bci procesu hydracji. Hydracja, to proces po stronie klienta, podczas kt\u00f3rego wyrenderowana po stronie serwera aplikacja \u0142aduje kod JavaScript, a nast\u0119pnie powtarza ca\u0142\u0105 logik\u0119 inicjalizacyjn\u0105. Dopiero po zako\u0144czeniu procesu hydracji aplikacja staje si\u0119 responsywna. Dzi\u0119ki takiej taktyce, klient w\u0142a\u015bciwie od razu widzi docelow\u0105 tre\u015b\u0107 i dopiero po chwili mo\u017ce z ni\u0105 wej\u015b\u0107 w interakcj\u0119.<\/p>\n","innerContent":["\n<p>Qwik wywraca do g\u00f3ry nogami paradygmaty wszystkich wsp\u00f3\u0142czesnych narz\u0119dzi do renderowania po stronie serwera, poprzez podwa\u017cenie zasadno\u015bci procesu hydracji. Hydracja, to proces po stronie klienta, podczas kt\u00f3rego wyrenderowana po stronie serwera aplikacja \u0142aduje kod JavaScript, a nast\u0119pnie powtarza ca\u0142\u0105 logik\u0119 inicjalizacyjn\u0105. Dopiero po zako\u0144czeniu procesu hydracji aplikacja staje si\u0119 responsywna. Dzi\u0119ki takiej taktyce, klient w\u0142a\u015bciwie od razu widzi docelow\u0105 tre\u015b\u0107 i dopiero po chwili mo\u017ce z ni\u0105 wej\u015b\u0107 w interakcj\u0119.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Alternatywa, kt\u00f3r\u0105 oferuje Qwik, to wznawiane wykonania (ang. Resumable). Paradygmat ten pozwala zapisa\u0107 stan aplikacji po stronie serwera w taki spos\u00f3b, aby po stronie klienta mo\u017cliwe by\u0142o natychmiastowe wznowienie wykonywania kodu. Brzmi skomplikowanie? Na szcz\u0119\u015bcie skomplikowana logika skrz\u0119tnie schowana jest pod przyst\u0119pnym API, kt\u00f3re ca\u0142\u0105 magi\u0119 chowa przed programist\u0105.<\/p>\n","innerContent":["\n<p>Alternatywa, kt\u00f3r\u0105 oferuje Qwik, to wznawiane wykonania (ang. Resumable). Paradygmat ten pozwala zapisa\u0107 stan aplikacji po stronie serwera w taki spos\u00f3b, aby po stronie klienta mo\u017cliwe by\u0142o natychmiastowe wznowienie wykonywania kodu. Brzmi skomplikowanie? Na szcz\u0119\u015bcie skomplikowana logika skrz\u0119tnie schowana jest pod przyst\u0119pnym API, kt\u00f3re ca\u0142\u0105 magi\u0119 chowa przed programist\u0105.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13596,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image5.png\" alt=\"\" class=\"wp-image-13596\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image5.png\" alt=\"\" class=\"wp-image-13596\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>No dobra, a co je\u015bli naprawd\u0119 chc\u0119 wiedzie\u0107 jak ta magia dzia\u0142a pod spodem? W kr\u00f3tkiej formie jak\u0105 s\u0105 nasze przegl\u0105dy nie podejm\u0119 si\u0119 wyt\u0142umaczenia jak dzia\u0142aj\u0105 bebechy frameworka i najlepiej b\u0119dzie je\u015bli sami si\u0119gni\u0119cie do dokumentacji. W ogromnym skr\u00f3cie, kod komponent\u00f3w kompilowany jest do osobnych paczek, a sam stan aplikacji zapisywany jest w DOM w \u201cJSONie na sterydach\u201d. Do klienta wysy\u0142any jest wyrenderowany HTML oraz 1KB kody samego Qwika. Ten od razu pobiera kodu wszystkich niezb\u0119dnych komponent\u00f3w, jednak zamiast \u0142\u0105czy\u0107 je od razu z DOM\u2019em czeka na pierwsze interakcje u\u017cytkownika.<\/p>\n","innerContent":["\n<p>No dobra, a co je\u015bli naprawd\u0119 chc\u0119 wiedzie\u0107 jak ta magia dzia\u0142a pod spodem? W kr\u00f3tkiej formie jak\u0105 s\u0105 nasze przegl\u0105dy nie podejm\u0119 si\u0119 wyt\u0142umaczenia jak dzia\u0142aj\u0105 bebechy frameworka i najlepiej b\u0119dzie je\u015bli sami si\u0119gni\u0119cie do dokumentacji. W ogromnym skr\u00f3cie, kod komponent\u00f3w kompilowany jest do osobnych paczek, a sam stan aplikacji zapisywany jest w DOM w \u201cJSONie na sterydach\u201d. Do klienta wysy\u0142any jest wyrenderowany HTML oraz 1KB kody samego Qwika. Ten od razu pobiera kodu wszystkich niezb\u0119dnych komponent\u00f3w, jednak zamiast \u0142\u0105czy\u0107 je od razu z DOM\u2019em czeka na pierwsze interakcje u\u017cytkownika.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13598,"width":681,"height":307,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image3-1024x462.png\" alt=\"\" class=\"wp-image-13598\" width=\"681\" height=\"307\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image3-1024x462.png\" alt=\"\" class=\"wp-image-13598\" width=\"681\" height=\"307\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na zko\u0144czenie, jeszcze ma\u0142a wzmianka o tym, dlaczego warto \u015bledzi\u0107 dalsze losy Qwika. Za jego rozw\u00f3j odpowiedzialny jest prawdziwy zesp\u00f3\u0142 All-Stars - Mi\u0161ko Hevery (tw\u00f3rca anguar.js), Manu Almeida (tw\u00f3rca Gina i Stencila) oraz Adam Bradley (tw\u00f3rca Ionica i Stencila). Je\u015bli kto\u015b ma zrewolucjonizowa\u0107 Frontend, to w\u0142a\u015bnie zep\u00f3\u0142 takich wteran\u00f3w.<\/p>\n","innerContent":["\n<p>Na zko\u0144czenie, jeszcze ma\u0142a wzmianka o tym, dlaczego warto \u015bledzi\u0107 dalsze losy Qwika. Za jego rozw\u00f3j odpowiedzialny jest prawdziwy zesp\u00f3\u0142 All-Stars - Mi\u0161ko Hevery (tw\u00f3rca anguar.js), Manu Almeida (tw\u00f3rca Gina i Stencila) oraz Adam Bradley (tw\u00f3rca Ionica i Stencila). Je\u015bli kto\u015b ma zrewolucjonizowa\u0107 Frontend, to w\u0142a\u015bnie zep\u00f3\u0142 takich wteran\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Astro<\/h3>\n","innerContent":["\n<h3>Astro<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro to framework, kt\u00f3ry spopularyzowa\u0142 tak zwan\u0105 architektur\u0119 wyspow\u0105. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp.<\/p>\n","innerContent":["\n<p>Astro to framework, kt\u00f3ry spopularyzowa\u0142 tak zwan\u0105 architektur\u0119 wyspow\u0105. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13600,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e52f7ee-1.png\" alt=\"\" class=\"wp-image-13600\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e52f7ee-1.png\" alt=\"\" class=\"wp-image-13600\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro wyposa\u017cony zosta\u0142 w bardzo zaawansowany mechanizm definiowania kiedy ma zostac pobrany kod dynamicznych komponent\u00f3w oraz kiedy powinny one zosta\u0107 poddane hydracji. W\u015br\u00f3d dost\u0119pnych opcj mamy mi\u0119dzy innymi do\u0142adowanie dopiero kiedy komponent b\u0119dzie widoczny na ekranie czy do\u0142adowanie tylko i wy\u0142\u0105cznie kiedy spe\u0142nione s\u0105 odpowiednie media-query.<\/p>\n","innerContent":["\n<p>Astro wyposa\u017cony zosta\u0142 w bardzo zaawansowany mechanizm definiowania kiedy ma zostac pobrany kod dynamicznych komponent\u00f3w oraz kiedy powinny one zosta\u0107 poddane hydracji. W\u015br\u00f3d dost\u0119pnych opcj mamy mi\u0119dzy innymi do\u0142adowanie dopiero kiedy komponent b\u0119dzie widoczny na ekranie czy do\u0142adowanie tylko i wy\u0142\u0105cznie kiedy spe\u0142nione s\u0105 odpowiednie media-query.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro na tle konkurencji wyr\u00f3\u017cnia si\u0119 te\u017c niezale\u017cno\u015bci\u0105 od frameworku. Jest to pierwsza biblioteka od bardzo dawna, kt\u00f3ra naprawd\u0119 nie faworyzuje \u017cadnego rozwi\u0105zania, a na dodatek pozwala miesza\u0107 je dowoli mi\u0119dzy soba. <\/p>\n","innerContent":["\n<p>Astro na tle konkurencji wyr\u00f3\u017cnia si\u0119 te\u017c niezale\u017cno\u015bci\u0105 od frameworku. Jest to pierwsza biblioteka od bardzo dawna, kt\u00f3ra naprawd\u0119 nie faworyzuje \u017cadnego rozwi\u0105zania, a na dodatek pozwala miesza\u0107 je dowoli mi\u0119dzy soba. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\u2014\nimport HomeLayout from '..\/layouts\/HomeLayout.astro'\nimport MyReactComponent from '..\/components\/MyReactComponent.jsx';\nimport MySvelteComponent from '..\/components\/MySvelteComponent.svelte';\n\nconst data = await fetch('API_URL').then(r => r.json());\n---\n<HomeLayout>\n  <MyReactComponent client:load name={data.name}>\n    <MySvelteComponent avatar={data.avatar}\/>\n  <\/MyReactComponent>\n<\/HomeLayout><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\u2014\nimport HomeLayout from '..\/layouts\/HomeLayout.astro'\nimport MyReactComponent from '..\/components\/MyReactComponent.jsx';\nimport MySvelteComponent from '..\/components\/MySvelteComponent.svelte';\n\nconst data = await fetch('API_URL').then(r => r.json());\n---\n<HomeLayout>\n  <MyReactComponent client:load name={data.name}>\n    <MySvelteComponent avatar={data.avatar}\/>\n  <\/MyReactComponent>\n<\/HomeLayout><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13639,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e58d124.jpeg\" alt=\"\" class=\"wp-image-13639\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e58d124.jpeg\" alt=\"\" class=\"wp-image-13639\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>6. Node.js, Deno i Bun w 2022<\/h2>\n","innerContent":["\n<h2>6. Node.js, Deno i Bun w 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Rok temu wydawa\u0142o si\u0119, \u017ce sytuacja je\u015bli chodzi o \u015brodowiska uruchomieniowe JavaScript jest raczej stabilna. Node dominuje siln\u0105 r\u0119k\u0105, a Deno z roku na rok skrupulatnie powi\u0119ksza swoj\u0105 nisz\u0119. W po\u0142owie tego roku nast\u0105pi\u0142o jednak prawdziwe trz\u0119sienie ziemi, gdy do gry wkroczy\u0142 Bun z finansowaniem 7M$.<\/p>\n","innerContent":["\n<p>Rok temu wydawa\u0142o si\u0119, \u017ce sytuacja je\u015bli chodzi o \u015brodowiska uruchomieniowe JavaScript jest raczej stabilna. Node dominuje siln\u0105 r\u0119k\u0105, a Deno z roku na rok skrupulatnie powi\u0119ksza swoj\u0105 nisz\u0119. W po\u0142owie tego roku nast\u0105pi\u0142o jednak prawdziwe trz\u0119sienie ziemi, gdy do gry wkroczy\u0142 Bun z finansowaniem 7M$.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Bun<\/h3>\n","innerContent":["\n<h3>Bun<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>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. Wed\u0142ug benchmark\u00f3w opublikowanych przez autora nowego \u015brodowiska uruchomieniowego przewaga jest naprawd\u0119 istotna <\/p>\n","innerContent":["\n<p>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. Wed\u0142ug benchmark\u00f3w opublikowanych przez autora nowego \u015brodowiska uruchomieniowego przewaga jest naprawd\u0119 istotna <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13603,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Screenshot-2022-08-04-at-15.06.18-2.png\" alt=\"\" class=\"wp-image-13603\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Screenshot-2022-08-04-at-15.06.18-2.png\" alt=\"\" class=\"wp-image-13603\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>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","innerContent":["\n<p>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"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Drugim czynnikiem wp\u0142ywaj\u0105cym na wydajno\u015b\u0107 Buna jest wykorzystanie silnika JavaScriptCore od Apple. Jak si\u0119 okazuje, JavaScriptCore 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","innerContent":["\n<p>Drugim czynnikiem wp\u0142ywaj\u0105cym na wydajno\u015b\u0107 Buna jest wykorzystanie silnika JavaScriptCore od Apple. Jak si\u0119 okazuje, JavaScriptCore 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"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Bun wprowadze te\u017c ca\u0142kiem sporo usprawnie\u0144 wzgl\u0119dem Node.js . 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\u00a0 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 szybki bundler. Szczerze m\u00f3wi\u0105c, wszystkie te funkcjonalno\u015bci brzmi\u0105 du\u017co ciekawiej ni\u017c pusty slogan: szybszy Node.js.<\/p>\n","innerContent":["\n<p>Bun wprowadze te\u017c ca\u0142kiem sporo usprawnie\u0144 wzgl\u0119dem Node.js . 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\u00a0 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 szybki bundler. Szczerze m\u00f3wi\u0105c, wszystkie te funkcjonalno\u015bci brzmi\u0105 du\u017co ciekawiej ni\u017c pusty slogan: szybszy Node.js.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13641,"width":681,"height":377,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/frontend101-image8.jpeg\" alt=\"\" class=\"wp-image-13641\" width=\"681\" height=\"377\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/frontend101-image8.jpeg\" alt=\"\" class=\"wp-image-13641\" width=\"681\" height=\"377\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Deno<\/h3>\n","innerContent":["\n<h3>Deno<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na odpowied\u017a Deno na pojawienie si\u0119 nowego gracza nie musieli\u015bmy d\u0142ugo czeka\u0107. Ju\u017c kilka tygodni po premierze wersji alpha Buna, zesp\u00f3\u0142 stoj\u0105cy za Deno zapowiedzia\u0142 dodanie kompatybilno\u015bci z npm oraz spor\u0105 poprawy wydajno\u015bci serwera http.<\/p>\n","innerContent":["\n<p>Na odpowied\u017a Deno na pojawienie si\u0119 nowego gracza nie musieli\u015bmy d\u0142ugo czeka\u0107. Ju\u017c kilka tygodni po premierze wersji alpha Buna, zesp\u00f3\u0142 stoj\u0105cy za Deno zapowiedzia\u0142 dodanie kompatybilno\u015bci z npm oraz spor\u0105 poprawy wydajno\u015bci serwera http.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wsparcie dla npma by\u0142o szczeg\u00f3lnie kontrowersyj\u0105 decyzj\u0105, bior\u0105c pod uwag\u0119 jak d\u0142ugo Deno odcina\u0142o si\u0119 od niego grub\u0105 kresk\u0105 dopatruj\u0105c si\u0119 w nim \u017ar\u00f3d\u0142a wielu problem\u00f3w naszego ekosystemu.  Trzeba jednak pamieta\u0107, \u017ce npm w po\u0142\u0105czeniu z Deno b\u0119dzie dzia\u0142a\u0142 zupe\u0142nie inaczej ni\u017c w po\u0142\u0105czeniu z Node.js. Po pierwsze, Deno nie b\u0119dzie wymaga\u0107 uruchamiania <code>npm install<\/code>. Po drugie, Deno nie b\u0119dzie tworzy\u0107 katalogu <code>node_modules<\/code>,a pobrane paczki przechowywane b\u0119d\u0105 globalnie. Po trzecie, importy z npm b\u0119d\u0105 oznaczone specjalnym prefixem <code>npm:<\/code><\/p>\n","innerContent":["\n<p>Wsparcie dla npma by\u0142o szczeg\u00f3lnie kontrowersyj\u0105 decyzj\u0105, bior\u0105c pod uwag\u0119 jak d\u0142ugo Deno odcina\u0142o si\u0119 od niego grub\u0105 kresk\u0105 dopatruj\u0105c si\u0119 w nim \u017ar\u00f3d\u0142a wielu problem\u00f3w naszego ekosystemu.  Trzeba jednak pamieta\u0107, \u017ce npm w po\u0142\u0105czeniu z Deno b\u0119dzie dzia\u0142a\u0142 zupe\u0142nie inaczej ni\u017c w po\u0142\u0105czeniu z Node.js. Po pierwsze, Deno nie b\u0119dzie wymaga\u0107 uruchamiania <code>npm install<\/code>. Po drugie, Deno nie b\u0119dzie tworzy\u0107 katalogu <code>node_modules<\/code>,a pobrane paczki przechowywane b\u0119d\u0105 globalnie. Po trzecie, importy z npm b\u0119d\u0105 oznaczone specjalnym prefixem <code>npm:<\/code><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { chalk } from \"npm:chalk@5\";<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { chalk } from \"npm:chalk@5\";<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Node.js<\/h3>\n","innerContent":["\n<h3>Node.js<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Node.js nie rozwija si\u0119 a\u017c tak dynamicznie jak Bun czy Deno. Wszyscy zgodzimy si\u0119 jednak, \u017ce w przypadku takiego staruszka cenimy raczej stabilno\u015b\u0107 i przewidywalno\u015b\u0107, ni\u017c wywracaj\u0105ce \u015bwiat do g\u00f3ry nogami funkcjonalno\u015bci. Niemniej, Node.js r\u00f3wnie\u017c dostarczy\u0142 w tym roku kilka ciekawych nowo\u015bci.<\/p>\n","innerContent":["\n<p>Node.js nie rozwija si\u0119 a\u017c tak dynamicznie jak Bun czy Deno. Wszyscy zgodzimy si\u0119 jednak, \u017ce w przypadku takiego staruszka cenimy raczej stabilno\u015b\u0107 i przewidywalno\u015b\u0107, ni\u017c wywracaj\u0105ce \u015bwiat do g\u00f3ry nogami funkcjonalno\u015bci. Niemniej, Node.js r\u00f3wnie\u017c dostarczy\u0142 w tym roku kilka ciekawych nowo\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zaczniem od funkcjonalno\u015bci, kt\u00f3ra ucieszy\u0142a wszystkich, kt\u00f3rzy kiedykolwiek pr\u00f3bowali pisa\u0107 kod uruchamiany zar\u00f3wno na serwerze jak i w przegl\u0105darce. Do Node 18 trafi\u0142o bowiem wsparcie dla metody <code>fetch()<\/code> oparte o popularn\u0105 bibliotek\u0119 <code>Undici<\/code>. Co prawda implementacja <code>fetch()<\/code> w przegl\u0105darkach i Node.js nie s\u0105 w 100% kompatybilne, ale r\u00f3\u017cnice s\u0105 na tyle niewielkie, \u017ce wi\u0119kszo\u015bci projekt\u00f3w nawet ich nie zauwa\u017cycie. <\/p>\n","innerContent":["\n<p>Zaczniem od funkcjonalno\u015bci, kt\u00f3ra ucieszy\u0142a wszystkich, kt\u00f3rzy kiedykolwiek pr\u00f3bowali pisa\u0107 kod uruchamiany zar\u00f3wno na serwerze jak i w przegl\u0105darce. Do Node 18 trafi\u0142o bowiem wsparcie dla metody <code>fetch()<\/code> oparte o popularn\u0105 bibliotek\u0119 <code>Undici<\/code>. Co prawda implementacja <code>fetch()<\/code> w przegl\u0105darkach i Node.js nie s\u0105 w 100% kompatybilne, ale r\u00f3\u017cnice s\u0105 na tyle niewielkie, \u017ce wi\u0119kszo\u015bci projekt\u00f3w nawet ich nie zauwa\u017cycie. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">fetch(\"http:\/\/example.com\/api\/endpoint\")\n  .then((response) => {\n    \/\/ Do something with response\n  })\n  .catch(function (err) {\n    console.log(\"Unable to fetch -\", err);\n  });<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">fetch(\"http:\/\/example.com\/api\/endpoint\")\n  .then((response) => {\n    \/\/ Do something with response\n  })\n  .catch(function (err) {\n    console.log(\"Unable to fetch -\", err);\n  });<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejn\u0105 ciekaw\u0105 now\u0105 funkcjonalno\u015bci\u0105 jest wbudowany test runner. Oznacza to, \u017ce do testowania Node nie b\u0119dziemy ju\u017c wi\u0119cej potrzebowa\u0107 bibliotek takich jak Jest czy Vitest.<\/p>\n","innerContent":["\n<p>Kolejn\u0105 ciekaw\u0105 now\u0105 funkcjonalno\u015bci\u0105 jest wbudowany test runner. Oznacza to, \u017ce do testowania Node nie b\u0119dziemy ju\u017c wi\u0119cej potrzebowa\u0107 bibliotek takich jak Jest czy Vitest.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">test('synchronous passing test', (t) => {\n  \/\/ This test passes because it does not throw an exception.\n  assert.strictEqual(1, 1);\n});\n\ntest('asynchronous passing test', async (t) => {\n  \/\/ This test passes because the Promise returned by the async\n  \/\/ function is not rejected.\n  assert.strictEqual(1, 1);\n});<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">test('synchronous passing test', (t) => {\n  \/\/ This test passes because it does not throw an exception.\n  assert.strictEqual(1, 1);\n});\n\ntest('asynchronous passing test', async (t) => {\n  \/\/ This test passes because the Promise returned by the async\n  \/\/ function is not rejected.\n  assert.strictEqual(1, 1);\n});<\/code><\/pre>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13549","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=13549"}],"version-history":[{"count":22,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13549\/revisions"}],"predecessor-version":[{"id":13695,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13549\/revisions\/13695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/13644"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=13549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=13549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=13549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}