Proposal for SDK packaging

readme.md

Proposal for JavaScript SDK packaging

Right now, the Twilio client-side SDKs feel like they are designed and shipped by dozens of people. By making some changes to the Twilio SDK CDN and our module sructure, we could address some of these issues.

Include the latest everything from CDN

For onboarding and getting started, we could include a "kitchen sink" artefact that bundles up the latest version of every Twilio client-side SDK.

<script src="//media.twiliocdn.com/js/twilio.min.js"></script>

Then clients could access the full range of Twilio APIs without including multiple scripts. This would be ideal for onboarding and exploration.

Single Namespace, Multiple Products

The twilio namespace could also provide a common initialization mechanism shared across products.

twilio.init('ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var channel = twilio.chat.channel('general');
var device = twilio.voice.device();

device.on('incoming', function(conn) {
  conn.accept();
});

channel.on('message', function(message) {
  console.log(message.body);
});

Including specific or dynamic versions

Using Cloudflare Page Rules, we could create a smart endpoint that would allow CloudFlare to cache concatenated versions of specific components and push them to edge locations.

<script src="//media.twiliocdn.com/js/twilio.min.js?common=1.0.1&video=2.1.0"></script>

For locked versions of SDKs, we could set cache headers to never expire. If we wanted to support more flexible versions, we could use more relaxed cache headers on the response we sent back.

<script src="//media.twiliocdn.com/js/twilio.min.js?common=^1.0&video=~2.1.0"></script>

Browserify

When distributing SDKs via npm, each individual product should be listed as a requirement. Interaction with the client-side code, however, should be identical save for the require call. The main twilio-common module would attempt to require other SDKs and build the same namespace structure for a non-browserify environment.

{
  "dependencies": {
    "twilio-common": "^1.0.0",
    "twilio-video": "~2.1.0",
    "twilio-chat": "^1.1.0"
  }
}

Usage example:

const twilio = require('twilio-common');
twilio.init('ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
let room = twilio.video.room('my-room');
room.on('participantJoined', (p) => {
  console.log('yo yo ' + p.username);
});