{"id":14201,"date":"2023-01-30T08:59:20","date_gmt":"2023-01-30T07:59:20","guid":{"rendered":"https:\/\/vived.io\/?p=14201"},"modified":"2023-01-30T09:00:45","modified_gmt":"2023-01-30T08:00:45","slug":"typescript-5-0-beta-frontend-weekly-vol-121","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/","title":{"rendered":"TypeScript 5.0 beta | Frontend Weekly vol. 121"},"content":{"rendered":"\n

1. TypeScript 5.0 beta<\/h2>\n\n\n\n

W minionym tygodniu ukaza\u0142a si\u0119 beta TypeScript 5.0. Warto jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie wersja ta przynosi raczej nowe funkcjonalno\u015bci, ni\u017c breaking changes (chocia\u017c i tych kilka si\u0119 znajdzie). My dzisiaj przyjrzymy si\u0119 3 najciekawszym naszym zdaniem nowo\u015bciom, ale je\u015bli chcecie zg\u0142\u0119bi\u0107 szczeg\u00f3\u0142y samodzielnie, to jak zwykle odsy\u0142am Was do genialnej notatki od Microsoftu<\/a>.<\/p>\n\n\n\n

Dekoratory<\/h3>\n\n\n\n

Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory. <\/p>\n\n\n

\n
\"\"
Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure><\/div>\n\n\n

Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem. <\/p>\n\n\n\n

Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w – dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n\n\n

\n
\"\"
Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure><\/div>\n\n\n

Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0. <\/p>\n\n\n

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

Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do \u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/p>\n\n\n\n

\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log("LOG: Entering method.")\n        const result = originalMethod.call(this, ...args);\n        console.log("LOG: Exiting method.")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person("Tomek").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n\n\n\n
Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga --experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n\n\n\n
const<\/code> Type Parametrs<\/h3>\n\n\n\n
Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/p>\n\n\n\n
\/\/ Inferred type: string[]  \nconst namesA = ["Alice", "Bob", "Eve"];\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]\nconst namesB = ["Alice", "Bob", "Eve"] as const; <\/code><\/pre>\n\n\n\n
Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/p>\n\n\n\n
function getNames<T extends { name: readonly string[]}>(arg: T): T["names"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: ["Alice", "Bob", "Eve"]});\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]         \nconst namesB = getNames({ names: ["Alice", "Bob", "Eve"]} as const); <\/code><\/pre>\n\n\n\n
TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/p>\n\n\n\n
\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T["names"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly ["Alice", "Bob", "Eve"]\nconst names = getNames{ names: ["Alice", "Bob", "Eve"] });<\/code><\/pre>\n\n\n\n
Optymalizacje<\/h3>\n\n\n\n
TypeScript 5.0 to r\u00f3wnie\u017c krok milowy je\u015bli chodzi o wydajno\u015b\u0107. Jest tak przede wszystkim ze wzgl\u0119du na to, \u017ce j\u0119zyk w ca\u0142o\u015bci zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w. To otworzy\u0142o drog\u0119 do wykorzystania ca\u0142ego szeregu narz\u0119dzi i mechanizm\u00f3w optymalizuj\u0105cych zar\u00f3wno kompilacj\u0119 jak i rozmiar ostatecznej paczki.<\/p>\n\n\n
\n
\"\"
\u0179r\u00f3d\u0142o: Announcing TypeScript 5.0 Beta<\/a><\/figcaption><\/figure><\/div>\n\n\n
\n\n\n\n
Na pe\u0142n\u0105 wersj\u0119 TypeScript 5.0 przyjdzie nam jeszcze poczeka\u0107 do 14 marca, ale ja czekam ju\u017c z wypiekami na twarzy. A Wy czekacie na now\u0105 wersj\u0119 j\u0119zyka od Microsoftu, czy te\u017c dawno przestali\u015bcie ju\u017c \u015bledzi\u0107 jakie nowo\u015bci przynosz\u0105 jego kolejne wersje?<\/p>\n\n\n\n
2. Astro 2.0<\/h2>\n\n\n\n
Astro to framework to renderowania po stronie serwera, kt\u00f3ry zadebiutowa\u0142 w 2021 roku i doczeka\u0142 si\u0119 pierwszego stabilnego wydania w 2022 roku. Na tle konkurencji wyr\u00f3\u017cnia si\u0119 dwoma cechami: architektur\u0105 wysp i ca\u0142kowit\u0105 niezale\u017cno\u015bci\u0105 od frameworku. <\/p>\n\n\n\n
Architekutra wysp zak\u0142ada, \u017ce na tworzonej przez nas stronie 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). Dzi\u0119ki takiemy za\u0142o\u017ceniu, znacz\u0105co mo\u017cna odchudzi\u0107 proces hydracji, czyli \u0142\u0105czenia struktury HTML wyrenderowanej na serwerze z frameworkiem dzia\u0142aj\u0105cym po stronie klienta. <\/p>\n\n\n
\n
\"\"
\u0179r\u00f3d\u0142o: Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure><\/div>\n\n\n
Astro jest te\u017c jednym z niewielu narz\u0119dzi, kt\u00f3re pozwala nam do woli miesza\u0107 mi\u0119dzy sob\u0105 frameworki. Na ten moment do wyboru mamy React, Preact, Svelte, Vue, SolidJS i Lit, ale w przysz\u0142o\u015bci lista b\u0119dzie zapewne si\u0119 powi\u0119ksza\u0107.<\/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
Rok 2022 by\u0142 dla Astro pe\u0142en sukces\u00f3w. W State of JS w kategorii framework\u00f3w do renderowania po stronie serwera pod wzgl\u0119dem satysfakcji deweloper\u00f3w Astro zaj\u0105\u0142 1 miejsce. W rankingu JavaScript Rising Star, mierz\u0105cym przyrost gwizdek na GitHubie, Astro uplasowa\u0142 si\u0119 na 7 miejscu w kategorii og\u00f3lnej i na 3 miejscu w kategoroii framework\u00f3w serwerowych. Jak na debiutanta – naprawd\u0119 robi wra\u017cenie!<\/p>\n\n\n\n
Zesp\u00f3\u0142 stoj\u0105cy za Astro chce kontunuowa\u0107 dobr\u0105 pass\u0119 i w minionym tygodniu opublikowa\u0142 Astro 2.0. W tym przypadku trzymamy si\u0119 Semantic Versioning, wi\u0119c pod spodem zaktualizowanych zosta\u0142o ca\u0142kiem sporo dependencji (m.in. Vite 4.0). Nie zmienia to jednak faktu, \u017ce tw\u00f3rcy upchn\u0119li tu r\u00f3wnie\u017c ca\u0142kiem sporo nowo\u015bci.<\/p>\n\n\n\n
Type-safe Markdown & MDX<\/h3>\n\n\n\n
Astro to idealne rozwi\u0105zanie do budowania blog\u00f3w i dokumentacji opartych o Markdown i MDX. Na stronach tego typu powtarzalne fragmenty jak nag\u0142\u00f3wki czy metadane s\u0105 kluczowe dla SEO. Je\u015bli programista zrobi nawet najmniejsz\u0105 liter\u00f3wk\u0119, to mo\u017ce to doprowadzi\u0107 do sytuacji, w kt\u00f3rej dana podstrona b\u0119dzie indeksowana \u017ale lub nawet wcale. Odpowiednia integracja Markdown i MDX z typowanymi \u017ar\u00f3d\u0142ami danych to prawdziwy killer feature.<\/p>\n\n\n\n
Mechanizm zaprezentowany w Astro 2.0 opiera si\u0119 o popularn\u0105 bibliotek\u0119 Zod. Przy jej pomocy definiujemy schemat danych wej\u015bciowych. Nast\u0119pnie je\u015bli programista pope\u0142ni b\u0142\u0105d w pliku Markdown lub MDX, to zostanie on wykryty ju\u017c na etapie budowania.<\/p>\n\n\n\n
const blog = defineCollection({\n  schema: z.object({\n    \/\/ Define your expected frontmatter properties\n    title: z.string(),\n    \/\/ Mark certain properties as optional\n    draft: z.boolean().optional(),\n    \/\/ Transform datestrings to full Date objects\n    publishDate: z.string().transform((val) => new Date(val))\n    \/\/ Improve SEO with descriptive warnings\n\tdescription: z.string().max(160, 'Short descriptions have better SEO!')\n    \/\/ ...\n  }),\n});<\/code><\/pre>\n\n\n\n
Hybrid Rendering<\/h3>\n\n\n\n
Do tej pory korzystaj\u0105c z Astro zmuszeni byli\u015bmy wybiera\u0107 mi\u0119dzy renderowaniem po stronie serwera i renderowaniem po stronie klienta. Od Astro 2.0 do naszego arena\u0142u trafia r\u00f3wnie\u017c Hybrid Rendering. Odpowiednia konfiguracja tych trzech strategii mo\u017ce dawa\u0107 naprawd\u0119 dobre efekty.<\/p>\n\n\n\n
Dla przypomnienia – Hybrid Rendering to technika polegaj\u0105ca na renderowaniu stron na etapie budowania aplikacji, a nast\u0119pnie serwowania ich w statyczny spos\u00f3b. Dzi\u0119ki  zasosowaniu takiej strategii klient nie czeka ju\u017c a\u017c serwer pobierze potrzebne dane i wyrenderuje struktur\u0119 HTML, tylko od razu pobiera statyczny plik HTML. Oczywi\u015bcie, podej\u015bcie to ma te\u017c swoje wady – znacz\u0105co wyd\u0142u\u017ca ono czas budowania aplikacji, wymaga podania wszystkich mo\u017cliwych stron up-front i nie umo\u017cliwoia personalizowania tre\u015bci dla poszczeg\u00f3lnych u\u017cytkownik\u00f3w.<\/p>\n\n\n\n
\n\n\n\n
Je\u015bli chcecie dowiedzie\u0107 si\u0119 co nowego trafi\u0142o jeszcze do Astro 2.0, to polecam Wam notatk\u0119 og\u0142aszaj\u0105c\u0105 wersj\u0119 2.0<\/a> i dedykowan\u0105 notatk\u0119 dotycz\u0105c\u0105 typowanego Markdown i MDX<\/a>. Je\u015bli macie troch\u0119 wi\u0119cej czasu i chcecie zobaczy\u0107 jak w praktyce wykorzysta\u0107 nowo\u015bci z Astro 2.0, to Jack Herrington przygotowa\u0142 prawie p\u00f3\u0142godzinne demo<\/a>, na kt\u00f3rym buduje prostego bloga.<\/p>\n","protected":false},"excerpt":{"rendered":"
Na kolejnego du\u017cego TypeScripta musieli\u015bmy czeka\u0107 prawie 2 lata. Cierpliwo\u015b\u0107 si\u0119 jednak op\u0142aci\u0142a, bo do TypeScript 5.0 trafi\u0142y dekoratory zgodne z standardem TC39 i spora paczka optymalizacji.<\/p>\n","protected":false},"author":12,"featured_media":14195,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-14201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png","feature_image_blog":{"ID":14197,"id":14197,"title":"grid_0 (1)","filename":"grid_0-1.png","filesize":2342944,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","link":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/grid_0-1-2\/","alt":"","author":"12","description":"","caption":"","name":"grid_0-1-2","status":"inherit","uploaded_to":14201,"date":"2023-01-30 07:24:42","modified":"2023-01-30 07:26:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1536,"height":1024,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1-300x200.png","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1-768x512.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1-1024x683.png","large-width":1024,"large-height":683,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","1536x1536-width":1536,"1536x1536-height":1024,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","2048x2048-width":1536,"2048x2048-height":1024,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/grid_0-1.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}},"estimated_reading_time":"8"},"yoast_head":"\nTypeScript 5.0 beta | Frontend Weekly vol. 121 - 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\/typescript-5-0-beta-frontend-weekly-vol-121\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript 5.0 beta | Frontend Weekly vol. 121 - Vived\" \/>\n<meta property=\"og:description\" content=\"Na kolejnego du\u017cego TypeScripta musieli\u015bmy czeka\u0107 prawie 2 lata. Cierpliwo\u015b\u0107 si\u0119 jednak op\u0142aci\u0142a, bo do TypeScript 5.0 trafi\u0142y dekoratory zgodne z standardem TC39 i spora paczka optymalizacji.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-30T07:59:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-30T08:00:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.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\/typescript-5-0-beta-frontend-weekly-vol-121\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"TypeScript 5.0 beta | Frontend Weekly vol. 121\",\"datePublished\":\"2023-01-30T07:59:20+00:00\",\"dateModified\":\"2023-01-30T08:00:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\"},\"wordCount\":1362,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\",\"url\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\",\"name\":\"TypeScript 5.0 beta | Frontend Weekly vol. 121 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png\",\"datePublished\":\"2023-01-30T07:59:20+00:00\",\"dateModified\":\"2023-01-30T08:00:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TypeScript 5.0 beta | Frontend Weekly vol. 121\"}]},{\"@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":"TypeScript 5.0 beta | Frontend Weekly vol. 121 - 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\/typescript-5-0-beta-frontend-weekly-vol-121\/","og_locale":"pl_PL","og_type":"article","og_title":"TypeScript 5.0 beta | Frontend Weekly vol. 121 - Vived","og_description":"Na kolejnego du\u017cego TypeScripta musieli\u015bmy czeka\u0107 prawie 2 lata. Cierpliwo\u015b\u0107 si\u0119 jednak op\u0142aci\u0142a, bo do TypeScript 5.0 trafi\u0142y dekoratory zgodne z standardem TC39 i spora paczka optymalizacji.","og_url":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/","og_site_name":"Vived","article_published_time":"2023-01-30T07:59:20+00:00","article_modified_time":"2023-01-30T08:00:45+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.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\/typescript-5-0-beta-frontend-weekly-vol-121\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"TypeScript 5.0 beta | Frontend Weekly vol. 121","datePublished":"2023-01-30T07:59:20+00:00","dateModified":"2023-01-30T08:00:45+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/"},"wordCount":1362,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/","url":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/","name":"TypeScript 5.0 beta | Frontend Weekly vol. 121 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png","datePublished":"2023-01-30T07:59:20+00:00","dateModified":"2023-01-30T08:00:45+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/Frontend-Weekly-1200x628_V2-2.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/typescript-5-0-beta-frontend-weekly-vol-121\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"TypeScript 5.0 beta | Frontend Weekly vol. 121"}]},{"@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 5.0 beta<\/h2>\n","innerContent":["\n<h2>1. TypeScript 5.0 beta<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym tygodniu ukaza\u0142a si\u0119 beta TypeScript 5.0. Warto jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie wersja ta przynosi raczej nowe funkcjonalno\u015bci, ni\u017c breaking changes (chocia\u017c i tych kilka si\u0119 znajdzie). My dzisiaj przyjrzymy si\u0119 3 najciekawszym naszym zdaniem nowo\u015bciom, ale je\u015bli chcecie zg\u0142\u0119bi\u0107 szczeg\u00f3\u0142y samodzielnie, to jak zwykle odsy\u0142am Was do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">genialnej notatki od Microsoftu<\/a>.<\/p>\n","innerContent":["\n<p>W minionym tygodniu ukaza\u0142a si\u0119 beta TypeScript 5.0. Warto jednak pami\u0119ta\u0107, \u017ce TypeScript nie stosuje si\u0119 do Semantic Versioning. Co za tym idzie wersja ta przynosi raczej nowe funkcjonalno\u015bci, ni\u017c breaking changes (chocia\u017c i tych kilka si\u0119 znajdzie). My dzisiaj przyjrzymy si\u0119 3 najciekawszym naszym zdaniem nowo\u015bciom, ale je\u015bli chcecie zg\u0142\u0119bi\u0107 szczeg\u00f3\u0142y samodzielnie, to jak zwykle odsy\u0142am Was do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">genialnej notatki od Microsoftu<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Dekoratory<\/h3>\n","innerContent":["\n<h3>Dekoratory<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory. <\/p>\n","innerContent":["\n<p>Historia dekorator\u00f3w w TypeScript to materia\u0142 na kilku sezonowy serial pe\u0142en zwrot\u00f3w akcji i cliffhanger\u00f3w. Przygoda zaczyna si\u0119 w pa\u017adzierniku 2014 roku, kiedy to na spotkaniu TC39 (przyp: grupa standaryzacyjna JavaScript, ja lubi\u0119 j\u0105 por\u00f3wnywa\u0107 do plemiennej starszyzny) zaprezenotwany zosta\u0142 pierwszy proposal dekorator\u00f3w. W\u0142a\u015bciwie r\u00f3wnolegle, na konferencji ngEurope og\u0142oszono, \u017ce Angular 2.0 napisany b\u0119dzie w AtScript. Nowy j\u0119zyk od Google maia\u0142 by\u0107 oparty o TypeScript, ale rozszerza\u0107 go o kilka nowych funkcjonalno\u015bci. W\u015br\u00f3d nich znajdowa\u0142y si\u0119 mi\u0119dzy innymi tytu\u0142owe dekoratory. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14131,"width":448,"height":448,"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\/giphy-1.gif\" alt=\"\" class=\"wp-image-14131\" width=\"448\" height=\"448\"\/><figcaption class=\"wp-element-caption\">Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/giphy-1.gif\" alt=\"\" class=\"wp-image-14131\" width=\"448\" height=\"448\"\/><figcaption class=\"wp-element-caption\">Czy wiecie, \u017ce jen\u0105 z funkcjonalno\u015bci AtScript mia\u0142o by\u0107 wsparcie dla typ\u00f3w w runtime? Na papierze brzmi to dobrze, ale ciekawe jak wp\u0142ywa\u0142oby na wydajno\u015b\u0107.<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem. <\/p>\n","innerContent":["\n<p>Zasadnym wydaje si\u0119 pytanie, dlaczego Google nie zdecydowa\u0142 si\u0119 po prostu zainwestowa\u0107 w rozw\u00f3j TypeScriptu. Sta\u0142o si\u0119 tak ze wzgl\u0119du na konflikt interes\u00f3w. Zespo\u0142owi z Microsoft zale\u017ca\u0142o, \u017ceby TypeScript by\u0142 tak blisko JavaScriptu jak to tylko mo\u017cliwe. To w\u0142a\u015bciwie wyklucza\u0142o szanse, na dodanie funkcjonalno\u015bci, kt\u00f3ra w przysz\u0142o\u015bci mog\u0142aby kolidowa\u0107 ze standardem. Zesp\u00f3\u0142 z Google potrzebowa\u0142 narz\u0119dzi, kt\u00f3re pozwol\u0105 im zbudowa\u0107 ich wymarzony framework. Bez dekorator\u00f3w TypeScipt nie by\u0142 takim narz\u0119dziem. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w - dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n","innerContent":["\n<p>Na szcz\u0119\u015bcie po burzliwych negocjacjach obie firmy doszy\u0142y do porozumienia. W maju 2015 roku na jednej z europejskich konferencji og\u0142oszono, \u017ce do TypeScript trafi\u0105 dekoratory zgodne z Proposalem znajduj\u0105cym si\u0119 w Stage 1 (przyp: proces standaryzacyjny JavaSciprt sk\u0142ada si\u0119 z 4 etap\u00f3w - dopiero funkcjonalno\u015bci w 3 etapie uznaje si\u0119 za w miar\u0119 stabilne). Podczas tej samej konferencji og\u0142oszono, \u017ce Angular zostanie jednak opraty o TypeScript.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14129,"width":545,"height":391,"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\/download.jpeg\" alt=\"\" class=\"wp-image-14129\" width=\"545\" height=\"391\"\/><figcaption class=\"wp-element-caption\">Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download.jpeg\" alt=\"\" class=\"wp-image-14129\" width=\"545\" height=\"391\"\/><figcaption class=\"wp-element-caption\">Mo\u017ce jest to niepopularna opinia, ale gdyby Microsoft nie dogada\u0142 si\u0119 z Google w 2015 roku, to historia TypeScript mog\u0142aby si\u0119 potoczy\u0107 zupe\u0142nie inaczej. Mo\u017ce i dzisiaj Angular przegrywa walk\u0119 z Reactem, ale 8 lat temu wszystkie oczy skierowane by\u0142y na framework od Google.<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0. <\/p>\n","innerContent":["\n<p>Od 2015 roku w kwestii dekorator\u00f3w sporo si\u0119 zmieni\u0142o. Przede wszystki proposal przedar\u0142 si\u0119 do Stage 3. Nie oby\u0142o si\u0119 jednak bez strat. Z oryginalnego proposala wyci\u0119to znaczn\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 metadanych. To oznacza, \u017ce dekoratory b\u0119d\u0105ce ju\u017c u progu standardu JavaScript, nie s\u0105 zgodne z tymi zaimplementowanymi w TypeScript. Na szcz\u0119\u015bcie na ratunek nam wszystkim przyszed\u0142 TypeScript 5.0. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14133,"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-1.jpeg\" alt=\"\" class=\"wp-image-14133\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/download-1.jpeg\" alt=\"\" class=\"wp-image-14133\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do <a href=\"https:\/\/2ality.com\/2022\/10\/javascript-decorators.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/p>\n","innerContent":["\n<p>Je\u015bli do tej pory nie mieli\u015bcie doczynienia z dekoratorami, to s\u0105 to po prostu funkcje, kt\u00f3re pozwalaj\u0105 nam modyfikowa\u0107 zachowanie innch funckji lub klas. Temat jest na tyle skomplikowany i szeroki, \u017ce nie podejm\u0119 si\u0119 przybli\u017cenia go na \u0142amach tego przegl\u0105d. Wszystkoch g\u0142odnych wiedzy odsys\u0142am do <a href=\"https:\/\/2ality.com\/2022\/10\/javascript-decorators.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\u015bwietnego artyku\u0142u Axela Rauschmayer<\/a>. Po jego przeczytaniu mo\u017cecie uda\u0107 si\u0119 prosto do <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">notatki od Microsoftu<\/a>, z kt\u00f3rej dowiecie si\u0119 jak otypowa\u0107 swoje dekoratory.<\/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\">\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log(\"LOG: Entering method.\")\n        const result = originalMethod.call(this, ...args);\n        console.log(\"LOG: Exiting method.\")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person(\"Tomek\").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Decorator definition\nfunction debut(originalMethod: any, _context: ClassMethodDecoratorContext) {\n    function replacementMethod(this: any, ...args: any[]) {\n        console.log(\"LOG: Entering method.\")\n        const result = originalMethod.call(this, ...args);\n        console.log(\"LOG: Exiting method.\")\n        return result;\n    }\n    return replacementMethod;\n}\n\n\/\/ Decorator usage\nclass Person {\n    constructor(private readonly name: string) {}\n\n    @debug greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n}\n\nnew Person(\"Tomek\").greet(); \n\n\/\/ Expected output:\n\/\/ LOG: Entering method.\n\/\/ Hello, my name is Tomek\n\/\/ LOG: Exiting method.<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga <code>--experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n","innerContent":["\n<p>Co z projektami wykorzystuj\u0105cymi star\u0105 implementacj\u0119 dekorator\u00f3w (m.in. Angular, Ember i MobX)? Tak d\u0142ugo jak w konfiguracji TypeScript znajdowa\u0107 si\u0119 b\u0119dzie flaga <code>--experimentalDecorators<\/code> ich zachowanie nie ulegnie zmianie. W d\u0142u\u017cszej perspektywie wszystkie te biblioteki czeka jednak migracja.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3><code>const<\/code> Type Parametrs<\/h3>\n","innerContent":["\n<h3><code>const<\/code> Type Parametrs<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z <code>as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/p>\n","innerContent":["\n<p>Je\u015bli na codzie\u0144 pracujecie z TypeScript, to na pewno znacie trik z <code>as const<\/code>, kt\u00f3ry pozwala nam zaw\u0119zi\u0107 inferowany typ.<\/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\">\/\/ Inferred type: string[]  \nconst namesA = [\"Alice\", \"Bob\", \"Eve\"];\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst namesB = [\"Alice\", \"Bob\", \"Eve\"] as const; <\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ Inferred type: string[]  \nconst namesA = [\"Alice\", \"Bob\", \"Eve\"];\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst namesB = [\"Alice\", \"Bob\", \"Eve\"] as const; <\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/p>\n","innerContent":["\n<p>Trik ten cz\u0119sto wykorzystujemy na przyk\u0142ad do zaw\u0119\u017cania typu zwracanego przez funkcj\u0119.<\/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\">function getNames<T extends { name: readonly string[]}>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]});\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]         \nconst namesB = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]} as const); <\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">function getNames<T extends { name: readonly string[]}>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: string[]\nconst namesA = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]});\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]         \nconst namesB = getNames({ names: [\"Alice\", \"Bob\", \"Eve\"]} as const); <\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 <code>as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/p>\n","innerContent":["\n<p>TypeScript 5.0 wprowadza mechanizm, kt\u00f3ry pozwala nam przenie\u015b\u0107 <code>as const<\/code> do definicji typu. W ten spos\u00f3b zabieramy ten ci\u0119\u017car z plec\u00f3w naszych u\u017cytkownik\u00f3w i bierzemy go na swoje barki.<\/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\">\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst names = getNames{ names: [\"Alice\", \"Bob\", \"Eve\"] });<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/*                \ud83d\udc47 Hese is the new const type parameter                *\/\nfunction getNames<const T extends { names: readonly string[] }>(arg: T): T[\"names\"] {\n    return arg.names;\n}\n\n\/\/ Inferred type: readonly [\"Alice\", \"Bob\", \"Eve\"]\nconst names = getNames{ names: [\"Alice\", \"Bob\", \"Eve\"] });<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Optymalizacje<\/h3>\n","innerContent":["\n<h3>Optymalizacje<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>TypeScript 5.0 to r\u00f3wnie\u017c krok milowy je\u015bli chodzi o wydajno\u015b\u0107. Jest tak przede wszystkim ze wzgl\u0119du na to, \u017ce j\u0119zyk w ca\u0142o\u015bci zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w. To otworzy\u0142o drog\u0119 do wykorzystania ca\u0142ego szeregu narz\u0119dzi i mechanizm\u00f3w optymalizuj\u0105cych zar\u00f3wno kompilacj\u0119 jak i rozmiar ostatecznej paczki.<\/p>\n","innerContent":["\n<p>TypeScript 5.0 to r\u00f3wnie\u017c krok milowy je\u015bli chodzi o wydajno\u015b\u0107. Jest tak przede wszystkim ze wzgl\u0119du na to, \u017ce j\u0119zyk w ca\u0142o\u015bci zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w. To otworzy\u0142o drog\u0119 do wykorzystania ca\u0142ego szeregu narz\u0119dzi i mechanizm\u00f3w optymalizuj\u0105cych zar\u00f3wno kompilacj\u0119 jak i rozmiar ostatecznej paczki.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14120,"width":519,"height":451,"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\/image-14-1024x891.png\" alt=\"\" class=\"wp-image-14120\" width=\"519\" height=\"451\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">Announcing TypeScript 5.0 Beta<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/image-14-1024x891.png\" alt=\"\" class=\"wp-image-14120\" width=\"519\" height=\"451\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0-beta\/\" target=\"_blank\" rel=\"noreferrer noopener\">Announcing TypeScript 5.0 Beta<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na pe\u0142n\u0105 wersj\u0119 TypeScript 5.0 przyjdzie nam jeszcze poczeka\u0107 do 14 marca, ale ja czekam ju\u017c z wypiekami na twarzy. A Wy czekacie na now\u0105 wersj\u0119 j\u0119zyka od Microsoftu, czy te\u017c dawno przestali\u015bcie ju\u017c \u015bledzi\u0107 jakie nowo\u015bci przynosz\u0105 jego kolejne wersje?<\/p>\n","innerContent":["\n<p>Na pe\u0142n\u0105 wersj\u0119 TypeScript 5.0 przyjdzie nam jeszcze poczeka\u0107 do 14 marca, ale ja czekam ju\u017c z wypiekami na twarzy. A Wy czekacie na now\u0105 wersj\u0119 j\u0119zyka od Microsoftu, czy te\u017c dawno przestali\u015bcie ju\u017c \u015bledzi\u0107 jakie nowo\u015bci przynosz\u0105 jego kolejne wersje?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Astro 2.0<\/h2>\n","innerContent":["\n<h2>2. Astro 2.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro to framework to renderowania po stronie serwera, kt\u00f3ry zadebiutowa\u0142 w 2021 roku i doczeka\u0142 si\u0119 pierwszego stabilnego wydania w 2022 roku. Na tle konkurencji wyr\u00f3\u017cnia si\u0119 dwoma cechami: architektur\u0105 wysp i ca\u0142kowit\u0105 niezale\u017cno\u015bci\u0105 od frameworku. <\/p>\n","innerContent":["\n<p>Astro to framework to renderowania po stronie serwera, kt\u00f3ry zadebiutowa\u0142 w 2021 roku i doczeka\u0142 si\u0119 pierwszego stabilnego wydania w 2022 roku. Na tle konkurencji wyr\u00f3\u017cnia si\u0119 dwoma cechami: architektur\u0105 wysp i ca\u0142kowit\u0105 niezale\u017cno\u015bci\u0105 od frameworku. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Architekutra wysp zak\u0142ada, \u017ce na tworzonej przez nas stronie 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). Dzi\u0119ki takiemy za\u0142o\u017ceniu, znacz\u0105co mo\u017cna odchudzi\u0107 proces hydracji, czyli \u0142\u0105czenia struktury HTML wyrenderowanej na serwerze z frameworkiem dzia\u0142aj\u0105cym po stronie klienta. <\/p>\n","innerContent":["\n<p>Architekutra wysp zak\u0142ada, \u017ce na tworzonej przez nas stronie 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). Dzi\u0119ki takiemy za\u0142o\u017ceniu, znacz\u0105co mo\u017cna odchudzi\u0107 proces hydracji, czyli \u0142\u0105czenia struktury HTML wyrenderowanej na serwerze z frameworkiem dzia\u0142aj\u0105cym po stronie klienta. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14123,"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.png\" alt=\"\" class=\"wp-image-14123\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/jasonformat.com\/islands-architecture\/\">Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e52f7ee.png\" alt=\"\" class=\"wp-image-14123\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/jasonformat.com\/islands-architecture\/\">Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro jest te\u017c jednym z niewielu narz\u0119dzi, kt\u00f3re pozwala nam do woli miesza\u0107 mi\u0119dzy sob\u0105 frameworki. Na ten moment do wyboru mamy React, Preact, Svelte, Vue, SolidJS i Lit, ale w przysz\u0142o\u015bci lista b\u0119dzie zapewne si\u0119 powi\u0119ksza\u0107.<\/p>\n","innerContent":["\n<p>Astro jest te\u017c jednym z niewielu narz\u0119dzi, kt\u00f3re pozwala nam do woli miesza\u0107 mi\u0119dzy sob\u0105 frameworki. Na ten moment do wyboru mamy React, Preact, Svelte, Vue, SolidJS i Lit, ale w przysz\u0142o\u015bci lista b\u0119dzie zapewne si\u0119 powi\u0119ksza\u0107.<\/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":14125,"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-1.jpeg\" alt=\"\" class=\"wp-image-14125\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/01\/img_62f502e58d124-1.jpeg\" alt=\"\" class=\"wp-image-14125\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Rok 2022 by\u0142 dla Astro pe\u0142en sukces\u00f3w. W State of JS w kategorii framework\u00f3w do renderowania po stronie serwera pod wzgl\u0119dem satysfakcji deweloper\u00f3w Astro zaj\u0105\u0142 1 miejsce. W rankingu JavaScript Rising Star, mierz\u0105cym przyrost gwizdek na GitHubie, Astro uplasowa\u0142 si\u0119 na 7 miejscu w kategorii og\u00f3lnej i na 3 miejscu w kategoroii framework\u00f3w serwerowych. Jak na debiutanta - naprawd\u0119 robi wra\u017cenie!<\/p>\n","innerContent":["\n<p>Rok 2022 by\u0142 dla Astro pe\u0142en sukces\u00f3w. W State of JS w kategorii framework\u00f3w do renderowania po stronie serwera pod wzgl\u0119dem satysfakcji deweloper\u00f3w Astro zaj\u0105\u0142 1 miejsce. W rankingu JavaScript Rising Star, mierz\u0105cym przyrost gwizdek na GitHubie, Astro uplasowa\u0142 si\u0119 na 7 miejscu w kategorii og\u00f3lnej i na 3 miejscu w kategoroii framework\u00f3w serwerowych. Jak na debiutanta - naprawd\u0119 robi wra\u017cenie!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zesp\u00f3\u0142 stoj\u0105cy za Astro chce kontunuowa\u0107 dobr\u0105 pass\u0119 i w minionym tygodniu opublikowa\u0142 Astro 2.0. W tym przypadku trzymamy si\u0119 Semantic Versioning, wi\u0119c pod spodem zaktualizowanych zosta\u0142o ca\u0142kiem sporo dependencji (m.in. Vite 4.0). Nie zmienia to jednak faktu, \u017ce tw\u00f3rcy upchn\u0119li tu r\u00f3wnie\u017c ca\u0142kiem sporo nowo\u015bci.<\/p>\n","innerContent":["\n<p>Zesp\u00f3\u0142 stoj\u0105cy za Astro chce kontunuowa\u0107 dobr\u0105 pass\u0119 i w minionym tygodniu opublikowa\u0142 Astro 2.0. W tym przypadku trzymamy si\u0119 Semantic Versioning, wi\u0119c pod spodem zaktualizowanych zosta\u0142o ca\u0142kiem sporo dependencji (m.in. Vite 4.0). Nie zmienia to jednak faktu, \u017ce tw\u00f3rcy upchn\u0119li tu r\u00f3wnie\u017c ca\u0142kiem sporo nowo\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Type-safe Markdown & MDX<\/h3>\n","innerContent":["\n<h3>Type-safe Markdown & MDX<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Astro to idealne rozwi\u0105zanie do budowania blog\u00f3w i dokumentacji opartych o Markdown i MDX. Na stronach tego typu powtarzalne fragmenty jak nag\u0142\u00f3wki czy metadane s\u0105 kluczowe dla SEO. Je\u015bli programista zrobi nawet najmniejsz\u0105 liter\u00f3wk\u0119, to mo\u017ce to doprowadzi\u0107 do sytuacji, w kt\u00f3rej dana podstrona b\u0119dzie indeksowana \u017ale lub nawet wcale. Odpowiednia integracja Markdown i MDX z typowanymi \u017ar\u00f3d\u0142ami danych to prawdziwy killer feature.<\/p>\n","innerContent":["\n<p>Astro to idealne rozwi\u0105zanie do budowania blog\u00f3w i dokumentacji opartych o Markdown i MDX. Na stronach tego typu powtarzalne fragmenty jak nag\u0142\u00f3wki czy metadane s\u0105 kluczowe dla SEO. Je\u015bli programista zrobi nawet najmniejsz\u0105 liter\u00f3wk\u0119, to mo\u017ce to doprowadzi\u0107 do sytuacji, w kt\u00f3rej dana podstrona b\u0119dzie indeksowana \u017ale lub nawet wcale. Odpowiednia integracja Markdown i MDX z typowanymi \u017ar\u00f3d\u0142ami danych to prawdziwy killer feature.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Mechanizm zaprezentowany w Astro 2.0 opiera si\u0119 o popularn\u0105 bibliotek\u0119 Zod. Przy jej pomocy definiujemy schemat danych wej\u015bciowych. Nast\u0119pnie je\u015bli programista pope\u0142ni b\u0142\u0105d w pliku Markdown lub MDX, to zostanie on wykryty ju\u017c na etapie budowania.<\/p>\n","innerContent":["\n<p>Mechanizm zaprezentowany w Astro 2.0 opiera si\u0119 o popularn\u0105 bibliotek\u0119 Zod. Przy jej pomocy definiujemy schemat danych wej\u015bciowych. Nast\u0119pnie je\u015bli programista pope\u0142ni b\u0142\u0105d w pliku Markdown lub MDX, to zostanie on wykryty ju\u017c na etapie budowania.<\/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\">const blog = defineCollection({\n  schema: z.object({\n    \/\/ Define your expected frontmatter properties\n    title: z.string(),\n    \/\/ Mark certain properties as optional\n    draft: z.boolean().optional(),\n    \/\/ Transform datestrings to full Date objects\n    publishDate: z.string().transform((val) => new Date(val))\n    \/\/ Improve SEO with descriptive warnings\n\tdescription: z.string().max(160, 'Short descriptions have better SEO!')\n    \/\/ ...\n  }),\n});<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const blog = defineCollection({\n  schema: z.object({\n    \/\/ Define your expected frontmatter properties\n    title: z.string(),\n    \/\/ Mark certain properties as optional\n    draft: z.boolean().optional(),\n    \/\/ Transform datestrings to full Date objects\n    publishDate: z.string().transform((val) => new Date(val))\n    \/\/ Improve SEO with descriptive warnings\n\tdescription: z.string().max(160, 'Short descriptions have better SEO!')\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>Hybrid Rendering<\/h3>\n","innerContent":["\n<h3>Hybrid Rendering<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do tej pory korzystaj\u0105c z Astro zmuszeni byli\u015bmy wybiera\u0107 mi\u0119dzy renderowaniem po stronie serwera i renderowaniem po stronie klienta. Od Astro 2.0 do naszego arena\u0142u trafia r\u00f3wnie\u017c Hybrid Rendering. Odpowiednia konfiguracja tych trzech strategii mo\u017ce dawa\u0107 naprawd\u0119 dobre efekty.<\/p>\n","innerContent":["\n<p>Do tej pory korzystaj\u0105c z Astro zmuszeni byli\u015bmy wybiera\u0107 mi\u0119dzy renderowaniem po stronie serwera i renderowaniem po stronie klienta. Od Astro 2.0 do naszego arena\u0142u trafia r\u00f3wnie\u017c Hybrid Rendering. Odpowiednia konfiguracja tych trzech strategii mo\u017ce dawa\u0107 naprawd\u0119 dobre efekty.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Dla przypomnienia - Hybrid Rendering to technika polegaj\u0105ca na renderowaniu stron na etapie budowania aplikacji, a nast\u0119pnie serwowania ich w statyczny spos\u00f3b. Dzi\u0119ki  zasosowaniu takiej strategii klient nie czeka ju\u017c a\u017c serwer pobierze potrzebne dane i wyrenderuje struktur\u0119 HTML, tylko od razu pobiera statyczny plik HTML. Oczywi\u015bcie, podej\u015bcie to ma te\u017c swoje wady - znacz\u0105co wyd\u0142u\u017ca ono czas budowania aplikacji, wymaga podania wszystkich mo\u017cliwych stron up-front i nie umo\u017cliwoia personalizowania tre\u015bci dla poszczeg\u00f3lnych u\u017cytkownik\u00f3w.<\/p>\n","innerContent":["\n<p>Dla przypomnienia - Hybrid Rendering to technika polegaj\u0105ca na renderowaniu stron na etapie budowania aplikacji, a nast\u0119pnie serwowania ich w statyczny spos\u00f3b. Dzi\u0119ki  zasosowaniu takiej strategii klient nie czeka ju\u017c a\u017c serwer pobierze potrzebne dane i wyrenderuje struktur\u0119 HTML, tylko od razu pobiera statyczny plik HTML. Oczywi\u015bcie, podej\u015bcie to ma te\u017c swoje wady - znacz\u0105co wyd\u0142u\u017ca ono czas budowania aplikacji, wymaga podania wszystkich mo\u017cliwych stron up-front i nie umo\u017cliwoia personalizowania tre\u015bci dla poszczeg\u00f3lnych u\u017cytkownik\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli chcecie dowiedzie\u0107 si\u0119 co nowego trafi\u0142o jeszcze do Astro 2.0, to polecam Wam <a href=\"https:\/\/astro.build\/blog\/astro-2\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">notatk\u0119 og\u0142aszaj\u0105c\u0105 wersj\u0119 2.0<\/a> i <a href=\"https:\/\/astro.build\/blog\/introducing-content-collections\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">dedykowan\u0105 notatk\u0119 dotycz\u0105c\u0105 typowanego Markdown i MDX<\/a>. Je\u015bli macie troch\u0119 wi\u0119cej czasu i chcecie zobaczy\u0107 jak w praktyce wykorzysta\u0107 nowo\u015bci z Astro 2.0, to <a href=\"https:\/\/www.youtube.com\/watch?v=gi4c7fbeURc\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Jack Herrington przygotowa\u0142 prawie p\u00f3\u0142godzinne demo<\/a>, na kt\u00f3rym buduje prostego bloga.<\/p>\n","innerContent":["\n<p>Je\u015bli chcecie dowiedzie\u0107 si\u0119 co nowego trafi\u0142o jeszcze do Astro 2.0, to polecam Wam <a href=\"https:\/\/astro.build\/blog\/astro-2\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">notatk\u0119 og\u0142aszaj\u0105c\u0105 wersj\u0119 2.0<\/a> i <a href=\"https:\/\/astro.build\/blog\/introducing-content-collections\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">dedykowan\u0105 notatk\u0119 dotycz\u0105c\u0105 typowanego Markdown i MDX<\/a>. Je\u015bli macie troch\u0119 wi\u0119cej czasu i chcecie zobaczy\u0107 jak w praktyce wykorzysta\u0107 nowo\u015bci z Astro 2.0, to <a href=\"https:\/\/www.youtube.com\/watch?v=gi4c7fbeURc\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Jack Herrington przygotowa\u0142 prawie p\u00f3\u0142godzinne demo<\/a>, na kt\u00f3rym buduje prostego bloga.<\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14201","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=14201"}],"version-history":[{"count":3,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14201\/revisions"}],"predecessor-version":[{"id":14208,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14201\/revisions\/14208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/14195"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=14201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=14201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=14201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}