DEV Community

Professional Joe
Professional Joe

Posted on

Juris.JS: Dynamic Path Builders: Scaling State Management in Juris Applications

#jurisj #javascript #webdev #vue

The Problem with String-Based State Paths

As Juris applications grow in complexity, managing state paths becomes a significant challenge. While simple string paths work well for small projects:

context.setState('user.profile.name', 'John');
context.setState('api.users.loading', true);
Enter fullscreen mode Exit fullscreen mode

Large applications quickly run into maintainability issues:

  • No type safety - Typos cause silent bugs
  • Hard to refactor - Changing paths requires manual search/replace
  • Inconsistent naming - Different developers use different conventions
  • No discoverability - No way to know what state paths exist

Evolution of State Path Management

Stage 1: Raw Strings (Small Apps) 

// Simple but error-prone
context.setState('user.loading', true);
context.getState('api.error', null);
Enter fullscreen mode Exit fullscreen mode

Stage 2: Static Constants (Medium Apps) 

// Better maintainability
const PATHS = {
    USER_LOADING: 'user.loading',
    API_ERROR: 'api.error'
};

context.setState(PATHS.USER_LOADING, true);
Enter fullscreen mode Exit fullscreen mode

Stage 3: Dynamic Path Builders (Large Apps) 

// Flexible and scalable
const PATHS = {
    userById: (id) => `users.${id}`,
    apiStatus: (endpoint) => `api.${endpoint}.status`
};

context.setState(PATHS.userById(123), userData);
Enter fullscreen mode Exit fullscreen mode

Introducing Dynamic Path Builders

Dynamic path builders are functions that generate state paths based on parameters. They combine the flexibility of string paths with the safety and maintainability of constants.

Basic Pattern 

export const PATHS = {
    // Static paths
    AUTH_TOKEN: 'auth.token',

    // Dynamic builders
    userById: (id) => `users.${id}`,
    formField: (form, field) => `forms.${form}.${field}`,
    apiEndpoint: (endpoint, property) => `api.${endpoint}.${property}`
};
Enter fullscreen mode Exit fullscreen mode

Usage Examples 

// User management
context.setState(PATHS.userById(123), { name: 'John', email: 'john@example.com' });
context.getState(PATHS.userById(456), null);

// Form handling
context.setState(PATHS.formField('login', 'email'), 'user@example.com');
context.setState(PATHS.formField('registration', 'password'), '••••••••');

// API state management
context.setState(PATHS.apiEndpoint('users', 'loading'), true);
context.setState(PATHS.apiEndpoint('orders', 'error'), 'Network timeout');
Enter fullscreen mode Exit fullscreen mode

Advanced Patterns

Nested Path Builders 

export const PATHS = {
    user: {
        profile: (userId) => `users.${userId}.profile`,
        preferences: (userId) => `users.${userId}.preferences`,
        activity: (userId, type) => `users.${userId}.activity.${type}`
    },

    api: {
        loading: (endpoint) => `api.${endpoint}.loading`,
        error: (endpoint) => `api.${endpoint}.error`,
        data: (endpoint) => `api.${endpoint}.data`,
        cache: (endpoint, params) => `api.${endpoint}.cache.${btoa(JSON.stringify(params))}`
    }
};

// Usage
context.setState(PATHS.user.profile(123), profileData);
context.setState(PATHS.api.loading('users'), true);
Enter fullscreen mode Exit fullscreen mode

Validation and Type Safety 

export const PATHS = {
    userById: (id) => {
        if (!id || typeof id !== 'number') {
            throw new Error('User ID must be a number');
        }
        return `users.${id}`;
    },

    formField: (form, field) => {
        const validForms = ['login', 'registration', 'profile'];
        if (!validForms.includes(form)) {
            throw new Error(`Invalid form: ${form}`);
        }
        return `forms.${form}.${field}`;
    }
};
Enter fullscreen mode Exit fullscreen mode

Path Templates with Validation 

const createPathBuilder = (template, validators = {}) => {
    return (...args) => {
        // Validate arguments
        Object.entries(validators).forEach(([index, validator]) => {
            if (!validator(args[index])) {
                throw new Error(`Invalid argument at position ${index}`);
            }
        });

        // Replace placeholders
        return template.replace(/\{(\d+)\}/g, (match, index) => args[index]);
    };
};

export const PATHS = {
    userById: createPathBuilder('users.{0}', {
        0: (id) => typeof id === 'number' && id > 0
    }),

    apiResource: createPathBuilder('api.{0}.{1}', {
        0: (resource) => typeof resource === 'string',
        1: (property) => ['loading', 'error', 'data'].includes(property)
    })
};
Enter fullscreen mode Exit fullscreen mode

Comparison with Other State Management Approaches

Redux/Toolkit Comparison 

// Redux actions (traditional)
const SET_USER = 'users/setUser';
const SET_LOADING = 'api/setLoading';

// Juris dynamic paths
const PATHS = {
    userById: (id) => `users.${id}`,
    apiLoading: (endpoint) => `api.${endpoint}.loading`
};
Enter fullscreen mode Exit fullscreen mode

Zustand Comparison 

// Zustand stores
const useUserStore = create((set) => ({
    users: {},
    setUser: (id, data) => set((state) => ({
        users: { ...state.users, [id]: data }
    }))
}));

// Juris approach
context.setState(PATHS.userById(id), data);
Enter fullscreen mode Exit fullscreen mode

Jotai Atoms Comparison 

// Jotai atoms
const userAtom = (id) => atom(null);

// Juris paths
const userById = (id) => `users.${id}`;
Enter fullscreen mode Exit fullscreen mode

Performance Considerations

Path Caching 

const pathCache = new Map();

export const PATHS = {
    userById: (id) => {
        if (!pathCache.has(`user-${id}`)) {
            pathCache.set(`user-${id}`, `users.${id}`);
        }
        return pathCache.get(`user-${id}`);
    }
};
Enter fullscreen mode Exit fullscreen mode

Lazy Path Generation 

export const PATHS = {
    get userPaths() {
        return {
            byId: (id) => `users.${id}`,
            profile: (id) => `users.${id}.profile`,
            settings: (id) => `users.${id}.settings`
        };
    }
};
Enter fullscreen mode Exit fullscreen mode

Memory Optimization 

// Avoid creating new functions on each access
const createUserPath = (id) => `users.${id}`;
const createApiPath = (endpoint, prop) => `api.${endpoint}.${prop}`;

export const PATHS = {
    userById: createUserPath,
    apiProperty: createApiPath
};
Enter fullscreen mode Exit fullscreen mode

Best Practices

1. Consistent Naming Convention 

// ✅ Good: Consistent verb naming
export const PATHS = {
    getUserById: (id) => `users.${id}`,
    getApiStatus: (endpoint) => `api.${endpoint}.status`,
    getFormField: (form, field) => `forms.${form}.${field}`
};

// ❌ Avoid: Inconsistent naming
export const PATHS = {
    user: (id) => `users.${id}`,
    apiStatusFor: (endpoint) => `api.${endpoint}.status`,
    formFieldValue: (form, field) => `forms.${form}.${field}`
};
Enter fullscreen mode Exit fullscreen mode

2. Group Related Paths 

export const USER_PATHS = {
    byId: (id) => `users.${id}`,
    profile: (id) => `users.${id}.profile`,
    preferences: (id) => `users.${id}.preferences`
};

export const API_PATHS = {
    loading: (endpoint) => `api.${endpoint}.loading`,
    error: (endpoint) => `api.${endpoint}.error`,
    data: (endpoint) => `api.${endpoint}.data`
};
Enter fullscreen mode Exit fullscreen mode

3. Document Path Schemas 

/**
 * User state paths
 * @param {number} id - User ID
 * @returns {string} State path for user data
 * @example PATHS.userById(123) → "users.123"
 */
export const PATHS = {
    userById: (id) => `users.${id}`,

    /**
     * API endpoint state paths
     * @param {string} endpoint - API endpoint name
     * @param {'loading'|'error'|'data'} property - State property
     * @returns {string} State path for API state
     */
    apiState: (endpoint, property) => `api.${endpoint}.${property}`
};
Enter fullscreen mode Exit fullscreen mode

Anti-Patterns to Avoid

1. Over-Engineering Simple Cases 

// ❌ Overkill for simple static paths
const PATHS = {
    getAuthToken: () => 'auth.token'  // Just use 'auth.token' directly
};

// ✅ Use constants for static paths
const AUTH_TOKEN = 'auth.token';
Enter fullscreen mode Exit fullscreen mode

2. Complex Logic in Path Builders 

// ❌ Too much logic in path builders
const PATHS = {
    userPath: (id, includeProfile = false, includeSettings = false) => {
        let path = `users.${id}`;
        if (includeProfile) path += '.profile';
        if (includeSettings) path += '.settings';
        return path;
    }
};

// ✅ Keep path builders simple
const PATHS = {
    userById: (id) => `users.${id}`,
    userProfile: (id) => `users.${id}.profile`,
    userSettings: (id) => `users.${id}.settings`
};
Enter fullscreen mode Exit fullscreen mode

3. Inconsistent Parameter Order 

// ❌ Inconsistent parameter order
const PATHS = {
    formField: (form, field) => `forms.${form}.${field}`,
    apiResource: (property, endpoint) => `api.${endpoint}.${property}`  // Different order
};

// ✅ Consistent parameter order
const PATHS = {
    formField: (form, field) => `forms.${form}.${field}`,
    apiResource: (endpoint, property) => `api.${endpoint}.${property}`
};
Enter fullscreen mode Exit fullscreen mode

Enterprise-Level State Organization

Module-Based Path Organization 

// modules/auth/paths.js
export const AUTH_PATHS = {
    token: 'auth.token',
    user: 'auth.user',
    sessionById: (id) => `auth.sessions.${id}`
};

// modules/user/paths.js
export const USER_PATHS = {
    byId: (id) => `users.${id}`,
    listByRole: (role) => `users.roles.${role}`,
    activity: (userId, type) => `users.${userId}.activity.${type}`
};

// Central index
export { AUTH_PATHS } from './modules/auth/paths.js';
export { USER_PATHS } from './modules/user/paths.js';
Enter fullscreen mode Exit fullscreen mode

Environment-Specific Paths 

const createPaths = (env) => ({
    cache: (key) => `${env}.cache.${key}`,
    temp: (session) => `${env}.temp.${session}`,
    logs: (level) => `${env}.logs.${level}`
});

export const DEV_PATHS = createPaths('dev');
export const PROD_PATHS = createPaths('prod');
export const PATHS = process.env.NODE_ENV === 'production' ? PROD_PATHS : DEV_PATHS;
Enter fullscreen mode Exit fullscreen mode

Migration Strategy

Gradual Migration from Strings 

// Phase 1: Introduce constants for new features
const NEW_PATHS = {
    USER_PROFILE: 'user.profile',
    featureFlag: (flag) => `features.${flag}`
};

// Phase 2: Migrate existing critical paths
const LEGACY_PATHS = {
    AUTH_TOKEN: 'auth.token',  // Was: 'auth.token'
    USER_DATA: 'user.data'     // Was: 'user.data'
};

// Phase 3: Combine into unified system
export const PATHS = {
    ...LEGACY_PATHS,
    ...NEW_PATHS
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

Dynamic path builders represent a significant evolution in state management for large Juris applications. They provide:

  • Type safety through validation
  • Maintainability through centralized path management
  • Flexibility through parameterized generation
  • Discoverability through organized path schemas
  • Performance through optimized path creation

By adopting dynamic path builders, teams can build more robust, maintainable, and scalable Juris applications while preserving the framework's simplicity and flexibility.

The pattern scales from simple constants for small apps to sophisticated path generation systems for enterprise applications, making it a versatile solution for teams of any size.

Top comments (0)