vaníllatte

Overview

This is a starter template project for single page applications in vanilla TypeScript.
It is Framework-Agnostic with minimal runtime dependencies, enabling integrations of frameworks and libraries.

Technology stack

Initial technology stack is simple.

• Web Components: Browser-native API for building reusable components.
• HTML, CSS, TypeScript: Core technologies for web development.

Architecture

It is Architecture-Agnostic, but follows key principles including separation of concerns,
SOLID principles, atomic design, software design patterns and readable code.

This ensures that the application will be easy to maintain, scale and modify, enabling integrations of architectures.

Directory structure

├── .github                              # Github configurations
├── .vscode                              # VScode configurations
│
├── dist                                 # Compiled code
│
├── docs                                 # Documentation
│   ├── diagrams                         # - Drawing files (.drawio | .excalidraw)
│   ├── images                           # - Images for documents
│   └── wiki                             # - Wiki pages
│
├── scripts                              # Shellscripts
│   ├── deployment                       # - Deployment tasks
│   └── onboarding                       # - Onboarding tasks
│
├── src
│   ├── app
│   │   ├── adapters                     # Adapt external services/libraries
│   │   │   ├── frame                    # - Adapt Js Frameworks
│   │   │   ├── auth                     # - Adapt Auth service
│   │   │   ├── http                     # - Adapt HTTP Client
│   │   │   └── ui                       # - Adapt UI component library
│   │   │       ├── atoms                # - Basic UI elements
│   │   │       ├── molecules            # - Simple UI components
│   │   │       └── organisms            # - Complex UI components
│   │   │
│   │   ├── features                     # Features
│   │   │   └── [feature]                # - A specific feature (Granularity can vary)
│   │   │       ├── data                 # - Data-related logic
│   │   │       │   ├── datasources      # - Getting the raw data from api or localDB
│   │   │       │   │   ├── local        # - Local data storage logic
│   │   │       │   │   └── remote       # - Remote data fetching logic
│   │   │       │   └── repositories     # - Select, Shape, Merge raw data for the usecase
│   │   │       ├── domain               # - Feature-specific domain
│   │   │       │   ├── interfaces       # - Interfaces used within the feature
│   │   │       │   └── usecases         # - Business logic (get data, validate data, etc..)
│   │   │       ├── presentation         # - View components for the feature
│   │   │       └── [feature].module.ts  # - Module file for the feature
│   │   │
│   │   ├── index.html                   # Entry point html
│   │   ├── index.ts                     # Bootstrapping
│   │   └── routes.ts                    # Routing configuration
│   │
│   ├── mock                             # Mock
│   │   ├── data                         # - Mock data stored in JSON files
│   │   └── server                       # - Mock API serve and Mock SPA serve
│   │
│   ├── packages                         # Implementation of NPM Libraries
│   │   ├── vanillatte-core              # - Core functionality
│   │   ├── vanillatte-http              # - HTTP Client
│   │   ├── vanillatte-router            # - Router
│   │   └── vanillatte-ui                # - UI components
│   │
│   └── test                             # Test codes
│
├── Dockerfile                           # Docker image configuration
├── nginx.conf                           # NGINX configuration
├── package.json                         # Project dependencies
└── webpack.config.cjs                   # Webpack configuration

Onboarding setup

You have multiple options for setting up this project:

• Shellscript setup:
  Automated predeterminate setups.
  Recommended for quick and easy setup.

  • How to shellscript setup

• Manually setup:
  You can manually set up the project following the steps outlined below.
  This option provides more control over the setup process.

  • How to manually setup

• Github codespace setup:
  Utilize github codespaces for a cloud-based development environment.

  • How to setup github codespace

Getting started

You have two options for development.

Using host environment

• Start the local development server by executing the following command:

  npm run start:mock

  This command will launch the development server,
  and your application will be accessible at http://localhost:8080.

Using docker environment

• TODO: Start the local development server by
  ...

Development rules

• Naming conventions
• Commit rules
• Branch strategy

Development sample

Component

// sample.component.ts
class SampleComponent extends BaseComponent {
  private pageName: string = "";

  constructor() {
    super();
    this._dom.innerHTML = `<h1>Title: ${pageName}</h1>`;
  }

  onInit() {
    this.pageName = "Sample"
  }

  onDestroy() { ... }
}
customElements.define("sample-component", SampleComponent);
export default SampleComponent;