How to build Serverless Applications with

JSON POWERED FORMS

Follow along @

http://bit.ly/1ROeEBy

About

https://github.com/formio/formio

Serverless Applications

  • Completely separated architecture
  • Leverages Microservices (AWS Lambda)
  • Leverages Stateless REST APIs

JSON Powered Forms

The next generation of webforms.

http://bit.ly/1rwRpqM

JSON Powered Forms

How it works

  • A form builder is used to create a JSON Schema.
  • That JSON schema implements both the form and coresponding REST API.
  • That schema is provided to the application via API.
  • A frontend JavaScript library dynamically renders the form on the page.

How it works

Uses a JSON schema to define a form.

{
  components: [
    {
      type: 'textfield',
      label: 'First Name',
      key: 'firstName',
      placeholder: 'Enter your first name.',
      defaultValue: 'Travis',
      validate: {
        maxLength: '',
        minLength: '',
        required:true
      }
    },
    {
      type: 'textfield',
      label: 'Last Name',
      key: 'lastName',
      placeholder: 'Enter your last name.',
      defaultValue: 'Tidwell',
      validate: {
        maxLength: '',
        minLength: '',
        required: true
      }
    },
    {
      type: 'button',
      label: 'Submit',
      key: 'submit',
      action: 'submit'
    }
  ]
}

Dynamic Form Rendering

The schema is then rendered dynamically using JavaScript

https://jsfiddle.net/travistidwell/3ox713fo/5/
Ok, this is great... but now I have to build that JSON schema, which is a pain.
- Everyone

Form Building and Rendering Demo

http://bit.ly/1WK0W9r

Benefits of JSON Powered Forms

JSON is ubiquitous

Deploy your forms anywhere


						<formio src="'https://myproject.form.io/myform'"></formio>

Offline Form Rendering & Data Collecting

A platform for

JSON Powered Forms + Serverless Applications

Automatic REST API

Constructs a REST api for both the Form JSON schema and the submission data handling.

Authentication + Roles and Permissions

Using JWT tokens and OAuth

Form Actions

Sending emails, Triggering Webhooks, Populating Google Sheets, etc.

Now lets build something with

Thank you!