133: Sam Selikoff - Building Production-Ready SPAs Fast with Mirage.js

What It Covers

Sam Selikoff explains Mirage.js, an API mocking tool that intercepts HTTP requests in JavaScript applications, enabling front-end developers to build production-ready features without waiting for back-end APIs by creating an in-memory database alongside their development workflow.

Key Questions Answered

• •Development workflow integration: Mirage runs in the same process as your front-end application without requiring separate terminal tabs or port configurations. Import the library into your bootstrap file, instantiate the server in development mode, and define endpoints that intercept fetch requests while maintaining identical application code for production.
• •In-memory database layer: Mirage maintains referential integrity across route handlers through a shared JavaScript object database. Create data using factory patterns inspired by Rails' factory_bot, define relationships like director-has-many-movies, and mutations persist across navigation without managing foreign keys manually, enabling realistic multi-page workflows during development.
• •Testing and development code reuse: The same route handler definitions work in both development and testing environments. Tests start with an empty database and use server.create to set up specific scenarios, while development uses seed hooks. This eliminates duplicate mocking code and keeps tests focused on assertions rather than API implementation details.
• •Serializer layer flexibility: Mirage separates database conventions from API response formats through a serializer layer. Store data using camelCase JavaScript conventions internally, then configure serializers for JSON API, Active Model Serializer, or custom formats. Built-in serializers handle root keys, meta information, and relationship linking without changing database structure.
• •State management advantages: Front-end developers can define multiple data scenarios locally without coordinating shared staging environments or running complex back-end infrastructure. Switch between states like anonymous user, subscriber, or admin by changing variables in seed files. Hot module reloading applies data changes instantly without restarting servers or running database migrations.