DirectLine-JS Rewrite and Modernization

[justinwilaby]

This is a complete rewrite and modernization effort for DirectLine-JS with several goals in mind. After some discussion with others in the team, we all agree that DirectLine could be much better.

Motivation

Current State of DirectLine-JS

The current implementation of DirectLine-JS uses libraries and patterns that steepen the learning curve, contribute to very large file size (67k minified), present unnecessary challenges with its use in Node and make meaningful unit testing difficult. These create friction for adoption and make community-driven contributions less likely. Consuming DirectLine-JS forces the developer to also take the RxJS as a dependency and requires a moderate understanding of Observables which dramatically increases file size and makes rapid prototyping harder for those not familiar with it.

Rewrite Goals

The goals of the rewrite are as follows:

1. Zero-dependencies for the Web Client (and familiar isomorphic utilities for Node) creating the smallest possible footprint possible while preserving the same fundamental behavior as the original implementation. 10k minified which is almost 7x smaller than the current implementation. There are only native JavaScript language constructs used and each have polyfills available when old browser support is required.
2. Modernize the patterns, practices and syntax for better comprehension and a flat learning curve. if you are familiar with for...of loops, await and async you already know how to use this rewrite
3. Retain the ability to extend the DirectLine class in cases were its functionality needs to be augmented by the developer.

Building from sources

Clone the repo and switch to the v1 branch and run this command:

npm i && npm run build

Usage

The DirectLine class is iterable with a for...of loop. Each iteration delivers a Promise which will resolve with either a ConnectionStatus, indicating a change in connectivity to a conversation, or it will resolve with an array of Activity objects indicating activity within the conversation. A single DirectLine instance can service any number of consumers that wish to receive these messages.

Below is an example of basic, yet complete usage:

import { DirectLine } from 'botframewok-directlinejs/web';
// Create a new instance of DirectLine and pass in a secret obtained from the Azure portal
const directLine = new DirectLine({secret: <secret>});

// Define a listener function that initiates the loop 
// and awaits on each promise delivered by DirectLine
async function listen() {
  for (let promise of directLine) {
    // Be sure to await the promise
    const result = await promise;
    console.log('got result', result);
  }
}
// Starts a new conversation and begins listening
// for ConnectionStatus changes or Activities.
listen().then(() => console.log('connection ended'));

// Post an activity - after this activity is posted, 
// the loop within the listen() function will receive 
// the bot's response from DirectLine
directLine.postActivity(myActivity).then(activityId => console.log(`posted new activity ${activityId}`));

Final Thoughts

I'd like to start the discussion with this PR and am interested in the community's response. I am open to comments and suggestions!