Angular.js and React.js

Follow along @



The constant evolution of Webforms

Webforms 1.0

circa 1995 - 2000

Webforms 1.0

Built within static HTML pages.

Webforms 1.0

The rise of backend templating languages

Webforms 2.0

circa 2000 - today

Webforms 2.0

The rise of frameworks

Backend Form Structures

Like Drupal's Form API

 * Returns the render array for the form.
function my_module_my_form($form, &$form_state) {
  $form['name'] = array(
    '#type' => 'fieldset',
    '#title' => t('Name'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
  $form['name']['first'] = array(
    '#type' => 'textfield',
    '#title' => t('First name'),
    '#required' => TRUE,
    '#default_value' => "First name",
    '#description' => "Please enter your first name.",
    '#size' => 20,
    '#maxlength' => 20,
  $form['name']['last'] = array(
    '#type' => 'textfield',
    '#title' => t('Last name'),
    '#required' => TRUE,
  $form['year_of_birth'] = array(
    '#type' => 'textfield',
    '#title' => "Year of birth",
    '#description' => 'Format is "YYYY"',
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
  return $form;

Life was good

Then this happened

"Mobile First"

Mobile First

The server still provides the forms.

Life was good

Then this happened

Webforms 3.0

circa - The future

Developer Mandates

Applications must be made differently

"Mobile first" is no longer good enough

"API first" Development

  • Build your REST platform first.
  • REST platform must be "stateless"
  • Your first "app" should be the API test.
  • Application must ONLY use those API's. Including Forms.

Why "API first"?

Forces us to develop websites like web applications.

Platforms that are "API-first"


We now have to build forms the good ol' fashioned way...

and that sucks.

Dynamic JSON Powered Forms

The next generation of webforms.

Dynamic Form Rendering

  • Uses a JSON schema to define a form.
  • 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: '',
      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

Ok, this is great... but now I have to build that JSON schema, which is a pain.
- Everyone

Form Builder

Creates the JSON schema for the form.

Automatic REST API

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

Dynamic Form Rendering via API

Loads the schema via REST API


Advanced Features

Data Binding


Advanced Features

Submission Handling


Form Embedding

There are two ways to embed a dynamic form.

  • iFrame Embedding
  • Component Embedding

iFrame Embedding

The goods

  • Easy to embed. Usually a single line of code.
  • Sandboxed functionality

The bads

  • No dynamic resizing
  • Cannot modify CSS
  • No JavaScript control
  • Some browsers block functionality
  • Nested navigation
  • Slow Loading
  • Cross Origin Nightmares

Component Embedding

The goods

  • Direct DOM injection
  • Full CSS Control
  • Full JavaScript Control
  • Much faster loading
  • Direct API access

The bads

  • Harder to embed
  • Requires dependency alignment

Component Embedding

for Angular.js

<script src="https://rawgit.com/formio/ngFormio/develop/dist/formio-full.js"></script>

app.module('myApp', ['formio']);

<formio src="'https://examples.form.io/simple'"></formio>

Component Embedding

for React.js

<script src="https://rawgit.com/formio/ngFormio/develop/dist/formio-full.js"></script>
<script src="https://rawgit.com/formio/react-formio/master/dist/build/Formio.min.js"></script>


A Dynamic JSON Powered Form


Thank you!