Migration Tools

This guide is coming soon. We're working on comprehensive migration tools and guides for adopting TachUI.

TachUI provides migration tools and strategies to help you adopt TachUI in existing projects or migrate from other frameworks.

Planned Content

This guide will cover:

• React Migration - Moving from React to TachUI
• Vue Migration - Transitioning from Vue.js to TachUI
• Angular Migration - Converting Angular applications
• Vanilla JS Migration - Upgrading from plain JavaScript
• Gradual Adoption - Incremental TachUI integration
• Automated Tools - CLI tools for code transformation
• Best Practices - Migration strategies and patterns

Migration Strategies

Gradual Adoption (Recommended)

// Start by wrapping existing components
import { TachUIWrapper } from '@tachui/migration'

function ExistingApp() {
  return (
    <div>
      <ExistingHeader />
      <TachUIWrapper>
        {/* New TachUI components */}
        <UserProfile />
        <TodoList />
      </TachUIWrapper>
      <ExistingFooter />
    </div>
  )
}

Component-by-Component Migration

// Before: React component
function UserCard({ user }) {
  const [expanded, setExpanded] = useState(false)
  
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? 'Less' : 'More'}
      </button>
    </div>
  )
}

// After: TachUI component  
function UserCard({ user }) {
  const [expanded, setExpanded] = createSignal(false)
  
  return VStack({
    children: [
      Text(user.name).modifier.fontSize(18).fontWeight('600').build(),
      Button(
        () => expanded() ? 'Less' : 'More',
        () => setExpanded(!expanded())
      )
    ]
  })
  .modifier
  .padding(16)
  .backgroundColor('white')
  .cornerRadius(8)
  .build()
}

Current Status

🚧 In Development - Migration tools and comprehensive guides are being developed.

Available Migration Resources

• Core Concepts - Understanding TachUI's architecture vs other frameworks
• API Comparison Tables - Side-by-side comparisons (coming soon)
• Code Examples - Real-world TachUI patterns

Planned Migration Tools

# Automated migration CLI (planned)
tacho migrate react ./src/components
tacho migrate vue ./src/components  
tacho migrate angular ./src/app

# Analysis tools (planned)
tacho analyze --migration-report
tacho suggest --migration-strategy

Framework Comparisons

React to TachUI

React	TachUI
useState()	createSignal()
useMemo()	createMemo()
useEffect()	createEffect()
<div className="...">	VStack().padding().background()
JSX syntax	Function calls with modifiers

Vue to TachUI

Vue	TachUI
ref()	createSignal()
computed()	createMemo()
watchEffect()	createEffect()
<template>	Function composition
Single File Components	TypeScript functions

Angular to TachUI

Angular	TachUI
signal()	createSignal()
computed()	createMemo()
effect()	createEffect()
Component decorators	Function composition
Template syntax	Modifier chaining

Migration Benefits

Performance Improvements

• 100-1000x faster updates with fine-grained reactivity
• Smaller bundle sizes with tree-shaking
• No virtual DOM overhead for direct performance

Developer Experience

• SwiftUI-familiar syntax for mobile developers
• TypeScript-first design with excellent IntelliSense
• Simpler mental model with direct DOM updates

Architecture Benefits

• Predictable state flow with signals
• Automatic dependency tracking
• Memory-efficient cleanup with WeakMaps

Get Notified

Follow migration tool development:

• GitHub Issues - Migration feature requests
• GitHub Discussions - Share migration experiences
• Community Discord - Get migration help (coming soon)

Alternative Resources

While migration tools are in development:

• Installation Guide - Set up TachUI in existing projects
• Developer Quick Start - Learn TachUI patterns
• Component Examples - See TachUI component patterns

Contributing

Help us build better migration tools:

• Share your migration experience in GitHub Discussions
• Request specific migration scenarios in GitHub Issues
• Contribute migration examples via pull requests