Initial commit

docs/tutorials/basics/simple-life-cycle.md

@@ -0,0 +1,102 @@
+# Vuer Component Life Cycle
+
+## Core Concept
+
+This tutorial demonstrates the basic **CRUD operations** for components in Vuer: adding a component, updating in-place, and removing.
+
+## Life Cycle Operations
+
+### 1. Adding Components
+Create new components using `session.upsert`:
+
+```python
+session.upsert @ Obj(
+    src="/static/model.obj",
+    position=[0, 0, 0],
+    key="my-model",
+)
+```
+
+### 2. Updating Components
+Modify existing components by reusing the same key:
+
+```python
+session.upsert @ Obj(
+    src="/static/model.obj",
+    position=[1, 0, 0],  # Changed position
+    key="my-model",  # Same key updates the existing component
+)
+```
+
+### 3. Removing Components
+Delete components with `session.remove`:
+
+```python
+session.remove @ "my-model"
+```
+
+## Complete Example
+
+```python
+from vuer import Vuer
+from vuer.schemas import Obj
+import asyncio
+
+app = Vuer()
+
+@app.spawn
+async def main(session):
+    # Create/Update: Add a wireframe mesh
+    for i in range(80):
+        wireframe = i % 2 == 0
+
+        # Toggle wireframe on and off
+        session.upsert @ Obj(
+            src="/static/model.obj",
+            position=[0, 0, 0],
+            wireframe=wireframe,
+            key="primary-mesh",
+        )
+
+        await asyncio.sleep(0.01)
+
+    # Add a second component
+    session.upsert @ Obj(
+        src="/static/model.obj",
+        position=[1, 0, 0],
+        wireframe=True,
+        key="secondary-mesh",
+    )
+
+    await asyncio.sleep(0.8)
+
+    # Remove the second component
+    session.remove @ "secondary-mesh"
+
+    # Keep the session alive
+    while True:
+        await asyncio.sleep(1.0)
+
+app.run()
+```
+
+## Key Patterns
+
+### Using Keys
+- **Unique keys** identify components in the scene
+- **Reusing a key** updates the existing component
+- **Different keys** create new components
+
+### Update Frequency
+The example toggles wireframe every 0.01 seconds (100 times per second), demonstrating how Vuer handles rapid updates efficiently.
+
+### Timing
+Components can be added and removed at any time during the session, allowing for dynamic scene management.
+
+## Visual Effect
+
+This creates an animated effect showing two mesh versions (solid and wireframe) alternating visibility, demonstrating how components can be dynamically managed throughout an application's runtime.
+
+## Source
+
+Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/simple_life_cycle.html