🚀 Hybrid Module Creation - Visual + Code-First

GoGrab Space is the only platform that offers both visual module building AND code-first development, producing identical production-ready output.

🎯 The Hybrid Approach

We support THREE workflows, all producing the same high-quality result:

1. 🎨 Visual-First (80% of use cases)

Best for: Rapid development, CRUD modules, teams without deep Angular expertise

Modularity Dashboard → Create Module → Define Entities → Auto-Generate Actions 
→ Design Widgets → Export Code → Production-Ready TypeScript

Time to Module: 10-15 minutes for complete CRUD module

2. 💻 Code-First (Advanced developers)

Best for: Complex custom logic, performance-critical modules, existing codebases

nx generate → Implement BrowserModuleContract → Write Actions → Create Components 
→ Write Tests → Deploy

Time to Module: 2-4 hours for complete CRUD module

3. 🔄 Hybrid (Best of both)

Best for: Complex modules, learning, iterative refinement

Visual Builder (structure) → Export Code → Manual Refinement (complex logic) 
→ Re-import to Visual (iterate) → Export Final

Time to Module: 30 minutes visual + 1-2 hours refinement

🏗️ The Module Workbench (modularity-lib)

Access

Navigate to /modularity in any GoGrab Space instance.

6-Step Guided Process

1️⃣ Models

Define your data entities.

• Visual field editor
• Type selection (string, number, boolean, date, enum, reference)
• Validation rules
• Output: TypeScript interfaces

2️⃣ State

Configure state management.

• Auto-generates state service from entities
• Choose persistence strategy (flash, backend, hybrid)
• Sync mode (realtime, on-demand, manual)
• Output: Signal-based state services with GgStorage

3️⃣ Actions

Create module operations.

• Auto-Generated: CRUD actions for each entity
• Custom Actions: Use Action Flow Builder (visual logic canvas)
• Input/output contracts
• Validation rules
• Output: @PublicAction decorated classes matching gograb-modules patterns

4️⃣ UI

Design embeddable components.

• Auto-Generated: List and Card widgets for entities
• Custom Embeddables: Define inputs, outputs, and data bindings
• Visual template builder
• Output: Standalone Angular components with proper I/O

5️⃣ Test

Test your module.

• Auto-generated test cases
• Mock data from entities
• Interactive test runner
• Output: Vitest test suites

6️⃣ Deploy

Export production code.

• TypeScript Export: Complete module code
• Angular Library: Full Nx library structure
• JSON Export: Module definition for sharing
• Output: Production-ready files matching gograb-modules quality

🎨 The Action Flow Builder

A purpose-built visual logic builder for module actions, not a generic flow tool.

Key Features

• Entity-Aware: Knows your data models
• Contextual Blocks: Only shows relevant blocks for your action type
• Smart Suggestions: "Creating an Order? You probably need Get User, Calculate Total, Send Email"
• Validation: Ensures connections make sense for your entities
• Code Generation: Produces Observable-based RxJS code

Example: Visual → Generated Code

Visual Definition:

[Trigger: Create Order Input] 
→ [Validate: Order Data] 
→ [Get: User by userId] 
→ [Calculate: Order Total]
→ [Database: Save Order] 
→ [Action: Send Confirmation Email]
→ [Output: Order]

Generated Code:

@PublicAction({
  id: 'orders:create-order',
  name: 'Create Order',
  // ... metadata
})
export class CreateOrderAction implements ExecutableAction<CreateOrderOutput> {
  execute(params: CreateOrderInput, context: ActionContext): Observable<CreateOrderOutput> {
    return this.validate(params).pipe(
      switchMap(isValid => {
        if (!isValid) return of({ success: false, error: 'Invalid params' });
        
        return this.getUserService.getUserById(params.userId).pipe(
          map(user => this.calculateTotal(params.items, user.discountRate)),
          switchMap(total => this.orderService.createOrder({ ...params, total })),
          tap(order => this.emailService.sendConfirmation(order)),
          map(order => ({ success: true, orderId: order.id })),
          catchError(err => of({ success: false, error: err.message }))
        );
      })
    );
  }
}

🔄 The Hybrid Workflow (Power Users)

When to Use Hybrid

Example: E-Commerce Module

Step 1: Visual (15 minutes)

• Define entities: Product, Order, Cart, Customer
• Auto-generate CRUD for all entities (20 actions)
• Create basic widgets: ProductList, OrderHistory, CartSummary
• Export code

Step 2: Code Refinement (2 hours)

• Add payment integration to ProcessPaymentAction
• Implement inventory checking in CreateOrderAction
• Add complex discount calculation logic
• Optimize database queries in repositories

Step 3: Re-Import to Visual (optional)

• Import refined code back into workbench
• Visualize the complete module
• Make additional UI adjustments visually

Result: Production-ready e-commerce module with complex business logic.

✅ Generated Code Quality

The Module Workbench generates code that:

1. Matches gograb-modules patterns exactly:

   • @ModuleDecorator with full metadata
   • BrowserModuleContract with Observable-based lifecycle
   • @PublicAction decorated action classes
   • Standalone components with OnPush strategy

2. Follows all best practices:

   • Signal-based state management
   • RxJS for async operations (no Promises)
   • LoggerService integration with structured logging
   • EventBus integration for module events
   • Proper cleanup in destroy() methods

3. Is production-ready:

   • Full TypeScript type safety
   • Comprehensive JSDoc documentation
   • Error handling and validation
   • Multi-tenant support
   • Performance optimized

🎯 Why This Is Groundbreaking

Traditional Visual Builders

Most visual builders generate "toy code" that needs rewriting for production.

GoGrab Space Module Workbench

Generates production-quality code indistinguishable from hand-written expert code.

Comparison:

📚 Related Documentation

• Module Creation Guide - Complete guide (both methods)
• Module Registration - How modules are discovered
• Module System Architecture - System design
• Modularity-Lib Documentation - Visual builder details

Last Updated: December 3, 2025 - 10:05 PM EST Session ID: 3 Status: ✅ Production Standard - The Future of Module Development