Full-Stack Development Has Changed In 2023

Topics

Next.js, Nuxt.js, SvelteKit

• These technologies are built upon React, Vue, and Svelte respectively and allow you to build full-stack applications in one repository
• They are packaged and served by a nodeJS server which allows you to tap into the node side and create node/Express API’s right from the save project
• This also allows the server to render all the content and serve it as static files (if applicable)
• Routing can also be file based like a regular static project running on Apache or Nginx
• Mention limitations (runtime)

Prisma + TRPC + TypeScript

• One thing majorly lacking from the full stack web dev setup has been Types for your data flow. 
• TypeScript is a way for JavaScript to have strong type declaration which essentially means right in your IDE (VSCode) you can assign a variable any time (Number, String, Object, etc) and wherever you use that variable again if you are trying to use for example a number as a String the IDE will catch that and underline it in red. If you hover over it will tell you what is wrong and where to fix it. 
  - It also allows you to have some crazy strong autocompletion

• A typical setup is a database communicated by a backend (think all typical CRUD operations). 
  - Then the Front-end communicates with the backend to send and receive the exact data it needs

• The thing missing from all this is that the Front-end never knows what data is stored in the backend so you just kind of have to try it and see if it fails 
• Now imagine you have separate teams working on both, this can lead to major confusion and even production problems
• Ex. If the backend team removes an attribute in the schema without letting the front-end team know
• To solve this problem we can combine an ORM like Prisma
  - A ORM is a database abstraction layer that allows easier communication with a database
  - Imagine just writing simple JavaScript functions to fetch data instead of SQL queries

• And an API helper library like TRPC
  - Which maps frontend requests to the backend APIs
  - All using TypeScript

• With this stack: Next.js + TRPC + Prisma you can start to build TypeSafe data connections without a ton of custom work
  - TRPC allows for a lot of Type inference from the ORM Schema (Prisma) 
  - So whatever data/types you declare in your schema, those types will flow all the way up to your Front-end without much custom work.