Fullstack Development

Stack Overflow 2024 Developer Survey #

• Developer types
• Databases
• Web framework
• Tools

Fullstack Landscape

Diagram

Inspired from this VDO.

Case Study

How to over-engineer "todo" apps

5 Ways to make Todo apps

• Multi-Page Applications (MPA)
• Single-Page Applications (SPA)
• React Server Components (RSC)
• RSC + Client Components (React's New Architecture)
• HTMX

Round 1

Multi-Page Application (MPA) vs Single-Page Application (SPA)

Multi-page application

• Loads a new page every time you perform an action.
• Traditional web applications.
• Use server-side technologies
  • PHP, Ruby on Rails, ASP.NET, Java, and Node JS.
• Can include JavaScript (script) for client-side interactivity

Todo app (MPA)

• Express JS + Pug (renderer)

Get started

• git clone https://github.com/fullstack-68/landscape-mpa.git mpa
• cd mpa
• pnpm install
• pnpm run build
• pnpm run start

Endpoint

./src/index.ts

app.get("/", async (req, res) => {
  const message = req.query?.message ?? "";
  const todos = await getTodos();
  // Output HTML
  res.render("pages/index", {
    todos,
    message,
    mode: "ADD",
    curTodo: { id: "", todoText: "" },
  });
});

Renderer

./view/pages/index.pug

body
    main(class="container")
        a(href="/")
            h1 Todo (MPA)
        div(id="todoform")
            include ../components/inputform.pug
        div(id="todolist")
            include ../components/todolist.pug

Use incognito mode to avoid loading chrome extensions.

Note

• Every button is wrapped in a separate form
  • Need to trigger different endpoints.
• Need to use input(type="hidden) to encode additional information.

form(action="/delete" method="POST" style="display: contents")
  input(type="hidden" value=`${todo.id}` name="curId")
  button(type="submit" class="contrast" style="margin-bottom: 0") 
form(action="/edit" method="POST" style="display: contents")
  input(type="hidden" value=`${todo.id}` name="curId")
  button(type="submit" class="secondary" style="margin-bottom: 0") 

Single-page application

• Single-page application
  • Loads a single HTML page and dynamically updates the content as the user interacts with the app.
• Use frontend and backend frameworks separately.

Todo app (SPA)

• Express JS + React

Get started

• git clone https://github.com/fullstack-68/landscape-spa.git spa
• Backend
  • cd spa/backend
  • pnpm install
  • pnpm run build
  • pnpm run start

Get started (cont.)

• Frontend
  • cd spa/frontend
  • pnpm install
  • pnpm run build
  • pnpm run preview

Global store

• zustand
  

App comparison (UX)

Item	MPA	SPA
No page-refresh
Spinner
Element disabling

App comparison (technical)

Item	MPA	SPA
Amount of JS loaded
HTML content (SEO)
State in URL

DX

Item	MPA	SPA
Number of frameworks	1	2
Complexity	Less	More
Lines of code	Less	More
Type Safety	Less	More
Hot reloading	Partial	Full

Amount of Codes

Dir	# Files	Total Lines
MPA
./src	2	161
./views	3	42
SPA
./backend/src	2	144
./frontend/src	10	360

Total: MPA=203, SPA=504

Round 2

Back to the server. (Next JS)

Server-Side Rendering (SSR)

• SSR
  • Generating the HTML for a web page on the server before sending it to the client’s browser.
• CSR (Client-Side Rendering)
  • Browser loads a minimal HTML file and fetches and renders the content using JavaScript.
• See this explanation.

Next JS

• V12
  • "Full SSR" (with DB query) can only be done through top-level component (page level).
  • Use getServerSideProps function.
• V13 (and above)
  • Full SSR can be done through a special components called
    • React Server Components.

Server component

• Run exclusively on the server.
• Generate static HTML.
  • No interactivity (event handlers)
• It's code isn't included in the JS bundle.
  • Never re-render.
  • Output is static without change in router level.
• No hook
  • useState, useEffect

Server component

Link

Client component

• The "standard" React components we're familiar with.
• Client Components render on both the client and the server.
  • Still have SSR.

	Render on server?	Render on client?
Server Component
Client Component

Why server component?

• First "official" way to run server-exclusive code in React.
• Performance
  • Server Components don't get included in our JS bundles.
  • Faster load time
  • Real use-case
• Less complications
  • Dependency arrays, stale closures, memoization, ...
  • (All of these are caused by things changing.)

Missing piece

React

If RSC output is static, how can I mutate data then?

Missing piece

React

If RSC output is static, how can I mutate data then?

PHP

I had solved this problem before you were born, kid.

Link

React's new architecture

• Client component
• Server component
• Server action
  • Asynchronous functions that are executed on the server.
  • Alternative to API routes.

Server Action vs API Route

Form action

• No need to define new endpoints.
• Accept form-data
• Colocation
  • Type safe
  • Can "bind" data that is passed thought components' props.
• Can trigger RSC update without refreshing page.

Todo App (RSC Only)

• git clone https://github.com/fullstack-68/landscape-rsc-only.git rsc-only
• cd rsc-only
• pnpm install
• pnpm run build
• pnpm run start

No blank HTML

Page refresh is back

Server components

./src/app/page.tsx

export default async function Home({ params, searchParams }: PageProps) {
  const todos = await getTodos();
  //...
  return <main className="container">...</main>;
}

• Async function
• Data fetching without useEffect.
  • It only runs once on the server. (Try console.log)
• Returns HTML to client.

Server Action

./src/components/FormInput.tsx (Slightly modified)

export const FormInput: FC<Props> = async ({ message, mode, curId }) => {
  async function actionCreateTodo(formData: FormData) {
    "use server";
    const todoText = formData.get("todoText") as string; // Receive form-data
    await createTodos(todoText); // DB stuff
    redirect("/?message=&curId=&mode=ADD"); // Update content without refreshing page (Nice!)
  }

  return (
    <form action={actionCreateTodo} style={{ display: "contents" }}>
      <input type="hidden" name="curId" value={curId ?? ""} />
      <button type="submit">{mode === "ADD" ? "Submit" : "Update"}</button>
    </form>
  );
};

No need to create endpoint manually.

Automatic binding

./src/components/TodoList.tsx

• "Binding" todo in the server action
• No need to use form-data. Type safety!
• No need to include hidden input field.

Automatic binding

const ButtonDelete: FC<{ todo: Todo }> = ({ todo }) => {
  async function actionDeleteTodo(formData: FormData) {
    "use server";
    await deleteTodo(todo.id); //
    revalidatePath("/");
  }
  return (
    <form action={actionDeleteTodo}>
      <button type="submit"></button>
    </form>
  );
};

Side note

(for my future self)

• revalidatePath
  • Used when there is not change in url (params).
• redirect
  • Used when you need to change the url (change client states in the url).

Missing UX/DX

• UX
  • No loading spinner
• DX
  • Client state is accessed from url. (searchParam in page.tsx)
    • Not type safety. Need validation.
  • Way too complicated (compared with MPA)

Hybrid (RSC + RCC)

• git clone https://github.com/fullstack-68/landscape-hybrid.git rsc-client
• cd rsc-client
• pnpm install
• pnpm run build
• pnpm run start

Structure

Client component

./src/components/TodoList.tsx

"use client";  // Mark component as client component
//...
export const TodoList: FC<Props> = ({ todos }) => {
  const { curTodo } = useStore((state) => state);
  return (
    <>
      {...}
    </>
  );
};

SSR

SSR

./src/app/page.tsx

export default function Home({ params, searchParams }: PageProps) {
  const todosPromise = getTodos();
  return (
    <main className="container">
      <a href="/">
        <h1>Todo (RSC + RCC)</h1>
      </a>
      <FormInput />
      <Suspense fallback={<div>Loading...</div>}>
        <TodoList todosPromise={todosPromise} /> // Inject data to client
        component (SSR)
      </Suspense>
      <Spinner />
    </main>
  );
}

No page refresh

Interactivity

• Elements disabled
• Spinner

Server action in a separate file

./src/app/actionAdnDb.ts (Slightly modified)

"use server"; // Mark functions in this file as server actions.
//...
export async function actionCreateTodo(todoText: string) {
  //...
  await createTodos(todoText);
  //...
  revalidatePath("/");
  return { message: "" };
}

• You can import this function into client component.
• You don't have to use form-data anymore.
• You can return data back to client component.

Server action in client component

./src/components/FormInput.tsx

const ButtonSubmit: FC<PropsButtonSubmit> = ({ setMessage }) => {
  // ...
  function handleClick() {
    startTransition(async () => {
      const res = await actionCreateTodo(inputText);
      setMessage(res.message);
      setInputText("");
    });
  }
  // ...
  return <button onClick={handleClick}>Submit</button>;
};

• I can trigger server action anywhere, not just form.

Type safety

./src/components/FormInput.tsx

• You get type safety from client component to database levels .

Line of codes

Type	# Line
MPA	203
SPA	504
RSC	292
RSC + RCC	527

(In Next JS project, I counted src dir.)

Have we gone too far?

Round 3

Back to basic

HTMX

What exactly is HTMX?

Small JS library that can swap parts of UI with HTML response from a server.

2023 JavaScript Rising Stars

Get started

• git clone https://github.com/fullstack-68/landscape-htmx.git htmx
• cd htmx
• pnpm install
• pnpm run build
• pnpm run start

Todo app

• The stack is very similar to MPA (express + pug).
• SSR enabled (duh!)
• No reloading
• Spinner enabled
• Form input disabled during submission.

Code count

Type	# Line
MPA	203
SPA	504
RSC	292
RSC + RCC	527
HTMX	259

Take that NextJS!

In addition

• Hypermedia as the Engine of Application State (HATEOAS)

• HTMX + Alpine.js

Summary