Frontend Thursday vol. 65 - Remix 1.0, Ember 4.0

1. Remix v1

Do niedawna zaciekle twierdziłem, że popularna opinia o codziennie pojawiających się JavaScriptowych frameworkach to krzywdzący stereotyp, a nasze środowisko ostatnio mocno dojrzało. No cóż… chyba będę musiał zmienić zdanie, bo w tym tygodniu znowu wydany został nowy framework do Server Side Renderingu dla Reacta (przyp: dwa tygodnie temu wydany został framework do SSR Hydrogen silnie integrujący się z Shopify. Więcej o nim znajdziecie w Frontend Thurdsay vol. 63). Nowy framework nazywa się Remix i stworzyli go ludzie odpowiedzialni za bibliotekę React Router. Mogliście już wcześniej słyszeć tą nazwę, bo wersja beta frameworku była dostępna za odpowiednią opłatą (roczna opłata 250$ za indywidualną licencję lub 1000$ za licencję zespołową). Jeśli zastanawiacie się co doprowadziło do zmiany modelu biznesowego, to prawdopodobnie są to 3 miliony dolarów zainwestowane w firmę w ramach pierwszej rundy finansowania.

Pora przyjrzeć się trochę temu co do zaoferowania ma Remix. Pierwsze co rzuca się w oczy to fakt, że jest to rozwiązanie dedykowane do Server Side Renderingu i nie znajdziemy tu Static Site Generation czy Incremental Site Generation znanych z konkurencyjnych rozwiązań. Na razie dokumentacja milczy również na temat coraz bardziej zyskujących na popularności React Server Side Components.

Routing jak się pewnie domyślacie oparty jest o najnowszy react-router. Co interesujące jest on skonfigurowany w taki sposób, żeby podobnie jak w Next.js ścieżki rozwijać na podstawie struktury katalogów. Co jeszcze bardziej interesujące wspierane są zagnieżdżone ścieżki podobne do tych znanych z Angulara, które pozwalają minimalizować duplikację kodu.

Fragment z dokumentacji: z lewej struktura katalogów, z prawej sposób w jaki rozwijane są ścieżki

W Remix z każdego pliku eksportowane mogą być 2 rzeczy: domyślna funkcja generująca komponent oraz funkcja loader, która odpowiedzialna jest za wczytanie danych. Funkcja loader uruchamiana jest po stronie serwera, a do pozyskanych przez nią danych możemy się dostać przez hook `useLoaderData()`

import { Link, useLoaderData } from "remix";

// params are automatically extracted from route
export let loader = async ({ params }) => {
  return fetchPostsFromRemoteServer(params.slug);
};

export default function Posts() {
  let posts = useLoaderData<Post[]>();
  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <Link to={post.slug}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Interesująco wygląda też podejście Remix do formularzy. Zamiast obsługiwać je z poziomu kodu uruchamianego z przeglądarki klienta są one wysyłane standardom POST’em do serwera, który odpowiednio je przetwarza, a następnie zwraca błąd lub nawiguje do odpowiedniej ścieżki w aplikacji. Endpoint przetwarzający zapytania definiujemy eksportując funkcję action.

import { Form } from "remix";

export let action = async ({ request }) => {
  let formData = await request.formData();

  let title = formData.get("title");
  let slug = formData.get("slug");
  let markdown = formData.get("markdown");

  await createPost({ title, slug, markdown });

  return redirect("/admin");
};

export default function NewPost() {
  return (
    <Form method="post">
      <p>
        <label>
          Post Title: <input type="text" name="title" />
        </label>
      </p>
      <p>
        <label>
          Post Slug: <input type="text" name="slug" />
        </label>
      </p>
      <p>
        <label htmlFor="markdown">Markdown</label>
        <br />
        <textarea rows={20} name="markdown" />
      </p>
      <p>
        <button type="submit">Create Post</button>
      </p>
    </Form>
  );
}

Na koniec warto jeszcze wspomnieć, że Remix na ten moment nie oferuje wsparcia dla CSS Modules, co oznacza, że sami musimy zadbać o unikalność klas w naszej aplikacji. Na szczęście popularne rozwiązania takie jak Tailwind czy CSS-in-JS są wspierane, więc jeśli nie piszecie css-ów ręcznie, to prawdopodobnie nawet nie zauważycie tej niedogodności.

Jaka jest moja opinia na temat Remix? Nie będzie to najlepsze narzędzie do tworzenia względnie statycznych stron jak blog czy dokumentacja, ale im bardziej dynamiczna jest wasza aplikacja tym lepiej będzie się on sprawdzał. Ciężko powiedzieć czy na tym polu wypadnie lepiej niż Next.js czy Blitz. Czas pokaże, ale dobrze widzieć tak zaciętą konkurencję w temacie Server Side Renderingu.

PS: Jeśli lubicie formę wideo to polecam krótki film przygotowany przez fireship.io, który w telegraficznym skrócie pokazuje jak działa Remix

Źródła:

https://remix.run/docs/en/v1/tutorials/blog
https://www.youtube.com/watch?v=r4B69HAOXnA
https://news.ycombinator.com/item?id=29312067
https://www.reddit.com/r/javascript/comments/r0ea51/v1_of_remix_is_officially_out/
https://remix.run/blog/seed-funding-for-remix

2. Vercel zgarnia kolejne 150 milionów dolarów

Gdybym tegorocznej jesieni miał nadać jakiś motyw tematyczny, to zdecydowanie byłby to Server Side Rendering. Wszystko zaczęło się od wydania Next.js 12 i długo wyczekiwanej wersji Gatsby 4.0. Potem dostaliśmy Next.js 13 z wsparciem React Server Side Components, a w ostatnim miesiącu na rynku pojawiło się dwóch nowych graczy: Hydrogen i opisany dzisiaj Remix. Tematyczną serię zamyka na ten moment news o zebraniu 150 milionów dolarów przez Vercela – firmę matkę Next.js. Oj dzieje się – jeśli jeszcze nie wskoczyliście do tego pociągu podekscytowania to ostatni moment, żeby to zrobić, bo wszystko wskazuje na to, że w nadchodzącym roku to właśnie będzie najbardziej trendujący temat w świecie frontendu.

Wracając do tematu – zebrane pieniądze są 4 rundą finansowania firmy, która zgromadziła do tej pory już 313 milionów dolarów (3 miliony dolarów dla Remix wyglądają przy tej kwocie jakoś blado…) i wyceniana jest na 2.5 miliarda dolarów. Nowe środki mają zostać przeznaczone na rozwój Open Source i funkcjonalności związanych z wprowadzonymi w Next.js 13 Edge Functions (przp: w dużym uproszczeniu Edge Functions to takie lambdy odpalone na CDN, którymi można przetwarzać zapytania użytkownika. Więcej o nich przeczytacie w oficjalnej dokumentacji tutaj).

Co interesujące poprzednia runda finansowania miała miejsce zaledwie w czerwcu tego roku i opiewała na 102 miliony dolarów. To oznacza, że ponad ⅔ zebranego kapitału pochodzi z ostatnich 6 miesięcy. Ciekawa dyskusja w tym temacie toczy się w dyskusji na Hacker News – jak wynika z raportów mamy do czynienia z masowym inwestowaniem kapitału i gigantycznym wzrostem kwot z jakimi mamy do czynienia w rundach finansowania. Jeśli kiedykolwiek chcieliście rzucić wszystko i założyć Startup to może być właśnie ten moment.

Ja mam tylko nadzieję, że te 150 milionów dolarów to nie tylko na pensję dla zatrudnionego niedawno Richa Harrisa – twórcy Svelte

Źródła:

https://vercel.com/blog/vercel-funding-series-d-and-valuation
https://vercel.com/docs/concepts/functions/edge-functions

3. Ember 4

Trochę ponad tydzień temu ukazał się Ember 4.0. Zgodnie z zapowiedziami z czerwcowego EmberConf w wersji tej znajdziemy kilka breaking changes, ale nie znajdziemy żadnych nowych funkcjonalności. Na te zgodnie z Road Mapą poczekać będziemy musieli jeszcze do wersji 4.4 (może wtedy wreszcie wykrzesam z siebie wystarczająco motywacji, żeby przyjrzeć się Emberowi trochę bliżej).

Autor Frontendowych Czartków szukający ciekawych zmian w Ember 4.0

Nie podejmę się opisania dla Was zmian, więc wszystkich zainteresowanych odsyłam do Release Notes na Githubie. Co ciekawe wydaniu nie towarzyszył żaden blogpost i prawdopodobnie dlatego rozeszło się one w sieci bez echa. Ktoś z Was korzysta jeszcze z Embera? Jeśli tak, to koniecznie podzielcie się z nami wrażeniami w komentarzach albo na naszym facebooku!

Na zakończenie jeszcze moje standardowe Emberowe polecajki. Honeypot swego czasu przygotował świetny dokument na temat Embera, jeśli jeszcze nie widzieliście, to koniecznie musicie go nadrobić. Poza tym polecam przeczytać artykuł założyciela simple labs, który twierdzi, że Ember to najbardziej produktywny framework na rynku i o dziwo nie wychodzi przy tym na osobę niespełna rozumu.

Źródła:

https://github.com/emberjs/ember.js/releases/tag/v4.0.0

Frontend Thursday vol. 65 – Remix 1.0, Ember 4.0

1. Remix v1

Źródła:

2. Vercel zgarnia kolejne 150 milionów dolarów

Źródła:

3. Ember 4

Źródła:

Odkryj więcej świetnych treści!