{"id":10008,"date":"2022-02-10T15:05:52","date_gmt":"2022-02-10T14:05:52","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/"},"modified":"2022-09-19T13:16:32","modified_gmt":"2022-09-19T11:16:32","slug":"frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/","title":{"rendered":"Frontend Thursday vol. 75 – Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo"},"content":{"rendered":"\n

Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue<\/h2>\n\n\n\n

Vue 3 trafi\u0142o w maju 2021 roku. Kiedy kolejna du\u017ca wersja frameworka od Evana You po raz pierwszy ujrza\u0142a \u015bwiat\u0142o dzienne nie by\u0142a jeszcze gotowa, aby w pe\u0142ni zast\u0105pi\u0107 poprzedni\u0105 wersj\u0119. Co prawda rdze\u0144 biblioteki by\u0142 ju\u017c w pe\u0142ni gotowy, ale narz\u0119dzia u\u0142atwiaj\u0105ce migracj\u0119 dopiero raczkowa\u0142y, a zdecydowana wi\u0119kszo\u015b\u0107 bibliotek rozwijanych przez spo\u0142eczno\u015b\u0107 wymaga\u0142a wprowadzenia znacz\u0105cych modyfikacji.<\/p>\n\n\n\n

W czerwcu 2021 doczekali\u015bmy si\u0119 Vue 3.1, kt\u00f3re dostarczy\u0142o programistom wszystko czego potrzebowali, aby sprawnie migrowa\u0107 swoje aplikacje. Po p\u00f3\u0142 roku od pojawienia si\u0119 niekompatybilnych zmian sporo bibliotek zd\u0105\u017cy\u0142o ju\u017c przej\u015b\u0107 si\u0119 do Vue 3, ale wci\u0105\u017c daleko by\u0142o jeszcze do osi\u0105gni\u0119cia masy krytycznej.<\/p>\n\n\n\n

W wrze\u015bniu 2021 zobaczyli\u015bmy Vue 3.2, ale wydanie to skupia\u0142o si\u0119 g\u0142\u00f3wnie na usprawnieniach wydajno\u015bci i Developer Experience. Z czasem do grona rozwi\u0105za\u0144 wspieraj\u0105cych Vue 3 zacz\u0119\u0142o do\u0142\u0105cza\u0107 coraz wi\u0119cej bibliotek.<\/p>\n\n\n\n

W ten spos\u00f3b dotarli\u015bmy do dnia dzisiejszego. Po prawie p\u00f3\u0142tora roku od wydania Vue 3, Evan You na oficjalnym blogu Vue og\u0142osi\u0142, \u017ce stanie si\u0119 ona domy\u015bln\u0105 wersj\u0105 tego frameworka. Konsekwencji tej decyzji jest kilka. Po pierwsze tag latest na npm wskazywa\u0142 b\u0119dzie od teraz na wersj\u0119 3.2, a nie jak do tej pory na 2.6. Dokumentacja r\u00f3wnie\u017c domy\u015blnie przenosi\u0107 b\u0119dzie do najnowszej wersji, a archiwalna wersja dost\u0119pna b\u0119dzie po dodaniu do adresu przedrostka v2. Podobnie repozytoria na GitHubie zmieni\u0142y domy\u015blne branche, a kilka z nich pozby\u0142o si\u0119 przyrostka next. Rzecz jasna wszystkie te zmiany dotycz\u0105 nie tylko samego Vue, ale r\u00f3wnie\u017c jego o\u015bciennych bibliotek, takich jak Vuex czy Vue Router.<\/p>\n\n\n\n

Z ciekawo\u015bci pr\u00f3bowa\u0142em dokopa\u0107 si\u0119 w internecie do informacji na temat procentu projekt\u00f3w czy deweloper\u00f3w, kt\u00f3rzy zmigrowali si\u0119 do Vue 3. Najlepsze dane jakie znalaz\u0142em to liczba pobra\u0144 z npm. W ci\u0105gu ostatniego tygodnia Vue 2 zosta\u0142 pobrany 3 615 168 razy, natomiast Vue 3 pobrano 797 572 razy. Vue 3 pobierany jest wi\u0119c 3 razy rzadziej ni\u017c Vue 2. Pami\u0119tajcie jednak, \u017ce projektom w Vue 2 grunt nie pali si\u0119 jeszcze pod nogami, bo zbli\u017caj\u0105ce si\u0119 wydanie 2.7 b\u0119dzie wersj\u0105 LTS z 18 miesi\u0119cznym wsparcie. Ponadto tw\u00f3rcy zapewniaj\u0105, \u017ce nawet po tym okresie Vue 2.7 otrzymywa\u0107 b\u0119dzie krytyczne \u0142atki bezpiecze\u0144stwa. Czy Vue podzieli losy Pythona i jeszcze przez d\u0142ugie lata b\u0119dzie podzielone na dwie niezale\u017cne spo\u0142eczno\u015bci? Trzymam kciuki, \u017ceby tak si\u0119 nie sta\u0142o.<\/p>\n\n\n\n

\"\"
Ostatni Python 2 to Python 2.7. Ostatnie Vue 2 to Vue 2.7. Przypadek?<\/figcaption><\/figure><\/div>\n\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/blog.vuejs.org\/posts\/vue-3-as-the-new-default.html<\/a><\/p>\n\n\n\n

2. Babel 7.17 dodaje wsparcie dla nowych dekorator\u00f3w<\/h2>\n\n\n\n

W minionym tygodniu doczekali\u015bmy si\u0119 kolejnej wersji Babela. Zanim przejdziemy do konkret\u00f3w wr\u00f3\u0107my na chwil\u0119 do tematu finansowania projektu. Je\u015bli czytacie nasze przegl\u0105dy regularnie to na pewno pami\u0119tacie ma\u0142y skandal wok\u00f3\u0142 bud\u017cetu na rozw\u00f3j biblioteki (je\u015bli o ca\u0142ej spawie nigdy nie s\u0142yszeli\u015bcie to gor\u0105co zach\u0119cam do powrotu do 37 edycji naszego przegl\u0105du<\/a>). Z ciekawo\u015bci postanowi\u0142em zerkn\u0105\u0107 na Open Collective i okazuje si\u0119, \u017ce przewidywany bud\u017cet projektu wci\u0105\u017c nie jest wystarczaj\u0105cy dla utrzymania 3 deweloper\u00f3w. Jestem ciekaw na jak d\u0142ugo starcz\u0105 jeszcze zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze i czy ostatecznie projekt zmuszony b\u0119dzie do redukcji zatrudnienia.<\/p>\n\n\n\n

\"\"
Uda\u0142o nam si\u0119 zdoby\u0107 unikalne nagranie z siedziby zespo\u0142u rozwijaj\u0105cego Babel<\/figcaption><\/figure><\/div>\n\n\n\n

Przejd\u017amy jednak do sedna i przyjrzymy si\u0119 pokr\u00f3tce nowo\u015bciom w Babelu 7.17. Gdybym najnowszej wersji musia\u0142 nada\u0107 podtytu\u0142 to by\u0142oby to Babelu 7.17 i wsparcie dla funkcjonalno\u015bci z Stage 2 ECMA Proposal, bo do najnowszej wersji trafi\u0142y a\u017c trzy takie funkcjonalno\u015bci: dekoratory, RegExp set notation oraz wsparcie dla @@ i ^^ w pipe operator.<\/p>\n\n\n\n

Najwi\u0119ksze zainteresowanie wzbudzi\u0142o oczywi\u015bcie wsparcie dla dekorator\u00f3w. Pami\u0119tajcie jednak, \u017ce dekoratory te nie s\u0105 w pe\u0142ni kompatybilne ani z tymi znanymi z TypeScript, ani z tymi znanymi z poprzednich wersji Babela. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce saga zwi\u0105zana z dekoratorami trwa ju\u017c ponad 5 lat i raczej szybko nie ujrzymy jej zako\u0144czenia (o ile kiedykolwiek do takowego dojdzie).<\/p>\n\n\n\n

@defineElement("button")\nclass Button {\n  @reactive accessor enabled = true; \/\/ class auto accessors\n\n  @event("onClick") #handleClick() { \/\/ decorator on a private method\n    console.log("clicked!");\n  }\n}<\/code><\/pre>\n\n\n\n
Ciekawie wygl\u0105da te\u017c wsparcie dla RegExp set notation<\/em>. Dzi\u0119ki wykorzystaniu tej funkcjonalno\u015bci mo\u017cliwe b\u0119dzie dodanie odpowiedniej flagi do wyra\u017cenia regularnego i odfiltrowywanie du\u017cych liter czy Emoji.<\/p>\n\n\n\n
"Did you see the \ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe emoji?".match(\/\\p{RGI_Emoji}\/v). \/\/ ["\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe"]<\/code><\/pre>\n\n\n\n
Nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale mnie mocno zastanawia dla kogo zosta\u0142y one przygotowane. Troch\u0119 ci\u0119\u017cko mi uwierzy\u0107, \u017ce deweloperzy w swoich projektach zdecyduj\u0105 si\u0119 na korzystanie z funkcjonalno\u015bci, kt\u00f3rych API nie jest jeszcze ustabilizowane. Je\u015bli macie odmienne zdanie i wykorzystujecie takie wczesne wsparcie w swoich projektach to z ch\u0119ci\u0105 zapoznam si\u0119 z waszymi komentarzami.<\/p>\n\n\n\n
\"\"
Przyznajcie szczerze, kto jeszcze ekscytuje si\u0119 kolejnymi wydaniami Babela?? Bo ja czytaj\u0105c release notes wygl\u0105dam jak Bart w gifie powy\u017cej.<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/babeljs.io\/blog\/2022\/02\/02\/7.17.0<\/a><\/p>\n\n\n\n
\u00a03. behaviour-graph, czyli nowa biblioteka do zarz\u0105dzania stanem od yahoo<\/h2>\n\n\n\n
Jak to m\u00f3wi\u0105: tydzie\u0144 bez nowej frontendowej biblioteki to tydzie\u0144 stracony. Ten za\u015b uratowali deweloperzy z yahoo, kt\u00f3rzy zaprezentowali now\u0105 bibliotek\u0119 do zarz\u0105dzania stanem – behaviour-graph.<\/p>\n\n\n\n
\"\"
\u00a0Ku mojemu zaskoczeniu czytaj\u0105c dokumentacj\u0119 tego najnowszego cude\u0144ka poczu\u0142em pewien powiew \u015bwie\u017co\u015bci, bo dawno w \u015bwiecie zarz\u0105dzania stanem na frontendzie nie widzia\u0142em tak nieszablonowego podej\u015bcia. Niezale\u017cnie od tego czy sama biblioteka mi si\u0119 podoba czy nie za ten wyczyn tw\u00f3rcom behaviour-graph nale\u017c\u0105 si\u0119 brawa.<\/figcaption><\/figure><\/div>\n\n\n\n
Podstawow\u0105 jednostk\u0105 w bibliotece s\u0105 Behaviours, kt\u00f3re mog\u0105 przyjmowa\u0107 dowoln\u0105 liczb\u0119 wej\u015b\u0107 (demands) i odpowiedzialne s\u0105 za maksymalnie jedno wyj\u015bcie (supply). Jak si\u0119 pewnie domy\u015blacie wyj\u015bcia jednego behaviour mog\u0105 by\u0107 wej\u015bciami kolejnego, co prowadzi do powstania grafu zale\u017cno\u015bci. My\u015bl\u0119, \u017ce bardzo dobrze pokazuje to przyk\u0142ad z termostatem zaci\u0105gni\u0119ty z dokumentacji, kt\u00f3ry znajdziecie poni\u017cej.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Prosty na papierze koncept po przeniesieniu do kodu nie jest ju\u017c niestety, a\u017c tak przejrzysty. Korzystanie z biblioteki zaczynamy od stworzenia grafu, kt\u00f3ry odpowiedzialny b\u0119dzie za zapewnienie zasad wspomnianych w poprzednim akapicie, za propagacj\u0119 zmian do kolejnych behaviours<\/em>. Dzi\u0119ki metodzie action<\/em> graf umo\u017cliwia r\u00f3wnie\u017c aktualizowanie tych p\u00f3l, kt\u00f3re nie s\u0105 supply, \u017cadnego z behaviours. Stan, czyli zar\u00f3wno behaviours<\/em> jaki same pola przechowywane b\u0119d\u0105 w klasie, kt\u00f3ra rozszerza\u0107 musi dostarczan\u0105 przez bibliotek\u0119 klas\u0119 Extent. Pola odpowiedzialne za przechowywane stanu zainicjalizowa\u0107 nale\u017cy w konstruktorze wykorzystuj\u0105c metod\u0119 state(\u201cname\u2018). Konstruktor jest r\u00f3wnie\u017c dobrym miejscem do umieszczenia definicji behaviours. Wszystkie aktualizacje p\u00f3l odbywa\u0107 si\u0119 musz\u0105 poprzez metod\u0119 update, kt\u00f3ra zwr\u00f3ci b\u0142\u0105d je\u015bli zostanie wywo\u0142ana w z\u0142ym kontek\u015bcie (np. przez behaviour, kt\u00f3ry nie zadeklarowa\u0142 jej jako supply).<\/p>\n\n\n\n
import * as bg from "https:\/\/cdn.skypack.dev\/behavior-graph";\n\nlet g = new bg.Graph();\n\nclass PersonExtent extends bg.Extent {\n  constructor(graph) {\n    super(graph);\n    \n    this.personName = this.state("Nobody");\n    this.personSurname = this.state("Nobody");\n    this.personFullName = this.state(\u201cNobody Nobody\u201d)\n\n    this.behavior()\n      .supplies(this.desiredTemperature)\n      .demands(this.personName, this.personSurname)\n      .runs(() => {\n        this.personFullName.update(this.personName.value + " " + this.personSurname.value);\n      });\n\n  this.behaviour()\n    .demands(this.personFullName)\n    .runs(() => {\n       this.sideEffect(() => {\n         document.querySelector('#name).innerText = this.personFullName.value;\n       });\n    });\n  }\n}\n\nlet e = new PersonExtent(g);\n\ne.addToGraphWithAction();\n\ng.action(() => {\n  e.personName.update("Tomek");\n  e.personSurname.update(\u201cBrz\u0119czyszczykiewicz\u201d);\n})<\/code><\/pre>\n\n\n\n
Je\u015bli moje t\u0142umaczenie wydaje si\u0119 Wam zawi\u0142e to zach\u0119cam Was do zerkni\u0119cia do dokumentacji podlinkowanej w \u017ar\u00f3d\u0142ach. Zrozumienie tego mentalnego modelu by\u0142o dla mojego m\u00f3zgu \u015bwietnym \u0107wiczeniem, a im d\u0142u\u017cej przygl\u0105da\u0142em czyta\u0142em o nowym rozwi\u0105zaniu tym bardziej mnie ono przekonywa\u0142o. Jako fan DDD w Behaviours widz\u0119 mocne odniesienia do Worklfows znanych z funkcyjnego podej\u015bcia do DDD, a w wymuszonym podziale odpowiednik Bounded Contexts. Niestety w dokumentacji nie znajdziecie nawet najmniejszej wzmianki o integracji z Reactem, Vue czy Angularem. Dop\u00f3ki kto\u015b nie pokusi si\u0119 o przygotowanie odpowiednich integracji, nie wr\u00f3\u017c\u0119 bibliotece \u015bwietlanej przysz\u0142o\u015bci.<\/p>\n\n\n\n
\"\"
Autor frontendowego czwartku pr\u00f3buj\u0105cy zrozumie\u0107 o co chodzi z behaviour-graph

I prawdopodobnie Wy teraz czytaj\u0105cy jak ten sam autor pr\u00f3buje wyt\u0142umaczy\u0107 Wam co zrozumia\u0142.\u00a0<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/yahoo.github.io\/bgdocs\/docs\/typescript\/code-example\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Miniony tydzie\u0144 je\u015bli chodzi o nowo\u015bci przebieg\u0142 dosy\u0107 spokojnie. Evan You og\u0142osi\u0142, \u017ce Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue, a tw\u00f3rcy babela pokazali kolejn\u0105 wersj\u0119 transpilatora z wsparciem dla kilku funckjonalno\u015bci z preview TC39. \u0141apcie gor\u0105c\u0105 kaw\u0119 i zapraszam do lektury!<\/p>\n","protected":false},"author":12,"featured_media":7938,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND-1.png","feature_image_visible":false,"estimated_reading_time":"7"},"yoast_head":"\nFrontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived\" \/>\n<meta property=\"og:description\" content=\"Miniony tydzie\u0144 je\u015bli chodzi o nowo\u015bci przebieg\u0142 dosy\u0107 spokojnie. Evan You og\u0142osi\u0142, \u017ce Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue, a tw\u00f3rcy babela pokazali kolejn\u0105 wersj\u0119 transpilatora z wsparciem dla kilku funckjonalno\u015bci z preview TC39. \u0141apcie gor\u0105c\u0105 kaw\u0119 i zapraszam do lektury!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-10T14:05:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND-1.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<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND-1.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 75 – Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo\",\"datePublished\":\"2022-02-10T14:05:52+00:00\",\"dateModified\":\"2022-09-19T11:16:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\"},\"wordCount\":1298,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\",\"name\":\"Frontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png\",\"datePublished\":\"2022-02-10T14:05:52+00:00\",\"dateModified\":\"2022-09-19T11:16:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 75 – Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived","og_description":"Miniony tydzie\u0144 je\u015bli chodzi o nowo\u015bci przebieg\u0142 dosy\u0107 spokojnie. Evan You og\u0142osi\u0142, \u017ce Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue, a tw\u00f3rcy babela pokazali kolejn\u0105 wersj\u0119 transpilatora z wsparciem dla kilku funckjonalno\u015bci z preview TC39. \u0141apcie gor\u0105c\u0105 kaw\u0119 i zapraszam do lektury!","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/","og_site_name":"Vived","article_published_time":"2022-02-10T14:05:52+00:00","article_modified_time":"2022-09-19T11:16:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND-1.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND-1.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 75 – Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo","datePublished":"2022-02-10T14:05:52+00:00","dateModified":"2022-09-19T11:16:32+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/"},"wordCount":1298,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/","name":"Frontend Thursday vol. 75 - Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png","datePublished":"2022-02-10T14:05:52+00:00","dateModified":"2022-09-19T11:16:32+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_QIg6vEjZmT5YMVKU5Rxr2A.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-75-vue-3-domysnla-wersja-vue-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 75 – Vue 3 domy\u015bnl\u0105 wersj\u0105 Vue, nowa biblioteka do zarz\u0105dzania stanem od yahoo"}]},{"@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 id=\"vue-3-staje-sie-domyslna-wersja-vue\">Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue<\/h2>\n","innerContent":["\n<h2 id=\"vue-3-staje-sie-domyslna-wersja-vue\">Vue 3 staje si\u0119 domy\u015bln\u0105 wersj\u0105 Vue<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vue 3 trafi\u0142o w maju 2021 roku. Kiedy kolejna du\u017ca wersja frameworka od Evana You po raz pierwszy ujrza\u0142a \u015bwiat\u0142o dzienne nie by\u0142a jeszcze gotowa, aby w pe\u0142ni zast\u0105pi\u0107 poprzedni\u0105 wersj\u0119. Co prawda rdze\u0144 biblioteki by\u0142 ju\u017c w pe\u0142ni gotowy, ale narz\u0119dzia u\u0142atwiaj\u0105ce migracj\u0119 dopiero raczkowa\u0142y, a zdecydowana wi\u0119kszo\u015b\u0107 bibliotek rozwijanych przez spo\u0142eczno\u015b\u0107 wymaga\u0142a wprowadzenia znacz\u0105cych modyfikacji.<\/p>\n","innerContent":["\n<p>Vue 3 trafi\u0142o w maju 2021 roku. Kiedy kolejna du\u017ca wersja frameworka od Evana You po raz pierwszy ujrza\u0142a \u015bwiat\u0142o dzienne nie by\u0142a jeszcze gotowa, aby w pe\u0142ni zast\u0105pi\u0107 poprzedni\u0105 wersj\u0119. Co prawda rdze\u0144 biblioteki by\u0142 ju\u017c w pe\u0142ni gotowy, ale narz\u0119dzia u\u0142atwiaj\u0105ce migracj\u0119 dopiero raczkowa\u0142y, a zdecydowana wi\u0119kszo\u015b\u0107 bibliotek rozwijanych przez spo\u0142eczno\u015b\u0107 wymaga\u0142a wprowadzenia znacz\u0105cych modyfikacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W czerwcu 2021 doczekali\u015bmy si\u0119 Vue 3.1, kt\u00f3re dostarczy\u0142o programistom wszystko czego potrzebowali, aby sprawnie migrowa\u0107 swoje aplikacje. Po p\u00f3\u0142 roku od pojawienia si\u0119 niekompatybilnych zmian sporo bibliotek zd\u0105\u017cy\u0142o ju\u017c przej\u015b\u0107 si\u0119 do Vue 3, ale wci\u0105\u017c daleko by\u0142o jeszcze do osi\u0105gni\u0119cia masy krytycznej.<\/p>\n","innerContent":["\n<p>W czerwcu 2021 doczekali\u015bmy si\u0119 Vue 3.1, kt\u00f3re dostarczy\u0142o programistom wszystko czego potrzebowali, aby sprawnie migrowa\u0107 swoje aplikacje. Po p\u00f3\u0142 roku od pojawienia si\u0119 niekompatybilnych zmian sporo bibliotek zd\u0105\u017cy\u0142o ju\u017c przej\u015b\u0107 si\u0119 do Vue 3, ale wci\u0105\u017c daleko by\u0142o jeszcze do osi\u0105gni\u0119cia masy krytycznej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W wrze\u015bniu 2021 zobaczyli\u015bmy Vue 3.2, ale wydanie to skupia\u0142o si\u0119 g\u0142\u00f3wnie na usprawnieniach wydajno\u015bci i Developer Experience. Z czasem do grona rozwi\u0105za\u0144 wspieraj\u0105cych Vue 3 zacz\u0119\u0142o do\u0142\u0105cza\u0107 coraz wi\u0119cej bibliotek.<\/p>\n","innerContent":["\n<p>W wrze\u015bniu 2021 zobaczyli\u015bmy Vue 3.2, ale wydanie to skupia\u0142o si\u0119 g\u0142\u00f3wnie na usprawnieniach wydajno\u015bci i Developer Experience. Z czasem do grona rozwi\u0105za\u0144 wspieraj\u0105cych Vue 3 zacz\u0119\u0142o do\u0142\u0105cza\u0107 coraz wi\u0119cej bibliotek.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W ten spos\u00f3b dotarli\u015bmy do dnia dzisiejszego. Po prawie p\u00f3\u0142tora roku od wydania Vue 3, Evan You na oficjalnym blogu Vue og\u0142osi\u0142, \u017ce stanie si\u0119 ona domy\u015bln\u0105 wersj\u0105 tego frameworka. Konsekwencji tej decyzji jest kilka. Po pierwsze tag latest na npm wskazywa\u0142 b\u0119dzie od teraz na wersj\u0119 3.2, a nie jak do tej pory na 2.6. Dokumentacja r\u00f3wnie\u017c domy\u015blnie przenosi\u0107 b\u0119dzie do najnowszej wersji, a archiwalna wersja dost\u0119pna b\u0119dzie po dodaniu do adresu przedrostka v2. Podobnie repozytoria na GitHubie zmieni\u0142y domy\u015blne branche, a kilka z nich pozby\u0142o si\u0119 przyrostka next. Rzecz jasna wszystkie te zmiany dotycz\u0105 nie tylko samego Vue, ale r\u00f3wnie\u017c jego o\u015bciennych bibliotek, takich jak Vuex czy Vue Router.<\/p>\n","innerContent":["\n<p>W ten spos\u00f3b dotarli\u015bmy do dnia dzisiejszego. Po prawie p\u00f3\u0142tora roku od wydania Vue 3, Evan You na oficjalnym blogu Vue og\u0142osi\u0142, \u017ce stanie si\u0119 ona domy\u015bln\u0105 wersj\u0105 tego frameworka. Konsekwencji tej decyzji jest kilka. Po pierwsze tag latest na npm wskazywa\u0142 b\u0119dzie od teraz na wersj\u0119 3.2, a nie jak do tej pory na 2.6. Dokumentacja r\u00f3wnie\u017c domy\u015blnie przenosi\u0107 b\u0119dzie do najnowszej wersji, a archiwalna wersja dost\u0119pna b\u0119dzie po dodaniu do adresu przedrostka v2. Podobnie repozytoria na GitHubie zmieni\u0142y domy\u015blne branche, a kilka z nich pozby\u0142o si\u0119 przyrostka next. Rzecz jasna wszystkie te zmiany dotycz\u0105 nie tylko samego Vue, ale r\u00f3wnie\u017c jego o\u015bciennych bibliotek, takich jak Vuex czy Vue Router.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Z ciekawo\u015bci pr\u00f3bowa\u0142em dokopa\u0107 si\u0119 w internecie do informacji na temat procentu projekt\u00f3w czy deweloper\u00f3w, kt\u00f3rzy zmigrowali si\u0119 do Vue 3. Najlepsze dane jakie znalaz\u0142em to liczba pobra\u0144 z npm. W ci\u0105gu ostatniego tygodnia Vue 2 zosta\u0142 pobrany 3 615 168 razy, natomiast Vue 3 pobrano 797 572 razy. Vue 3 pobierany jest wi\u0119c 3 razy rzadziej ni\u017c Vue 2. Pami\u0119tajcie jednak, \u017ce projektom w Vue 2 grunt nie pali si\u0119 jeszcze pod nogami, bo zbli\u017caj\u0105ce si\u0119 wydanie 2.7 b\u0119dzie wersj\u0105 LTS z 18 miesi\u0119cznym wsparcie. Ponadto tw\u00f3rcy zapewniaj\u0105, \u017ce nawet po tym okresie Vue 2.7 otrzymywa\u0107 b\u0119dzie krytyczne \u0142atki bezpiecze\u0144stwa. Czy Vue podzieli losy Pythona i jeszcze przez d\u0142ugie lata b\u0119dzie podzielone na dwie niezale\u017cne spo\u0142eczno\u015bci? Trzymam kciuki, \u017ceby tak si\u0119 nie sta\u0142o.<\/p>\n","innerContent":["\n<p>Z ciekawo\u015bci pr\u00f3bowa\u0142em dokopa\u0107 si\u0119 w internecie do informacji na temat procentu projekt\u00f3w czy deweloper\u00f3w, kt\u00f3rzy zmigrowali si\u0119 do Vue 3. Najlepsze dane jakie znalaz\u0142em to liczba pobra\u0144 z npm. W ci\u0105gu ostatniego tygodnia Vue 2 zosta\u0142 pobrany 3 615 168 razy, natomiast Vue 3 pobrano 797 572 razy. Vue 3 pobierany jest wi\u0119c 3 razy rzadziej ni\u017c Vue 2. Pami\u0119tajcie jednak, \u017ce projektom w Vue 2 grunt nie pali si\u0119 jeszcze pod nogami, bo zbli\u017caj\u0105ce si\u0119 wydanie 2.7 b\u0119dzie wersj\u0105 LTS z 18 miesi\u0119cznym wsparcie. Ponadto tw\u00f3rcy zapewniaj\u0105, \u017ce nawet po tym okresie Vue 2.7 otrzymywa\u0107 b\u0119dzie krytyczne \u0142atki bezpiecze\u0144stwa. Czy Vue podzieli losy Pythona i jeszcze przez d\u0142ugie lata b\u0119dzie podzielone na dwie niezale\u017cne spo\u0142eczno\u015bci? Trzymam kciuki, \u017ceby tak si\u0119 nie sta\u0142o.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3820,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-10.gif\" alt=\"\" class=\"wp-image-3820\"\/><figcaption>Ostatni Python 2 to Python 2.7. Ostatnie Vue 2 to Vue 2.7. Przypadek?<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-10.gif\" alt=\"\" class=\"wp-image-3820\"\/><figcaption>Ostatni Python 2 to Python 2.7. Ostatnie Vue 2 to Vue 2.7. Przypadek?<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla\">\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:\/\/blog.vuejs.org\/posts\/vue-3-as-the-new-default.html\">https:\/\/blog.vuejs.org\/posts\/vue-3-as-the-new-default.html<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3-as-the-new-default.html\">https:\/\/blog.vuejs.org\/posts\/vue-3-as-the-new-default.html<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 id=\"2-babel-7-17-dodaje-wsparcie-dla-nowych-dekoratorow\">2. Babel 7.17 dodaje wsparcie dla nowych dekorator\u00f3w<\/h2>\n","innerContent":["\n<h2 id=\"2-babel-7-17-dodaje-wsparcie-dla-nowych-dekoratorow\">2. Babel 7.17 dodaje wsparcie dla nowych dekorator\u00f3w<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym tygodniu doczekali\u015bmy si\u0119 kolejnej wersji Babela. Zanim przejdziemy do konkret\u00f3w wr\u00f3\u0107my na chwil\u0119 do tematu finansowania projektu. Je\u015bli czytacie nasze przegl\u0105dy regularnie to na pewno pami\u0119tacie ma\u0142y skandal wok\u00f3\u0142 bud\u017cetu na rozw\u00f3j biblioteki (je\u015bli o ca\u0142ej spawie nigdy nie s\u0142yszeli\u015bcie to gor\u0105co zach\u0119cam do powrotu do <a href=\"https:\/\/vived.io\/frontend-thursday-37\/\">37 edycji naszego przegl\u0105du<\/a>). Z ciekawo\u015bci postanowi\u0142em zerkn\u0105\u0107 na Open Collective i okazuje si\u0119, \u017ce przewidywany bud\u017cet projektu wci\u0105\u017c nie jest wystarczaj\u0105cy dla utrzymania 3 deweloper\u00f3w. Jestem ciekaw na jak d\u0142ugo starcz\u0105 jeszcze zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze i czy ostatecznie projekt zmuszony b\u0119dzie do redukcji zatrudnienia.<\/p>\n","innerContent":["\n<p>W minionym tygodniu doczekali\u015bmy si\u0119 kolejnej wersji Babela. Zanim przejdziemy do konkret\u00f3w wr\u00f3\u0107my na chwil\u0119 do tematu finansowania projektu. Je\u015bli czytacie nasze przegl\u0105dy regularnie to na pewno pami\u0119tacie ma\u0142y skandal wok\u00f3\u0142 bud\u017cetu na rozw\u00f3j biblioteki (je\u015bli o ca\u0142ej spawie nigdy nie s\u0142yszeli\u015bcie to gor\u0105co zach\u0119cam do powrotu do <a href=\"https:\/\/vived.io\/frontend-thursday-37\/\">37 edycji naszego przegl\u0105du<\/a>). Z ciekawo\u015bci postanowi\u0142em zerkn\u0105\u0107 na Open Collective i okazuje si\u0119, \u017ce przewidywany bud\u017cet projektu wci\u0105\u017c nie jest wystarczaj\u0105cy dla utrzymania 3 deweloper\u00f3w. Jestem ciekaw na jak d\u0142ugo starcz\u0105 jeszcze zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze i czy ostatecznie projekt zmuszony b\u0119dzie do redukcji zatrudnienia.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3826,"width":403,"height":403,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/200w.gif\" alt=\"\" class=\"wp-image-3826\" width=\"403\" height=\"403\"\/><figcaption>Uda\u0142o nam si\u0119 zdoby\u0107 unikalne nagranie z siedziby zespo\u0142u rozwijaj\u0105cego Babel<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/200w.gif\" alt=\"\" class=\"wp-image-3826\" width=\"403\" height=\"403\"\/><figcaption>Uda\u0142o nam si\u0119 zdoby\u0107 unikalne nagranie z siedziby zespo\u0142u rozwijaj\u0105cego Babel<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przejd\u017amy jednak do sedna i przyjrzymy si\u0119 pokr\u00f3tce nowo\u015bciom w Babelu 7.17. Gdybym najnowszej wersji musia\u0142 nada\u0107 podtytu\u0142 to by\u0142oby to Babelu 7.17 i wsparcie dla funkcjonalno\u015bci z Stage 2 ECMA Proposal, bo do najnowszej wersji trafi\u0142y a\u017c trzy takie funkcjonalno\u015bci: dekoratory, RegExp set notation oraz wsparcie dla @@ i ^^ w pipe operator.<\/p>\n","innerContent":["\n<p>Przejd\u017amy jednak do sedna i przyjrzymy si\u0119 pokr\u00f3tce nowo\u015bciom w Babelu 7.17. Gdybym najnowszej wersji musia\u0142 nada\u0107 podtytu\u0142 to by\u0142oby to Babelu 7.17 i wsparcie dla funkcjonalno\u015bci z Stage 2 ECMA Proposal, bo do najnowszej wersji trafi\u0142y a\u017c trzy takie funkcjonalno\u015bci: dekoratory, RegExp set notation oraz wsparcie dla @@ i ^^ w pipe operator.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najwi\u0119ksze zainteresowanie wzbudzi\u0142o oczywi\u015bcie wsparcie dla dekorator\u00f3w. Pami\u0119tajcie jednak, \u017ce dekoratory te nie s\u0105 w pe\u0142ni kompatybilne ani z tymi znanymi z TypeScript, ani z tymi znanymi z poprzednich wersji Babela. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce saga zwi\u0105zana z dekoratorami trwa ju\u017c ponad 5 lat i raczej szybko nie ujrzymy jej zako\u0144czenia (o ile kiedykolwiek do takowego dojdzie).<\/p>\n","innerContent":["\n<p>Najwi\u0119ksze zainteresowanie wzbudzi\u0142o oczywi\u015bcie wsparcie dla dekorator\u00f3w. Pami\u0119tajcie jednak, \u017ce dekoratory te nie s\u0105 w pe\u0142ni kompatybilne ani z tymi znanymi z TypeScript, ani z tymi znanymi z poprzednich wersji Babela. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce saga zwi\u0105zana z dekoratorami trwa ju\u017c ponad 5 lat i raczej szybko nie ujrzymy jej zako\u0144czenia (o ile kiedykolwiek do takowego dojdzie).<\/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\">@defineElement(\"button\")\nclass Button {\n  @reactive accessor enabled = true; \/\/ class auto accessors\n\n  @event(\"onClick\") #handleClick() { \/\/ decorator on a private method\n    console.log(\"clicked!\");\n  }\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">@defineElement(\"button\")\nclass Button {\n  @reactive accessor enabled = true; \/\/ class auto accessors\n\n  @event(\"onClick\") #handleClick() { \/\/ decorator on a private method\n    console.log(\"clicked!\");\n  }\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ciekawie wygl\u0105da te\u017c wsparcie dla RegExp <em>set notation<\/em>. Dzi\u0119ki wykorzystaniu tej funkcjonalno\u015bci mo\u017cliwe b\u0119dzie dodanie odpowiedniej flagi do wyra\u017cenia regularnego i odfiltrowywanie du\u017cych liter czy Emoji.<\/p>\n","innerContent":["\n<p>Ciekawie wygl\u0105da te\u017c wsparcie dla RegExp <em>set notation<\/em>. Dzi\u0119ki wykorzystaniu tej funkcjonalno\u015bci mo\u017cliwe b\u0119dzie dodanie odpowiedniej flagi do wyra\u017cenia regularnego i odfiltrowywanie du\u017cych liter czy Emoji.<\/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\">\"Did you see the \ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe emoji?\".match(\/\\p{RGI_Emoji}\/v). \/\/ [\"\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe\"]<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\"Did you see the \ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe emoji?\".match(\/\\p{RGI_Emoji}\/v). \/\/ [\"\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c\udffe\"]<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale mnie mocno zastanawia dla kogo zosta\u0142y one przygotowane. Troch\u0119 ci\u0119\u017cko mi uwierzy\u0107, \u017ce deweloperzy w swoich projektach zdecyduj\u0105 si\u0119 na korzystanie z funkcjonalno\u015bci, kt\u00f3rych API nie jest jeszcze ustabilizowane. Je\u015bli macie odmienne zdanie i wykorzystujecie takie wczesne wsparcie w swoich projektach to z ch\u0119ci\u0105 zapoznam si\u0119 z waszymi komentarzami.<\/p>\n","innerContent":["\n<p>Nowe funkcjonalno\u015bci wygl\u0105daj\u0105 ciekawie, ale mnie mocno zastanawia dla kogo zosta\u0142y one przygotowane. Troch\u0119 ci\u0119\u017cko mi uwierzy\u0107, \u017ce deweloperzy w swoich projektach zdecyduj\u0105 si\u0119 na korzystanie z funkcjonalno\u015bci, kt\u00f3rych API nie jest jeszcze ustabilizowane. Je\u015bli macie odmienne zdanie i wykorzystujecie takie wczesne wsparcie w swoich projektach to z ch\u0119ci\u0105 zapoznam si\u0119 z waszymi komentarzami.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3821,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-5.gif\" alt=\"\" class=\"wp-image-3821\"\/><figcaption>Przyznajcie szczerze, kto jeszcze ekscytuje si\u0119 kolejnymi wydaniami Babela?? Bo ja czytaj\u0105c release notes wygl\u0105dam jak Bart w gifie powy\u017cej.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-5.gif\" alt=\"\" class=\"wp-image-3821\"\/><figcaption>Przyznajcie szczerze, kto jeszcze ekscytuje si\u0119 kolejnymi wydaniami Babela?? Bo ja czytaj\u0105c release notes wygl\u0105dam jak Bart w gifie powy\u017cej.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla-1\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla-1\">\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:\/\/babeljs.io\/blog\/2022\/02\/02\/7.17.0\">https:\/\/babeljs.io\/blog\/2022\/02\/02\/7.17.0<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/babeljs.io\/blog\/2022\/02\/02\/7.17.0\">https:\/\/babeljs.io\/blog\/2022\/02\/02\/7.17.0<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 id=\"3-behaviour-graph-czyli-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\">\u00a03. behaviour-graph, czyli nowa biblioteka do zarz\u0105dzania stanem od yahoo<\/h2>\n","innerContent":["\n<h2 id=\"3-behaviour-graph-czyli-nowa-biblioteka-do-zarzadzania-stanem-od-yahoo\">\u00a03. behaviour-graph, czyli nowa biblioteka do zarz\u0105dzania stanem od yahoo<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jak to m\u00f3wi\u0105: tydzie\u0144 bez nowej frontendowej biblioteki to tydzie\u0144 stracony. Ten za\u015b uratowali deweloperzy z yahoo, kt\u00f3rzy zaprezentowali now\u0105 bibliotek\u0119 do zarz\u0105dzania stanem - behaviour-graph.<\/p>\n","innerContent":["\n<p>Jak to m\u00f3wi\u0105: tydzie\u0144 bez nowej frontendowej biblioteki to tydzie\u0144 stracony. Ten za\u015b uratowali deweloperzy z yahoo, kt\u00f3rzy zaprezentowali now\u0105 bibliotek\u0119 do zarz\u0105dzania stanem - behaviour-graph.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3822,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-9.gif\" alt=\"\" class=\"wp-image-3822\"\/><figcaption>\u00a0Ku mojemu zaskoczeniu czytaj\u0105c dokumentacj\u0119 tego najnowszego cude\u0144ka poczu\u0142em pewien powiew \u015bwie\u017co\u015bci, bo dawno w \u015bwiecie zarz\u0105dzania stanem na frontendzie nie widzia\u0142em tak nieszablonowego podej\u015bcia. Niezale\u017cnie od tego czy sama biblioteka mi si\u0119 podoba czy nie za ten wyczyn tw\u00f3rcom behaviour-graph nale\u017c\u0105 si\u0119 brawa.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-9.gif\" alt=\"\" class=\"wp-image-3822\"\/><figcaption>\u00a0Ku mojemu zaskoczeniu czytaj\u0105c dokumentacj\u0119 tego najnowszego cude\u0144ka poczu\u0142em pewien powiew \u015bwie\u017co\u015bci, bo dawno w \u015bwiecie zarz\u0105dzania stanem na frontendzie nie widzia\u0142em tak nieszablonowego podej\u015bcia. Niezale\u017cnie od tego czy sama biblioteka mi si\u0119 podoba czy nie za ten wyczyn tw\u00f3rcom behaviour-graph nale\u017c\u0105 si\u0119 brawa.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Podstawow\u0105 jednostk\u0105 w bibliotece s\u0105 Behaviours, kt\u00f3re mog\u0105 przyjmowa\u0107 dowoln\u0105 liczb\u0119 wej\u015b\u0107 (demands) i odpowiedzialne s\u0105 za maksymalnie jedno wyj\u015bcie (supply). Jak si\u0119 pewnie domy\u015blacie wyj\u015bcia jednego behaviour mog\u0105 by\u0107 wej\u015bciami kolejnego, co prowadzi do powstania grafu zale\u017cno\u015bci. My\u015bl\u0119, \u017ce bardzo dobrze pokazuje to przyk\u0142ad z termostatem zaci\u0105gni\u0119ty z dokumentacji, kt\u00f3ry znajdziecie poni\u017cej.<\/p>\n","innerContent":["\n<p>Podstawow\u0105 jednostk\u0105 w bibliotece s\u0105 Behaviours, kt\u00f3re mog\u0105 przyjmowa\u0107 dowoln\u0105 liczb\u0119 wej\u015b\u0107 (demands) i odpowiedzialne s\u0105 za maksymalnie jedno wyj\u015bcie (supply). Jak si\u0119 pewnie domy\u015blacie wyj\u015bcia jednego behaviour mog\u0105 by\u0107 wej\u015bciami kolejnego, co prowadzi do powstania grafu zale\u017cno\u015bci. My\u015bl\u0119, \u017ce bardzo dobrze pokazuje to przyk\u0142ad z termostatem zaci\u0105gni\u0119ty z dokumentacji, kt\u00f3ry znajdziecie poni\u017cej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3823,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/thermostat-heat-1024x360.jpg\" alt=\"\" class=\"wp-image-3823\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/thermostat-heat-1024x360.jpg\" alt=\"\" class=\"wp-image-3823\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Prosty na papierze koncept po przeniesieniu do kodu nie jest ju\u017c niestety, a\u017c tak przejrzysty. Korzystanie z biblioteki zaczynamy od stworzenia grafu, kt\u00f3ry odpowiedzialny b\u0119dzie za zapewnienie zasad wspomnianych w poprzednim akapicie, za propagacj\u0119 zmian do kolejnych <em>behaviours<\/em>. Dzi\u0119ki metodzie <em>action<\/em> graf umo\u017cliwia r\u00f3wnie\u017c aktualizowanie tych p\u00f3l, kt\u00f3re nie s\u0105 supply, \u017cadnego z behaviours. Stan, czyli zar\u00f3wno <em>behaviours<\/em> jaki same pola przechowywane b\u0119d\u0105 w klasie, kt\u00f3ra rozszerza\u0107 musi dostarczan\u0105 przez bibliotek\u0119 klas\u0119 Extent. Pola odpowiedzialne za przechowywane stanu zainicjalizowa\u0107 nale\u017cy w konstruktorze wykorzystuj\u0105c metod\u0119 state(\u201cname\u2018). Konstruktor jest r\u00f3wnie\u017c dobrym miejscem do umieszczenia definicji behaviours. Wszystkie aktualizacje p\u00f3l odbywa\u0107 si\u0119 musz\u0105 poprzez metod\u0119 update, kt\u00f3ra zwr\u00f3ci b\u0142\u0105d je\u015bli zostanie wywo\u0142ana w z\u0142ym kontek\u015bcie (np. przez behaviour, kt\u00f3ry nie zadeklarowa\u0142 jej jako supply).<\/p>\n","innerContent":["\n<p>Prosty na papierze koncept po przeniesieniu do kodu nie jest ju\u017c niestety, a\u017c tak przejrzysty. Korzystanie z biblioteki zaczynamy od stworzenia grafu, kt\u00f3ry odpowiedzialny b\u0119dzie za zapewnienie zasad wspomnianych w poprzednim akapicie, za propagacj\u0119 zmian do kolejnych <em>behaviours<\/em>. Dzi\u0119ki metodzie <em>action<\/em> graf umo\u017cliwia r\u00f3wnie\u017c aktualizowanie tych p\u00f3l, kt\u00f3re nie s\u0105 supply, \u017cadnego z behaviours. Stan, czyli zar\u00f3wno <em>behaviours<\/em> jaki same pola przechowywane b\u0119d\u0105 w klasie, kt\u00f3ra rozszerza\u0107 musi dostarczan\u0105 przez bibliotek\u0119 klas\u0119 Extent. Pola odpowiedzialne za przechowywane stanu zainicjalizowa\u0107 nale\u017cy w konstruktorze wykorzystuj\u0105c metod\u0119 state(\u201cname\u2018). Konstruktor jest r\u00f3wnie\u017c dobrym miejscem do umieszczenia definicji behaviours. Wszystkie aktualizacje p\u00f3l odbywa\u0107 si\u0119 musz\u0105 poprzez metod\u0119 update, kt\u00f3ra zwr\u00f3ci b\u0142\u0105d je\u015bli zostanie wywo\u0142ana w z\u0142ym kontek\u015bcie (np. przez behaviour, kt\u00f3ry nie zadeklarowa\u0142 jej jako supply).<\/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 * as bg from \"https:\/\/cdn.skypack.dev\/behavior-graph\";\n\nlet g = new bg.Graph();\n\nclass PersonExtent extends bg.Extent {\n  constructor(graph) {\n    super(graph);\n    \n    this.personName = this.state(\"Nobody\");\n    this.personSurname = this.state(\"Nobody\");\n    this.personFullName = this.state(\u201cNobody Nobody\u201d)\n\n    this.behavior()\n      .supplies(this.desiredTemperature)\n      .demands(this.personName, this.personSurname)\n      .runs(() => {\n        this.personFullName.update(this.personName.value + \" \" + this.personSurname.value);\n      });\n\n  this.behaviour()\n    .demands(this.personFullName)\n    .runs(() => {\n       this.sideEffect(() => {\n         document.querySelector('#name).innerText = this.personFullName.value;\n       });\n    });\n  }\n}\n\nlet e = new PersonExtent(g);\n\ne.addToGraphWithAction();\n\ng.action(() => {\n  e.personName.update(\"Tomek\");\n  e.personSurname.update(\u201cBrz\u0119czyszczykiewicz\u201d);\n})<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import * as bg from \"https:\/\/cdn.skypack.dev\/behavior-graph\";\n\nlet g = new bg.Graph();\n\nclass PersonExtent extends bg.Extent {\n  constructor(graph) {\n    super(graph);\n    \n    this.personName = this.state(\"Nobody\");\n    this.personSurname = this.state(\"Nobody\");\n    this.personFullName = this.state(\u201cNobody Nobody\u201d)\n\n    this.behavior()\n      .supplies(this.desiredTemperature)\n      .demands(this.personName, this.personSurname)\n      .runs(() => {\n        this.personFullName.update(this.personName.value + \" \" + this.personSurname.value);\n      });\n\n  this.behaviour()\n    .demands(this.personFullName)\n    .runs(() => {\n       this.sideEffect(() => {\n         document.querySelector('#name).innerText = this.personFullName.value;\n       });\n    });\n  }\n}\n\nlet e = new PersonExtent(g);\n\ne.addToGraphWithAction();\n\ng.action(() => {\n  e.personName.update(\"Tomek\");\n  e.personSurname.update(\u201cBrz\u0119czyszczykiewicz\u201d);\n})<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli moje t\u0142umaczenie wydaje si\u0119 Wam zawi\u0142e to zach\u0119cam Was do zerkni\u0119cia do dokumentacji podlinkowanej w \u017ar\u00f3d\u0142ach. Zrozumienie tego mentalnego modelu by\u0142o dla mojego m\u00f3zgu \u015bwietnym \u0107wiczeniem, a im d\u0142u\u017cej przygl\u0105da\u0142em czyta\u0142em o nowym rozwi\u0105zaniu tym bardziej mnie ono przekonywa\u0142o. Jako fan DDD w Behaviours widz\u0119 mocne odniesienia do Worklfows znanych z funkcyjnego podej\u015bcia do DDD, a w wymuszonym podziale odpowiednik Bounded Contexts. Niestety w dokumentacji nie znajdziecie nawet najmniejszej wzmianki o integracji z Reactem, Vue czy Angularem. Dop\u00f3ki kto\u015b nie pokusi si\u0119 o przygotowanie odpowiednich integracji, nie wr\u00f3\u017c\u0119 bibliotece \u015bwietlanej przysz\u0142o\u015bci.<\/p>\n","innerContent":["\n<p>Je\u015bli moje t\u0142umaczenie wydaje si\u0119 Wam zawi\u0142e to zach\u0119cam Was do zerkni\u0119cia do dokumentacji podlinkowanej w \u017ar\u00f3d\u0142ach. Zrozumienie tego mentalnego modelu by\u0142o dla mojego m\u00f3zgu \u015bwietnym \u0107wiczeniem, a im d\u0142u\u017cej przygl\u0105da\u0142em czyta\u0142em o nowym rozwi\u0105zaniu tym bardziej mnie ono przekonywa\u0142o. Jako fan DDD w Behaviours widz\u0119 mocne odniesienia do Worklfows znanych z funkcyjnego podej\u015bcia do DDD, a w wymuszonym podziale odpowiednik Bounded Contexts. Niestety w dokumentacji nie znajdziecie nawet najmniejszej wzmianki o integracji z Reactem, Vue czy Angularem. Dop\u00f3ki kto\u015b nie pokusi si\u0119 o przygotowanie odpowiednich integracji, nie wr\u00f3\u017c\u0119 bibliotece \u015bwietlanej przysz\u0142o\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3824,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-7.gif\" alt=\"\" class=\"wp-image-3824\"\/><figcaption>Autor frontendowego czwartku pr\u00f3buj\u0105cy zrozumie\u0107 o co chodzi z behaviour-graph<br><br>I prawdopodobnie Wy teraz czytaj\u0105cy jak ten sam autor pr\u00f3buje wyt\u0142umaczy\u0107 Wam co zrozumia\u0142.\u00a0<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-7.gif\" alt=\"\" class=\"wp-image-3824\"\/><figcaption>Autor frontendowego czwartku pr\u00f3buj\u0105cy zrozumie\u0107 o co chodzi z behaviour-graph<br><br>I prawdopodobnie Wy teraz czytaj\u0105cy jak ten sam autor pr\u00f3buje wyt\u0142umaczy\u0107 Wam co zrozumia\u0142.\u00a0<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla-2\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla-2\">\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:\/\/yahoo.github.io\/bgdocs\/docs\/typescript\/code-example\/\">https:\/\/yahoo.github.io\/bgdocs\/docs\/typescript\/code-example\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/yahoo.github.io\/bgdocs\/docs\/typescript\/code-example\/\">https:\/\/yahoo.github.io\/bgdocs\/docs\/typescript\/code-example\/<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10008","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=10008"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10008\/revisions"}],"predecessor-version":[{"id":10533,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10008\/revisions\/10533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7938"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}