Web Application Frontend Development Workshop - up1/training-courses GitHub Wiki

Web Application Frontend Development Workshop

  • 2 days

Focus

  • Update web framework and technologies
  • Solving common "pain points" in web development with modern frameworks, libraries, and tooling

Target Audience

  • Developers with foundational knowledge of HTML, CSS, and JavaScript who want to modernize their frontend stack

Outline

  • The 2025 Frontend Landscape
    • Framework Updates & Trends
      • Big-three :: React, Vue, and Angular
      • New-wave :: Svelte and SolidJS
      • Full-Stack Frameworks :: Next.js, Nuxt, SvelteKit
  • Pain Points
    • Slow build tools and complex configuration
    • CSS complexity, scoping issues, CSS-in-JS performance overhead
    • State management (client and server)
    • Data fetching
    • Manage Forms & Validation
  • Workshop :: How to fix ?
    • Build time
    • CSS
    • State management
    • Data fetching
    • Manage Forms & Validation
  • Frontend Performance
    • Large initial bundle size
    • Slow app startup
    • Tools
      • Core Web Vitals vs Lighthouse vs Page Speed Insights
  • Workshop :: build application with technology stack (modern)
    • Example
      • Framework: React
      • Build Tool: Vite
      • Styling: Tailwind CSS
      • Client State: Zustand
      • Server State: TanStack Query
      • Forms: React Hook Form + Zod