What is Open Cells?

Open Cells is a JavaScript framework for building Single Page Applications based on web components. It builds on top of standard HTML, CSS and JavaScript and provides a declarative, component-based programming model with Web Components at the heart of it. This approach embraces reusability and interoperability, which helps efficiently develop user interfaces of any complexity.

As Open Cells is an architecture built over the idea that instead of building monolithic applications it is better to build a set of reusable components (business modules) that are assembled and communicate with each other to create applications.

Let's see a minimal example of an Open Cells app.

In the index of our application, we place the main node and then execute the startApp function imported from @open-cells/core. This is done as follows:

import {startApp} from '@open-cells/core';

// Define routes and other necessary configurations
const routes = [
  // Define your routes here
  // You must have an initial page in root path
  {
    path: '/',
    name: 'home',
    component: 'home-page',
    action: async () => {
      await import('../pages/home/home-page.js');
    },
  },
];

// Execute startApp with necessary options
startApp({
  routes,
  mainNode: 'app-content',
});

<div id="app-content"></div>

Open Cells revolves around two main concepts: a core library, and Web Components as componentization model.

Open Cells core is the library that provides applications with:

• State management through the use of pub/sub messaging pattern
• Routing mechanism
• App Configuration
• Bootstrapping

If your application logic involves extensive data communication among components, you can take full advantage of this architecture.

Open Cells uses Web Components as its componentization model. Although app pages are built using Lit, any kind of Web Component can be used inside them, from vanilla ones to others built using Lit or other libraries.

You can explore an extensive collection of Web Components available or create your own ones to work with. Check our specific Web Components Libraries section to find out about some of the libraries that can be used.

Open Cells is available under the terms of the Apache-2.0 license.