Advanced Usage

Master advanced patterns, performance optimization, and integration techniques with ebosma.

State Management

Reactive State and Derived Values

ebosma's state management system allows you to create and manage reactive state with automatic UI updates.


import { state, computed } from '@ebosma/state'

const count = state(0)
const isEven = computed(() => count.value % 2 === 0)

<div>
  Count: {count.value}
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    onClick={() => count.value++}
  >Increment</button>
  Even? {isEven.value}</div>

Component Scoped State

Create encapsulated state that persists across component mounts and unmounts.


import { useState } from '@ebosma/core'

export default function Counter() {
  const count = useState(0)

  return
    <div class="p-4 border border-indigo-200 rounded-lg">
      Count: {count.value}
      <button
        class="bg-indigo-500 text-white px-4 py-2 rounded"
        onClick={() => count.value++}
      >Increment</button>
    </div>
}

Dynamic and Nested Routes

Dynamic Segments

Use route parameters to handle dynamic paths like user profiles or product details.


// File: pages/users/[id].js
export default function UserProfile({ params }) {
  return <h1>User ID: {params.id}</h1>
}

Nested Layouts

Create shared layouts for sections of your app using nested route structures.


// File: pages/products/_layout.js
export default function Layout({ children }) {
  return
    <div class="p-6">
      <h1>Product Dashboard</h1>
      {children}
    </div>
}

Performance Techniques

Data Caching

Optimize API calls with built-in caching and stale-while-revalidate strategy.


import { cachedFetch } from '@ebosma/utils'

const data = cachedFetch('https://api.example.com/data', {
  cacheTTL: 60000,
  staleWhileRevalidate: true
)

Component Memoization

Prevent unnecessary re-renders of expensive components with shouldUpdate.


import { memo } from '@ebosma/utils'

const ExpensiveComponent = memo(({ data }) => {
  return <div>{data}</div>
)

Plugin Architecture

Create Custom Plugins

Extend ebosma's functionality with custom plugins for authentication, logging, and more.


import { createPlugin } from '@ebosma/core'

createPlugin('auth', {
  init: (config) => console.log('Auth plugin initialized'),
  hooks: {
    onAuth: (user) => console.log('User logged in:', user)
  }
)

Using Community Plugins

Leverage community plugins for common tasks like state management, routing, and API calls.


import apiPlugin from 'ebosma-api'
import { useApi } from 'ebosma-api'

const response = await useApi('/users')
console.log(response.data)

Advanced Patterns

Custom hooks

Create reusable hooks for common behaviors across your application.

See Example →

Server-Side Rendering

Optimize SEO and performance with built-in SSR support and streaming capabilities.

See Implementation →

Pushing the Boundaries

Whether you're building large-scale applications or optimizing for performance, ebosma gives you the tools and flexibility needed for any challenge.

Help Improve ebosma