{DrorSoft}

Remix + Prisma cycle summary - Roman Sandler

  • Prisma CRUD
  • Prisma complex relations
  • Prisma DB introspection
  • Prisma DB modeling
  • Prsima client extensions
  • Remix project setup
  • Remix session management
  • Remix data loading & mutation
  • Remix optimistic rendering
  • Remix componentization
  • Zod schema validation
  • Playwright browser testing

What we learned

Look at all the things I'm not doing.

 

DHH

Look at all the decisions I'm not making.

 

R.S

Explain that lane!

  • How should I structure my URL? No convention
  • How to communicate with the BE? REST / GraphQL / RPC
  • How to authenticate users? JWT probably
  • When to fetch?  Component render probably
  • Where to fetch? No convention
  • What library should I use? React Query / RTK Query / Apollo Client
  • How should I deal with loading state? React State probably
  • How should I deal with error state? React State probably

Data Loading (Django BE + SPA FE)

  • How should I structure my URL? Based on data requirements
  • How to communicate with the BE? You are the BE, no API needed
  • How to authenticate? Session
  • When to fetch? - URL change
  • Where to fetch? - In your loader function
  • What library should I use? - No library needed
  • How should I deal with loading state? - Suspense
  • How should I deal with error state? - Error Boundary

Data Loading (Remix + Prisma)

  • How should I gather the input from the user? Formik / react-hook-form, etc. (controlled components)
  • How should I validate the input? No convention
  • How should I submit it to the BE? Prevent default, send JSON
  • How should I respond if a request was successful? No convention
  • How should I response if a request was unsuccessful? No convention
  • How should I revalidate the data on the page? Invalidate client side cache probably

Data Mutation (Django BE + SPA FE)

  • How should I gather the input from the user? - Use a Form and regular inputs (uncontrolled)
  • How should I validate the input? - In your action
  • How should I submit it to the BE? - Use a Form
  • How should I respond if a request was successful? - Flash a message to the session and Redirect
  • How should I response if a request was unsuccessful? - Return a proper status code like 400, 422, 403
  • How should I revalidate the data on the page? - Remix does that for you

Data Mutation (Remix + Prisma)

  • Should I test each layer independently? Probably yes
  • Should I mock the network? Probably yes
  • How can I seed the DB? Probably avoid this and fake everything
  • Should I test at the component level? or at the page level? No convention

Testing (Django BE + SPA FE)

  • Should I test each layer independently? Test the app as a whole
  • Should I mock the network? No network calls
  • How can I seed the DB? You have direct access to the DB
  • Should I test at the component level? or at the route level? Very natural to test at the route level

Testing (Remix + Prisma)

Inherent complexity

vs

accidental complexity 

Always here for you

054-9732336

Copy of Drorsoft React Summery

By Roman Sandler

Copy of Drorsoft React Summery

  • 274