AI-Native വെബ് ഡെവലപ്മെന്റിനായുള്ള ടെക്-സ്റ്റാക്ക്
Claude Code പോലുള്ള AI ഏജന്റുകൾ നിങ്ങൾ സോഫ്റ്റ്വെയർ നിർമ്മിക്കുന്ന രീതിയെ മാറ്റുന്നു. നിങ്ങൾക്ക് മുമ്പത്തേക്കാൾ വേഗത്തിൽ മുന്നേറാൻ കഴിയും. എന്നാൽ വേഗത പലപ്പോഴും കുഴപ്പപ്പെട്ട കോഡുകളിലേക്ക് (messy code) നയിച്ചേക്കാം. വളർച്ച ലക്ഷ്യമിടുമ്പോൾ നിങ്ങളുടെ പ്രോജക്റ്റ് ലളിതവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതും (maintainable) ആയിരിക്കണം.
വേഗത്തിൽ നിർമ്മിക്കാനും എളുപ്പത്തിൽ സ്കെയിൽ ചെയ്യാനും (scale) ഞങ്ങൾ ഉപയോഗിക്കുന്ന സ്റ്റാക്ക് ഇതാ.
AI ഏജന്റ് സ്ട്രാറ്റജി ഓവർ എഞ്ചിനീയറിംഗ് (overengineer) ഒഴിവാക്കുക. ആയിരക്കണക്കിന് വരികളുള്ള ഉപയോഗശൂന്യമായ കോഡുകൾ ചേർക്കാൻ AI എളുപ്പമാക്കുന്നു.
- നിങ്ങളുടെ AGENTS.md അല്ലെങ്കിൽ CLAUDE.md ഫയലുകൾ ചെറുതായി സൂക്ഷിക്കുക.
- ഏജന്റുകൾക്ക് പലപ്പോഴും തെറ്റുപറ്റുന്ന പ്രോജക്റ്റ് നിയമങ്ങൾ മാത്രം ഉൾപ്പെടുത്തുക.
- ആവശ്യമുള്ളപ്പോൾ മാത്രം പ്രത്യേക സ്കില്ലുകൾ (skills) ഇൻസ്റ്റാൾ ചെയ്യുക.
- കോൺടെക്സ്റ്റ് (context) വൃത്തിയായി സൂക്ഷിക്കാൻ സംഭാഷണം അവസാനിക്കുമ്പോൾ സ്കില്ലുകൾ നീക്കം ചെയ്യുക.
ഫ്രണ്ട്എൻഡും UI-യും
- Next.js: App Router ഉപയോഗിക്കുക. മികച്ച SEO-യ്ക്കും വേഗതയ്ക്കുമായി ഇത് സെർവർ-സൈഡ് റെൻഡറിംഗ് (server-side rendering) കൈകാര്യം ചെയ്യുന്നു.
- React: ഫീച്ചറുകൾ വേഗത്തിൽ ചേർക്കുന്നതിനുള്ള ഏറ്റവും മികച്ച ഇക്കോസിസ്റ്റം (ecosystem).
- MUI (Material UI): Figma-യിൽ എല്ലാം ആദ്യം മുതൽ ഡിസൈൻ ചെയ്യുന്നത് ഒഴിവാക്കാൻ ഞങ്ങൾ ഇത് ഉപയോഗിക്കുന്നു. ഇത് മാസങ്ങളോളം നീണ്ടുനിൽക്കുന്ന ജോലി ലാഭിക്കുന്നു.
- Zod, React Hook Form: സങ്കീർണ്ണമായ ഫോമുകളും വാലിഡേഷനും (validation) കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഏറ്റവും മികച്ച കോംബോ.
ബാക്കെൻഡും ഡാറ്റയും
- Firebase: ഓതന്റിക്കേഷൻ (authentication), സ്റ്റോറേജ്, ഡാറ്റാബേസ് (Firestore) എന്നിവയ്ക്കായി ഞങ്ങൾ ഇത് ഉപയോഗിക്കുന്നു.
- Firestore Rules: ഇത് എല്ലാ പെർമിഷനുകളും (permissions) ഒരു ഫയലിൽ കൈകാര്യം ചെയ്യുന്നു. ആവർത്തന സ്വഭാവമുള്ള സെക്യൂരിറ്റി കോഡുകളുടെ ആവശ്യം ഇത് ഒഴിവാക്കുന്നു.
- Firebase Functions: സങ്കീർണ്ണമായ ലോജിക്കിനായി ഇവ ഉപയോഗിക്കുക. നിങ്ങളുടെ ഫ്രണ്ട്എൻഡ് ലളിതമായും (dumb) ബാക്കെൻഡ് ബുദ്ധിപരമായും (smart) നിലനിർത്തുക.
- Vercel AI SDK: നിങ്ങളുടെ ആപ്പിലേക്ക് വിവിധ AI മോഡലുകൾ എളുപ്പത്തിൽ സംയോജിപ്പിക്കാനുള്ള മാർഗ്ഗം.
ടെസ്റ്റിംഗും ഡിപ്ലോയ്മെന്റും
- Integration Tests: ബാക്കെൻഡ് സർവീസ് ലെയർ ടെസ്റ്റ് ചെയ്യാൻ ഞങ്ങൾ Jest ഉപയോഗിക്കുന്നു. ചെറിയ യൂണിറ്റ് ടെസ്റ്റുകൾക്ക് പകരം ഭാഗങ്ങൾ എങ്ങനെ ഒന്നിച്ച് പ്രവർത്തിക്കുന്നു എന്നതിലാണ് ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്.
- TypeScript: സുരക്ഷിതമായ റീഫാക്റ്ററിംഗിന് (refactoring) ഇത് അത്യാവശ്യമാണ്.
- Vercel: ഇൻസ്റ്റന്റ് പ്രൊഡക്ഷൻ, പ്രിവ്യൂ ഡിപ്ലോയ്മെന്റുകൾ നൽകുന്നതിനായി ഇത് GitHub-മായി ബന്ധിപ്പിക്കുന്നു.
- PostHog: അനലിറ്റിക്സ്, സെഷൻ റീപ്ലേകൾ, എറർ ലോഗുകൾ എന്നിവയ്ക്കായി ഇത് ഉപയോഗിക്കുക.
- Resend, react-email: ഇമെയിലുകൾ React കംപോണന്റുകളായി എഴുതാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
ഈ ഘടനയിലുള്ള ഒരു ടെംപ്ലേറ്റ് പ്രോജക്റ്റ് GitHub-ൽ ലഭ്യമാണ്.
Source: https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
Optional learning community: https://github.com/MartinXPN/nextjs-firebase-mui-starter