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.
Initial technology stack is simple.
- Web Components: Browser-native API for building reusable components.
- HTML, CSS, TypeScript: Core technologies for web development.
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.
├── .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 configurationYou have multiple options for setting up this project:
-
Shellscript setup:
Automated predeterminate setups.
Recommended for quick and easy setup. -
Manually setup:
You can manually set up the project following the steps outlined below.
This option provides more control over the setup process. -
Github codespace setup:
Utilize github codespaces for a cloud-based development environment.
You have two options for development.
-
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 athttp://localhost:8080.
- TODO: Start the local development server by
...
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;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent