designing modules for the browser and node with browserify
DESCRIPTION
JSConf presentation, how to design modules that work both in the browser and node.TRANSCRIPT
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 [email protected]
!
http://github.com/kwhinnery http://slideshare.net/kwhinnery