Frontend Architecture: Core Frameworks and UI Systems
react, vue, and angular are core frameworks that manage application structure, state, and rendering logic. @tamagui/core is a universal UI kit and styling engine that typically runs on top of React to share components between web and native. While the first three define how you build an app, Tamagui defines how you style and share UI elements within the React ecosystem. Understanding this layer difference is critical for making the right stack decision.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Frontend Architecture: Core Frameworks and UI Systems Compared
When architecting a modern web application, you need to decide on a core framework for logic and rendering, and potentially a UI system for styling and components. react, vue, and angular serve as the foundation for your application structure. @tamagui/core operates differently — it is a UI kit that sits on top of React to unify styling across web and native. Let's compare how they handle common engineering tasks.
🧱 Component Structure: Templates vs JSX vs Decorators
react uses JSX, which lets you write HTML-like syntax directly in JavaScript.
- Components are functions that return markup.
- Logic and view are mixed in the same file.
// react: Functional Component
function Button({ label }) {
return <button className="btn">{label}</button>;
}
vue uses a single-file component structure with distinct sections.
- You separate template, script, and styles clearly.
- Uses
<script setup>for concise logic in modern versions.
<!-- vue: Single File Component -->
<template>
<button class="btn">{{ label }}</button>
</template>
<script setup>
defineProps(['label']);
</script>
angular uses decorators to define components with metadata.
- Requires a selector, template, and styles configuration.
- Strongly typed with TypeScript by default.
// angular: Component Decorator
@Component({
selector: 'app-button',
template: `<button class="btn">{{ label }}</button>`
})
export class ButtonComponent {
@Input() label: string;
}
@tamagui/core extends React components with styled primitives.
- You use pre-built components like
ButtonorViewthat accept style props. - Requires React as a base layer.
// tamagui: Styled Component
import { Button } from '@tamagui/core';
function MyButton({ label }) {
return <Button backgroundColor="$blue">{label}</Button>;
}
🎨 Styling Approach: CSS-in-JS vs Scoped vs Global
react has no built-in styling solution.
- Developers often choose CSS modules, styled-components, or inline styles.
- You must decide on a strategy per project.
// react: CSS Modules
import styles from './Button.module.css';
function Button() {
return <button className={styles.btn}>Click</button>;
}
vue supports scoped CSS out of the box.
- Styles in a component only apply to that component's template.
- Reduces conflict without extra configuration.
<!-- vue: Scoped Styles -->
<style scoped>
.btn { background: blue; }
</style>
angular uses view encapsulation to scope styles.
- Default behavior prevents styles from leaking globally.
- You can change encapsulation mode if needed.
// angular: Encapsulation
@Component({
styles: ['.btn { background: blue; }'],
encapsulation: ViewEncapsulation.Emulated
})
@tamagui/core uses a compiler to turn style props into atomic CSS.
- You pass styles as props (e.g.,
padding={10}). - Optimizes performance by removing unused styles at build time.
// tamagui: Style Props
import { View } from '@tamagui/core';
<View padding={10} backgroundColor="red" />
🔄 State Reactivity: Signals vs Hooks vs Proxies
react uses hooks like useState to trigger re-renders.
- State changes cause the component function to run again.
- Requires careful handling of dependencies in effects.
// react: State Hook
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>{count}</button>
vue uses a reactive proxy system with ref or reactive.
- Updates are tracked automatically without manual dependency arrays.
- Feels more like standard variable assignment.
<!-- vue: Reactive Ref -->
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
angular recently introduced Signals for fine-grained reactivity.
- Older versions relied on zone.js for change detection.
- Signals allow precise updates without checking the whole tree.
// angular: Signals
count = signal(0);
increment() { this.count.update(c => c + 1); }
@tamagui/core relies on React's state system underneath.
- It does not replace state management but styles based on state.
- You can use React state to toggle Tamagui style props.
// tamagui: State Driven Styles
const [active, setActive] = useState(false);
<Button backgroundColor={active ? '$blue' : '$gray'} />
🌐 Cross-Platform Support: Web vs Native
react can share logic with React Native but not UI components directly.
- You often need separate files for web and mobile views.
- Logic sharing is strong, but UI code usually diverges.
// react: Web Specific
<div className="web-only">Content</div>
vue is primarily focused on web applications.
- Vue Native exists but is less mature than React Native.
- Best choice if you are targeting browsers only.
<!-- vue: Web Focus -->
<template>
<div>Web Content</div>
</template>
angular supports web and mobile via Ionic or NativeScript.
- Not a native solution by default like React Native.
- Requires additional libraries for mobile deployment.
// angular: Mobile via Wrapper
@Component({ template: `<ion-button>Click</ion-button>` })
@tamagui/core is built specifically for universal code sharing.
- The same component code runs on web and React Native.
- Solves the duplication problem between platforms.
// tamagui: Universal Component
import { YStack } from '@tamagui/core';
// Works on Web and Native without changes
<YStack padding={10} />
🤝 Similarities: Shared Ground Between Frameworks
Despite their differences, these tools share common goals and patterns.
1. ⚛️ Component-Based Architecture
- All four encourage breaking UIs into reusable pieces.
- Promote separation of concerns and testability.
// All: Reusable Component Concept
function Card({ children }) { return <div>{children}</div>; }
2. 🛠️ TypeScript Support
angular,react,vue, andtamaguiall support TypeScript.- Enables better autocompletion and error catching.
// All: Typing Props
interface Props { label: string; }
3. 🚀 Performance Optimization
- Each has mechanisms to avoid unnecessary renders.
- Tamagui compiles styles; Angular uses signals; Vue uses proxies; React uses memo.
// React: Memo
React.memo(Component);
// Vue: Computed
const double = computed(() => count.value * 2);
4. 🌍 Active Ecosystems
- All have large communities and plugin markets.
- Easy to find solutions for common problems.
// All: Community Packages
// react: react-router, redux
// vue: vue-router, pinia
// angular: @angular/router, ngrx
// tamagui: @tamagui/lucide-icons
📊 Summary: Key Similarities
| Feature | Shared by All |
|---|---|
| Architecture | 🧱 Component-based |
| Language | 🛠️ TypeScript support |
| Performance | 🚀 Optimization tools |
| Community | 🌍 Large ecosystems |
| Goal | 🎯 Build maintainable UIs |
🆚 Summary: Key Differences
| Feature | react | vue | angular | @tamagui/core |
|---|---|---|---|---|
| Type | 🏗️ UI Library | 🏗️ Framework | 🏗️ Full Platform | 🎨 UI Kit (for React) |
| Styling | 🔌 Choose your own | 🎯 Scoped CSS | 🎯 Encapsulated CSS | ⚡ Compiled Style Props |
| Learning Curve | 📈 Moderate | 📉 Gentle | 📈 Steep | 📈 Moderate (requires React) |
| Native Support | 📱 React Native | 🌐 Web Focused | 📱 Via Ionic/NativeScript | 📱 Universal (Web + Native) |
| State Management | 🔄 Hooks / External | 🔄 Reactivity API | 🔄 Signals / Services | 🔄 Uses React State |
💡 The Big Picture
react is the flexible choice 🧩 — best when you want to assemble your own stack and need native mobile support. Ideal for startups and products scaling across platforms.
vue is the balanced choice ⚖️ — best when you want structure without heavy configuration. Ideal for teams wanting fast development with clear conventions.
angular is the enterprise choice 🏢 — best when you need a complete solution with strict typing and built-in tools. Ideal for large organizations with long-term maintenance needs.
@tamagui/core is the unification choice 🔄 — best when you use React and want to share UI code between web and mobile without duplication. It is not a framework replacement but a powerful layer on top of React.
Final Thought: Select angular, react, or vue based on your application's core needs. If you choose React and need cross-platform UI consistency, add @tamagui/core to your stack.
How to Choose: @tamagui/core vs angular vs react vs vue
- @tamagui/core:
Choose
@tamagui/coreif you are already using React and need to share UI components between web and native mobile apps. It provides a unified styling system that compiles to efficient CSS and works across platforms. Note that it is not a standalone framework and requires React to function. - angular:
Choose
angularif you need a complete platform with built-in routing, HTTP client, and dependency injection. It is ideal for large enterprise teams that benefit from strict structure and TypeScript enforcement. The framework handles most architectural decisions for you. - react:
Choose
reactif you want maximum flexibility and access to the largest ecosystem of third-party libraries. It works well for projects that may need to extend into native mobile development using React Native. You will need to select your own routing and state management tools. - vue:
Choose
vueif you want a progressive framework that is easy to learn but scales well for complex applications. It offers a balanced approach between structure and flexibility with built-in state management. The documentation is comprehensive and the learning curve is gentle.
Popular Comparisons
README for @tamagui/core
core
Note: most of this logic moved into @tamagui/web
core is a superset of web, it just adds in some react-native props support.