Developer Velocity - Jalur Cepat Produktivitas

// Code generation with Plop.js
// plopfile.js
module.exports = function (plop) {
  // Component generator
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Component name:',
      },
      {
        type: 'confirm',
        name: 'withTests',
        message: 'Include test file?',
        default: true,
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
        templateFile: 'templates/component.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/index.ts',
        templateFile: 'templates/index.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
        templateFile: 'templates/component.test.hbs',
        skip: (data) => !data.withTests,
      },
    ],
  });

  // API endpoint generator
  plop.setGenerator('api', {
    description: 'Create API endpoint with validation',
    prompts: [
      {
        type: 'input',
        name: 'resource',
        message: 'Resource name (e.g., user, product):',
      },
      {
        type: 'checkbox',
        name: 'methods',
        message: 'HTTP methods:',
        choices: ['GET', 'POST', 'PUT', 'DELETE'],
        default: ['GET', 'POST'],
      },
    ],
    actions: function (data) {
      const actions = [];
      
      actions.push({
        type: 'add',
        path: 'src/api/{{camelCase resource}}.ts',
        templateFile: 'templates/api-endpoint.hbs',
      });
      
      actions.push({
        type: 'add',
        path: 'src/types/{{camelCase resource}}.ts',
        templateFile: 'templates/api-types.hbs',
      });
      
      return actions;
    },
  });
};

// Comprehensive test setup
// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/test/**',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{ts,tsx}',
    '<rootDir>/src/**/*.{test,spec}.{ts,tsx}',
  ],
};

// Test utilities for velocity
// src/test/utils.tsx
import { render, RenderOptions } from '@testing-library/react';
import { ReactElement } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from '../store';

const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        {children}
      </BrowserRouter>
    </Provider>
  );
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, { wrapper: AllTheProviders, ...options });

// Factory functions for test data
export const createMockUser = (overrides = {}) => ({
  id: '1',
  name: 'John Doe',
  email: 'john@example.com',
  isActive: true,
  ...overrides,
});

export const createMockApiResponse = <T>(data: T, overrides = {}) => ({
  data,
  status: 'success' as const,
  message: 'Operation successful',
  ...overrides,
});

export * from '@testing-library/react';
export { customRender as render };

// Automated code quality checks
// .eslintrc.js
module.exports = {
  extends: [
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  rules: {
    // Velocity-focused rules
    'no-console': 'warn',
    'prefer-const': 'error',
    'no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn',
    'react/prop-types': 'off', // Using TypeScript
    
    // Complexity limits for maintainability
    'complexity': ['error', 10],
    'max-lines-per-function': ['error', 50],
    'max-depth': ['error', 4],
  },
};

// API documentation with OpenAPI
// src/api/swagger.ts
import swaggerJSDoc from 'swagger-jsdoc';

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'MyApp API',
      version: '1.0.0',
      description: 'API documentation for MyApp',
    },
    servers: [
      {
        url: 'http://localhost:3000/api',
        description: 'Development server',
      },
    ],
  },
  apis: ['./src/routes/*.ts'], // Path to the API files
};

export const specs = swaggerJSDoc(options);

// Usage in route files
/**
 * @swagger
 * /users:
 *   get:
 *     summary: Get all users
 *     tags: [Users]
 *     parameters:
 *       - in: query
 *         name: page
 *         schema:
 *           type: integer
 *         description: Page number
 *     responses:
 *       200:
 *         description: List of users
 *         content:
 *           application/json:
 *             schema:
 *               type: object
 *               properties:
 *                 users:
 *                   type: array
 *                   items:
 *                     $ref: '#/components/schemas/User'
 */

// Velocity tracking system
interface VelocityMetrics {
  // Development metrics
  deploymentFrequency: number; // Deployments per day
  leadTime: number; // Hours from commit to production
  changeFailureRate: number; // Percentage of deployments causing failures
  recoveryTime: number; // Hours to recover from failures
  
  // Code quality metrics
  codeReviewTime: number; // Hours from PR creation to merge
  testCoverage: number; // Percentage of code covered by tests
  technicalDebtRatio: number; // Percentage of development time spent on tech debt
  
  // Team metrics
  cycleTime: number; // Hours from start to completion of work item
  throughput: number; // Work items completed per sprint
  blockerResolutionTime: number; // Hours to resolve blockers
}

class VelocityTracker {
  async calculateDeploymentFrequency(timeRange: DateRange): Promise<number> {
    const deployments = await this.getDeployments(timeRange);
    const days = this.getDaysBetween(timeRange.start, timeRange.end);
    return deployments.length / days;
  }
  
  async calculateLeadTime(commits: Commit[]): Promise<number> {
    const leadTimes = await Promise.all(
      commits.map(async (commit) => {
        const deployment = await this.findDeploymentForCommit(commit);
        return deployment.timestamp - commit.timestamp;
      })
    );
    
    return this.calculateMedian(leadTimes);
  }
  
  async generateVelocityReport(): Promise<VelocityReport> {
    const metrics = await this.collectMetrics();
    
    return {
      summary: this.generateSummary(metrics),
      trends: this.analyzeTrends(metrics),
      recommendations: this.generateRecommendations(metrics),
      actionItems: this.identifyActionItems(metrics),
    };
  }
}

// Application performance monitoring
class PerformanceMonitor {
  // Core Web Vitals tracking
  trackWebVitals() {
    // Largest Contentful Paint
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'largest-contentful-paint') {
          this.reportMetric('LCP', entry.startTime);
        }
      }
    }).observe({ entryTypes: ['largest-contentful-paint'] });
    
    // First Input Delay
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'first-input') {
          this.reportMetric('FID', entry.processingStart - entry.startTime);
        }
      }
    }).observe({ entryTypes: ['first-input'] });
    
    // Cumulative Layout Shift
    let clsValue = 0;
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      }
      this.reportMetric('CLS', clsValue);
    }).observe({ entryTypes: ['layout-shift'] });
  }
  
  // API performance tracking
  trackApiPerformance(endpoint: string, duration: number, status: number) {
    this.reportMetric('api_duration', duration, {
      endpoint,
      status: status.toString(),
    });
    
    if (duration > 1000) {
      this.alertSlowApi(endpoint, duration);
    }
  }
  
  // Bundle size monitoring
  async trackBundleSize() {
    const bundleStats = await this.getBundleStats();
    
    this.reportMetric('bundle_size_js', bundleStats.javascript);
    this.reportMetric('bundle_size_css', bundleStats.css);
    this.reportMetric('bundle_size_total', bundleStats.total);
    
    if (bundleStats.total > this.BUNDLE_SIZE_THRESHOLD) {
      this.alertLargeBundle(bundleStats);
    }
  }
}

// Anti-pattern: Over-engineering for velocity
// ❌ Bad: Complex abstraction that slows down simple changes
class OverEngineeredUserService {
  constructor(
    private repository: IUserRepository,
    private validator: IUserValidator,
    private transformer: IUserTransformer,
    private notifier: IUserNotifier,
    private logger: ILogger,
    private metrics: IMetrics,
    private cache: ICache
  ) {}
  
  async createUser(userData: CreateUserRequest): Promise<UserResponse> {
    // 50 lines of abstraction for simple user creation
  }
}

// ✅ Good: Simple, direct implementation
class UserService {
  async createUser(userData: CreateUserData): Promise<User> {
    // Validate input
    if (!userData.email || !userData.name) {
      throw new ValidationError('Email and name are required');
    }
    
    // Create user
    const user = await db.users.create({
      data: {
        email: userData.email,
        name: userData.name,
        createdAt: new Date(),
      },
    });
    
    // Send welcome email
    await emailService.sendWelcome(user.email);
    
    return user;
  }
}

// 1. Fail Fast Principle
function validateUserInput(input: unknown): UserInput {
  const schema = z.object({
    email: z.string().email(),
    name: z.string().min(1),
    age: z.number().min(0).max(150),
  });
  
  try {
    return schema.parse(input);
  } catch (error) {
    // Fail fast with clear error message
    throw new ValidationError(`Invalid input: ${error.message}`);
  }
}

// 2. Progressive Enhancement
function enhanceUserExperience() {
  // Start with basic functionality
  const basicFeatures = initializeBasicFeatures();
  
  // Add enhancements progressively
  if (supportsAdvancedFeatures()) {
    addAdvancedFeatures();
  }
  
  if (supportsExperimentalFeatures()) {
    addExperimentalFeatures();
  }
}

// 3. Feature Flags for Safe Velocity
class FeatureFlags {
  isEnabled(flag: string, userId?: string): boolean {
    const config = this.getFeatureConfig(flag);
    
    if (config.enabled === false) return false;
    if (config.enabled === true) return true;
    
    // Gradual rollout
    if (config.rolloutPercentage) {
      return this.isInRollout(userId, config.rolloutPercentage);
    }
    
    return false;
  }
}

// Usage
if (featureFlags.isEnabled('new-checkout-flow', user.id)) {
  return <NewCheckoutFlow />;
} else {
  return <LegacyCheckoutFlow />;
}