Skip to content

Front End Web Application Design

Jump to bottom
James Brucker edited this page Aug 2, 2025 · 4 revisions

The front-end provides a web interface to the application's services.

I considered REACT and Vue.js for this. Both have their pros and cons. For now, I chose Vue.js due to:

  • cleaner, more component-based code structure
  • easier learning and faster development

Front-end Framework Comparison provides a more detailed comparison of the top contenders.

In addition to Vue.js, consider:

  • Vite for build management and hot reloads
  • Pinia for state management
  • Axios and Vue Router for API interaction
  • Quasar or UniApp for mobile app or Line MiniApp app

Front-end Layout

src/
├── assets/
├── components/
│   ├── AuthForm.vue
│   ├── DataSourceList.vue
│   ├── ReadingList.vue
│   └── ReadingForm.vue
├── pages/
│   ├── LoginPage.vue
│   ├── HomePage.vue
│   └── SourceDetailPage.vue
├── store/
│   ├── auth.js
│   └── sources.js
├── router/
│   └── index.js
├── App.vue
└── main.js

Front-end Framework Comparison

For the Homelog application the choice of frontend framework should be guided by:

  1. Developer productivity and ecosystem
  2. Long-term maintainability
  3. Ease of integration with other platforms (e.g., LINE MiniApp, mobile apps)
  4. Performance and size
  5. Component reusability (for shared codebases)

Candidate Frontend Frameworks

The top contenders are:

Framework Type Language Mobile / MiniApp Path Learning Curve Ecosystem & Tooling Maintainability
Vue 3 + Vite Reactive framework JS/TS Quasar / Capacitor / UniApp Moderate Mature, modern tooling High
React (Next.js) UI Library + Meta-framework JS/TS React Native / Expo / LINE Front-end Framework Moderate–High Vast, excellent tools Very High
SvelteKit Reactive framework JS/TS Svelte Native / Capacitor / LINE Front-end Framework Low–Moderate Smaller, modern Moderate
SolidJS Reactive framework JS/TS Capacitor / UniApp High Niche but performant Moderate
Angular Full framework TS Capacitor / Ionic High Comprehensive High

Detailed Comparison

✅ Vue 3 + Vite

  • Strengths: Elegant syntax, fast startup, Vue Composition API is flexible for complex apps. Vite provides modern build speed.
  • Tooling: Vue CLI / Vite, excellent TypeScript support, Pinia for state management.
  • Cross-platform:
    • Quasar provides SPA, PWA, SSR, Electron, and mobile apps from a single codebase.
    • UniApp supports building LINE MiniApps.
  • Community: Strong community support, especially in Asia and with Quasar/UniApp integration.
  • Best For: Developers looking for simplicity, fast dev experience, and future integration into mobile/MiniApp.

✅ React + Next.js

  • Strengths: Dominant ecosystem, great for SSR and SEO. Extremely flexible.

  • Tooling: Rich ecosystem (React Query, Zustand, etc.), strong support for testing and CI/CD.

  • Cross-platform:

  • Community: Largest and most active.

  • Best For: Teams with experience in React; projects where mobile and web are tightly integrated.

✅ SvelteKit

  • Strengths: Lightweight, reactive, no virtual DOM; excellent developer experience.
  • Tooling: Good but less mature than Vue/React. Built-in SSR.
  • Cross-platform: Less established, but Capacitor or Svelte Native can be used.
  • LINE MiniApp: Needs manual setup.
  • Best For: Performance-critical apps and those with smaller teams.

⚠️ SolidJS

  • Strengths: Extremely fast and lightweight. Fine-grained reactivity.
  • Tooling: Niche; still maturing.
  • Cross-platform: Can work with Capacitor, but no official mobile or MiniApp story.
  • Best For: Developers seeking high performance and minimal runtime overhead.

⚠️ Angular

  • Strengths: Enterprise-scale apps. Everything is built-in: routing, state, forms, etc.
  • Tooling: Very mature, especially for large apps.
  • Cross-platform: Integrates with Ionic for mobile.
  • Best For: Large, structured teams needing end-to-end solutions.

Recommendation

Primary Recommendation: Vue 3 + Vite with Quasar or UniApp

  • Best balance of simplicity, performance, and future portability (including to LINE MiniApp and mobile).
  • Vue's syntax and reactivity model make it easy to manage a time-series data dashboard (like Homelog).
  • Quasar/UniApp allow a unified codebase for web, mobile, and LINE MiniApps.
  • Ideal for solo developers or small teams.

Alternative: React + Next.js if:

  • You or your team already have React/React Native experience.
  • You plan to heavily integrate into React-based ecosystems (e.g., Expo, NextAuth).
  • You want the largest ecosystem and most flexibility at the cost of more complexity.

Next Step

  • For Vue 3, consider using:

    • Vite for fast builds and hot reload
    • Pinia for state management
    • Vue Router and axios for API interaction
    • Quasar or UniApp if targeting mobile/MiniApp

  • For React, use:

    • Next.js for SSR support and routing
    • TanStack Query for data fetching
    • Zustand or Redux Toolkit for state management

Clone this wiki locally