{"id":13696,"date":"2023-01-12T20:24:08","date_gmt":"2023-01-12T19:24:08","guid":{"rendered":"https:\/\/vived.io\/?p=13696"},"modified":"2023-01-14T10:36:31","modified_gmt":"2023-01-14T09:36:31","slug":"co-takiego-dostarczyl-nam-angular-15-1-frontend-weekly-vol-120","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/co-takiego-dostarczyl-nam-angular-15-1-frontend-weekly-vol-120\/","title":{"rendered":"Co takiego dostarczy\u0142 nam Angular 15.1? | Frontend Weekly vol. 120"},"content":{"rendered":"\n

1. Angular 15.1<\/h2>\n\n\n\n

W minionym tygodniu wydany zosta\u0142 Angular 15.1. Wi\u0119kszo\u015b\u0107 zmian i nowo\u015bci dotyczy funkcjonalno\u015bci, kt\u00f3re dodane zosta\u0142y w Anuglarze 14 i 15. Bez zb\u0119dnego przed\u0142u\u017cania przejd\u017amy do rzeczy.<\/p>\n\n\n\n

Self Closing Tags<\/h3>\n\n\n\n

Frameworki takie jak Vue czy React, traktuj\u0105 komponenty jako czysto abstrakcyjne byty mapowane do struktury DOM. Je\u015bli zobaczycie sobie plik HTML wygenerowany przez jeden z tych framework\u00f3w, to nie znajdziecie tam w\u0142a\u015bciwie \u017cadnego \u015bladu po abstrakcji jak\u0105 s\u0105 kompoenenty. Angular podchodzi do tematu zupe\u0142nie inaczej i ka\u017cdemu komponentowi przypisuje Custom HTML Tag. Dzi\u0119ki temu kiedy spojrzycie na stron\u0119 wygenerowan\u0105 przez Angulara, od razu b\u0119dziecie w stanie powi\u0105za\u0107 odpowiednie fragmenty HTML z komponentami.<\/p>\n\n\n\n

<!-- The HTML code of a simple application rendered by Angular -->\n<!-- You can clearly see how source code is devided into components -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8">\n    <title>Simple App<\/title>\n    <script src="script.js"><\/script>\n  <\/head>\n  <body>\n    <app-root>\n      <h1>Welcome to my application!<\/h1>\n      <app-navigation-link>\n        <a href="\/home">Home<\/a>\n      <app-navigation-link>\n      <app-navigation-link>\n        <a href="\/about">About<\/a>\n      <app-navigation-link>\n    <app-root>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
<!-- The same application as above but this time rendered with react -->\n<!-- It's really hard to say source how code have been devided into componets -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8">\n    <title>Simple App<\/title>\n    <script src="script.js"><\/script>\n  <\/head>\n  <body>\n    <div>\n      <h1>Welcome to my application!<\/h1>\n      <a href="\/home">Home<\/a>\n      <a href="\/about">About<\/a>\n    <div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Specyfikacja Custom HTML Tag zak\u0142ada kilka ogranicze\u0144. Mi\u0119dzy innymi nazwa tagu musi zawiera\u0107 znak -<\/code>. To w\u0142a\u015bnie dlatego Angular domy\u015blnie do selektor\u00f3w dodaje prefix app<\/code>. Ograniczenie to nie wi\u0119\u0142o si\u0119 znik\u0105d – przestrze\u0144 nazw nie zawieraj\u0105cych -<\/code> zarezewowana jest dla przysz\u0142ego wykorzystania w standardzie HTML.<\/p>\n\n\n\n
Wed\u0142ug standardu HTML, tylko wybrane tagi mog\u0105 zamyka\u0107 same siebie. Ich lista jest stosunkowo kr\u00f3tka i zawiera takie elementy jak <link \/><\/code>, <br \/><\/code>  czy  <img \/><\/code> (pe\u0142n\u0105 list\u0119 mo\u017cecie znale\u017a\u0107 mi\u0119dzy innymi tutaj<\/a>). Niestety na li\u015bcie tej na pr\u00f3\u017cno szuka\u0107 Custom HTML Tags. Oznacza to, \u017ce je\u015bli chcemy pozosta\u0107 zgodni ze standardem HTML, to skazani jeste\u015bmy na r\u0119czne zamykanie Custom HTML Tags. Chc\u0105c pozosta\u0107 w zgodzie ze standarderm, Angular musia\u0142 pozosta\u0107 za konkurencj\u0105, kt\u00f3ra od dawna umo\u017cliwia\u0142 takie praktyki (m.in. JSX’a i <App \/><\/code>).<\/p>\n\n\n\n
<!-- Below declarations are incorrect -->\n<div \/>                    <!-- \u274c div is not a self closing tag -->\n<approot><\/approot>        <!-- \u274c custom tags must contain - -->\n<app-root \/>               <!-- \u274c custom tags are not self closing -->\n\n<!-- Below declarations are correct -->\n<div><\/div                 <!-- \u2705 this is correct syntax -->\n<app-root><\/app-root>      <!-- \u2705 this is correct syntax --><\/code><\/pre>\n\n\n\n
W Angularze 15.1 deweloperom uda\u0142o si\u0119 w ko\u0144cu znale\u017a\u0107 panaceum na zaistnia\u0142y problem. Pisane przez nas templates nie trafiaj\u0105 w ko\u0144cu bezpo\u015brednio do u\u017cytkownika, ale s\u0105  jeszcze transpilowane (jak inaczej mog\u0142oby dzia\u0142a\u0107 *ngFor<\/code>, *ngIf<\/code> czy <ng-template><\/code>). To w\u0142a\u015bnie podczas tej transpilacji Angular podmienia\u0142 b\u0119dzie samo zamykaj\u0105ce si\u0119 tagi do formatu zgodnego ze standardem. W ten spos\u00f3b, pomimo \u017ce pisane przez nas templates nie b\u0119d\u0105 zgodne ze standardem, to HTML wysy\u0142any do klienta ju\u017c jak najbardziej.<\/p>\n\n\n\n
<!-- Angular 15.0 -->\n<app-button\n  text="Click me!"\n  variant="filled"\n  (onClick)="handleClick($event)"\n><\/app-button>\n<app-button\n  text="Don't click me!"\n  variant="outline"\n  (onClick)="handleClick($event)"\n><\/app-button>\n\n<!-- Angular 15.1 -->\n<app-button text="Click me!" variant="filled" (onClick)="handleClick($event)" \/>\n<app-button text="Don't click me!" variant="outline" (onClick)="handleClick($event)" \/><\/code><\/pre>\n\n\n\n
Deprekacja CanLoad<\/code> na rzecz CanMatch<\/code><\/h3>\n\n\n\n
Przed Angularem 15 do dyspozycji deweloper\u00f3w by\u0142y dwa guardy CanLoad<\/code> i CanActivate<\/code>. W przypadku zastosowania lazy-loadingu CanLoad<\/code> decydowa\u0142 czy dany fragment kodu mo\u017ce zosta\u0107 za\u0142adowany przez przegl\u0105dark\u0119. Je\u015bli kod zosta\u0142 ju\u017c raz za\u0142adowany, to Guard ten nie jest uruchamiany ponownie. Z tego wzgl\u0119du, je\u015bli chcemy ograniczy\u0107 dost\u0119p do danej strony (na przyk\u0142ad dla nie zalogowanych u\u017cytkownik\u00f3w), to musimy dodatkowo zabzpieczy\u0107 go dodatkow CanActivate<\/code>.<\/p>\n\n\n\n
const routes: Route[] = [{\n  path: '\/me',\n  canLoad: [() => inject(UserService).isLoggedIn()],\n  canActivate: [() => inject(UserService).isLoggedIn()],\n  loadComponent: () => import('.\/user-page\/user-page.component')\n}];<\/code><\/pre>\n\n\n\n
Do Angulara 15 trafi\u0142 nowy Guard CanMatch<\/code>, kt\u00f3ry wywo\u0142ywany jest przy ka\u017cdej pr\u00f3bie dopsowania \u015bcie\u017cki niezale\u017cnie od tego czy kod danego modu\u0142u zosta\u0142 ju\u017c za\u0142adowany. Dzi\u0119ki temu podw\u00f3jn\u0105 definicj\u0119 CanLoad<\/code> i CanActivate<\/code> zast\u0105pi\u0107 mo\u017cemy jednym zgrabnym CanMatch<\/code>. <\/p>\n\n\n\n
const routes: Route[] = [{\n  path: '\/me',\n  canMatch: [() => inject(UserService).isLoggedIn()],\n  loadComponent: () => import('.\/user-page\/user-page.component')\n}];<\/code><\/pre>\n\n\n\n
CanMatch<\/code> r\u00f3\u017cni si\u0119 od CanLoad<\/code> jeszcze jednym aspektem. W przypadku dopasowania do \u015bcie\u017cki zabezpieczonej zar\u00f3wno CanLoad<\/code> jak i CanActivate<\/code>, to programista odpowiedzialny jest za obs\u0142ug\u0119 redirect\u00f3w. Je\u015bli z CanMatch<\/code> zwr\u00f3cone zostanie false<\/code>, to Angular kontynuowa\u0142 b\u0119dzie iterowanie po tablicy zdefiniowanych route. Dzi\u0119ki temu w prosty spos\u00f3b mo\u017cemy pod tym samym urlem hostowa\u0107 stron\u0119 dla administratora i zwyk\u0142ego u\u017cytkownika, czy fallbackowa\u0107 do domy\u015blnej strony je\u015bli u\u017cytkownik nie ma dost\u0119pu do aktualnie requestowanej. <\/p>\n\n\n\n
const routes: Route[] = [\n  {\n    path: '\/me',\n    canMatch: [() => inject(UserService).isAdmin()],\n    loadComponent: () => import('.\/admin-page\/admin-page.component')\n  },\n  {\n    path: '\/me',\n    canMatch: [() => inject(UserService).isLoggedIn()],\n    loadComponent: () => import('.\/user-page\/user-page.component')\n  },\n  {\n    path: '**',\n    loadComponent: () => import('.\/not-logged-page\/not-logged-page.component')\n  }\n];<\/code><\/pre>\n\n\n\n
TestBed.runInInjectionContext<\/code><\/h3>\n\n\n\n
Funkcja inject()<\/code>, to pot\u0119\u017cne narz\u0119dzie dodane w Angularze 14, kt\u00f3re mo\u017ce uczyni\u0107 nasz kod znacznie czytelniejszym. To dzi\u0119ki niej mo\u017clwie jest mi\u0119dzy innymi pisane functional guards takich jak ten poni\u017cej.<\/p>\n\n\n\n
function onlyLoggedInGuard(): boolean {\n  return inject(UserService).isLoggedIn();\n}\n\nconst routes: Route[] = [{\n  path: '\/me',\n  canMatch: [onlyLoggedInGuard],\n  loadComponent: () => import('.\/user-page\/user-page.component')\n}];<\/code><\/pre>\n\n\n\n
Do tej pory, aby przetestowa\u0107 guarda takiego jak ten powy\u017cej musieli\u015bmy odpowiednio wsztrzykn\u0105\u0107 do niego kontekst Dependency Injection. Tajemniczy EnvironmentInjector<\/code> mocno psu\u0142 abstrakcj\u0119 TestBed<\/code>, kt\u00f3ra pozwala\u0142a programistom zapomnie\u0107 o szczeg\u00f3\u0142ach implementacyjnych Dependency Injection.<\/p>\n\n\n\n
describe('onlyLoggedInGuard', () => {\n  \/* ... *\/\n  it('should not allow not logged in users', () => {\n    \/* ... *\/\n    expect(\n      TestBed.inject(EnvironmentInjector).runInContext(onlyLoggedInGuard)\n    ).toEqual(expectedValue);\n  })\n});<\/code><\/pre>\n\n\n\n
W Angulara 15.1 TestBed rozszerzony zosta\u0142 o runInInjectionContext<\/code>, kt\u00f3ry troch\u0119 upraszcza powy\u017csz\u0105 konfiguracj\u0119.<\/p>\n\n\n\n
describe('onlyLoggedInGuard', () => {\n  \/* ... *\/\n  it('should not allow not logged in users', () => {\n    \/* ... *\/\n    expect(\n      TestBed.runInInjectionContext(onlyLoggedInGuard)\n    ).toEqual(expectedValue);\n  })\n});<\/code><\/pre>\n\n\n\n
isStandalone()<\/code><\/h3>\n\n\n\n
Je\u015bli kiedykolwiek potrzebowali\u015bcie dowiedzie\u0107 si\u0119 z poziomu API czy dany komponent, piepe lub dyrektywa zosta\u0142a zdediniowana w tradycyjny spos\u00f3b z modu\u0142ami, czy te\u017c jako Standalone Componet, to od teraz b\u0119dzie to mo\u017cliwe. <\/p>\n\n\n\n
@Component({\n  selector: 'app-standalone-component',\n  standalone: true\n})\nclass StandaloneComponent {}\n\n\/* ... *\/\nif(isStandalone(StandaloneComponent)) {\n  console.log(`StandaloneComponent is a standalone component`)\n}<\/code><\/pre>\n\n\n\n
Zastanawia\u0142em si\u0119 chwil\u0119, do czego m\u00f3g\u0142bym u\u017cy\u0107 nowego API, ale niestety nic nie przysz\u0142o mi do g\u0142owy. Je\u015bli Wy czekali\u015bcie na t\u0105 funkcjonalno\u015b\u0107 i macie dla niej jakie\u015b ciekawe zastosowanie, to koniecznie podzielcie si\u0119 nimi z nami na Twitterze.<\/p>\n\n\n\n
2. State of JS 2022<\/h2>\n\n\n\n
State of JS to najwi\u0119ksza ankieta dotycz\u0105ca JavaScript. W minionym tygodniu opublikowane zosta\u0142y jej wyniki. Jak co roku, ka\u017cdemu polecam zapoznanie si\u0119 z nimi samodzielnie, a ja poni\u017cej dziel\u0119 si\u0119 kilkoma moimi spostrze\u017ceniami:<\/p>\n\n\n
\n
\"\"
Tak si\u0119 czuj\u0119 w tym momencie – autor<\/figcaption><\/figure><\/div>\n\n\n