A Little About Me...

I'm a Software Engineer in Venice, CA where I get to work with great people. Right now, I'm dabbling in deep learning/machine learning and blockchain technologies like bitcoin, ethereum, and hyperledger fabric. In my day job I build and maintain numerous AWS hosted web applications/websites including howstuffworks.com and zoo.com using javascript and python.

Data Driven Forms (Dynamic Forms) with Vuejs and json-schema

Forms - they're a necessary evil for any frotend job. You'll inevitably be asked to make a form with some unusual requirements. I've found that no matter how simple a form seems, it can be surprisingly labor intensive to implement new fields, esepcially when requests come in for conditional fields / form states.

JSON-schema to the rescue. I recently came across react-json-schema-form which generates form templates with validation based on a custom json-schema. Seeing this demo inspired me to re-think how we create/maintain forms in my company's apps. Instead of manually going into the template code and writing a bunch of custom fields and conditionals, we could make the json-schema do most of the heavy lifting. Adding a new form would ideally be as simple as duplicating an existing json-schema defintion and editing it.

We use Vuejs for our single page applications, so I did some digging to find something similar to react-json-schema and found vue-json-schema and vue-form-generator. Both seemed right for the job at first, but I soon found that they weren't customizable enough in the long run for our specific needs. So I decided to take the concept of data-driven dynamic forms and make my own implementation.

Tools I used for the job:

• Vuejs - templating
• Vuex - state management
• Vuelidate - validation library
• json-schema - dynamic form rules

In the end, basically everything needed to render the form, including validation rules and field types were abstracted into the json schema, allowing the template code to be way simpler. The Vue template code loops over all the form fields within the schema, and template code within each field only had to define validtion code once.

Below is an abridged version of what the code looked like:

Form.vue

Input.vue

schema.json

{
    ...
    "budget": {
           "type": "number",
           "format": "integer",
           "label": "Budget",
           "component": "input-field",
           "min": 0,
           "max": 1000,
           "defaults": {
               "openmail": 50,
               "zoo": 50,
               "howstuffworks": 50,
               "autoversed": 50
           },
           "attrs": {
               "unit": "currency"
           }
       },
       "business_name": {
           "type": "string",
           "label": "Business Name",
           "component": "input-field",
           "max": 25,
           "defaults": {
               "zoo": "Zoo.com",
               "howstuffworks": "Howstuffworks",
               "autoversed": "Autoversed"
           }
       },
       ...
 }
                

Slack Reminder App

Check the project out github: Slack Pull Request Reminder

Node Express Cluster Server Setup

For simple web apps, I like to load balance the workers on my servers by using Node's clusters. Doing so speeds up load times when multiple users are accessing the website at the same time.

Here is my usual node express server setup:

'use-strict';
var cluster = require('cluster');
if(cluster.isMaster) {
    // initialize clusters on startup
    var numWorkers = require('os').cpus().length;

    console.log('Master cluster setting up ' + numWorkers + ' workers...');

    for(var i = 0; i < numWorkers; i++) {
        cluster.fork();
    }

    cluster.on('online', function(worker) {
        console.log('Worker ' + worker.process.pid + ' is online');
    });

    cluster.on('exit', function(worker, code, signal) {
        console.log('Worker ' + worker.process.pid + ' died with code: ' + code + ', and signal: ' + signal);
        console.log('Starting a new worker');
        cluster.fork();
    });
} else {
    // dependencies

    // express
    var express = require('express');
    // middleware
    var http = require('http');
    var morgan = require('morgan');
    var bodyParser = require('body-parser');

    // instantiate express app
    var app = express();

    // use middleware
    app.use(morgan('dev'));
    app.use(express.static(__dirname));
    app.use(bodyParser.urlencoded({extended: true}));
    app.use(bodyParser.json());

    // Routes

    // NOTE: this is where all my routes go
    // EXAMPLE:
    // app.route('/content')
    .get(function(request, response){
        // do stuff
    })
    .post(function(request, response){
        // do stuff
    });

    // create/run server
    var PORT = process.env.PORT || 3000;
    var server = http.createServer(app).listen(PORT);
    console.log('listening on port '+PORT);
}
                

Restart Node Server Bash Script

I recently made a bash script to automate my server re-deploys. I use a node server for a few websites and I was getting tired of ssh-ing into my ec2 instances and running the same commands over and over whenever I made a change. So I just made this little script which I run by calling ./run_server.sh while ssh'd into the server. Deploying changes to my websites is now a breeze.

#!/bin/bash

# pulls most recent code from github (master)

git add .
git commit -m'pulling down new code'
git pull origin master

# finds the process ID for the running node server and kills it:

echo '1. pulled most recent code from git.\n2. restarting server...'
node_serverPID=($(ps -ef | grep 'node server.js'))
kill ${node_serverPID[1]}
echo 'killed node server process at:'
echo ${node_serverPID[1]}

# uses nohup to infinitely run the server in the background
# and logs the output logs to stdout.txt and stderr.txt

PORT=80 nohup node server.js > stdout.txt 2 > stderr.txt &
echo 'server now running indefinitely on port 80'