Skip to content

Front End Web Application Design

Jump to bottom
James Brucker edited this page Aug 4, 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

frontend/
├── .gitignore
├── index.html                # Main landing page and Vue mount point (`<div id="app"></div>`)
├── package.json              # Required Javascript packages
├── README.md                 # README for front-end web app
├── vite.config.ts            # Configuration for Vite build tool, of course
├── jsconfig.json             # Optional IDE support, such as aliases
├── postcss.config.ts         # If using PostCSS/Tailwind (optional)
└── tailwind.config.ts        # If using Tailwind CSS (optional)
├── public/                   # Static assets (optional)
├── src/                      # Application source code
    ├── assets/
    ├── components/
    │   ├── AuthForm.vue
    │   ├── DataSourceList.vue
    │   ├── ReadingList.vue
    │   └── ReadingForm.vue
    ├── pages/
    │   ├── LoginPage.vue
    │   ├── HomePage.vue or DashboardPage.vue
    │   ├── ReadingsPage.vue
    │   └── SourceDetailPage.vue
    ├── store/
    │   ├── auth.ts
    │   └── sources.ts
    ├── router/
    │   └── index.ts
│   ├── services/
│   │   └── api.ts
    ├── App.vue
    └── main.ts

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 MVC framework TS Capacitor / Ionic High Comprehensive High

✅ 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.
  • Weakness: Complexity and size.
  • 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

First Choice: Vue 3 + Vite with Quasar or UniApp

  • 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.
  • Good for solo developers or small teams.

Second Choice: React + Next.js

  • Extensive developer ecosystem.
  • Proven ability to construct cross-platform mobile apps and Line MiniApps.
  • Potential to integrate into React-based ecosystems (e.g., Expo, NextAuth).
  • Seems more complex than Vue and Vue-based solution.

Recommended Tools and Libraries for Vue 3

  • Vite for fast builds and hot reload
  • Pinia for state management
  • Vue Router for clean, url-based navigation. This enables browser back/forward nav and bookmarkable URLs. Enables decoupling of views from layout.
    For an app with /login, /dashboard, and /readings/ urls, use: 
    routes: [
  { path: '/login', component: LoginPage },
  { path: '/dashboard', component: DashboardPage },
  { path: '/readings/:sourceId', component: ReadingsPage },
]
    You can also define "route guards" and hooks to require authentication to visit a page.
  • axios for API interaction.
  • Quasar or UniApp for mobile app or Line MiniApp

Vue Dependencies

A minimal set of devDependencies (in package.json) is:

  "devDependencies": {
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.20"
  }

A more complete set, including linting (eslint)

  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.21.0",
    "prettier": "^3.2.5",
    "typescript": "^5.4.5",
    "vite": "^5.2.9",
    "vue-tsc": "^1.8.20"
  }
Package Description
@vitejs/plugin-vue Vite plugin that allows .vue single-file components (SFCs) to be compiled and hot-reloaded. Required for Vue + Vite integration.
@vue/eslint-config-typescript ESLint configuration preset for Vue 3 + TypeScript. Ensures consistent linting rules tailored for Vue’s Composition API and TS.
@vue/eslint-config-prettier Disables conflicting ESLint rules that clash with Prettier, allowing both tools to coexist cleanly.
@vue/tsconfig Shared tsconfig settings optimized for Vue projects. Helps align TypeScript compiler options across Vue tooling.
eslint Linter for JavaScript and TypeScript. Detects and warns about potential errors or deviations from style rules.
eslint-plugin-vue ESLint plugin providing Vue-specific linting rules for .vue files. Helps enforce best practices in Vue templates and scripts.
prettier Opinionated code formatter. Automatically enforces consistent formatting (e.g., spacing, semicolons, line width) across the codebase.
typescript Adds static typing support and compiles .ts and .vue files using the TypeScript language service.
vite Frontend build tool and development server. Provides fast startup and HMR for Vue 3 apps.
vue-tsc TypeScript type checker specifically for .vue single-file components. Complements tsc and catches type errors in SFCs.

Clone this wiki locally