1.
Copyright © twilio Inc. 2013
DESIGNING MODULES FOR THE
BROWSER AND NODE
JSCONF 2014

2.
HI. I’M KEVIN.
developer evangelist @ twilio

3.
MAKE AND
RECEIVE
PHONE CALLS

4.
SEND AND
RECEIVE TEXT
AND PICTURE
MESSAGES

5.
ENABLE VOIP
CALLING IN
DESKTOP
BROWSERS OR
MOBILE APPS

6.
NPM INSTALL TWILIO

7.
WHY BROWSERIFY?
• Same module loading system
• Same package manager
• Same code style
• Potential for code reuse
• Many modules just work

8.
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

9.
DESIGN TO BE BROWSERIFIED
• Expose a browser-specific entry point
• Define any custom shims for dependencies as
needed
• Setup source transforms

10.
DEMO

11.
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

12.
USE CASE - TWILIO CLIENT (VOIP)
BROWSER NODE
Request capability token

13.
USE CASE - TWILIO CLIENT (VOIP)
BROWSER NODE
Hit Twilio REST API maybe,
return capability token

14.
USE CASE - TWILIO CLIENT (VOIP)
BROWSER TWILIO
Ask Twilio to initiate VoIP call

15.
USE CASE - TWILIO CLIENT (VOIP)
NODE TWILIO
Ask for instructions on how to
handle call

16.
USE CASE - TWILIO CLIENT (VOIP)
NODE TWILIO
Return instructions for the
call

17.
USE CASE - TWILIO CLIENT (VOIP)
BROWSER YOUR NANA
VoIP call connected!

18.
DEMO

19.
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

20.
THANK YOU!
@kevinwhinnery
kw@twilio.com
!
http://github.com/kwhinnery
http://slideshare.net/kwhinnery