{"id":10045,"date":"2021-11-25T14:55:55","date_gmt":"2021-11-25T13:55:55","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-65-remix-1-0-ember-4-0\/"},"modified":"2022-09-19T13:16:35","modified_gmt":"2022-09-19T11:16:35","slug":"frontend-thursday-vol-65-remix-1-0-ember-4-0","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-65-remix-1-0-ember-4-0\/","title":{"rendered":"Frontend Thursday vol. 65 – Remix 1.0, Ember 4.0"},"content":{"rendered":"\n

1. Remix v1<\/h2>\n\n\n\n

Do niedawna zaciekle twierdzi\u0142em, \u017ce popularna opinia o codziennie pojawiaj\u0105cych si\u0119 JavaScriptowych frameworkach to krzywdz\u0105cy stereotyp, a nasze \u015brodowisko ostatnio mocno dojrza\u0142o. No c\u00f3\u017c\u2026 chyba b\u0119d\u0119 musia\u0142 zmieni\u0107 zdanie, bo w tym tygodniu znowu wydany zosta\u0142 nowy framework do Server Side Renderingu dla Reacta (przyp: dwa tygodnie temu wydany zosta\u0142 framework do SSR Hydrogen silnie integruj\u0105cy si\u0119 z Shopify. Wi\u0119cej o nim znajdziecie w Frontend Thurdsay vol. 63<\/a>). Nowy framework nazywa si\u0119 Remix i stworzyli go ludzie odpowiedzialni za bibliotek\u0119 React Router. Mogli\u015bcie ju\u017c wcze\u015bniej s\u0142ysze\u0107 t\u0105 nazw\u0119, bo wersja beta frameworku by\u0142a dost\u0119pna za odpowiedni\u0105 op\u0142at\u0105 (roczna op\u0142ata 250$ za indywidualn\u0105 licencj\u0119 lub 1000$ za licencj\u0119 zespo\u0142ow\u0105). Je\u015bli zastanawiacie si\u0119 co doprowadzi\u0142o do zmiany modelu biznesowego, to prawdopodobnie s\u0105 to 3 miliony dolar\u00f3w zainwestowane w firm\u0119 w ramach pierwszej rundy finansowania.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Pora przyjrze\u0107 si\u0119 troch\u0119 temu co do zaoferowania ma Remix. Pierwsze co rzuca si\u0119 w oczy to fakt, \u017ce jest to rozwi\u0105zanie dedykowane do Server Side Renderingu i nie znajdziemy tu Static Site Generation czy Incremental Site Generation znanych z konkurencyjnych rozwi\u0105za\u0144. Na razie dokumentacja milczy r\u00f3wnie\u017c na temat coraz bardziej zyskuj\u0105cych na popularno\u015bci React Server Side Components.<\/p>\n\n\n\n

Routing jak si\u0119 pewnie domy\u015blacie oparty jest o najnowszy react-router. Co interesuj\u0105ce jest on skonfigurowany w taki spos\u00f3b, \u017ceby podobnie jak w Next.js \u015bcie\u017cki rozwija\u0107 na podstawie struktury katalog\u00f3w. Co jeszcze bardziej interesuj\u0105ce wspierane s\u0105 zagnie\u017cd\u017cone \u015bcie\u017cki podobne do tych znanych z Angulara, kt\u00f3re pozwalaj\u0105 minimalizowa\u0107 duplikacj\u0119 kodu.<\/p>\n\n\n\n

\"\"
Fragment z dokumentacji: z lewej struktura katalog\u00f3w, z prawej spos\u00f3b w jaki rozwijane s\u0105 \u015bcie\u017cki\u00a0<\/figcaption><\/figure><\/div>\n\n\n\n

W Remix z ka\u017cdego pliku eksportowane mog\u0105 by\u0107 2 rzeczy: domy\u015blna funkcja generuj\u0105ca komponent oraz funkcja loader, kt\u00f3ra odpowiedzialna jest za wczytanie danych. Funkcja loader uruchamiana jest po stronie serwera, a do pozyskanych przez ni\u0105 danych mo\u017cemy si\u0119 dosta\u0107 przez hook `useLoaderData()`<\/p>\n\n\n\n

import { Link, useLoaderData } from "remix";\n\n\/\/ params are automatically extracted from route\nexport let loader = async ({ params }) => {\n  return fetchPostsFromRemoteServer(params.slug);\n};\n\nexport default function Posts() {\n  let posts = useLoaderData<Post[]>();\n  return (\n    <div>\n      <h1>Posts<\/h1>\n      <ul>\n        {posts.map(post => (\n          <li key={post.slug}>\n            <Link to={post.slug}>{post.title}<\/Link>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
Interesuj\u0105co wygl\u0105da te\u017c podej\u015bcie Remix do formularzy. Zamiast obs\u0142ugiwa\u0107 je z poziomu kodu uruchamianego z przegl\u0105darki klienta s\u0105 one wysy\u0142ane standardom POST\u2019em do serwera, kt\u00f3ry odpowiednio je przetwarza, a nast\u0119pnie zwraca b\u0142\u0105d lub nawiguje do odpowiedniej \u015bcie\u017cki w aplikacji. Endpoint przetwarzaj\u0105cy zapytania definiujemy eksportuj\u0105c funkcj\u0119 action.<\/p>\n\n\n\n
import { Form } from "remix";\n\nexport let action = async ({ request }) => {\n  let formData = await request.formData();\n\n  let title = formData.get("title");\n  let slug = formData.get("slug");\n  let markdown = formData.get("markdown");\n\n  await createPost({ title, slug, markdown });\n\n  return redirect("\/admin");\n};\n\nexport default function NewPost() {\n  return (\n    <Form method="post">\n      <p>\n        <label>\n          Post Title: <input type="text" name="title" \/>\n        <\/label>\n      <\/p>\n      <p>\n        <label>\n          Post Slug: <input type="text" name="slug" \/>\n        <\/label>\n      <\/p>\n      <p>\n        <label htmlFor="markdown">Markdown<\/label>\n        <br \/>\n        <textarea rows={20} name="markdown" \/>\n      <\/p>\n      <p>\n        <button type="submit">Create Post<\/button>\n      <\/p>\n    <\/Form>\n  );\n}<\/code><\/pre>\n\n\n\n
Na koniec warto jeszcze wspomnie\u0107, \u017ce Remix na ten moment nie oferuje wsparcia dla CSS Modules, co oznacza, \u017ce sami musimy zadba\u0107 o unikalno\u015b\u0107 klas w naszej aplikacji. Na szcz\u0119\u015bcie popularne rozwi\u0105zania takie jak Tailwind czy CSS-in-JS s\u0105 wspierane, wi\u0119c je\u015bli nie piszecie css-\u00f3w r\u0119cznie, to prawdopodobnie nawet nie zauwa\u017cycie tej niedogodno\u015bci.\u00a0<\/p>\n\n\n\n
Jaka jest moja opinia na temat Remix? Nie b\u0119dzie to najlepsze narz\u0119dzie do tworzenia wzgl\u0119dnie statycznych stron jak blog czy dokumentacja, ale im bardziej dynamiczna jest wasza aplikacja tym lepiej b\u0119dzie si\u0119 on sprawdza\u0142. Ci\u0119\u017cko powiedzie\u0107 czy na tym polu wypadnie lepiej ni\u017c Next.js czy Blitz. Czas poka\u017ce, ale dobrze widzie\u0107 tak zaci\u0119t\u0105 konkurencj\u0119 w temacie Server Side Renderingu.<\/p>\n\n\n\n
PS: Je\u015bli lubicie form\u0119 wideo to polecam kr\u00f3tki film przygotowany przez fireship.io, kt\u00f3ry w telegraficznym skr\u00f3cie pokazuje jak dzia\u0142a Remix<\/p>\n\n\n\n
\n