TypeScript/JavaScript Archetypes
Comprehensive collection of modern TypeScript and JavaScript archetypes for building scalable, performant, and maintainable web applications across all major frameworks.
Overview
Our TypeScript/JavaScript archetype ecosystem provides production-ready templates for every major frontend framework and architectural pattern. From single-page applications to micro-frontends, each archetype is designed with modern development practices, type safety, and enterprise requirements in mind.
Available Archetypes
Angular Basic
Modern Angular 17+ application with TypeScript, comprehensive tooling, and enterprise-ready architecture.
Svelte Basic
Modern Svelte application with TypeScript, reactive programming, and optimized build pipeline.
Vue.js Basic
Modern Vue.js 3 application with TypeScript, Composition API, and comprehensive development tooling.
Modern.js MFE App Static
Modern.js micro frontend application with Module Federation, TypeScript, and containerized deployment.
Modern.js MFE Shell
Modern.js shell application for orchestrating micro frontends with Module Federation and dynamic loading.
Nuxt.js Basic
Modern Nuxt.js 3 application with TypeScript, server-side rendering, and full-stack capabilities.
JavaScript Front-End
NX-based monorepo for multiple frontend applications with React, Angular, Vue.js support and modern tooling.
Next.js Applications
Next.js Basic
Full-Stack ReactModern Next.js application with App Router, TypeScript, Tailwind CSS, and comprehensive tooling setup.
Perfect for full-stack applications with SSR/SSG requirements
Angular Applications
Angular Basic
Enterprise FrameworkEnterprise Angular application with standalone components, signals, modern CLI, and comprehensive architecture.
Ideal for large-scale enterprise applications
Vue.js Applications
Vue.js Basic
Composition APIModern Vue.js application with Composition API, TypeScript, Vite, and comprehensive development tooling.
Great for progressive web applications and SPAs
Nuxt.js Applications
Nuxt.js Basic
Vue Meta-FrameworkFull-stack Nuxt.js application with auto-imports, file-based routing, and server-side capabilities.
Perfect for content sites and full-stack Vue applications
Svelte Applications
Svelte Basic
Compile-time FrameworkModern SvelteKit application with TypeScript, file-based routing, and optimized build output.
Excellent for performance-critical applications
Micro-Frontend Architecture
Micro-Frontend Shell
Module FederationModern.js-based micro-frontend shell with Module Federation for scalable distributed frontend architectures.
Essential for large-scale distributed frontend teams
NX Monorepo
JavaScript Frontend Monorepo
NX WorkspaceComprehensive NX monorepo with multiple apps, shared libraries, and advanced development tooling.
Perfect for organizations with multiple frontend applications
Framework Comparison
| Feature | Next.js | Angular | Vue.js | Nuxt.js | Svelte | NX Monorepo |
|---|---|---|---|---|---|---|
| Learning Curve | Moderate | High | Low | Moderate | Low | High |
| Performance | Excellent | Good | Excellent | Excellent | Excellent | Varies |
| Enterprise Ready | Yes | Excellent | Good | Good | Good | Excellent |
| SSR/SSG | Native | Limited | Plugin | Native | Native | Configurable |
| Type Safety | Excellent | Native | Good | Good | Good | Excellent |
| Community | Large | Large | Large | Growing | Growing | Developer Tools |
Key Features
Modern Development Experience
- TypeScript: First-class TypeScript support across all archetypes
- Hot Reload: Fast development with instant feedback
- ESLint & Prettier: Consistent code formatting and linting
- Husky & lint-staged: Pre-commit hooks for quality control
Build & Deployment
- Vite/Webpack: Modern build tools optimized for development and production
- Tree Shaking: Automatic dead code elimination
- Code Splitting: Automatic route-based and component-based splitting
- Docker Ready: Container configurations for all archetypes
Testing & Quality
- Jest/Vitest: Unit testing with excellent TypeScript support
- Testing Library: Component testing with best practices
- Playwright/Cypress: End-to-end testing capabilities
- Coverage Reports: Comprehensive test coverage analysis
Production Features
- Performance Monitoring: Built-in performance tracking
- Bundle Analysis: Tools to analyze and optimize bundle size
- Progressive Enhancement: Works without JavaScript when possible
- Accessibility: WCAG compliance and screen reader support
Architecture Patterns
Development Workflow
Setup Process
- Generate Project: Use Archetect to generate from archetype
- Install Dependencies: Automatic dependency installation
- Development Server: Start with hot reload enabled
- Code & Test: Write code with immediate feedback
Quality Gates
- Pre-commit: Lint, format, and type check
- CI/CD: Automated testing and deployment
- Code Review: Built-in review workflows
- Performance: Bundle size and runtime monitoring
Getting Started
Prerequisites
- Node.js 18+ (LTS recommended)
- npm, yarn, or pnpm
- Your preferred IDE with TypeScript support
Quick Start
# Install Archetect CLI
npm install -g @archetect/archetect
# Generate a Next.js application
archetect render git@github.com:p6m-archetypes/typescript-nextjs-basic.archetype.git my-app
cd my-app
# Install dependencies and start development
npm install
npm run dev
Framework-Specific Commands
# Angular
ng serve
# Vue.js
npm run dev
# Nuxt.js
npm run dev
# Svelte
npm run dev
# NX Monorepo
npx nx serve my-app
Best Practices
Code Organization
- Use feature-based folder structure
- Implement proper separation of concerns
- Create reusable components and utilities
- Follow framework-specific conventions
Performance
- Implement lazy loading for routes and components
- Optimize images and assets
- Use proper caching strategies
- Monitor Core Web Vitals
Accessibility
- Use semantic HTML elements
- Implement proper ARIA attributes
- Test with screen readers
- Ensure keyboard navigation
Security
- Sanitize user inputs
- Implement Content Security Policy
- Use HTTPS everywhere
- Regular dependency updates
Micro-Frontend Strategy
For large organizations, our micro-frontend archetypes provide:
- Independent Development: Teams can work autonomously
- Technology Diversity: Different frameworks in the same application
- Incremental Migration: Gradually migrate legacy applications
- Scalable Architecture: Handle multiple teams and applications
Support and Resources
- Framework Documentation: Links to official framework docs
- Community Examples: Real-world implementation examples
- Migration Guides: Upgrading and migration assistance
- Performance Monitoring: Built-in analytics and monitoring
Choose the archetype that best fits your team's expertise and project requirements. All archetypes are production-ready and follow industry best practices.