{"id":12406,"date":"2022-11-24T13:20:30","date_gmt":"2022-11-24T12:20:30","guid":{"rendered":"https:\/\/vived.io\/?p=12406"},"modified":"2022-11-24T13:20:33","modified_gmt":"2022-11-24T12:20:33","slug":"nuxt-3-frontend-weekly-vol-114","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/","title":{"rendered":"Nuxt 3 | Frontend Weekly vol. 114"},"content":{"rendered":"\n

1. Nuxt 3, czyli prawdziwy SSR dla Vue 3<\/h2>\n\n\n\n

My\u015bl\u0119, \u017ce gdyby pokaza\u0107 sztucznej inteligencji Frontend Weekly z ostatnich miesi\u0119cy, to stwierdzi\u0142aby, \u017ce jest to newsletter na temat renderowania po stronie serwera. Nic nie poradz\u0119 na to, \u017ce ca\u0142y \u015bwiat oszala\u0142 ostatnio na tym punkcie. W tym tygodniu po raz kolejny dolewamy oliwy do ognia, bo po ponad dw\u00f3ch latach developmentu ukaza\u0142 si\u0119 Nuxt 3. A to oznacza, \u017ce Vue 3 wreszcie mo\u017ce by\u0107 renderowane po stronie serwera! Dlaczego na Nuxt 3 musieli\u015bmy czeka\u0107 tak d\u0142ugo? Czy Nuxt przerasta Next.js pomimo mniejszego bud\u017cetu? Na te pytania postaram si\u0119 odpowiedzie\u0107 w dzisiejszym przegl\u0105dzie.<\/p>\n\n\n

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

Nie jest tajemnic\u0105, \u017ce Nuxt gar\u015bciami czerpie inspiracje z Next.js. Jak zapewne si\u0119 domy\u015blacie, oznacza to, \u017ce routing w Nuxt oparty jest o struktur\u0119 katalog\u00f3w. W najnowszej wersji frameworku niewiele si\u0119 w tej kwestii zmienia. Zar\u00f3wno nazwnictwo jak i spos\u00f3b dopasowywania \u015bcie\u017cek dzia\u0142aj\u0105 bez wi\u0119kszych zmian. Do dyspozycji mamy wi\u0119c katalog `pages`, gdzie umieszczamy nasze strony, `components`, gdzie umieszczam wsp\u00f3\u0142dzielone komponenty, czy `layouts` gdzie umieszczamy \u201copakowania\u201d na nasze strony (tak, Nuxt 2 obs\u0142ugiwa\u0142o funkcjonalno\u015b\u0107 `layouts` na d\u0142ugo przed Next.js).<\/p>\n\n\n\n

To co szybko rzuca si\u0119 w oczy przegl\u0105daj\u0105c dokumentacj\u0119 Nuxt 3, to ca\u0142kowity brak import\u00f3w. Jak si\u0119 okazuje, nie jest to ani celowe uproszczenie, ani tym bardziej niedopatrzenie ze strony autor\u00f3w dokumentacji. Nuxt 3 wykorzystuje bibliotek\u0119 `unjs\/unimport`, kt\u00f3ra odpowiedzialna jest za automatyczne generowanie import\u00f3w. W przypadku wyst\u0105pienia konfliktu rzucony zostanie b\u0142\u0105d, kt\u00f3rego pozby\u0107 mo\u017cna si\u0119 r\u0119cznie definiuj\u0105c dany import.<\/p>\n\n\n\n

<script setup>\n  \/* ref() and computed() are auto-imported *\/\n  const count = ref(1)\n  const double = computed(() => count.value * 2)\n<\/script><\/code><\/pre>\n\n\n\n
Kolejn\u0105 nowo\u015bci\u0105 jest natywne wsparcie dla plik\u00f3w Markdown na sterydach. Co mam przez to na my\u015bli? Nuxt 3 pozwala w plikach Markdown wykorzystywa\u0107 komponenty Vue. Co wa\u017cne, komponenty te mo\u017cemy dowolnie parametryzowa\u0107, a nawet przekazywa\u0107 do nich wyrenderowane fragmenty Markdown. Funkcjonalno\u015bci takie jak ta, mo\u017ce i nie wywracaj\u0105 \u015bwiata do g\u00f3ry nogami, ale na pewno doceni\u0105 je wszyscy autorzy blog\u00f3w i dokumentacji.<\/p>\n\n\n\n
\/\/ pages\/[...slug].vue\n<template>\n  <main>\n    <ContentDoc \/>\n  <\/main>\n<\/template><\/code><\/pre>\n\n\n\n
\/\/ content\/index.md\n# Nuxt Content Hello World\n\n[About](\/about)\n\n::app-button{variant=\u201dfilled\u201d}\nHello **World**!\n::<\/code><\/pre>\n\n\n\n
Przegl\u0105daj\u0105c struktur\u0119 katalog\u00f3w Nuxt 3 (swoj\u0105 drog\u0105 dokumentacja ta jest naprawd\u0119 dobra i czytelna) natrafi\u0107 mo\u017cemy jeszcze na jedn\u0105 nowo\u015b\u0107 – katalog `server`. W katalogu tym zdefiniowa\u0107 mo\u017cemy nasze REST API. Podobnie jak w przypadku katalogu `pages`, umiejscowienie plik\u00f3w definiuje \u015bcie\u017ck\u0119 endpointa. Nuxt wygeneruje za nas odpowiednie typy. Kiedy w `useFetch` wywo\u0142amy nasz endpoint automatycznie b\u0119dzie on w pe\u0142ni type-safe.<\/p>\n\n\n\n
\/\/ server\/routes\/hello.ts\nexport default defineEventHandler(() => 'Hello World!');<\/code><\/pre>\n\n\n\n
\/\/ pages\/index.vue\n<script setup>\n  const response = useFetch(\u2018\/hello\u2019); \/\/ response will automatically have string type\n<\/script><\/code><\/pre>\n\n\n\n
Ostatni\u0105 du\u017c\u0105 funkcjonalno\u015b\u0107 to alternatywne tryby dzia\u0142ania Nuxt 3. Domy\u015blnie framework renderuje strony po stronie serwera. Przy pomocy konfiguracji mo\u017cemy zmieni\u0107 to zachowanie. W\u015br\u00f3d dost\u0119pnych opcji znajdziemy statyczne generowanie strony, renderowanie po stronie klienta, ale te\u017c bardziej zaawansowane opcje takie jak inkrementalne budowanie. <\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
No dobra, wszystkie nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale co zaj\u0119\u0142o deweloperom a\u017c dwa lata? Dlaczego nie zastosowano bardziej inkrementalnej strategii, kt\u00f3ra umo\u017cliwi\u0142aby renderowanie Vue po stronie serwera bez tych wszystkich \u201cszmer\u00f3w-bajer\u00f3w\u201d? W momencie releasu Vue 3, zesp\u00f3\u0142 stoj\u0105cy za Nuxt podj\u0105\u0142 bardzo wa\u017cn\u0105 architektoniczn\u0105 decyzj\u0105 – po\u015bwi\u0119ci\u0107 bezcenny czas na uczynienie Nuxt kompatybilnym z Vue 3, czy te\u017c wykorzysta\u0107 okazj\u0119 i przebudowa\u0107 ca\u0142y framework tak, aby mo\u017cliwy by\u0142 jego dynamiczny rozw\u00f3j w przysz\u0142o\u015bci. Wyb\u00f3r pad\u0142a na t\u0105 drug\u0105 opcje, czego efektem jest Nitro.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Nitro to serwer JavaScript, kt\u00f3ry mo\u017ce by\u0107 uruchamiany na dowolnym \u015brodowisku. Nale\u017cy przez to rozumie\u0107, \u017ce mo\u017cna go uruchomi\u0107 zar\u00f3wno w Node.js jak i w Deno, ale tak\u017ce we wszelakich \u015brodowiskach chmurowych ze szczeg\u00f3lnym uwzgl\u0119dnieniem Edge Functions. Poprzez implikacj\u0119 oznacza to, \u017ce Nuxt 3 bez wi\u0119kszych problem\u00f3w mo\u017ce by\u0107 uruchamiany tak blisko klienta jak to tylko mo\u017cliwe. W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci, o kt\u00f3rych mogli\u015bcie przeczyta\u0107 wy\u017cej, nie by\u0142yby osi\u0105galne, gdyby nie powstanie nowego silnika.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Czy zastosowana strategia by\u0142a s\u0142uszna? Vue 3 bardzo straci\u0142o na braku dobrej biblioteki do renderowania po stronie serwera przez pierwsze dwa lata swojego \u017cycia. Z drugiej jednak strony, Vue 3 pe\u0142ne by\u0142o breaking changes, kt\u00f3re po nocach \u015bni\u0142y si\u0119 autorom bibliotek do Vue 2. Kto wie, czy stworzenie Nuxt 2 kompatybilnego z Vue 3, by\u0142oby w og\u00f3le mo\u017cliwe, a je\u015bli tak, to czy nie zaj\u0119\u0142oby por\u00f3wnywalnej ilo\u015bci czasu. <\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/nuxt.com\/v3<\/a>
https:\/\/www.youtube.com\/watch?v=cSjlefuZlaI
<\/a>https:\/\/www.youtube.com\/watch?v=noq-ZHTD2Cg
<\/a>https:\/\/nuxt.com\/docs\/guide\/concepts\/
<\/a>https:\/\/nitro.unjs.io\/
<\/a>https:\/\/www.vuemastery.com\/blog\/new-nuxt-3-feature-incremental-static-generation\/<\/a><\/p>\n\n\n\n
2. Nx zgarnia 8.5 miliona dolar\u00f3w<\/h2>\n\n\n\n
Nrwl, czyli firma stoj\u0105ca za Nx, zosta\u0142a za\u0142o\u017cona przez dw\u00f3ch deweloper\u00f3w z zespo\u0142u Angulara. Pocz\u0105tkowo dzia\u0142a\u0142\u0105 ona jak typowa firma konsultingowa pomagaj\u0105ca du\u017cym korporacjom budowa\u0107 aplikacje przy u\u017cyciu frameworka od Google. Z czasem w portfolio firmy zawita\u0142 Nx, czyli narz\u0119dziem u\u0142atwiaj\u0105ce prac\u0119 z Angularowymi mono-repo. Powsta\u0142o ono z my\u015bl\u0105 o klientach firmy, a przy jego projektowaniu deweloperzy wykorzystali swoje do\u015bwiadczenie przy pracy z du\u017cymi projektami jakie nabyli w Google.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Nx dzia\u0142a\u0142 na tyle dobrze, \u017ce dw\u00f3jka deweloper\u00f3w postanowi\u0142a porzuci\u0107 dzia\u0142alno\u015b\u0107 konsultingow\u0105 i skupi\u0107 si\u0119 na jego rozwoju. Na przestrzeni lat, Nx przesta\u0142 by\u0107 narz\u0119dziem dedykowanym dla Angulara i sta\u0142 si\u0119 narz\u0119dziem rozwijanym z my\u015bl\u0105 o JavaScript . Deweloperzy stopniowo pokochali Nx i obecnie jest on najpopularniejszym narz\u0119dziem w swojej kategorii.<\/p>\n\n\n\n
Interesuj\u0105cym epizodem w najnowszej historii Nx jest przej\u0119cie pieczy nad lern\u0105 – narz\u0119dziem, kt\u00f3re jeszcze 2 lata temu by\u0142o tym najpopularniejszym je\u015bli chodzi o zarz\u0105dzanie monorepo. Projekt ten przesta\u0142 by\u0107 rozwijany i przez oko\u0142o rok dogorywa\u0142 w swoistym limbo. Z stanu tego wyrwa\u0142 go dopiero Nx, kt\u00f3ry obj\u0105\u0142 piecz\u0119 nad przywr\u00f3ceniem go do \u017cycia. Kr\u00f3tkoterminowo firma zamierza\u0142a skupi\u0107 si\u0119 na naprawieniu krytycznych b\u0142\u0119d\u00f3w i podatno\u015bci. D\u0142ugoterminowy plan zak\u0142ada\u0142 wprowadzeni funkcjonalno\u015bcii, kt\u00f3re umo\u017cliwi\u0105 bezproblemow\u0105 integracj\u0119 mi\u0119dzy Lern\u0105 i Nx\u2019em. Jak pokaza\u0142 czas,obietnice zosta\u0142y zrealizowane. Kilka tygodni temu zobaczyli\u015bmy pierwsz\u0105 du\u017c\u0105 wersj\u0119 Lerny. Wszystkie du\u017ce funkcjonalno\u015bci, takie jak \u2026 zbudowane zosta\u0142y w oparciu o Nx.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
W tym momencie mo\u017cemy zastanowi\u0107 si\u0119 jak na dzie\u0144 dzisiejszy wygl\u0105da sytuacja je\u015bli chodzi o narz\u0119dzia do zarz\u0105dzania JavaScriptowymi monorepo. W r\u0119kach dobrze dofinansowane firmy Nrwl znajduj\u0105 si\u0119 dwa najpopularniejsze narz\u0119dzia w postaci `Nx` oraz `lerna`. W r\u0119kach jeszcze lepiej dofinansowanej firmy Vercel (tej samej kt\u00f3ra stoi za Next.js) znajduje si\u0119 narz\u0119dzie Turborepo. Co prawda na razie brakuje mu jeszcze troch\u0119 do konkurencji, ale wci\u0105\u017c pr\u0119\u017cnie si\u0119 rozwija no i stoi za nim naprawd\u0119 du\u017ca firma. Ci\u0119\u017cko przewidywa\u0107 na kt\u00f3r\u0105 stron\u0119 przechyli si\u0119 szala zwyci\u0119stwa w przysz\u0142o\u015bci. <\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/techcrunch.com\/2022\/11\/17\/with-8-6m-in-seed-funding-nx-wants-to-take-monorepos-mainstream\/<\/a><\/p>\n\n\n\n
3. Arrow.js – dni od pojawienia si\u0119 nowego frameworku: 0<\/h2>\n\n\n\n
Czasy, kiedy nowe frameowrki i biblioteki wyrasta\u0142y jak grzyby po deszczu mamy ju\u017c na szcz\u0119\u015bcie za sob\u0105. Wci\u0105\u017c jednak od czasu do czasu jaka\u015b biblioteka wzbudzi zainteresowanie w tej naszej nudnej i ustatkowanej spo\u0142eczno\u015bci. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, kiedy to wszyscy zacz\u0119li m\u00f3wi\u0107 o Arrow.js.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Nowy framework (a w\u0142a\u015bciwie bardziej bibliotek\u0119) wyr\u00f3\u017cnia przede wszystkim prostota oraz postawienie na natywne funkcjonalno\u015bci JavaScript. Sp\u00f3jrzcie tylko na poni\u017cszy fragment: <\/p>\n\n\n\n
import { reactive, html } from '@arrow-js\/core'\n\nconst data = reactive({\n  clicks: 0\n});\n\nhtml`\n  <button @click="${() => data.clicks++}">\n    Fired ${() => data.clicks} arrows\n  <\/button>\n`<\/code><\/pre>\n\n\n\n
Metoda reactive, za pomoc\u0105 Proxies<\/a> tworzy obiekt, w kt\u00f3rym zmiany mo\u017cna obserwowa\u0107 za pomoc\u0105 metody `.$on()`. Do renderowania wykorzystane zosta\u0142y Tagged Templates<\/a>. Magiczny prefix html (tak naprawd\u0119 jest najprostsz\u0105 na \u015bwiecie funkcj\u0105) sprawia, \u017ce obserwowane s\u0105 zmiany w reaktywnych obiektach. <\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Jakkolwiek szokuj\u0105ce mo\u017ce si\u0119 to wydawa\u0107, to ju\u017c wszystko co oferuje Arrow.js. Czy wygryzie on Reacta, Vue, Angulara albo chocia\u017c Svelte? Szanse na to s\u0105 raczej ma\u0142e, je\u015bli nie zerowe. Mimo wszystko wydaje si\u0119 on ciekawym narz\u0119dziem. Je\u015bli macie wolne 15 minut to polecam zanurzenie si\u0119 w dokumentacj\u0119, chocia\u017cby po to, \u017ceby lepiej zrozumie\u0107 jak dzia\u0142a pe\u0142noprawny framework maj\u0105cy mniej ni\u017c tysi\u0105c linii kodu.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.arrow-js.com\/<\/a><\/p>\n\n\n\n
4. Czas odda\u0107 sw\u00f3j g\u0142os w State of JS 2022<\/h2>\n\n\n\n
Powoli zbli\u017camy si\u0119 do tego czasu w roku, kiedy nasze przegl\u0105dy b\u0119d\u0105 po\u015bwi\u0119cone g\u0142\u00f3wnie wszelkiego rodzaju podsumowaniom i statystykom (czyt. koniec roku 2022). Zanim to jednak nast\u0105pi, wszyscy musimy wype\u0142ni\u0107 ca\u0142\u0105 mas\u0119 ankiet, kt\u00f3re dostarcz\u0105 danych do wszelakich raport\u00f3w. Nie prosi\u0142bym Was o wype\u0142nienie losowej ankiety, gdyby\u015bcie nie mogli wynie\u015b\u0107 z niej czego\u015b dla siebie. Podobnie jak w przypadku State of CSS, State of JS jest najlepszy miejscem, \u017ceby nadrobi\u0107 biblioteki jak i natywne funkcjonalno\u015bci, kt\u00f3re przesz\u0142y poza naszym radarem na przestrzeni ostatnich lat. Pod koniec ca\u0142ej ankiety otrzymacieprocentowy wynik i list\u0119 link\u00f3w, kt\u00f3re pozwol\u0105 Wam szybko uzupe\u0142ni\u0107 braki.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/survey.devographics.com\/survey\/state-of-js\/2022<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\tVue 3 jest ju\u017c z nami od ponad dw\u00f3ch lat. Przez ten ca\u0142y czas ci\u0105gle brakowa\u0142o mu jednego wa\u017cnego komponentu – renderowania po stronie serwera. Na szcz\u0119\u015bcie w tym tygodniu wreszcie doczekali\u015bmy si\u0119 Nuxt 3. Co zaj\u0119\u0142o deweloperom tyle czasu? Czym pr\u00f3buje zaskoczy\u0107 nas Nuxt3? O tym wszystkim przeczytacie w dzisiejszej edycji Frontend Weekly.<\/p>\n","protected":false},"author":12,"featured_media":12425,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[737,405,300],"class_list":["post-12406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","tag-nuxt","tag-nx-pl","tag-vue-pl"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","feature_image_blog":{"ID":12427,"id":12427,"title":"pexels-creative-vix-9754","filename":"pexels-creative-vix-9754.jpg","filesize":86231,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","link":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/pexels-creative-vix-9754\/","alt":"","author":"12","description":"","caption":"","name":"pexels-creative-vix-9754","status":"inherit","uploaded_to":12406,"date":"2022-11-24 10:59:00","modified":"2022-11-24 10:59:00","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1280,"height":800,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754-300x188.jpg","medium-width":300,"medium-height":188,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754-768x480.jpg","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754-1024x640.jpg","large-width":1024,"large-height":640,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","1536x1536-width":1280,"1536x1536-height":800,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","2048x2048-width":1280,"2048x2048-height":800,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":188,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":250,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/pexels-creative-vix-9754.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":375}},"estimated_reading_time":"8"},"yoast_head":"\nNuxt 3 | Frontend Weekly vol. 114 - 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\/nuxt-3-frontend-weekly-vol-114\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nuxt 3 | Frontend Weekly vol. 114 - Vived\" \/>\n<meta property=\"og:description\" content=\"Vue 3 jest ju\u017c z nami od ponad dw\u00f3ch lat. Przez ten ca\u0142y czas ci\u0105gle brakowa\u0142o mu jednego wa\u017cnego komponentu - renderowania po stronie serwera. Na szcz\u0119\u015bcie w tym tygodniu wreszcie doczekali\u015bmy si\u0119 Nuxt 3. Co zaj\u0119\u0142o deweloperom tyle czasu? Czym pr\u00f3buje zaskoczy\u0107 nas Nuxt3? O tym wszystkim przeczytacie w dzisiejszej edycji Frontend Weekly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-24T12:20:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-24T12:20:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\\\/nuxt-3-frontend-weekly-vol-114\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/person\\\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Nuxt 3 | Frontend Weekly vol. 114\",\"datePublished\":\"2022-11-24T12:20:30+00:00\",\"dateModified\":\"2022-11-24T12:20:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/\"},\"wordCount\":1526,\"publisher\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Frontend-Weekly-1200x628_V2-5.png\",\"keywords\":[\"Nuxt\",\"Nx\",\"Vue\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/\",\"url\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/\",\"name\":\"Nuxt 3 | Frontend Weekly vol. 114 - Vived\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Frontend-Weekly-1200x628_V2-5.png\",\"datePublished\":\"2022-11-24T12:20:30+00:00\",\"dateModified\":\"2022-11-24T12:20:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Frontend-Weekly-1200x628_V2-5.png\",\"contentUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Frontend-Weekly-1200x628_V2-5.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/nuxt-3-frontend-weekly-vol-114\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/vived.io\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nuxt 3 | Frontend Weekly vol. 114\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#website\",\"url\":\"https:\\\/\\\/3.68.244.71\\\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/3.68.244.71\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\",\"name\":\"Vived\",\"url\":\"https:\\\/\\\/3.68.244.71\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/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:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/person\\\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"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":"Nuxt 3 | Frontend Weekly vol. 114 - 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\/nuxt-3-frontend-weekly-vol-114\/","og_locale":"pl_PL","og_type":"article","og_title":"Nuxt 3 | Frontend Weekly vol. 114 - Vived","og_description":"Vue 3 jest ju\u017c z nami od ponad dw\u00f3ch lat. Przez ten ca\u0142y czas ci\u0105gle brakowa\u0142o mu jednego wa\u017cnego komponentu - renderowania po stronie serwera. Na szcz\u0119\u015bcie w tym tygodniu wreszcie doczekali\u015bmy si\u0119 Nuxt 3. Co zaj\u0119\u0142o deweloperom tyle czasu? Czym pr\u00f3buje zaskoczy\u0107 nas Nuxt3? O tym wszystkim przeczytacie w dzisiejszej edycji Frontend Weekly.","og_url":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/","og_site_name":"Vived","article_published_time":"2022-11-24T12:20:30+00:00","article_modified_time":"2022-11-24T12:20:33+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/3.68.244.71\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Nuxt 3 | Frontend Weekly vol. 114","datePublished":"2022-11-24T12:20:30+00:00","dateModified":"2022-11-24T12:20:33+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/"},"wordCount":1526,"publisher":{"@id":"https:\/\/3.68.244.71\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","keywords":["Nuxt","Nx","Vue"],"articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/","url":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/","name":"Nuxt 3 | Frontend Weekly vol. 114 - Vived","isPartOf":{"@id":"https:\/\/3.68.244.71\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","datePublished":"2022-11-24T12:20:30+00:00","dateModified":"2022-11-24T12:20:33+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/Frontend-Weekly-1200x628_V2-5.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/nuxt-3-frontend-weekly-vol-114\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Nuxt 3 | Frontend Weekly vol. 114"}]},{"@type":"WebSite","@id":"https:\/\/3.68.244.71\/#website","url":"https:\/\/3.68.244.71\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/3.68.244.71\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/3.68.244.71\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/3.68.244.71\/#organization","name":"Vived","url":"https:\/\/3.68.244.71\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/3.68.244.71\/#\/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:\/\/3.68.244.71\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/3.68.244.71\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","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. Nuxt 3, czyli prawdziwy SSR dla Vue 3<\/h2>\n","innerContent":["\n<h2>1. Nuxt 3, czyli prawdziwy SSR dla Vue 3<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>My\u015bl\u0119, \u017ce gdyby pokaza\u0107 sztucznej inteligencji Frontend Weekly z ostatnich miesi\u0119cy, to stwierdzi\u0142aby, \u017ce jest to newsletter na temat renderowania po stronie serwera. Nic nie poradz\u0119 na to, \u017ce ca\u0142y \u015bwiat oszala\u0142 ostatnio na tym punkcie. W tym tygodniu po raz kolejny dolewamy oliwy do ognia, bo po ponad dw\u00f3ch latach developmentu ukaza\u0142 si\u0119 Nuxt 3. A to oznacza, \u017ce Vue 3 wreszcie mo\u017ce by\u0107 renderowane po stronie serwera! Dlaczego na Nuxt 3 musieli\u015bmy czeka\u0107 tak d\u0142ugo? Czy Nuxt przerasta Next.js pomimo mniejszego bud\u017cetu? Na te pytania postaram si\u0119 odpowiedzie\u0107 w dzisiejszym przegl\u0105dzie.<\/p>\n","innerContent":["\n<p>My\u015bl\u0119, \u017ce gdyby pokaza\u0107 sztucznej inteligencji Frontend Weekly z ostatnich miesi\u0119cy, to stwierdzi\u0142aby, \u017ce jest to newsletter na temat renderowania po stronie serwera. Nic nie poradz\u0119 na to, \u017ce ca\u0142y \u015bwiat oszala\u0142 ostatnio na tym punkcie. W tym tygodniu po raz kolejny dolewamy oliwy do ognia, bo po ponad dw\u00f3ch latach developmentu ukaza\u0142 si\u0119 Nuxt 3. A to oznacza, \u017ce Vue 3 wreszcie mo\u017ce by\u0107 renderowane po stronie serwera! Dlaczego na Nuxt 3 musieli\u015bmy czeka\u0107 tak d\u0142ugo? Czy Nuxt przerasta Next.js pomimo mniejszego bud\u017cetu? Na te pytania postaram si\u0119 odpowiedzie\u0107 w dzisiejszym przegl\u0105dzie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12407,"width":521,"height":521,"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\/2022\/11\/71ysno.gif\" alt=\"\" class=\"wp-image-12407\" width=\"521\" height=\"521\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/71ysno.gif\" alt=\"\" class=\"wp-image-12407\" width=\"521\" height=\"521\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie jest tajemnic\u0105, \u017ce Nuxt gar\u015bciami czerpie inspiracje z Next.js. Jak zapewne si\u0119 domy\u015blacie, oznacza to, \u017ce routing w Nuxt oparty jest o struktur\u0119 katalog\u00f3w. W najnowszej wersji frameworku niewiele si\u0119 w tej kwestii zmienia. Zar\u00f3wno nazwnictwo jak i spos\u00f3b dopasowywania \u015bcie\u017cek dzia\u0142aj\u0105 bez wi\u0119kszych zmian. Do dyspozycji mamy wi\u0119c katalog `pages`, gdzie umieszczamy nasze strony, `components`, gdzie umieszczam wsp\u00f3\u0142dzielone komponenty, czy `layouts` gdzie umieszczamy \u201copakowania\u201d na nasze strony (tak, Nuxt 2 obs\u0142ugiwa\u0142o funkcjonalno\u015b\u0107 `layouts` na d\u0142ugo przed Next.js).<\/p>\n","innerContent":["\n<p>Nie jest tajemnic\u0105, \u017ce Nuxt gar\u015bciami czerpie inspiracje z Next.js. Jak zapewne si\u0119 domy\u015blacie, oznacza to, \u017ce routing w Nuxt oparty jest o struktur\u0119 katalog\u00f3w. W najnowszej wersji frameworku niewiele si\u0119 w tej kwestii zmienia. Zar\u00f3wno nazwnictwo jak i spos\u00f3b dopasowywania \u015bcie\u017cek dzia\u0142aj\u0105 bez wi\u0119kszych zmian. Do dyspozycji mamy wi\u0119c katalog `pages`, gdzie umieszczamy nasze strony, `components`, gdzie umieszczam wsp\u00f3\u0142dzielone komponenty, czy `layouts` gdzie umieszczamy \u201copakowania\u201d na nasze strony (tak, Nuxt 2 obs\u0142ugiwa\u0142o funkcjonalno\u015b\u0107 `layouts` na d\u0142ugo przed Next.js).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>To co szybko rzuca si\u0119 w oczy przegl\u0105daj\u0105c dokumentacj\u0119 Nuxt 3, to ca\u0142kowity brak import\u00f3w. Jak si\u0119 okazuje, nie jest to ani celowe uproszczenie, ani tym bardziej niedopatrzenie ze strony autor\u00f3w dokumentacji. Nuxt 3 wykorzystuje bibliotek\u0119 `unjs\/unimport`, kt\u00f3ra odpowiedzialna jest za automatyczne generowanie import\u00f3w. W przypadku wyst\u0105pienia konfliktu rzucony zostanie b\u0142\u0105d, kt\u00f3rego pozby\u0107 mo\u017cna si\u0119 r\u0119cznie definiuj\u0105c dany import.<\/p>\n","innerContent":["\n<p>To co szybko rzuca si\u0119 w oczy przegl\u0105daj\u0105c dokumentacj\u0119 Nuxt 3, to ca\u0142kowity brak import\u00f3w. Jak si\u0119 okazuje, nie jest to ani celowe uproszczenie, ani tym bardziej niedopatrzenie ze strony autor\u00f3w dokumentacji. Nuxt 3 wykorzystuje bibliotek\u0119 `unjs\/unimport`, kt\u00f3ra odpowiedzialna jest za automatyczne generowanie import\u00f3w. W przypadku wyst\u0105pienia konfliktu rzucony zostanie b\u0142\u0105d, kt\u00f3rego pozby\u0107 mo\u017cna si\u0119 r\u0119cznie definiuj\u0105c dany import.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\"><script setup>\n  \/* ref() and computed() are auto-imported *\/\n  const count = ref(1)\n  const double = computed(() => count.value * 2)\n<\/script><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\"><script setup>\n  \/* ref() and computed() are auto-imported *\/\n  const count = ref(1)\n  const double = computed(() => count.value * 2)\n<\/script><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejn\u0105 nowo\u015bci\u0105 jest natywne wsparcie dla plik\u00f3w Markdown na sterydach. Co mam przez to na my\u015bli? Nuxt 3 pozwala w plikach Markdown wykorzystywa\u0107 komponenty Vue. Co wa\u017cne, komponenty te mo\u017cemy dowolnie parametryzowa\u0107, a nawet przekazywa\u0107 do nich wyrenderowane fragmenty Markdown. Funkcjonalno\u015bci takie jak ta, mo\u017ce i nie wywracaj\u0105 \u015bwiata do g\u00f3ry nogami, ale na pewno doceni\u0105 je wszyscy autorzy blog\u00f3w i dokumentacji.<\/p>\n","innerContent":["\n<p>Kolejn\u0105 nowo\u015bci\u0105 jest natywne wsparcie dla plik\u00f3w Markdown na sterydach. Co mam przez to na my\u015bli? Nuxt 3 pozwala w plikach Markdown wykorzystywa\u0107 komponenty Vue. Co wa\u017cne, komponenty te mo\u017cemy dowolnie parametryzowa\u0107, a nawet przekazywa\u0107 do nich wyrenderowane fragmenty Markdown. Funkcjonalno\u015bci takie jak ta, mo\u017ce i nie wywracaj\u0105 \u015bwiata do g\u00f3ry nogami, ale na pewno doceni\u0105 je wszyscy autorzy blog\u00f3w i dokumentacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ pages\/[...slug].vue\n<template>\n  <main>\n    <ContentDoc \/>\n  <\/main>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ pages\/[...slug].vue\n<template>\n  <main>\n    <ContentDoc \/>\n  <\/main>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ content\/index.md\n# Nuxt Content Hello World\n\n[About](\/about)\n\n::app-button{variant=\u201dfilled\u201d}\nHello **World**!\n::<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ content\/index.md\n# Nuxt Content Hello World\n\n[About](\/about)\n\n::app-button{variant=\u201dfilled\u201d}\nHello **World**!\n::<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przegl\u0105daj\u0105c struktur\u0119 katalog\u00f3w Nuxt 3 (swoj\u0105 drog\u0105 dokumentacja ta jest naprawd\u0119 dobra i czytelna) natrafi\u0107 mo\u017cemy jeszcze na jedn\u0105 nowo\u015b\u0107 - katalog `server`. W katalogu tym zdefiniowa\u0107 mo\u017cemy nasze REST API. Podobnie jak w przypadku katalogu `pages`, umiejscowienie plik\u00f3w definiuje \u015bcie\u017ck\u0119 endpointa. Nuxt wygeneruje za nas odpowiednie typy. Kiedy w `useFetch` wywo\u0142amy nasz endpoint automatycznie b\u0119dzie on w pe\u0142ni type-safe.<\/p>\n","innerContent":["\n<p>Przegl\u0105daj\u0105c struktur\u0119 katalog\u00f3w Nuxt 3 (swoj\u0105 drog\u0105 dokumentacja ta jest naprawd\u0119 dobra i czytelna) natrafi\u0107 mo\u017cemy jeszcze na jedn\u0105 nowo\u015b\u0107 - katalog `server`. W katalogu tym zdefiniowa\u0107 mo\u017cemy nasze REST API. Podobnie jak w przypadku katalogu `pages`, umiejscowienie plik\u00f3w definiuje \u015bcie\u017ck\u0119 endpointa. Nuxt wygeneruje za nas odpowiednie typy. Kiedy w `useFetch` wywo\u0142amy nasz endpoint automatycznie b\u0119dzie on w pe\u0142ni type-safe.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ server\/routes\/hello.ts\nexport default defineEventHandler(() => 'Hello World!');<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ server\/routes\/hello.ts\nexport default defineEventHandler(() => 'Hello World!');<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ pages\/index.vue\n<script setup>\n  const response = useFetch(\u2018\/hello\u2019); \/\/ response will automatically have string type\n<\/script><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ pages\/index.vue\n<script setup>\n  const response = useFetch(\u2018\/hello\u2019); \/\/ response will automatically have string type\n<\/script><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ostatni\u0105 du\u017c\u0105 funkcjonalno\u015b\u0107 to alternatywne tryby dzia\u0142ania Nuxt 3. Domy\u015blnie framework renderuje strony po stronie serwera. Przy pomocy konfiguracji mo\u017cemy zmieni\u0107 to zachowanie. W\u015br\u00f3d dost\u0119pnych opcji znajdziemy statyczne generowanie strony, renderowanie po stronie klienta, ale te\u017c bardziej zaawansowane opcje takie jak inkrementalne budowanie. <\/p>\n","innerContent":["\n<p>Ostatni\u0105 du\u017c\u0105 funkcjonalno\u015b\u0107 to alternatywne tryby dzia\u0142ania Nuxt 3. Domy\u015blnie framework renderuje strony po stronie serwera. Przy pomocy konfiguracji mo\u017cemy zmieni\u0107 to zachowanie. W\u015br\u00f3d dost\u0119pnych opcji znajdziemy statyczne generowanie strony, renderowanie po stronie klienta, ale te\u017c bardziej zaawansowane opcje takie jak inkrementalne budowanie. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12409,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/71yshr.jpeg\" alt=\"\" class=\"wp-image-12409\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/71yshr.jpeg\" alt=\"\" class=\"wp-image-12409\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>No dobra, wszystkie nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale co zaj\u0119\u0142o deweloperom a\u017c dwa lata? Dlaczego nie zastosowano bardziej inkrementalnej strategii, kt\u00f3ra umo\u017cliwi\u0142aby renderowanie Vue po stronie serwera bez tych wszystkich \u201cszmer\u00f3w-bajer\u00f3w\u201d? W momencie releasu Vue 3, zesp\u00f3\u0142 stoj\u0105cy za Nuxt podj\u0105\u0142 bardzo wa\u017cn\u0105 architektoniczn\u0105 decyzj\u0105 - po\u015bwi\u0119ci\u0107 bezcenny czas na uczynienie Nuxt kompatybilnym z Vue 3, czy te\u017c wykorzysta\u0107 okazj\u0119 i przebudowa\u0107 ca\u0142y framework tak, aby mo\u017cliwy by\u0142 jego dynamiczny rozw\u00f3j w przysz\u0142o\u015bci. Wyb\u00f3r pad\u0142a na t\u0105 drug\u0105 opcje, czego efektem jest Nitro.<\/p>\n","innerContent":["\n<p>No dobra, wszystkie nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale co zaj\u0119\u0142o deweloperom a\u017c dwa lata? Dlaczego nie zastosowano bardziej inkrementalnej strategii, kt\u00f3ra umo\u017cliwi\u0142aby renderowanie Vue po stronie serwera bez tych wszystkich \u201cszmer\u00f3w-bajer\u00f3w\u201d? W momencie releasu Vue 3, zesp\u00f3\u0142 stoj\u0105cy za Nuxt podj\u0105\u0142 bardzo wa\u017cn\u0105 architektoniczn\u0105 decyzj\u0105 - po\u015bwi\u0119ci\u0107 bezcenny czas na uczynienie Nuxt kompatybilnym z Vue 3, czy te\u017c wykorzysta\u0107 okazj\u0119 i przebudowa\u0107 ca\u0142y framework tak, aby mo\u017cliwy by\u0142 jego dynamiczny rozw\u00f3j w przysz\u0142o\u015bci. Wyb\u00f3r pad\u0142a na t\u0105 drug\u0105 opcje, czego efektem jest Nitro.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12411,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-53.jpeg\" alt=\"\" class=\"wp-image-12411\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-53.jpeg\" alt=\"\" class=\"wp-image-12411\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nitro to serwer JavaScript, kt\u00f3ry mo\u017ce by\u0107 uruchamiany na dowolnym \u015brodowisku. Nale\u017cy przez to rozumie\u0107, \u017ce mo\u017cna go uruchomi\u0107 zar\u00f3wno w Node.js jak i w Deno, ale tak\u017ce we wszelakich \u015brodowiskach chmurowych ze szczeg\u00f3lnym uwzgl\u0119dnieniem Edge Functions. Poprzez implikacj\u0119 oznacza to, \u017ce Nuxt 3 bez wi\u0119kszych problem\u00f3w mo\u017ce by\u0107 uruchamiany tak blisko klienta jak to tylko mo\u017cliwe. W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci, o kt\u00f3rych mogli\u015bcie przeczyta\u0107 wy\u017cej, nie by\u0142yby osi\u0105galne, gdyby nie powstanie nowego silnika.<\/p>\n","innerContent":["\n<p>Nitro to serwer JavaScript, kt\u00f3ry mo\u017ce by\u0107 uruchamiany na dowolnym \u015brodowisku. Nale\u017cy przez to rozumie\u0107, \u017ce mo\u017cna go uruchomi\u0107 zar\u00f3wno w Node.js jak i w Deno, ale tak\u017ce we wszelakich \u015brodowiskach chmurowych ze szczeg\u00f3lnym uwzgl\u0119dnieniem Edge Functions. Poprzez implikacj\u0119 oznacza to, \u017ce Nuxt 3 bez wi\u0119kszych problem\u00f3w mo\u017ce by\u0107 uruchamiany tak blisko klienta jak to tylko mo\u017cliwe. W\u0142a\u015bciwie wszystkie funkcjonalno\u015bci, o kt\u00f3rych mogli\u015bcie przeczyta\u0107 wy\u017cej, nie by\u0142yby osi\u0105galne, gdyby nie powstanie nowego silnika.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12413,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-3.jpeg\" alt=\"\" class=\"wp-image-12413\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-3.jpeg\" alt=\"\" class=\"wp-image-12413\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czy zastosowana strategia by\u0142a s\u0142uszna? Vue 3 bardzo straci\u0142o na braku dobrej biblioteki do renderowania po stronie serwera przez pierwsze dwa lata swojego \u017cycia. Z drugiej jednak strony, Vue 3 pe\u0142ne by\u0142o breaking changes, kt\u00f3re po nocach \u015bni\u0142y si\u0119 autorom bibliotek do Vue 2. Kto wie, czy stworzenie Nuxt 2 kompatybilnego z Vue 3, by\u0142oby w og\u00f3le mo\u017cliwe, a je\u015bli tak, to czy nie zaj\u0119\u0142oby por\u00f3wnywalnej ilo\u015bci czasu. <\/p>\n","innerContent":["\n<p>Czy zastosowana strategia by\u0142a s\u0142uszna? Vue 3 bardzo straci\u0142o na braku dobrej biblioteki do renderowania po stronie serwera przez pierwsze dwa lata swojego \u017cycia. Z drugiej jednak strony, Vue 3 pe\u0142ne by\u0142o breaking changes, kt\u00f3re po nocach \u015bni\u0142y si\u0119 autorom bibliotek do Vue 2. Kto wie, czy stworzenie Nuxt 2 kompatybilnego z Vue 3, by\u0142oby w og\u00f3le mo\u017cliwe, a je\u015bli tak, to czy nie zaj\u0119\u0142oby por\u00f3wnywalnej ilo\u015bci czasu. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/nuxt.com\/v3\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nuxt.com\/v3<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=cSjlefuZlaI\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=cSjlefuZlaI<br><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=noq-ZHTD2Cg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=noq-ZHTD2Cg<br><\/a><a href=\"https:\/\/nuxt.com\/docs\/guide\/concepts\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nuxt.com\/docs\/guide\/concepts\/<br><\/a><a href=\"https:\/\/nitro.unjs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nitro.unjs.io\/<br><\/a><a href=\"https:\/\/www.vuemastery.com\/blog\/new-nuxt-3-feature-incremental-static-generation\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.vuemastery.com\/blog\/new-nuxt-3-feature-incremental-static-generation\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/nuxt.com\/v3\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nuxt.com\/v3<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=cSjlefuZlaI\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=cSjlefuZlaI<br><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=noq-ZHTD2Cg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=noq-ZHTD2Cg<br><\/a><a href=\"https:\/\/nuxt.com\/docs\/guide\/concepts\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nuxt.com\/docs\/guide\/concepts\/<br><\/a><a href=\"https:\/\/nitro.unjs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nitro.unjs.io\/<br><\/a><a href=\"https:\/\/www.vuemastery.com\/blog\/new-nuxt-3-feature-incremental-static-generation\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.vuemastery.com\/blog\/new-nuxt-3-feature-incremental-static-generation\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Nx zgarnia 8.5 miliona dolar\u00f3w<\/h2>\n","innerContent":["\n<h2>2. Nx zgarnia 8.5 miliona dolar\u00f3w<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nrwl, czyli firma stoj\u0105ca za Nx, zosta\u0142a za\u0142o\u017cona przez dw\u00f3ch deweloper\u00f3w z zespo\u0142u Angulara. Pocz\u0105tkowo dzia\u0142a\u0142\u0105 ona jak typowa firma konsultingowa pomagaj\u0105ca du\u017cym korporacjom budowa\u0107 aplikacje przy u\u017cyciu frameworka od Google. Z czasem w portfolio firmy zawita\u0142 Nx, czyli narz\u0119dziem u\u0142atwiaj\u0105ce prac\u0119 z Angularowymi mono-repo. Powsta\u0142o ono z my\u015bl\u0105 o klientach firmy, a przy jego projektowaniu deweloperzy wykorzystali swoje do\u015bwiadczenie przy pracy z du\u017cymi projektami jakie nabyli w Google.<\/p>\n","innerContent":["\n<p>Nrwl, czyli firma stoj\u0105ca za Nx, zosta\u0142a za\u0142o\u017cona przez dw\u00f3ch deweloper\u00f3w z zespo\u0142u Angulara. Pocz\u0105tkowo dzia\u0142a\u0142\u0105 ona jak typowa firma konsultingowa pomagaj\u0105ca du\u017cym korporacjom budowa\u0107 aplikacje przy u\u017cyciu frameworka od Google. Z czasem w portfolio firmy zawita\u0142 Nx, czyli narz\u0119dziem u\u0142atwiaj\u0105ce prac\u0119 z Angularowymi mono-repo. Powsta\u0142o ono z my\u015bl\u0105 o klientach firmy, a przy jego projektowaniu deweloperzy wykorzystali swoje do\u015bwiadczenie przy pracy z du\u017cymi projektami jakie nabyli w Google.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12415,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-54.jpeg\" alt=\"\" class=\"wp-image-12415\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-54.jpeg\" alt=\"\" class=\"wp-image-12415\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nx dzia\u0142a\u0142 na tyle dobrze, \u017ce dw\u00f3jka deweloper\u00f3w postanowi\u0142a porzuci\u0107 dzia\u0142alno\u015b\u0107 konsultingow\u0105 i skupi\u0107 si\u0119 na jego rozwoju. Na przestrzeni lat, Nx przesta\u0142 by\u0107 narz\u0119dziem dedykowanym dla Angulara i sta\u0142 si\u0119 narz\u0119dziem rozwijanym z my\u015bl\u0105 o JavaScript . Deweloperzy stopniowo pokochali Nx i obecnie jest on najpopularniejszym narz\u0119dziem w swojej kategorii.<\/p>\n","innerContent":["\n<p>Nx dzia\u0142a\u0142 na tyle dobrze, \u017ce dw\u00f3jka deweloper\u00f3w postanowi\u0142a porzuci\u0107 dzia\u0142alno\u015b\u0107 konsultingow\u0105 i skupi\u0107 si\u0119 na jego rozwoju. Na przestrzeni lat, Nx przesta\u0142 by\u0107 narz\u0119dziem dedykowanym dla Angulara i sta\u0142 si\u0119 narz\u0119dziem rozwijanym z my\u015bl\u0105 o JavaScript . Deweloperzy stopniowo pokochali Nx i obecnie jest on najpopularniejszym narz\u0119dziem w swojej kategorii.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Interesuj\u0105cym epizodem w najnowszej historii Nx jest przej\u0119cie pieczy nad lern\u0105 - narz\u0119dziem, kt\u00f3re jeszcze 2 lata temu by\u0142o tym najpopularniejszym je\u015bli chodzi o zarz\u0105dzanie monorepo. Projekt ten przesta\u0142 by\u0107 rozwijany i przez oko\u0142o rok dogorywa\u0142 w swoistym limbo. Z stanu tego wyrwa\u0142 go dopiero Nx, kt\u00f3ry obj\u0105\u0142 piecz\u0119 nad przywr\u00f3ceniem go do \u017cycia. Kr\u00f3tkoterminowo firma zamierza\u0142a skupi\u0107 si\u0119 na naprawieniu krytycznych b\u0142\u0119d\u00f3w i podatno\u015bci. D\u0142ugoterminowy plan zak\u0142ada\u0142 wprowadzeni funkcjonalno\u015bcii, kt\u00f3re umo\u017cliwi\u0105 bezproblemow\u0105 integracj\u0119 mi\u0119dzy Lern\u0105 i Nx\u2019em. Jak pokaza\u0142 czas,obietnice zosta\u0142y zrealizowane. Kilka tygodni temu zobaczyli\u015bmy pierwsz\u0105 du\u017c\u0105 wersj\u0119 Lerny. Wszystkie du\u017ce funkcjonalno\u015bci, takie jak \u2026 zbudowane zosta\u0142y w oparciu o Nx.<\/p>\n","innerContent":["\n<p>Interesuj\u0105cym epizodem w najnowszej historii Nx jest przej\u0119cie pieczy nad lern\u0105 - narz\u0119dziem, kt\u00f3re jeszcze 2 lata temu by\u0142o tym najpopularniejszym je\u015bli chodzi o zarz\u0105dzanie monorepo. Projekt ten przesta\u0142 by\u0107 rozwijany i przez oko\u0142o rok dogorywa\u0142 w swoistym limbo. Z stanu tego wyrwa\u0142 go dopiero Nx, kt\u00f3ry obj\u0105\u0142 piecz\u0119 nad przywr\u00f3ceniem go do \u017cycia. Kr\u00f3tkoterminowo firma zamierza\u0142a skupi\u0107 si\u0119 na naprawieniu krytycznych b\u0142\u0119d\u00f3w i podatno\u015bci. D\u0142ugoterminowy plan zak\u0142ada\u0142 wprowadzeni funkcjonalno\u015bcii, kt\u00f3re umo\u017cliwi\u0105 bezproblemow\u0105 integracj\u0119 mi\u0119dzy Lern\u0105 i Nx\u2019em. Jak pokaza\u0142 czas,obietnice zosta\u0142y zrealizowane. Kilka tygodni temu zobaczyli\u015bmy pierwsz\u0105 du\u017c\u0105 wersj\u0119 Lerny. Wszystkie du\u017ce funkcjonalno\u015bci, takie jak \u2026 zbudowane zosta\u0142y w oparciu o Nx.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12417,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-23.jpeg\" alt=\"\" class=\"wp-image-12417\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/download-23.jpeg\" alt=\"\" class=\"wp-image-12417\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W tym momencie mo\u017cemy zastanowi\u0107 si\u0119 jak na dzie\u0144 dzisiejszy wygl\u0105da sytuacja je\u015bli chodzi o narz\u0119dzia do zarz\u0105dzania JavaScriptowymi monorepo. W r\u0119kach dobrze dofinansowane firmy Nrwl znajduj\u0105 si\u0119 dwa najpopularniejsze narz\u0119dzia w postaci `Nx` oraz `lerna`. W r\u0119kach jeszcze lepiej dofinansowanej firmy Vercel (tej samej kt\u00f3ra stoi za Next.js) znajduje si\u0119 narz\u0119dzie Turborepo. Co prawda na razie brakuje mu jeszcze troch\u0119 do konkurencji, ale wci\u0105\u017c pr\u0119\u017cnie si\u0119 rozwija no i stoi za nim naprawd\u0119 du\u017ca firma. Ci\u0119\u017cko przewidywa\u0107 na kt\u00f3r\u0105 stron\u0119 przechyli si\u0119 szala zwyci\u0119stwa w przysz\u0142o\u015bci. <\/p>\n","innerContent":["\n<p>W tym momencie mo\u017cemy zastanowi\u0107 si\u0119 jak na dzie\u0144 dzisiejszy wygl\u0105da sytuacja je\u015bli chodzi o narz\u0119dzia do zarz\u0105dzania JavaScriptowymi monorepo. W r\u0119kach dobrze dofinansowane firmy Nrwl znajduj\u0105 si\u0119 dwa najpopularniejsze narz\u0119dzia w postaci `Nx` oraz `lerna`. W r\u0119kach jeszcze lepiej dofinansowanej firmy Vercel (tej samej kt\u00f3ra stoi za Next.js) znajduje si\u0119 narz\u0119dzie Turborepo. Co prawda na razie brakuje mu jeszcze troch\u0119 do konkurencji, ale wci\u0105\u017c pr\u0119\u017cnie si\u0119 rozwija no i stoi za nim naprawd\u0119 du\u017ca firma. Ci\u0119\u017cko przewidywa\u0107 na kt\u00f3r\u0105 stron\u0119 przechyli si\u0119 szala zwyci\u0119stwa w przysz\u0142o\u015bci. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/techcrunch.com\/2022\/11\/17\/with-8-6m-in-seed-funding-nx-wants-to-take-monorepos-mainstream\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/techcrunch.com\/2022\/11\/17\/with-8-6m-in-seed-funding-nx-wants-to-take-monorepos-mainstream\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/techcrunch.com\/2022\/11\/17\/with-8-6m-in-seed-funding-nx-wants-to-take-monorepos-mainstream\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/techcrunch.com\/2022\/11\/17\/with-8-6m-in-seed-funding-nx-wants-to-take-monorepos-mainstream\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Arrow.js - dni od pojawienia si\u0119 nowego frameworku: 0<\/h2>\n","innerContent":["\n<h2>3. Arrow.js - dni od pojawienia si\u0119 nowego frameworku: 0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czasy, kiedy nowe frameowrki i biblioteki wyrasta\u0142y jak grzyby po deszczu mamy ju\u017c na szcz\u0119\u015bcie za sob\u0105. Wci\u0105\u017c jednak od czasu do czasu jaka\u015b biblioteka wzbudzi zainteresowanie w tej naszej nudnej i ustatkowanej spo\u0142eczno\u015bci. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, kiedy to wszyscy zacz\u0119li m\u00f3wi\u0107 o Arrow.js.<\/p>\n","innerContent":["\n<p>Czasy, kiedy nowe frameowrki i biblioteki wyrasta\u0142y jak grzyby po deszczu mamy ju\u017c na szcz\u0119\u015bcie za sob\u0105. Wci\u0105\u017c jednak od czasu do czasu jaka\u015b biblioteka wzbudzi zainteresowanie w tej naszej nudnej i ustatkowanej spo\u0142eczno\u015bci. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, kiedy to wszyscy zacz\u0119li m\u00f3wi\u0107 o Arrow.js.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12437,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/image10-2-1.jpeg\" alt=\"\" class=\"wp-image-12437\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/image10-2-1.jpeg\" alt=\"\" class=\"wp-image-12437\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowy framework (a w\u0142a\u015bciwie bardziej bibliotek\u0119) wyr\u00f3\u017cnia przede wszystkim prostota oraz postawienie na natywne funkcjonalno\u015bci JavaScript. Sp\u00f3jrzcie tylko na poni\u017cszy fragment: <\/p>\n","innerContent":["\n<p>Nowy framework (a w\u0142a\u015bciwie bardziej bibliotek\u0119) wyr\u00f3\u017cnia przede wszystkim prostota oraz postawienie na natywne funkcjonalno\u015bci JavaScript. Sp\u00f3jrzcie tylko na poni\u017cszy fragment: <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { reactive, html } from '@arrow-js\/core'\n\nconst data = reactive({\n  clicks: 0\n});\n\nhtml`\n  <button @click=\"${() => data.clicks++}\">\n    Fired ${() => data.clicks} arrows\n  <\/button>\n`<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { reactive, html } from '@arrow-js\/core'\n\nconst data = reactive({\n  clicks: 0\n});\n\nhtml`\n  <button @click=\"${() => data.clicks++}\">\n    Fired ${() => data.clicks} arrows\n  <\/button>\n`<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Metoda reactive, za pomoc\u0105 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\">Proxies<\/a> tworzy obiekt, w kt\u00f3rym zmiany mo\u017cna obserwowa\u0107 za pomoc\u0105 metody `.$on()`. Do renderowania wykorzystane zosta\u0142y <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\">Tagged Templates<\/a>. Magiczny prefix html (tak naprawd\u0119 jest najprostsz\u0105 na \u015bwiecie funkcj\u0105) sprawia, \u017ce obserwowane s\u0105 zmiany w reaktywnych obiektach. <\/p>\n","innerContent":["\n<p>Metoda reactive, za pomoc\u0105 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\">Proxies<\/a> tworzy obiekt, w kt\u00f3rym zmiany mo\u017cna obserwowa\u0107 za pomoc\u0105 metody `.$on()`. Do renderowania wykorzystane zosta\u0142y <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\">Tagged Templates<\/a>. Magiczny prefix html (tak naprawd\u0119 jest najprostsz\u0105 na \u015bwiecie funkcj\u0105) sprawia, \u017ce obserwowane s\u0105 zmiany w reaktywnych obiektach. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12421,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/71ytjf.jpeg\" alt=\"\" class=\"wp-image-12421\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/71ytjf.jpeg\" alt=\"\" class=\"wp-image-12421\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jakkolwiek szokuj\u0105ce mo\u017ce si\u0119 to wydawa\u0107, to ju\u017c wszystko co oferuje Arrow.js. Czy wygryzie on Reacta, Vue, Angulara albo chocia\u017c Svelte? Szanse na to s\u0105 raczej ma\u0142e, je\u015bli nie zerowe. Mimo wszystko wydaje si\u0119 on ciekawym narz\u0119dziem. Je\u015bli macie wolne 15 minut to polecam zanurzenie si\u0119 w dokumentacj\u0119, chocia\u017cby po to, \u017ceby lepiej zrozumie\u0107 jak dzia\u0142a pe\u0142noprawny framework maj\u0105cy mniej ni\u017c tysi\u0105c linii kodu.<\/p>\n","innerContent":["\n<p>Jakkolwiek szokuj\u0105ce mo\u017ce si\u0119 to wydawa\u0107, to ju\u017c wszystko co oferuje Arrow.js. Czy wygryzie on Reacta, Vue, Angulara albo chocia\u017c Svelte? Szanse na to s\u0105 raczej ma\u0142e, je\u015bli nie zerowe. Mimo wszystko wydaje si\u0119 on ciekawym narz\u0119dziem. Je\u015bli macie wolne 15 minut to polecam zanurzenie si\u0119 w dokumentacj\u0119, chocia\u017cby po to, \u017ceby lepiej zrozumie\u0107 jak dzia\u0142a pe\u0142noprawny framework maj\u0105cy mniej ni\u017c tysi\u0105c linii kodu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.arrow-js.com\/\">https:\/\/www.arrow-js.com\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.arrow-js.com\/\">https:\/\/www.arrow-js.com\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. Czas odda\u0107 sw\u00f3j g\u0142os w State of JS 2022<\/h2>\n","innerContent":["\n<h2>4. Czas odda\u0107 sw\u00f3j g\u0142os w State of JS 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Powoli zbli\u017camy si\u0119 do tego czasu w roku, kiedy nasze przegl\u0105dy b\u0119d\u0105 po\u015bwi\u0119cone g\u0142\u00f3wnie wszelkiego rodzaju podsumowaniom i statystykom (czyt. koniec roku 2022). Zanim to jednak nast\u0105pi, wszyscy musimy wype\u0142ni\u0107 ca\u0142\u0105 mas\u0119 ankiet, kt\u00f3re dostarcz\u0105 danych do wszelakich raport\u00f3w. Nie prosi\u0142bym Was o wype\u0142nienie losowej ankiety, gdyby\u015bcie nie mogli wynie\u015b\u0107 z niej czego\u015b dla siebie. Podobnie jak w przypadku State of CSS, State of JS jest najlepszy miejscem, \u017ceby nadrobi\u0107 biblioteki jak i natywne funkcjonalno\u015bci, kt\u00f3re przesz\u0142y poza naszym radarem na przestrzeni ostatnich lat. Pod koniec ca\u0142ej ankiety otrzymacieprocentowy wynik i list\u0119 link\u00f3w, kt\u00f3re pozwol\u0105 Wam szybko uzupe\u0142ni\u0107 braki.<\/p>\n","innerContent":["\n<p>Powoli zbli\u017camy si\u0119 do tego czasu w roku, kiedy nasze przegl\u0105dy b\u0119d\u0105 po\u015bwi\u0119cone g\u0142\u00f3wnie wszelkiego rodzaju podsumowaniom i statystykom (czyt. koniec roku 2022). Zanim to jednak nast\u0105pi, wszyscy musimy wype\u0142ni\u0107 ca\u0142\u0105 mas\u0119 ankiet, kt\u00f3re dostarcz\u0105 danych do wszelakich raport\u00f3w. Nie prosi\u0142bym Was o wype\u0142nienie losowej ankiety, gdyby\u015bcie nie mogli wynie\u015b\u0107 z niej czego\u015b dla siebie. Podobnie jak w przypadku State of CSS, State of JS jest najlepszy miejscem, \u017ceby nadrobi\u0107 biblioteki jak i natywne funkcjonalno\u015bci, kt\u00f3re przesz\u0142y poza naszym radarem na przestrzeni ostatnich lat. Pod koniec ca\u0142ej ankiety otrzymacieprocentowy wynik i list\u0119 link\u00f3w, kt\u00f3re pozwol\u0105 Wam szybko uzupe\u0142ni\u0107 braki.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":12423,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/giphy-6.gif\" alt=\"\" class=\"wp-image-12423\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/11\/giphy-6.gif\" alt=\"\" class=\"wp-image-12423\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/survey.devographics.com\/survey\/state-of-js\/2022\">https:\/\/survey.devographics.com\/survey\/state-of-js\/2022<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/survey.devographics.com\/survey\/state-of-js\/2022\">https:\/\/survey.devographics.com\/survey\/state-of-js\/2022<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/12406","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=12406"}],"version-history":[{"count":12,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/12406\/revisions"}],"predecessor-version":[{"id":12464,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/12406\/revisions\/12464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/12425"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=12406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=12406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=12406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}