MSON

Everyone Can Make Software

🏗️

Who am I?

• Director of Software Architecture at Knock�(we are hiring at knockcrm.com)
• Creator of Spiegel, a scalable replication layer for CouchDB
• Creator of Slouch, a JS client for CouchDB
• Creator of DeltaDB, an offline-first database
• Creator of MSON Lang

The problem

You still need to write code to solve many problems

teepublic.com

Why can’t creating software be as easy as creating a spreadsheet?

The dream

Everyone can create software visually

First step

Create a language that can be easily manipulated by a UI

Declarative = what

Imperative = how

Imperative

Declarative

let arr = [1, 2, 3, 4, 5, 6];��let result = [];�for (let i = 0; i < arr.length; i++) {� if (arr[i] % 2 === 0) {� result.push(arr[i]);� }�}

�console.log(result); // [2, 4, 6]

​

let arr = [1, 2, 3, 4, 5, 6];

​

let result =

arr.filter((num) => num % 2 === 0);�

​

​

​

​

console.log(result); // [2, 4, 6]

https://www.slideshare.net/mzupzup/functional-programming-principles-patterns

vs

MSON is a declarative language with the capabilities of an object-oriented language

MSON is a subset of JSON

​

The MSON compiler is written in JS and is framework agnostic

Declare your components

​

Let the UI layer automatically render them

What the what?

Simple app

{� component: 'RecordList', label: 'Contacts',� baseFormFactory: {� component: 'Factory',� product: {� component: 'Form',� fields: [{ name: 'name', component: 'TextField', label: 'Name' }]� }� },� store: { component: 'LocalStorageStore', storeName: 'contacts' }�}

​

​

Language Features

• Components, Validators, Events & Listeners
• Access Control
• Inheritance, Template Parameters, Composition & Factories
• Aggregate Components
• Schemas and Self Documenting

Components

{� name: 'MyForm',

component: 'Form',� fields: [� { name: 'name', component: 'TextField', label: 'Name', required: true },� { name: 'email', component: 'EmailField', label: 'Email' }� ]�}

Components

Validators

{� name: 'MyForm', component: 'Form',� fields: ...,� validators: [{� where: { 'fields.email.value': 'nope@example.com' },� error: {� field: 'email',� error: 'must not be {{fields.email.value}}'� }� }]�}

​

MongoDB-Style Query

where: {� 'retypePassword.fields.value': {� $ne: '{{fields.password.value}}'� },� error: ...�}

​

Events & Listeners

{� name: 'MyForm', component: 'Form',� fields: ..., validators: ...,� listeners: [{� event: 'submit',� actions: [{� component: 'Set', name: 'fields.email.value',� value: '{{fields.name.value}}@example.com'� }]� }]�}

​

Conditional Actions

actions: [{� component: 'Set',� if: {� 'fields.email': {� $or: [{ value: null }, { value: ''}]� }� },� name: 'fields.email.value',� value: '{{fields.name.value}}@example.com'�}]

Access Control

access: {� form: {� create: ['admin', 'manager'], read: ['admin', 'employee'],� update: ['admin', 'owner', 'manager'], archive: 'admin'� },� fields: {� name: {� create: 'admin', update: 'owner'� }� }�}

​

Inheritance

{� name: 'MyFormExtended',� component: 'MyForm',� fields: [{� name: 'phone',� component: 'PhoneField',� label: 'Phone Number',� before: 'submit'� }]�}

​

Template Parameters

{� name: 'MyTemplatedForm',� component: 'Form',� fields: [� '{{firstField}}',� {� name: 'secondField',� label: '{{secondFieldLabel}}',� component: 'EmailField'� }� ]�}

​

{� name: 'MyFilledTemplatedForm',� component: 'MyTemplatedForm',� firstField: {� name: 'firstName',� component: 'TextField',� label: 'First Name'� },� secondFieldLabel: 'Email Address'�}

​

Schemas & Self Documenting

{� name: 'MyComponent', component: 'Component',� schema: {� component: 'Form',� fields: [{� name: 'hidden', component: 'BooleanField',� help: 'Whether or not the component is hidden'� }, {� name: 'updatedAt', component: 'DateField', required: true,� help: 'When the component was updated'� }]� }�}

​

Form Builder

Autogenerate forms for React and MaterialUI

TODO

Create a UI that can build any app

MSON

https://github.com/redgeoff/mson

🏗️