Skip to main content
Advertisement

20.1 Framework Selection Guide

Welcome to the final chapter of the JavaScript curriculum. Thank you for completing the long journey from Ch1 through Ch19. In this chapter, we synthesize everything we have learned to provide practical guidance on which framework to choose in real-world projects and which direction to grow as a developer.

1. At a Glance: Framework and Library Comparison​

The modern front-end ecosystem offers many options. Understanding the strengths and weaknesses of each objectively is the first step toward making the right choice.

1.1 Overview of Major Frameworks​

React

A UI library released by Facebook (now Meta) in 2013. It focuses on the "View" layer and has established itself as the industry standard thanks to its rich ecosystem and community size. Its core concepts are Virtual DOM, component-based architecture, and the Hooks API.

Next.js

A full-stack meta-framework built on React, developed by Vercel. It supports SSR (Server-Side Rendering), SSG (Static Site Generation), ISR (Incremental Static Regeneration), and React Server Components. It is currently the de-facto full-stack solution in the React ecosystem.

Vue

A progressive framework developed by Evan You. It supports both the Options API and the Composition API, and its template syntax is very close to HTML, lowering the barrier to entry. It is especially popular among companies in China and across Asia.

Nuxt

A Vue-based meta-framework that plays a role similar to Next.js. Its highlights include file-based routing, auto-imports, and SSR/SSG support.

Angular

A fully-featured enterprise-grade framework developed by Google. It adopts TypeScript by default and provides dependency injection (DI), a powerful CLI, and a module system out of the box. It has strong conventions that suit large-scale team projects.

Svelte

A compiler-based framework developed by Rich Harris. It outputs optimized vanilla JS at compile time without a runtime, resulting in very small bundles. SvelteKit serves as the full-stack meta-framework.

Solid.js

A Signal-based reactive library developed by Ryan Carniato. It uses JSX syntax similar to React while achieving top-tier performance by manipulating the DOM directly without a Virtual DOM.

Qwik

A next-generation framework developed by Miško Hevery (the original creator of AngularJS) at Builder.io. It uses an innovative concept called "Resumability" to drastically optimize initial loading speed.

1.2 Comprehensive Comparison Table​

ItemReactNext.jsVueNuxtAngularSvelteSolid.jsQwik
TypeLibraryMeta-frameworkFrameworkMeta-frameworkFrameworkCompilerLibraryMeta-framework
Performance (JS benchmark)★★★★☆★★★★☆★★★★☆★★★★☆★★★☆☆★★★★★★★★★★★★★★★
Bundle size~42KBVaries~33KBVaries~180KB+~5KB~7KB~1KB
Learning curveMediumHighLowMediumVery HighLowMediumHigh
Ecosystem size★★★★★★★★★★★★★★☆★★★☆☆★★★★☆★★★☆☆★★☆☆☆★★☆☆☆
Job market★★★★★★★★★★★★★★☆★★★☆☆★★★★☆★★☆☆☆★★☆☆☆★☆☆☆☆
TypeScript support★★★★☆★★★★★★★★★★★★★★★★★★★★★★★★☆★★★★★★★★★★
SSR supportPartialNativePartialNativePartialSvelteKitSolidStartNative
Signal-based❌❌✅ (Vue 3)✅✅ (v17+)✅ (Svelte 5)✅✅
Developed byMetaVercelCommunityCommunityGoogleCommunityCommunityBuilder.io
Initial release20132016201420162016201620212022
Notable usersMeta, NetflixVercel, TikTokAlibaba, LINEManyGoogle, MicrosoftNew York Times--

1.3 Performance in Detail​

Describing performance simply as "fast" or "slow" can be misleading. Performance has multiple dimensions.

Initial Loading Performance (Time to Interactive)

Qwik       ████░░░░░░  Nearly instant (Resumability)
Svelte     ████████░░  Very fast (small bundle)
Solid.js   ███████░░░  Fast (no Virtual DOM)
Vue        █████░░░░░  Average
React      █████░░░░░  Average
Angular    ███░░░░░░░  Slow (large bundle)

Runtime Update Performance (Reactivity)

Solid.js   ██████████  Highest (direct DOM manipulation)
Svelte     █████████░  Very high (compile-time optimization)
Qwik       ████████░░  High
Vue        ███████░░░  Good (Proxy-based)
React      ██████░░░░  Average (Virtual DOM)
Angular    █████░░░░░  Average (Zone.js, improving)

Memory Usage

  • Svelte, Solid.js: Minimal runtime overhead
  • React, Vue: Medium level
  • Angular: Relatively high

2. Recommendations by Project Type​

"Which framework is the best?" is the wrong question. The right question is: "Which framework is best suited for this project?"

2.1 SPA (Single Page Application)​

Recommended order: React > Vue > Solid.js

For a straightforward SPA, all three frameworks are excellent choices.

Choose React when:

  • Your team already has React experience
  • You may later want to expand to Next.js
  • You need a wide range of third-party libraries
  • You need to hire React developers from the job market

Choose Vue when:

  • Your team consists of JavaScript beginners
  • The team is comfortable with HTML template syntax
  • You are targeting an Asian-region service
  • You need a quick prototype

Choose Solid.js when:

  • You require top-tier runtime performance
  • Your team has React experience and can adapt quickly
  • You want to adopt cutting-edge, experimental technology
// React SPA basic structure
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

// Vue SPA basic structure
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/dashboard', component: Dashboard },
  ],
});

2.2 SSR/SEO-Critical Sites​

Recommended order: Next.js > Nuxt > SvelteKit

Projects like blogs, news sites, e-commerce platforms, and marketing sites where search engine optimization and initial loading speed are critical.

Why Next.js is the overwhelming first choice:

  • Fine-grained server/client boundary control with React Server Components
  • Powerful layout system via the App Router
  • Perfect integration with Vercel (Edge Runtime, Image Optimization)
  • Largest community and reference base

Choose Nuxt when:

  • Your team is comfortable with Vue
  • You need to use Vue ecosystem libraries

Choose SvelteKit when:

  • Minimizing bundle size is the top priority
  • You are building a simple, content-focused site
// Next.js App Router - Server Component
// app/blog/[slug]/page.tsx
async function BlogPost({ params }) {
  // This code runs only on the server
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Dynamically generate SEO meta tags with generateMetadata
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.coverImage],
    },
  };
}

2.3 Ultra-High-Performance Apps​

Recommended order: Solid.js > Qwik

Cases where performance is absolutely critical, such as games, real-time data dashboards, and complex interactive tools.

Solid.js advantages:

  • Direct DOM updates via Signals, without Virtual DOM
  • Top rankings in JS framework benchmarks
  • JSX syntax similar to React makes adaptation easy

Qwik advantages:

  • "Resumability" optimizes initial loading dramatically
  • Lazy-loads JS bundles in large apps
  • Extreme reduction in TTI (Time to Interactive)
// Solid.js - Signal-based reactivity
import { createSignal, createMemo } from 'solid-js';

function PerformanceCounter() {
  const [count, setCount] = createSignal(0);
  // createMemo only recalculates when its dependency changes
  const doubled = createMemo(() => count() * 2);

  return (
    <div>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}
// When count() changes, only that specific DOM node updates directly — no Virtual DOM diffing

2.4 Enterprise Large-Scale Projects​

Recommended order: Angular > Next.js

Large-scale enterprise applications where dozens of developers work together.

Why Angular is a good fit:

  • Enforced TypeScript guarantees code consistency
  • Powerful CLI standardizes code generation
  • Dependency injection (DI) maximizes testability
  • Module system isolates code between teams
  • Long-term support from Google with a clear upgrade path

Why Next.js is a good fit:

  • Vast library ecosystem from React
  • Flexible architecture grants team autonomy
  • Full-stack implementation is possible
// Angular - Dependency Injection example
@Injectable({
  providedIn: 'root'  // App-wide singleton
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: string): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

@Component({
  selector: 'app-user-profile',
  template: `<div>{{ user?.name }}</div>`,
})
export class UserProfileComponent {
  user: User | null = null;

  // Automatically injected — replaceable with a Mock in tests
  constructor(private userService: UserService) {
    this.userService.getUser('123').subscribe(u => this.user = u);
  }
}

2.5 Small / Personal Projects​

Recommended order: Svelte > Vue

Personal portfolios, side projects, and quick prototypes.

Why Svelte shines here:

  • Remarkably concise syntax for rapid development
  • Small bundle output with no runtime
  • Intuitive reactivity ($: syntax)
  • Built-in animations and transitions
<!-- Svelte - intuitive syntax -->
<script>
  let count = 0;
  let name = 'World';

  // $ prefix declares a reactive statement
  $: doubled = count * 2;
  $: greeting = `Hello, ${name}!`;

  function increment() {
    count += 1;  // This alone triggers a UI update
  }
</script>

<h1>{greeting}</h1>
<p>Count: {count}, Doubled: {doubled}</p>
<button on:click={increment}>+1</button>
<input bind:value={name} placeholder="Enter your name" />

<style>
  /* Automatically scoped */
  h1 { color: purple; }
</style>

2.6 Full-Stack Development​

Recommended order: Next.js > Nuxt > SolidStart > QwikCity

Integrating both front-end and back-end into a single project.

Meta-frameworkBaseStrength
Next.jsReactMost mature, RSC, Server Actions
NuxtVueVue ecosystem, auto-imports
SolidStartSolid.jsPeak performance, experimental
QwikCityQwikResumability, minimal JS
SvelteKitSvelteConciseness, great for small projects
RemixReactWeb standards-first, progressive enhancement
// Next.js Server Actions - full-stack integration
// app/actions.ts
'use server';

import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  await db.post.create({
    data: { title, content }
  });

  revalidatePath('/blog');
}

// app/blog/new/page.tsx
export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="content" placeholder="Content" />
      <button type="submit">Publish</button>
    </form>
  );
}
// Call server functions directly — no separate API route needed!

3. Learning Paths by Developer Type​

3.1 Complete Beginners​

If you are not yet comfortable with JavaScript, this sequence is recommended.

Step 1: HTML/CSS Basics (2–4 weeks)
   └── Understand web page structure
   └── Basic styling

Step 2: JavaScript Basics (4–8 weeks)
   └── Variables, functions, conditionals, loops
   └── DOM manipulation
   └── Async programming (Promise, async/await)

Step 3: Vue.js Introduction (4–6 weeks)  ← Easiest starting point
   └── Start with Options API
   └── Understand the component concept
   └── Transition to Composition API

Step 4: Nuxt.js (4–6 weeks)
   └── SSR/SSG concepts
   └── File-based routing

Step 5: Transition to React (optional)
   └── With Vue experience, React takes about 2–3 weeks to pick up

Why Vue is recommended for beginners:

  • HTML template syntax feels natural
  • Intuitive directives like v-if, v-for, @click
  • Clear and readable error messages
  • Official documentation has excellent translation quality

3.2 Experienced JavaScript Developers​

Developers confident in JavaScript who want to learn a framework.

Option A: React → Next.js (career-first)
   └── React Hooks, Context, Zustand
   └── Next.js App Router
   └── React Server Components
   └── Estimated time: 3–4 months

Option B: Vue → Nuxt (fast productivity)
   └── Composition API, Pinia
   └── Nuxt file-based routing
   └── Estimated time: 2–3 months

Option C: Solid.js (performance enthusiasts)
   └── Understanding Signal reactivity
   └── SolidStart full-stack
   └── Estimated time: 2–3 months

3.3 Backend Developers Entering Front-End​

Developers with experience in Python, Java, Go, or similar languages who want to learn front-end development.

Recommended path: Angular or Next.js

Why Angular is recommended:
- Default TypeScript enforcement is similar to backend development style
- Dependency injection pattern is analogous to Spring
- Strong conventions reduce "how should I do this?" decisions
- RxJS Observables are similar to the Stream concept

Why Next.js is recommended:
- Writing server-side code feels natural
- API Routes let you leverage back-end experience
- Type safety when used with TypeScript
// Angular's Service + DI pattern — similar to Spring
// Spring: @Service public class UserService { ... }
// Angular:
@Injectable({ providedIn: 'root' })
export class UserService {
  private users: User[] = [];

  // Spring: @Autowired HttpClient httpClient;
  constructor(private http: HttpClient) {}

  // Spring: public List<User> findAll() { ... }
  getAll(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

3.4 React Developers Exploring Other Frameworks​

Experienced developers who know React well and want to broaden their horizons.

Exploring Solid.js (highly recommended):

  • JSX syntax is nearly identical to React
  • Signal-based reactivity resolves "why does it behave this way?" questions about React
  • You can write a basic app within 1–2 weeks

Exploring Svelte:

  • Experience a completely different paradigm
  • Understand the compiler-based approach
  • Enjoy the pleasure of concise syntax

Exploring Vue:

  • Composition API is conceptually similar to React Hooks
  • Explicit reactivity with ref, computed, and watch

Exploring Qwik:

  • The "Resumability" concept provides a new way of thinking
  • Leads the direction of future web performance optimization

4. Framework Trend Analysis: 2025–2026​

4.1 The Spread of React Server Components​

React Server Components (RSC) are not just a new feature — they represent a paradigm shift in front-end development.

The core change RSC brings:

// Traditional approach — data fetching on the client
function OldProductPage({ id }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(r => r.json())
      .then(setProduct);
  }, [id]);

  if (!product) return <Loading />;
  return <ProductDetail product={product} />;
}

// RSC approach — direct DB query on the server
// This component contributes zero bytes to the client bundle!
async function NewProductPage({ id }) {
  const product = await db.product.findUnique({ where: { id } });
  // Direct DB access, no fetch needed, zero JS bundle contribution

  return <ProductDetail product={product} />;
}

What RSC changes:

  • Explicit declaration of server/client boundaries ('use client', 'use server')
  • Accessing server data without a separate API layer
  • Dramatic reduction in JavaScript bundle size
  • Elimination of waterfall requests

4.2 The Mainstreaming of Signal-Based Reactivity​

One of the biggest trends from 2023 to 2025 is the rise of Signals into the mainstream.

What is a Signal?

A Signal is a reactive container that wraps a value. When the value changes, only the UI that depends on that value updates precisely. No unnecessary re-renders.

// Solid.js Signal
const [count, setCount] = createSignal(0);
// count is a function: count() === 0
// Only Signal subscribers update

// Vue 3 ref (internally equivalent to a Signal)
const count = ref(0);
// count.value === 0

// Angular 17+ Signal
const count = signal(0);
// count() === 0, count.set(1)

// Svelte 5 Runes
let count = $state(0);
// $state is rewritten on Signal-based internals

// Common ground: fine-grained reactivity — no Virtual DOM diffing needed

Why Signals became mainstream:

  • Performance limitations of React's Virtual DOM approach became apparent
  • Solid.js benchmark results proved the effectiveness of Signals
  • Vue, Angular, and Svelte 5 all adopted Signals
  • A JavaScript built-in Signal proposal is progressing in TC39

4.3 Meta-Frameworks Going Full-Stack​

As of 2025, pure SPAs are declining and meta-frameworks have become the default.

Meta-framework trends:

TrendDescription
File-based routing standardizedNext.js, Nuxt, SvelteKit, SolidStart all use file-based routing
Server ActionsCall server functions directly without a separate API
Edge RuntimeOptimized runtime executing at edge servers
Streaming SSRStream HTML from the server in chunks
Incremental Static RegenerationRegenerate pages in the background after build

4.4 The Vite Ecosystem Unification​

The era of Webpack is waning, and Vite has become the standard build tool for front-end development.

Before 2020: Webpack dominates
2021: Vite launches (developed by Evan You)
2022–2023: Rapid transition
2024: De-facto standard

Frameworks using Vite:
- Vue (Vite's developer is Vue's developer)
- SvelteKit
- SolidStart
- QwikCity
- React (Vite template provided; Next.js uses Turbopack)
- Angular (Vite support from v17+)

Vite's strengths:

  • Dev server starts instantly via native ESM
  • Dramatically fast HMR (Hot Module Replacement)
  • Optimized production builds via Rollup
  • Rich plugin ecosystem

5. Practical Selection Checklist​

Answer the following questions when choosing a framework.

□ Who on the team has experience with which framework?
  → If there is: that framework is the top priority

□ What is the team size?
  → 1–3 people: Svelte, Vue, or React all work
  → 4–10 people: React/Next.js or Vue/Nuxt recommended
  → 10+ people: Angular or Next.js + strong conventions

□ Are there plans to hire?
  → Yes: React/Next.js (largest developer pool)
  → Specialized hiring is possible: freely choose

□ How proficient is the team with TypeScript?
  → Low: Vue (Options API) or React (JS)
  → High: Angular, Next.js, SolidStart recommended

5.2 Project Characteristics​

□ Is SEO critical?
  → Yes: Next.js, Nuxt, SvelteKit (SSR/SSG required)
  → No: Any framework works

□ Is initial loading speed a key metric?
  → Very important: Qwik (Resumability), SvelteKit (small bundle)
  → Important: Next.js SSG, Nuxt SSG
  → Average: React SPA, Vue SPA

□ Are there frequent real-time updates? (dashboards, games, etc.)
  → Yes: Solid.js, Svelte (top-tier reactive performance)
  → No: Any framework is sufficient

□ Is a mobile app also needed?
  → Yes: React (React Native available)
  → No: Freely choose

□ What is the expected project lifespan?
  → 5+ years: Angular (long-term support guaranteed), Next.js
  → 1–3 years: Any option works
  → Short-term/prototype: Svelte, Vue (fast development)

5.3 Business Requirements​

□ Is the deadline tight?
  → Yes: Whatever the team knows best, or Vue/Svelte
  → No: Invest time in finding the optimal choice

□ Is server operating cost sensitive?
  → Yes: Prioritize SSG (static files)
         SvelteKit, Next.js SSG, Nuxt SSG
  → No: SSR is also freely available

□ Are there strict compliance/security requirements?
  → Yes: Angular (enterprise-verified, clear patterns)
  → Normal: Any framework works

□ Is it a global service?
  → Yes: Next.js (Vercel Edge Network), Nuxt
  → Asia-focused: Vue/Nuxt (Chinese ecosystem)

6. Learning Resources​

6.1 Official Documentation​

FrameworkOfficial DocsKorean Support
Reactreact.devPartial
Next.jsnextjs.org/docsPartial
Vuevuejs.orgFull
Nuxtnuxt.com/docsPartial
Angularangular.devPartial
Sveltesvelte.devNone
SvelteKitkit.svelte.devNone
Solid.jssolidjs.comNone
Qwikqwik.devNone

Tips for learning from official docs:

  • Start with the tutorial section (most provide interactive examples)
  • Refer to the API reference only when needed
  • Check migration guides to understand version changes

Free resources:

  • MDN Web Docs (developer.mozilla.org): The reference for JavaScript and Web APIs
  • The Odin Project: Open-source full-stack curriculum
  • freeCodeCamp: Step-by-step project-based learning
  • web.dev (Google): Web performance and accessibility

Paid / Premium:

  • Udemy: Practice-focused, frequent discounts
  • Frontend Masters: Deep technical courses, expert instructors
  • Egghead.io: Short, focused lessons

6.3 Communities​

CommunityLanguageFeature
Stack OverflowEnglishBest for technical Q&A
Reddit r/reactjs, r/vuejsEnglishReal-world trends, discussion
Discord (official per framework)EnglishReal-time communication
Korean React Community (Facebook)KoreanDomestic job info
KakaoTalk open chatsKoreanQuick Q&A
GitHub DiscussionsEnglishLibrary issues

Community participation tips:

  • Search official docs and Stack Overflow before asking
  • Attach a minimal reproducible example (MRE) to your question
  • Start contributing to open source by filing issues
  • Share problems you have solved on a blog or in the community

7. Full Curriculum Review: Ch1–Ch19 Summary Table​

Let's look back at the journey so far. Here is a one-line summary of the key takeaway from each chapter.

ChapterTitleKey One-Line Summary
Ch1JavaScript BasicsVariables, types, operators — build the syntactic foundation of JS
Ch2Control Flow & FunctionsConstruct logic with conditionals, loops, and function declarations/expressions
Ch3Arrays & ObjectsManipulate data with map, filter, reduce, and destructuring
Ch4Async & PromiseEscape callback hell and control asynchronous flow with async/await
Ch5DOM & EventsManipulate the browser DOM and handle user events
Ch6ES6+ SyntaxMaster modern JS syntax: arrow functions, classes, modules, spread
Ch7React BasicsBuild declarative UIs with components, props, state, and JSX
Ch8React HooksComplete functional components with useState, useEffect, useMemo
Ch9State ManagementDesign app-wide state with Context, Zustand, and Redux
Ch10Next.jsBuild full-stack apps with App Router, SSR/SSG, and React Server Components
Ch11Vue.jsUnderstand the Vue ecosystem with Composition API, Pinia, and Options API
Ch12NuxtExperience SEO and full-stack development with a Vue-based meta-framework
Ch13AngularDesign large-scale enterprise apps with TypeScript, DI, and RxJS
Ch14SvelteBuild high-performance UIs with compiler-based concise syntax
Ch15SvelteKitComplete Svelte full-stack with file-based routing and load functions
Ch16TypeScriptCatch bugs early with static types and raise code quality
Ch17TestingWrite trustworthy code with Jest, Testing Library, and Playwright
Ch18Performance OptimizationBuild fast apps with bundle analysis, code splitting, and Core Web Vitals
Ch19QwikPush JS lazy-loading to the extreme with Resumability
Ch20Practical GuideSynthesize all knowledge to make the right choices and decide your growth path

8. Closing: A Message on Growing as a Developer​

8.1 Frameworks Are Tools​

To everyone who has completed this curriculum, here is the most important message.

You have not just learned frameworks — you have learned how to think.

While learning React, you came to understand what declarative UI means. While learning Angular, you grasped why dependency injection and modularization are necessary. Through Solid.js and Qwik, you saw a fundamentally different approach to performance.

Five years from now, some of these frameworks may look different from today. Some will grow further; others may give way to something new. But the component design, reactivity principles, performance mindset, and full-stack architecture you have learned form a foundation that will let you adapt quickly to any new tool that comes along.

8.2 The Attitude of Continuous Learning​

Start by building something small.

The best learning comes not from reading code, but from making things. Start a small project with the framework you learned today. It does not have to be perfect. It just has to work.

The journey of a great developer:
1. Follow a tutorial → "It works!"
2. Modify it slightly → "Why isn't this working?"
3. Search and try again → "Ah, so that's why!"
4. Build from scratch → "Now I understand"
5. Explain it to someone else → "It's truly mine now"

Participate in the community.

Studying alone is efficient, but the community gives you direction. Write a blog, contribute to open source, form a study group. Teaching is the best form of learning.

8.3 Next Learning Directions​

Having completed this curriculum, you are ready to move on to the next stage.

Things you can start right away:

Advanced TypeScript

// Generics, conditional types, utility types
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};

type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

// In practice: ensuring API response type safety
async function fetchUser(id: string): Promise<ApiResponse<User>> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

Advanced Testing

// Vitest + Testing Library in practice
import { render, screen, userEvent } from '@testing-library/react';
import { vi } from 'vitest';

test('API is called when the login form is submitted', async () => {
  const mockLogin = vi.fn().mockResolvedValue({ token: 'abc' });

  render(<LoginForm onLogin={mockLogin} />);

  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
  await userEvent.type(screen.getByLabelText('Password'), 'password123');
  await userEvent.click(screen.getByRole('button', { name: 'Login' }));

  expect(mockLogin).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

Advanced Web Performance

// Measuring Core Web Vitals
import { onLCP, onFID, onCLS } from 'web-vitals';

onLCP(metric => {
  console.log('LCP (Largest Contentful Paint):', metric.value);
  // Good: < 2.5s, Needs improvement: 2.5–4s, Poor: > 4s
});

onFID(metric => {
  console.log('FID (First Input Delay):', metric.value);
  // Good: < 100ms
});

onCLS(metric => {
  console.log('CLS (Cumulative Layout Shift):', metric.value);
  // Good: < 0.1
});

Back-End Integration

  • Node.js + Express / Fastify
  • Prisma ORM + PostgreSQL
  • tRPC for type-safe APIs
  • Docker + deployment

Mobile Expansion

  • React Native (for those with React experience)
  • Expo (simplify cross-platform development)
  • Capacitor (web app → native app)

8.4 The Future of the JavaScript Ecosystem​

In 2025–2026 and beyond, the JavaScript ecosystem is evolving in the following directions.

Server Components Becoming Universal All meta-frameworks are adopting the server component concept. The boundary between server and client becomes granular at the component level.

Integration with AI Tools AI coding tools like GitHub Copilot, Cursor, and Claude are being deeply integrated into development workflows. Developers who use AI effectively will have a significant productivity advantage.

The Rise of Edge Computing Serverless and edge runtimes are becoming commonplace. Vercel, Cloudflare Workers, and Deno Deploy are democratizing edge computing.

The Maturation of WebAssembly WASM is being used more and more for complex calculations, image/video processing, and games. Code written in Rust or Go runs in the browser.

JavaScript Itself Evolving TC39 proposals continue to be standardized. The Temporal API (date/time), Signals (reactivity), and Pattern Matching are being integrated at the language level.

8.5 A Final Word​

Heartfelt congratulations to everyone who has completed this curriculum from Ch1 all the way to Ch20.

JavaScript is not just a programming language. It is a remarkable ecosystem that started in the browser and has expanded to servers, mobile, desktop, and IoT. You now have the map and compass to navigate that ecosystem with confidence.

Remember:

  • Working code comes before perfect code
  • Fundamentals outlast the latest trends
  • Knowledge you share is more valuable than knowledge you keep to yourself
  • You do not have to be perfect right now. Growing 1% every day is enough

Your first app, your first open-source contribution, your first job, your first side project — all those firsts are waiting for you.

Enjoy the code. And keep building.

Appendix: Quick Framework Selection Flowchart​

Starting a new project
      │
      ├─ SSR/SEO needed? ──────── Yes ──→ Next.js (React team) / Nuxt (Vue team)
      │
      ├─ Team size 10+? ───────── Yes ──→ Angular (enterprise)
      │
      ├─ Performance top priority? Yes ──→ Solid.js (runtime) / Qwik (initial load)
      │
      ├─ Need fast development? ── Yes ──→ Svelte / Vue
      │
      ├─ Career/hiring priority? ─ Yes ──→ React / Next.js
      │
      └─ Other ─────────────────────────→ React (safest choice)

We hope this guide helps you make the right framework choice and grow as a developer. Congratulations once more on completing the JavaScript Curriculum, Ch1 through Ch20!

Advertisement
Advertisement