Frontend Thursday vol. 62 – Angular v13, React Router v6

1. Angular v13

Wczoraj światło dzienne ujrzał nowy Angular oznaczony numerkiem 13! Ciężko jednak szukać w nim większych zmian i rewolucji. Kolejne wydanie to przede wszystkim nudny zbiór usprawnień na które niewielu z nas czekało. Skończmy jednak to jesienne depresyjne narzekanie i przyjrzymy się temu co dostarczyli nam programiści z Google.

To co przykuło moją uwagę najbardziej to wsparcie dla Typescript 4.4 i RxJS 7. Ja czekałem szczególnie na tego drugiego, bo już od jakiegoś czasu mierzi mnie żeby zastąpić `.toPromise` nowymi metodami `lastValueFrom` i `firstValueFrom` (jeśli jesteście ciekawi co jeszcze zmieniło się w RxJS to zapraszam do Frontend Thursday vol. 36).

Nowy Angular to również zapowiedziany już jakiś czas temu koniec wsparcie dla IE 11. Nie zostaje powiedzieć nic innego jak najwyższa pora.

Imponująco z perspektywy Developer Experience wygląda aktualizacja Angular CLI. Dzięki wprowadzeniu cache i częściowego wsparcia dla esbuild proces budowania aplikacji stał się nawet 60% szybszy. Przyznam szczerze, że nie mogę się doczekać, żeby sprawdzić jaki efekt przyniesie aktualizacja na prawdziwym projekcie.

Twórcy frameworka na świeczniku stawiają natomiast ostateczne porzucenie View Engine na rzecz Ivy Engine. Jeśli nie śledzicie na bieżąco Angulara, to przypomnę, że Ivy to zarówno nowy kompilator, jak i interpreter, który przyniósł znaczące optymalizacje jeśli chodzi o rozmiar paczek jak i szybkość aplikacji. Porzucenie View Engine nie powinno nikogo zaskoczyć – w Angulardze 12 został on w końcu oznaczony jako Deprecated i jest to niejako zwieńczeniem kilkuletnich starań, które rozpoczęły się wraz z opublikowanie Ivy w Angularze 9. Porzucenie starego silnika odblokowało twórcom kilka zablokowanych do tej pory ścieżek. Zaktualizowany został Angular Package Format, podbito standard JS do ES2020 i znacząco zredukowano potrzebę korzystania z ngcc.

Rzecz jasna to nie koniec usprawnień, więc zainteresowanych standardowo odsyłam do źródeł. A Wy czekaliście na nowego Angulara, czy też raczej przechodzicie obok niego obojętnie?

Źródła:

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. React Router v6

Również wczoraj (ach, co to był za dzień!) światło dzienne ujrzał React Router 6.0. Jest to pierwsze duże wydanie biblioteki od ponad dwóch lat i tym razem niesie za sobą duże zmiany w API  (wersja 5.0 była wstecznie kompatybilna z wersjami 4.x). Co interesujące React Router 6.0 ma być duchowym następcą nie tylko swoich poprzedników, ale również Reach Router.

Nowy React Router to przede wszystkim nowe API, mocno przypominające to znane z wersji 3.0. `<Switch>` został zamieniony na `<Routes>`, a ścieżki nie są już dopasowywane w kolejności deklaracji, ale wybierana jest ta “najbardziej dopasowana”. Element jaki należy wyrenderować przekazujemy do odpowiedniego property, co z kolei ułatwia przekazywanie properties do dzieci i pozwala zapakować nasze komponenty w Suspense czy Lazy.

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
// import your route components too

render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Nowe API to również postawienie nacisku na React Hooks. Nie tylko udostępnione zostały nowe hooki (jak useParams), ale sama biblioteka została przepisana tak, aby maksymalnie wykorzystywać je w swoim kodzie. Co interesujące, zabieg ten pozwolił zredukować rozmiar paczki o 50% 😮

Po przeczytaniu Release Notes mam mieszane uczucia. Z jednej strony nowe API wygląda atrakcyjnie, ale z drugiej jest ono skrajnie nie kompatybilne z poprzednimi wersjami biblioteki. Jeśli twórcy nie zaradzą temu problemowi, to aktualizacja dużych projektów będzie drogą przez mękę i w efekcie react-router 5 jeszcze długo pozostanie rynkowym standardem.

Źródła:

https://remix.run/blog/react-router-v6