import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Page, Layout, Card, Text } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(`{ shop { name } }`);
const { data } = await response.json();
return json({ shopName: data.shop.name });
};
export default function Dashboard() {
const { shopName } = useLoaderData<typeof loader>();
return (
<Page title="Dashboard-ul tău">
<Layout>
<Layout.Section>
<Card>
<Text as="h2" variant="headingMd">
Salut, {shopName}! Bine ai venit în app.
</Text>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Am terminat recent al patrulea app de Shopify pe stack-ul nou (Remix + Polaris) și m-am gândit să scriu despre asta, mai ales că documentația lor oficială te lasă uneori cu ochii în soare fix când ai mai mare nevoie. Dacă vii de pe stack-ul vechi de Node/Express sau PHP, saltul spre Remix e uriaș. Nu doar ca workflow, ci ca mentalitate.
Am lucrat la un proiect pentru un client din UK cu vreo 8.500 de comenzi pe lună și am decis să mergem pe stack-ul „recomandat”. Setup-ul inițial cu npm init @shopify/app@latest merge brici acum că au trecut pe Vite. Am economisit cam 30% la build time față de vechea variantă pe Webpack, ceea ce e o gură de aer proaspăt în development. Totuși, distracția începe când trebuie să legi Polaris de logica din Remix.
Remix e genial, dar Polaris e o dictatură
Trade-off-ul e simplu: Remix îți face viața incredibil de ușoară cu loaders și actions. Scapi de tone de state management în frontend; adio Redux sau exces de useEffect pentru data fetching. Dar, pe de altă parte, Polaris te forțează să scrii codul exact cum vor ei. Dacă încerci să fii creativ cu layout-ul sau să-ți faci propriile butoane „mai frumoase”, te mănâncă review-ul la app submission.
Am pățit-o la ultimul proiect: am primit reject pentru că foloseam un modal custom în loc de componenta Modal din Polaris integrată cu App Bridge. Reviewerii de la Shopify sunt un fel de roboți umani. Dacă interfața ta nu arată 100% ca o extensie naturală a admin-ului Shopify, app-ul nu trece. E frustrant, dar are sens pentru experiența userului final.
Setup-ul care chiar funcționează
Când configurezi proiectul, asigură-te că AppBridgeProvider e pus unde trebuie. Fără el, componentele de Polaris care au nevoie de context (ca Toast sau Navigation Menu) pur și simplu crapă silențios. O chestie pe care am descoperit-o după câteva ore de debugging: dacă folosești Remix și vrei să faci redirect din action, trebuie să folosești utilitarul de redirect din @shopify/shopify-app-remix, nu pe cel standard din @remix-run/node. Altfel, o să ai probleme cu iframe-ul în care rulează app-ul.
Review-ul: Acolo unde se decide soarta proiectului
Procesul de review durează cam 7-10 zile lucrătoare. Sfatul meu? Nu trimite app-ul până nu verifici lista lor de „App Store Requirements” de cel puțin trei ori. Eu am pierdut o săptămână pentru că uitasem să pun un link de „Contact Support” vizibil direct în dashboard-ul app-ului. Sunt extrem de meticuloși la chestii de UX.
Un alt punct critic e performanța. Shopify verifică dacă app-ul tău încetinește admin-ul. Aici Remix strălucește, pentru că poți face tot heavy lifting-ul pe server, trimițând în browser doar HTML-ul gata mestecat și minimul de JS necesar. La un proiect anterior pe React SPA, aveam probleme cu layout shift-ul la încărcare; cu Remix, totul e „rock solid” din prima secundă.
În concluzie, merită stack-ul ăsta? Da, dacă vrei să fii în grațiile Shopify și să ai un app care se simte nativ. E nasol dacă vrei libertate totală de design, dar pentru SaaS-uri de e-commerce, e drumul cel mai scurt către profit. Voi ce experiențe ați avut cu reviewerii lor, v-au dat reject pentru motive absurde?