MSON: Build Web Apps In Record Time

MSON is a system that promises to let you create data-driven web applications quickly and easily, even if you aren’t the most experienced programmer. Actually, the goal of MSON is to allow you to create data-driven web apps without knowing how to code at all. Every day, we get closer to achieving that goal.

The future vision is that you will be able to design your web app on screen with a drag-and-drop builder, then get up-and-running with basic functionality in minutes.

For now though, there is some “coding” involved, albeit minimal for a basic application.

A Simple App

For example, this example app was created with very little user code (~41 lines). Open up the code sandbox and take it for a spin.

MSON Components

Everything in MSON is based on Components, the building blocks of the MSON architecture. To define the structure of your app (or a portion of it), you have to create what is called a MSON component definition. For instance, the definition for a simple to-do list app would look like this:

{
  component: "Form",
  fields: [
    {
      component: "Text",
      name: "header",
      text: "(drag to reorder)"
    },
    {
      component: "CollectionField",
      name: "tasks",
      label: "Tasks",
      hideLabel: true,
      forbidOrder: false,
      formFactory: {
        component: "Factory",
        product: {
          component: "Form",
          fields: [
            {
              name: "task",
              component: "TextField",
              label: "Task",
              multiline: true,
              required: true
            },
            {
              name: "due",
              component: "DateField",
              label: "Due"
            }
          ]
        }
      },
      store: {
        component: "LocalStorageStore",
        storeName: "contacts"
      }
    }
  ]
}

And with that component definition, the entire functionality is defined for a basic app that lets you manage a to-do list.