Isomorphic MVC (IMVC): A Unified Front‑End Architecture for Server‑Side and Client‑Side Rendering

This talk explains why traditional front‑end MVC frameworks like Backbone are being replaced by MVVM/Flux and how extending the MVC idea to the controller layer yields an upgraded architecture called IMVC (Isomorphic MVC), which allows the same code to run on both Node.js servers and browsers.

1. What is isomorphic? The term means "same shape" and originally describes a mathematical mapping that preserves structure. In computing it refers to code that can be executed unchanged in both environments.

Two kinds of isomorphic JavaScript exist:

Content isomorphism : identical functions run on server and client, e.g., function add(a, b) { return a + b; } .

Form isomorphism : parts of the code are environment‑specific, such as conditional branches guarded by if (isServer) { /* server logic */ } else { /* client logic */ } . Packages that claim to be isomorphic often use this form, which can increase bundle size.

Isomorphism is not a binary property but a spectrum; developers can choose the depth of sharing.

2. Value of isomorphism includes SEO‑friendly server‑rendered HTML, faster first‑paint via SSR, and reduced code duplication, improving maintainability.

3. Implementation strategy (IMVC)

Only share code in the intersection of server and client (HTML rendering and data fetching).

Two approaches: directly reuse isomorphic code, or wrap non‑isomorphic parts as form‑isomorphic.

Examples: obtaining the User‑Agent string on the server with req.get('user-agent') and exposing a getUserAgent() helper; handling cookies similarly.

Redirect handling abstracts server 302, client location.href , and history.pushState into a unified redirect(url, context) function.

4. IMVC architecture

The framework introduces a Controller class (OOP) that connects Model, View, History, and other services. A typical controller looks like:

class MyController extends BaseController {
  requireLogin = true;
  View = MyView;
  initialState = { count: 0 };
  actions = actions;
  handleIncre = () => {
    const { history, store, fetch, location, context } = this;
    store.actions.INCREMENT();
  };
  async shouldComponentCreate() { /* auth */ }
  async componentWillCreate() { /* fetch first‑screen data */ }
  componentDidMount() { /* fetch later data */ }
  pageWillLeave() { /* cleanup before navigation */ }
  windowWillUnload() { /* cleanup before tab close */ }
}

The controller is instantiated with newController(location, context) , its init() method returns a view instance, and a view‑engine renders the result to HTML (server) or DOM (client).

5. create‑app library provides a thin wrapper around history , path-to-regexp , and a custom controller loader. Configuration example:

const app = createApp({
  type: 'createHistory',
  container: '#root',
  context: { isClient: true, isServer: false, ...injectFeatures },
  loader: webpackLoader,
  routes: routes,
  viewEngine: ReactDOM
});
app.start();

Server entry uses the same configuration but with loader: commonjsLoader and viewEngine: ReactDOMServer . A minimal server‑side rendering handler:

router.get('*', async (req, res, next) => {
  try {
    const { content } = await app.render(req.url, serverContext);
    res.render('layout', { content });
  } catch (e) { next(e); }
});

6. Relite – a lightweight Redux alternative

Relite merges action types, creators, and reducers, auto‑binds actions, and supports async actions via async/await . Example store definition:

let EXEC_BY = (state, input) => {
  let value = parseFloat(input, 10);
  return isNaN(value) ? state : { ...state, count: state.count + value };
};
let EXEC_ASYNC = async (state, input) => {
  await delay(1000);
  return EXEC_BY(state, input);
};
let store = createStore({ EXEC_BY, EXEC_ASYNC }, { count: 0 });

Relite enforces pure functions and immutable state, and can be extended with a recorder plugin for time‑travel debugging.

7. Engineering tooling includes Node.js, Express, Babel, Webpack, Standard.js, Prettier, Mocha, and scripts for hot‑module replacement, CSS on‑demand loading, code splitting, asset hashing, and CLI task orchestration.

Conclusion

IMVC has been proven in practice to deliver a high‑completion‑rate isomorphic solution that improves developer experience and performance, and the team plans to continue evolving the approach.