designing modules for the browser and node with browserify

Copyright © twilio Inc. 2013

DESIGNING MODULES FOR THE BROWSER AND NODE

JSCONF 2014

HI. I’M KEVIN.developer evangelist @ twilio

MAKE AND RECEIVE PHONE CALLS

SEND AND RECEIVE TEXT AND PICTURE MESSAGES

ENABLE VOIP CALLING IN DESKTOP BROWSERS OR MOBILE APPS

NPM INSTALL TWILIO

WHY BROWSERIFY?

• Same module loading system

• Same package manager

• Same code style

• Potential for code reuse

• Many modules just work

DO I NEED TO BROWSERIFY?

Maybe, if your module:

• Has complimentary interfaces on client and server (ws)

• Doesn’t just work with Browserify’s shims

DESIGN TO BE BROWSERIFIED

• Expose a browser-specific entry point

• Define any custom shims for dependencies as needed

• Setup source transforms

DEMO

USE CASE - TWILIO CLIENT (VOIP)

• Enable VoIP calling between browsers, mobile apps, and standard PSTN phones

• Requires both a server and client component

• Lots of configuration when client and server are disconnected

USE CASE - TWILIO CLIENT (VOIP)

BROWSER NODE

Request capability token

USE CASE - TWILIO CLIENT (VOIP)

BROWSER NODE

Hit Twilio REST API maybe, return capability token

USE CASE - TWILIO CLIENT (VOIP)

BROWSER TWILIO

Ask Twilio to initiate VoIP call

USE CASE - TWILIO CLIENT (VOIP)

NODE TWILIO

Ask for instructions on how to handle call

USE CASE - TWILIO CLIENT (VOIP)

NODE TWILIO

Return instructions for the call

USE CASE - TWILIO CLIENT (VOIP)

BROWSER YOUR NANA

VoIP call connected!

DEMO

RESOURCES

• package.json docs: https://github.com/substack/node-browserify#packagejson

• “browser” field spec: https://gist.github.com/defunctzombie/4339901

• Transforms: https://github.com/substack/node-browserify#btransformopts-tr

• ngrok: http://ngrok.com

THANK YOU!@kevinwhinnery kw@twilio.com

!

http://github.com/kwhinnery http://slideshare.net/kwhinnery