ลองรวม React library ที่เราเคยใช้ขึ้นโปรเจค หรือเคยรีวิวแล้วคิดว่าโอเคมาให้ฮะ เป็นความคิดเห็นส่วนตัวของเราล้วน
- Facebook Post: https://www.facebook.com/phoomparin.mano/posts/1664135190718614
- React Libraries I use as of 2023
Frameworks / Base Tooling
- Vite (https://vitejs.dev) ~ ทำ single-page app ที่ไม่ต้อง SSR เวริคที่สุดแล้ว เร็วด้วย ⭐️
- Astro (https://astro.build) ~ เหมาะกับทำ static site มาก ไม่ผูกติดกับ library ด้วย จะลง Vue, Svelte อะไรก็ได้หมดเลย ช่วงหลังทำ ssr ได้แล้ว ⭐️
- Next.js (https://nextjs.org) ~ ช่วงหลังผูกติดกับ Vercel มาก breaking changes บ่อยมากเวลาอัพ ถ้าไม่ได้ใช้ server components ก็ไม่ได้แย่มาก
Testing
- Vitest (https://vitest.dev) ~ ใช้ทำ unit testing รันเร็วมาก ลื่น ไม่มี overhead ⭐️
- Playwright (https://playwright.dev) ~ ใช้ทำ integration testing และ component testing รันเร็วมาก เขียนสนุก ⭐️
- React Testing Library (https://testing-library.com) ~ เมื่อก่อนใช้ แต่ตอนนี้ไปใช้ Playwright แทน ไม่ใช้อันนี้แล้ว
Developer Tooling
- Prettier (https://prettier.io) ~ ไว้ format ต้องมี ⭐️
- ESLint (https://eslint.org) ~ ไว้ lint ต้องมี ⭐️
- Husky (https://typicode.github.io/husky) ~ ไว้ทำ pre-commit hooks อาจจะต้องระวัง execution overhead แต่ถ้าตั้งค่าดีๆ จะเวริคมาก
Routing
- TanStack Router (https://tanstack.com/router) ~ ลองเปลี่ยนมาใช้แล้วโอเคเลย ⭐️
Animation
- Framer Motion (https://www.framer.com/motion) ~ ถ้า element เยอะเว็บจะช้า แต่ใช้แบบไม่ได้ element เยอะมากแล้วทำให้ขึ้นงานเร็วมาก ถ้าใช้เยอะจะต้อง optimize เองเยอะหน่อย ⭐️
- React Spring (https://www.react-spring.dev) ~ ใช้ hooks ของ spring เอาไว้ทำ animation สวยๆ ได้สบายเลย ⭐️
3D
- React Three Fiber (https://docs.pmnd.rs/react-three-fiber) ~ เป็น wrapper ของ Three.js ใช้ทำ 3D ในเว็บค่อนข้างดี แต่ถ้าสเกลใหญ่มากไปใช้ Babylon น่าจะดีกว่า ⭐️
API Management
- tRPC (https://trpc.io) ~ ถ้าไม่คิดจะ expose public API อยู่แล้ว ใช้แค่กับ frontend คิดว่าใช้ tRPC เวริคมาก ไม่ต้องปวดหัวกับ overhead ของ GraphQL ⭐️
- TanStack Query (https://tanstack.com/query) ~ ถ้ามี REST API อยู่แล้ว จะ เหมาะกับการ query ข้อมูล ทำ cache มาก ⭐️
State Management
- Jotai (https://jotai.org) ~ ชอบมาก คิดว่า atomic state management สเกลง่ายกว่าแบบ state tree มาก ไม่เจอปัญหาเรื่อง type ด้วย ใช้มาหลายงานแล้วชอบมาก learning curve น้อย แต่ต้อง onboard หน่อย ⭐️
- Zustand (https://github.com/pmndrs/zustand) ~ ไม่ค่อยได้ใช้ แต่คิดว่ากับโปรเจคไม่ใหญ่น่าจะโอเค แต่ระวัง code structure และ re-rendering ให้ดี
- XState (https://xstate.js.org) ~ ใช้อย่างระมัดระวังมากๆ มัน powerful แต่โค้ดจะ right drift แล้วอ่านยากง่ายมาก ถ้าทีมยังใหม่ไม่ควรใช้ ใช้เฉพาะเวลาที่มันมี state transitions ที่เราต้องจัดการอย่างครอบคลุม เพราะมันมี state visualizer ที่ดีมาก
Form Management
- React Hook Form (https://www.react-hook-form.com) ~ ตอน upgrade version ปวดหัวมากในแอพใหญ่ พอมันใช้ ref เลยมี hidden behaviour พอสมควร แต่คิดว่าไม่แย่มาก ใช้อย่างระมัดระวัง
Data Tables
- TanStack Table (https://tanstack.com/table) ~ ใช้ดี ไว้ render ตารางที่ dynamic ได้ง่ายมาก ⭐️
Styling
- Tailwind (https://tailwindcss.com) ~ utility class ที่มีทุกบ้าน ของดี ใช้ทุกงาน ใช้คู่กับ PostCSS ได้เลย แต่ใช้อย่างมีสตินะ ถ้าออกแบบดีๆ มันจะไม่รก แต่ถ้ายัดมั่วๆ รกแน่นอน ⭐️
- Twind (https://twind.style) ~ เป็น tailwind in js ลองใช้แล้ว ⭐️
- Stitches (https://stitches.dev) ~ เป็น CSS in JS ที่ API ดูดีมากกก มี TypeScript typings ให้ด้วย แต่เรายังไม่ได้ใช้เยอะเท่า Emotion ไม่แน่ใจว่าเร็วขนาดไหน ⭐️
- Emotion (https://emotion.sh) ~ เป็น CSS in JS ที่เร็วมาก ต้อง DOM Element เยอะมากๆ เท่านั้นถึงจะช้า แต่ก็ใช้อย่างระมัดระวังอยู่ดี ⭐️
Unstyled UI Components
- Headless UI (https://headlessui.com) ~ ใช้มาหลายงาน เวริคมาก ใช้คู่กับ Tailwind ได้เลย ⭐️
- Daisy UI (https://daisyui.com) ~ หลายคนใช้แล้วชอบมาก เพิ่ม component class names เข้ามาใน Tailwind ดูดีมาก เอา tailwind มาใช้ style ได้สบายเลย ส่วนตัวยังไม่ได้เล่น ⭐️
- Radix UI (https://www.radix-ui.com) ~ primitive components ดูดีและครบมาก ยังไม่ค่อยได้ใช้
- Shadcn UI (https://ui.shadcn.com) ~ เป็น component library ที่สร้างมาบน Radix UI ก็อปวางลงโค้ดได้เลย
- Preline UI (https://preline.co) ~ อันนี้เป็น set of UI components แบบ Tailwind UI ที่ก็อปวางไปใช้ ไม่ได้เป็น library
Styled UI Components ~ ส่วนตัวไม่ค่อยได้ใช้พวกนี้ แต่ลอง screen คร่าวๆ แล้วครบมาก และน่าเอาไปใช้ ลองไปเล่นดูเองได้เลย
- Mantine (https://mantine.dev)
- Next UI (https://nextui.org)
- Primer (https://primer.style/react)
- Chakra UI (https://chakra-ui.com)
- Material UI (https://mui.com)
- Joy UI (https://mui.com/joy-ui)
- Ant Design (https://ant.design)
Optimizations
- PartyTown (https://partytown.builder.io) ~ เอาไว้โหลดของหนักๆ ไว้นอก main thread ด้วย web workers ทำให้ UI ไม่ช้า ยังลื่นอยู่ ⭐️
- TanStack Virtual (https://tanstack.com/virtual) ~ ไว้ทำ list virtualization ให้เวลามีของเยอะๆ แล้วมันไม่ต้องโหลด DOM element มาเป็นแสนเป็นล้านอัน ค่อยๆ โหลด
Desktop Apps
- Tauri (https://github.com/tauri-apps/tauri) ~ อย่าใช้ electron เถอะขอร้อง มันกินทรัพยากร มาใช้ Tauri กัน ⭐️
ย้ำอีกรอบว่าอันนี้เป็น personal opinion เรานะฮะ ไปลองเล่นกันได้ จริงๆ ส่วนตัวคิดว่า library ใน React ecosystem มันเริ่มคล้ายคลึงกันมากขึ้นเรื่อยๆ ลู่เข้าสู่จุดที่ optimal สำหรับคนใช้งาน แนะนำว่าอย่าคิดมาก ลองเล่นกับมันดูใน side project แล้วดูว่าอันไหนเหมาะกับงานแบบไหน