{"id":10068,"date":"2021-10-14T15:53:33","date_gmt":"2021-10-14T13:53:33","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-59\/"},"modified":"2022-09-19T13:16:36","modified_gmt":"2022-09-19T11:16:36","slug":"frontend-thursday-vol-59","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-59\/","title":{"rendered":"Frontend Thursday vol. 59"},"content":{"rendered":"\n

1. Samodzielne komponenty i dyrektywy w Angularze<\/h2>\n\n\n\n

Je\u015bli nigdy nie mieli\u015bcie do czynienia z angularow\u0105 koncepcja modu\u0142\u00f3w, to na pierwszy rzut oka mo\u017ce ona by\u0107 mocno niezrozumia\u0142a. Szczeg\u00f3lnie bior\u0105c pod uwag\u0119, \u017ce maj\u0105 one niewiele wsp\u00f3lnego z modu\u0142ami znanym z JavaScriptu. Natywne modu\u0142y pozwalaj\u0105 podzieli\u0107 aplikacj\u0119 na wiele plik\u00f3w i zarz\u0105dza\u0107 API, jakie udost\u0119pniamy. Angularowe modu\u0142y maj\u0105 na celu zapewnia\u0107 konfiguracj\u0119 zale\u017cno\u015bci dla Dependency Injection. W Angularze ka\u017cdy komponent czy dyrektywa musi by\u0107 cz\u0119\u015bci\u0105 jakiego\u015b modu\u0142u, co czyni je najbardziej atomicznym elementem frameworku. Co ciekawe, modu\u0142y trafi\u0142y do Angulara dopiero w wersji 2.0.0-rc.5 i by\u0142y odpowiedzi\u0105 na problemy z publikowanie angularowych bibliotek w npm. Z racji, \u017ce framework by\u0142 ju\u017c na etapie Release Candidate, to ca\u0142e rozwi\u0105zanie powsta\u0142o w przy\u015bpieszonym tempie, i jak to bywa z takimi rozwi\u0105zaniami zosta\u0142o z nami na d\u0142u\u017cej.<\/p>\n\n\n\n

\/\/ JS Modules imports\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\n\n\/\/ Angular Module declaration\n@NgModule({\n  declarations: [AppComponent],\n  \/\/ Angular Module import \n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n\/\/ JS Module export\nexport class AppModule {}<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Angular jest chyba jedynym powa\u017cnym rozwi\u0105zaniem, w kt\u00f3rym najmniejszym atomem jest co\u015b innego ni\u017c pojedynczy komponent. Aby pod\u0105\u017ca\u0107 za dobrymi praktykami w ostatnich latach wytworzy\u0142 si\u0119 trend promuj\u0105cy tworzenie modu\u0142\u00f3w zawieraj\u0105cych pojedyncze komponenty. Taka architektura jest bardzo elastyczna i promuje DRY, ale nawet nie wiecie, ile czasu zmarnowa\u0142em w ostatnim roku na generowanie modu\u0142owego boilerplatu. Dobrze, \u017ce mamy `ng generate`, bo bez tego ju\u017c dawno postrada\u0142bym zmys\u0142y\u2026<\/p>\n\n\n\n
\/\/ hello-world.component.ts\n@Component({\n  selector: 'hello-world',\n  template: '<h1>Hello World<\/h1>'\n  styles: ['h1 { color: red; }']\n})\nexport class HelloWorldComponent { }\n\n\/\/ hello-world.module.ts\n@NgModule({\n  declarations: [HelloWorldComponent],\n  exports: [HelloWorldComponent]\n})\nexport class HelloWorldComponentModule {}\n<\/code><\/pre>\n\n\n\n
Zaprezentowany powy\u017cej schemat nazywany jest SCAM (od Single Component Angular Module). Je\u015bli chcecie dowiedzie\u0107 si\u0119 wi\u0119cej, to zapraszam tutaj<\/a>.<\/p>\n\n\n\n
Zesp\u00f3\u0142 Angulara ju\u017c od jakiego\u015b czasu sugerowa\u0142, \u017ce zajmie si\u0119 tym tematem. W zesz\u0142ym tygodniu w ich repozytorium pojawi\u0142o si\u0119 obszerne RFC zawieraj\u0105ce propozycj\u0119 rozwi\u0105zania problemu. Prezentowana architektura nie pozbywa si\u0119 ca\u0142kowicie NgModules, ale sprawia, \u017ce staj\u0105 si\u0119 one opcjonalne. Jak zapewniaj\u0105 autorzy RFC, zmiany nie b\u0119d\u0105 mie\u0107 negatywnego wp\u0142ywu na performance, czy lazy loading i znacz\u0105co poprawi\u0105 Developer Experience.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Je\u015bli chcemy oznaczy\u0107 komponent jako samodzielny, jego konfiguracj\u0119 nale\u017cy rozszerzy\u0107 o parametr `standalone: true`. RFC sugeruje, \u017ce `ng generate` b\u0119dzie mo\u017cna skonfigurowa\u0107 tak, aby domy\u015blnie generowa\u0142 adnotacje w taki w\u0142a\u015bnie spos\u00f3b. Z czasem mo\u017ce pojawi\u0107 si\u0119 r\u00f3wnie\u017c flaga konfiguracji, kt\u00f3ra sprawi, \u017ce parametr ten domy\u015blnie b\u0119dzie ustawiony na true. Warto wspomnie\u0107, \u017ce zadeklarowanie standalone komponentu wewn\u0105trz modu\u0142u b\u0119dzie powodowa\u0142o b\u0142\u0105d kompilacji. Adnotacja @Component zyska r\u00f3wnie\u017c dwa nowe parametry `imports` i `schemas`, kt\u00f3re pozwol\u0105 odpowiednio skonfigurowa\u0107 Dependency Injection. Warto wspomnie\u0107, \u017ce oba parametry b\u0119d\u0105 dost\u0119pne tylko je\u015bli oznaczymy komponent jako samodzielny.<\/p>\n\n\n\n
import { AnotherStandaloneComponent } from '.\/another-standalone-component.component.ts';\nimport { CommonModule } from '@angular\/common';\nimport { Component, CUSTOM_ELEMENTS_SCHEMA, Input  } from '@angular\/core';\nimport { FormsModule } from '@angular\/forms';\n\n@Component({\n  selector: 'app-standalone-component',\n  standalone: true,\n  imports: [AnotherStandaloneComponent, CommonModule,, FormsModule],\n  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]\n  template: `\n    <app-another-standalone-component *ngIf="flag"><\/app-another-standalone-component>\n    <custom-element><\/custom-element>\n    Forms work: <input [(ngModel)]="name" \/> (name = {{ name }})\n  `\n})\nexport class MyComponent {\n  @Input() name: string = 'Vived';\n  @Input() flag: boolean = true;\n}<\/code><\/pre>\n\n\n\n
W ramach RFC rozwa\u017cana by\u0142a r\u00f3wnie\u017c jedna ciekawa zmiana: podzielenie CommonModule na wiele samodzielnych komponent\u00f3w. Je\u015bli nie u\u017cywacie Angulara, to wspomniany modu\u0142 zawiera zestaw podstawowych dyrektyw i transformator\u00f3w, takich jak *ngIf, czy *ngFor. Oznacza to, \u017ce w praktyce wi\u0119kszo\u015b\u0107 nietrywialnych komponent\u00f3w musi importowa\u0107 ten modu\u0142. Podzielenie tego podstawowego modu\u0142u na pojedyncze komponenty sprawi\u0142oby, \u017ce deklaracje import\u00f3w by\u0142yby czytelniejsze, ale te\u017c du\u017co trudniejsze w utrzymaniu. Co ciekawe rozwa\u017cano r\u00f3wnie\u017c automatyczne importowanie CommonModule, ale porzucono ten pomys\u0142 motywuj\u0105c decyzj\u0119 wprowadzeniem zbyt du\u017co magii dla programist\u00f3w.<\/p>\n\n\n\n
@Component({\n  selector: 'with-control-statments-component',\n  standalone: true,\n  \/\/Angular team could replace this:\n  \/\/imports: [CommonModule], \n  \/\/with this:\n  imports: [ NgIf, NgFor ],\n  template: `\n          <ul *ngIf="show">\n              <li *ngFor="let item of items">\n                  {{item}}\n              <\/li>\n          <\/ul>\n  `\n})\nexport class WithControlStatmentsComponent {  \n    items = [1,2,3];\n    \n    @Input() show = true;\n}<\/code><\/pre>\n\n\n\n
Jeszcze nie wiadomo kiedy faza RFC si\u0119 zako\u0144czy i kiedy mamy szans\u0119 zobaczy\u0107 now\u0105 architektur\u0119 w naszych aplikacjach. W tym momencie mo\u017cemy ju\u017c natomiast zobaczy\u0107 Proof Of Concept rozwi\u0105zania na StackBlitz udost\u0119pnionym tutaj<\/a>. Trzymam kciuki, bo jest to jedna z rzeczy, na kt\u00f3r\u0105 czekam najbardziej na angularowej roadmapie.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
PS. Dzisiaj opublikowany zosta\u0142 pierwszy Release Candidate Angulara 13 \ud83e\udd73<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/twitter.com\/IgorMinar\/status\/1447593511981772802<\/a>
https:\/\/github.com\/angular\/angular\/discussions\/43784<\/a>
https:\/\/docs.google.com\/document\/d\/1SBeMuko8_T15t511iJgCktyO9tnggFvBda-XLMeE9r8\/edit?resourcekey=0-fs2SACbxWCThdLyILtNNSA#heading=h.bb41yd99dqib<\/a>
https:\/\/stackblitz.com\/edit\/ng-standalone<\/a>
https:\/\/twitter.com\/IgorMinar\/status\/1447593478834188291<\/a>
https:\/\/marmicode.io\/blog\/your-angular-module-is-a-scam<\/a><\/p>\n\n\n\n
2. Storybook trzykrotnie przyspiesza<\/h2>\n\n\n\n
Korzystacie w swoich projektach ze Storybooka? Je\u015bli tak, to pewnie zainteresuje Was fakt, \u017ce do najnowszej wersji 6.4 trafi\u0142a flaga `storyStoreV7`, kt\u00f3ra sprawia, \u017ce paczka jak\u0105 zwraca Webpack jest 50% mniejsza, a sam Storybook \u0142aduje si\u0119 trzykrotnie szybciej. Je\u015bli zastanawiacie si\u0119 nad jej tajemnicz\u0105 nazw\u0105, to potraktujcie j\u0105 jako preview technologii, kt\u00f3ra od Storybook 7.0 b\u0119dzie t\u0105 domy\u015bln\u0105.<\/p>\n\n\n\n
Je\u015bli Storybook, kt\u00f3ry utrzymujecie nie jest du\u017cy, by\u0107 mo\u017ce nie dostrzegli\u015bcie do tej pory problem\u00f3w z wydajno\u015bci\u0105. Tak jak to zwykle bywa, takie problemy objawiaj\u0105 si\u0119 przy osi\u0105gni\u0119ciu odpowiedniej skali, a tak\u0105 osi\u0105gn\u0105\u0142 mi\u0119dzy innymi Shopify. Ich Storybook liczy obecnie ponad tysi\u0105c Stories, wa\u017cy\u0142 16MB i \u0142adowa\u0142 si\u0119 ponad 1,5s. To w\u0142a\u015bnie Shopify wraz z Webpackiem i chromatic (firm\u0105 stoj\u0105ca za Storybookiem) przygotowa\u0142 t\u0105 optymalizacj\u0119. Jak osi\u0105gni\u0119to tak imponuj\u0105cy wynik? Do tej pory Storybook serwowany by\u0142 jako jedna ogromna paczka. Nowy flaga umo\u017cliwia podzielenie paczki na mniejsze kawa\u0142ki zawieraj\u0105ce pojedyncze story i ich lazy loading. Proste optymalizacje zawsze s\u0105 najlepsze.<\/p>\n\n\n\n
\"\"
Deweloperzy po raz pierwszy otwieraj\u0105cy Storybook 7<\/figcaption><\/figure><\/div>\n\n\n\n
Dobrze s\u0142ysze\u0107, \u017ce narz\u0119dzia z kt\u00f3rych na co dzie\u0144 korzysta si\u0119 w projekcie staj\u0105 si\u0119 szybsze. Osobi\u015bcie czekam jednak na optymalizacje, kt\u00f3r\u0105 pod koniec notatki wspominaj\u0105 jej autorzy, czyli lazy compilation. Ta eksperymentalna funkcja Webpacka ma umo\u017cliwi\u0107 kompilowanie tylko tych zasob\u00f3w, o kt\u00f3re poprosi klient, co powinno znacz\u0105co przy\u015bpieszy\u0107 kompilacj\u0119 w trybie deweloperskim (je\u015bli obecnie pracujemy nad jednym story, wszystkie pozosta\u0142e nie b\u0119d\u0105 kompilowane).<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/storybook.js.org\/blog\/storybook-on-demand-architecture\/<\/a><\/p>\n\n\n\n
3. Parcel v2<\/h2>\n\n\n\n
Wy te\u017c my\u015bleli\u015bcie, \u017ce Parcel umar\u0142 \u015bmierci\u0105 naturaln\u0105 podczas ostatniego nap\u0142ywu modnych narz\u0119dzi do budowania aplikacji? Jak si\u0119 okazuje nic bardziej mylnego i w zesz\u0142ym tygodniu \u015bwiat\u0142o dzienne ujrza\u0142a wersja druga tego narz\u0119dzia<\/p>\n\n\n\n
Je\u015bli nie kojarzycie Parcela, to w telegraficznym skr\u00f3cie jest to narz\u0119dzie do budowania aplikacji, kt\u00f3re za zadanie postawi\u0142o sobie ograniczenie konfiguracji wymaganej do rozpocz\u0119cia pracy nad projektem do minimum. Z Parcela korzystaj\u0105 takie tuzy jak Atlassian, Adobe czy Microsoft.<\/p>\n\n\n\n
\"\"
Co interesuj\u0105ce alfa Parcela v2 ukaza\u0142a si\u0119 ju\u017c ponad dwa lata temu \ud83d\ude2e<\/figcaption><\/figure><\/div>\n\n\n\n
Z dokumentacji wynika, \u017ce je\u015bli nie polegacie zbytnio na zewn\u0119trznych wtyczkach to migracja powinna przebiec raczej bezbole\u015bnie. A migrowa\u0107 warto, bo lista zmian wygl\u0105da naprawd\u0119 imponuj\u0105co. Poni\u017cej znajdziecie jej skr\u00f3con\u0105 wersj\u0119, a po wi\u0119cej szczeg\u00f3\u0142\u00f3w jak zwykle odsy\u0142amy do \u017ar\u00f3de\u0142.<\/p>\n\n\n\n
Nowo\u015bci w Parcel v2: <\/p>\n\n\n\n