{"id":10148,"date":"2021-04-22T10:59:01","date_gmt":"2021-04-22T08:59:01","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-34\/"},"modified":"2022-09-19T13:16:43","modified_gmt":"2022-09-19T11:16:43","slug":"frontend-thursday-vol-34","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-34\/","title":{"rendered":"Frontend Thursday vol. 34"},"content":{"rendered":"

1. rx-angular<\/h1>\n

zone.js to biblioteka, kt\u00f3ra od pocz\u0105tku sta\u0142a u podstaw Angulara. Jej g\u0142\u00f3wnym zadaniem jest opakowanie przegl\u0105darkowych event\u00f3w w odpowiednie API, dzi\u0119ki kt\u00f3remu Angular mo\u017ce przy okazji ka\u017cdego zdarzenia, uruchomi\u0107 mechanizm wykrywania zmian. Proces ten pozwala przypisa\u0107 warto\u015b\u0107 do zmiennej w komponencie i zostanie ona automatycznie od\u015bwie\u017cona na interfejsie u\u017cytkownika. Problem jest jeden: programi\u015bci stracili kontrol\u0119 nad uruchomieniem mechanizmu wykrywania zmian, a co za tym idzie nad wydajno\u015bci\u0105 swoich aplikacji. Odpowiedzi\u0105 na ten problem jest zmiana ChangeDetectionStrategy na OnPush, co w sporym skr\u00f3cie wprowadza nast\u0119puj\u0105cy kontrakt: komponent zmienia sw\u00f3j stan tylko, kiedy zmieniaj\u0105 si\u0119 jego parametry wej\u015bciowe. Mo\u017ce si\u0119 wydawa\u0107, \u017ce w takim scenariuszu zone.js staje si\u0119 zb\u0119dny. Niestety sporo angularowych rozwi\u0105za\u0144 jest mocno powi\u0105zanych z zone.js (np. async pipe przestanie dzia\u0142a\u0107, je\u015bli pozbawi\u0107 go dost\u0119pu do tej biblioteki). rx-angular to zestaw narz\u0119dzi, kt\u00f3ry idzie o krok dalej i b\u0119dzie wspiera\u0107 programist\u00f3w w tworzeniu aplikacji ca\u0142kowicie pozbawionych zone.js.<\/p>\n

Na rx-angular sk\u0142adaj\u0105 si\u0119 trzy niezale\u017cne parkiety: @rx-angular\/cdk, @rx-angular\/state i @rx-angular\/template. Pierwszy z nich ma pomaga\u0107 w tworzeniu wydajnych komponent\u00f3w. Na ten moment dostarcza on przede wszystkim zestaw funkcji do sterowania zone.js, pozwalaj\u0105cych stopniowo go wy\u0142\u0105cza\u0107, aby ostatecznie pozby\u0107 si\u0119 go ca\u0142kowicie.<\/p>\n

Druga z wymienionych bibliotek pozwala na zarz\u0105dzanie stanem komponentu w reaktywny spos\u00f3b (i oczywi\u015bcie dzia\u0142a przy wy\u0142\u0105czonym zone.js). W pierwszej chwili bardzo skojarzy\u0142o mi si\u0119 to z reactowymi hookami i je\u015bli przyjrze\u0107 si\u0119 temu bli\u017cej, to rzeczywi\u015bcie dzia\u0142a to bardzo podobnie do useState.<\/p>\n

@Component({\n\tselector: 'app-stateful',\n\ttemplate: ` <div>{{ title$ | async }}<\/div> `,\n\tproviders: [RxState],\n})\nexport class StatefulComponent {\n\treadonly title$ = this.state.select('title');\n\t@Input() set title(title: string) {\n\t\tthis.state.set({ title });\n\t}\n\tconstructor(private state: RxState<{ title: string }>) {}\n}<\/code><\/pre>\n
Na deser zostawi\u0142em sobie najciekawsz\u0105 z trzech paczek. @rx-angular\/template zawiera w sobie dwie nowe dyrektywy. Dyrektywa `push` jest odpowiedzi\u0105 na wspomniany w pierwszym akapicie problem z async. Pozwala ona wi\u0119c zasubskrybowa\u0107 si\u0119 do strumienia danych, ale nie wymaga do tego zone.js. Druga to rxLet, i jest s\u0142odzikiem syntaktycznym (uwielbiam to spolszczenie) na `*ngIf=\u201d(stream$ | async); let value\u201d`. <\/p>\n
<ng-container\n\t*rxLet="observableNumber$; let n; let e = $error, let c = $complete"\n>\n\t<app-number [number]="n" *ngIf="!e && !c"><\/app-number>\n\t<ng-container *ngIf="e"> There is an error: {{ e }} <\/ng-container>\n\t<ng-container *ngIf="c"> Observable completed: {{ c }} <\/ng-container>\n<\/ng-container><\/code><\/pre>\n
<hero-search [term]="searchTerm$ | push"> <\/hero-search>\n<hero-list-component [heroes]="heroes$ | push"> <\/hero-list-component><\/code><\/pre>\n
To co jest tak naprawd\u0119 ciekawe w tym pakiecie to dodatkowy parametr, jaki mog\u0105 przyjmowa\u0107 te dyrektywy, czyli render strategy. Na ten moment dost\u0119pne s\u0105 tylko strategie znane z podstawowego Angulara, ale w planach jest implementacja strategii, kt\u00f3re pozwol\u0105 na priorytetyzacj\u0119 renderowania poszczeg\u00f3lnych komponent\u00f3w. Kiedy obiecane strategie zostan\u0105 dostarczone to my\u015bl\u0119, \u017ce pakiet ten stanie si\u0119 jednym z podstawowych narz\u0119dzi przy optymalizacji angularowych aplikacji.<\/p>\n
W tej beczce miodu jest te\u017c niestety \u0142y\u017cka dziegciu. rx-angular na razie dost\u0119pny jest w wersji beta i nie wiadomo, kiedy mo\u017cemy si\u0119 spodziewa\u0107 wypuszczenia stabilnej wersji.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/github.com\/rx-angular\/rx-angular<\/a><\/p>\n
2. Por\u00f3wnanie narz\u0119dzi nowej generacji do budowania aplikacji<\/h1>\n
Je\u015bli \u015bledzicie nasze frontendowe przegl\u0105dy od jakiego\u015b czasu, to pewnie wiecie, \u017ce z zapartym tchem \u015bledz\u0119 nowe narz\u0119dzia do budowania aplikacji (a esbuild absolutnie skrad\u0142 moje serce). W poprzednich edycjach stara\u0142em si\u0119 przemyci\u0107 Wam co nieco o Vite czy Snowpacku, ale z moj\u0105 skromn\u0105 wiedz\u0105 i ograniczeniami naszej formu\u0142y by\u0142y to raczej marne pr\u00f3by. Je\u015bli Was te\u017c interesuj\u0105 nast\u0119pcy Webpacka i Rollupa, to w \u017ar\u00f3d\u0142ach znajdziecie prawdziw\u0105 kopalni\u0119 wiedzy na ten temat. Gdybym mia\u0142 wybra\u0107 jeden artyku\u0142, kt\u00f3ry polecam w tym temacie, to by\u0142by to w\u0142a\u015bnie ten podlinkowany poni\u017cej. Przygotujcie tylko gigantyczny kubek kawy, bo nie jest to kr\u00f3tka lektura \u2615\ufe0f.<\/p>\n
<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/css-tricks.com\/comparing-the-new-generation-of-build-tools\/<\/a><\/p>\n
3. Node.js 16 i Deno 1.9<\/h1>\n
W\u015br\u00f3d frontendowych framework\u00f3w i bibliotek nie dzia\u0142o si\u0119 w tym tygodniu w\u0142a\u015bciwie nic ciekawego. W zwi\u0105zku z tym postanowi\u0142em rzuci\u0107 okiem na to co dzia\u0142o si\u0119 po backendowej stronie JavaScriptu. Nag\u0142\u00f3wki wygl\u0105da\u0142y obiecuj\u0105co, bo dw\u00f3ch najwi\u0119kszych graczy wypu\u015bci\u0142o du\u017ce aktualizacje do swoich \u015brodowisk uruchomieniowych. Kiedy wczyta\u0142em si\u0119 dok\u0142adniej w aktualizacje, bole\u015bnie przekona\u0142em si\u0119 o tym, \u017ce po drugiej stronie p\u0142otu trawa wcale nie jest bardziej zielona, a zmiany nie s\u0105 ani odrobin\u0119 bardziej dynamiczne ni\u017c te po frontendowej stronie.<\/p>\n
Nowa wersja Node to przede wszystkim podbicie wersji V8 z 8.6 na 9.0 i nowe funkcjonalno\u015bci z tym zwi\u0105zane. \u0141atk\u0119 stabilno\u015bci dosta\u0142a funkcja `setTimeout` z pakietu `promisify`. Node 16.0 b\u0119dzie te\u017c pierwsz\u0105 wersj\u0105 dostarczaj\u0105c\u0105 natywne wsparcie dla Apple Silicon.<\/p>\n
Je\u015bli m\u00f3wimy ju\u017c o M1 to jak podoba\u0142a wam si\u0119 ostatnia konferencja Apple? Kto\u015b z Was czeka\u0142 na iPad i iMac z M1?<\/figcaption><\/figure>\n
W nowej wersji Deno dzieje si\u0119 nieco wi\u0119cej, ale ci\u0119\u017cko m\u00f3wi\u0107 tutaj o prze\u0142omowych zmianach. Najwi\u0119ksz\u0105 nowo\u015bci\u0105 jest natywne wsparcie dla serwera HTTP\/2 i przy\u015bpieszenie komunikacji z dzia\u0142aj\u0105cym pod spodem Rustem. Ciekawie wygl\u0105da te\u017c wsparcie dla dynamicznego dopytywania o dost\u0119p zamiast definiowania ich upfront.<\/p>\n
<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/nodejs.medium.com\/node-js-16-available-now-7f5099a97e70<\/a>
https:\/\/deno.com\/blog\/v1.9<\/a><\/p>\n
\n
Pami\u0119tajcie, \u017ceby spr\u00f3bowa\u0107 Vived, je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie!<\/p>\n