The document discusses designing modules for both the browser and Node.js using Browserify. It explains that Browserify allows using the same module loading system, package manager, and code style for both environments. It provides an example of a VoIP calling module that requires both browser and server components. The document recommends exposing a browser entry point, defining custom shims, and using source transforms when designing modules to work with Browserify. It also provides resources for more information on Browserify configuration and transforms.

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

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

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

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

11. DEMO

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

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

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

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

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

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

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

19. DEMO

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

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