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
![Page 1: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/1.jpg)
Copyright © twilio Inc. 2013
DESIGNING MODULES FOR THE BROWSER AND NODE
JSCONF 2014
![Page 2: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/2.jpg)
HI. I’M KEVIN.developer evangelist @ twilio
![Page 3: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/3.jpg)
MAKE AND RECEIVE PHONE CALLS
![Page 4: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/4.jpg)
SEND AND RECEIVE TEXT AND PICTURE MESSAGES
![Page 5: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/5.jpg)
ENABLE VOIP CALLING IN DESKTOP BROWSERS OR MOBILE APPS
![Page 6: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/6.jpg)
NPM INSTALL TWILIO
![Page 7: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/7.jpg)
![Page 8: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/8.jpg)
WHY BROWSERIFY?
• Same module loading system
• Same package manager
• Same code style
• Potential for code reuse
• Many modules just work
![Page 9: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/9.jpg)
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
![Page 10: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/10.jpg)
DESIGN TO BE BROWSERIFIED
• Expose a browser-specific entry point
• Define any custom shims for dependencies as needed
• Setup source transforms
![Page 11: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/11.jpg)
DEMO
![Page 12: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/12.jpg)
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
![Page 13: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/13.jpg)
USE CASE - TWILIO CLIENT (VOIP)
BROWSER NODE
Request capability token
![Page 14: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/14.jpg)
USE CASE - TWILIO CLIENT (VOIP)
BROWSER NODE
Hit Twilio REST API maybe, return capability token
![Page 15: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/15.jpg)
USE CASE - TWILIO CLIENT (VOIP)
BROWSER TWILIO
Ask Twilio to initiate VoIP call
![Page 16: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/16.jpg)
USE CASE - TWILIO CLIENT (VOIP)
NODE TWILIO
Ask for instructions on how to handle call
![Page 17: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/17.jpg)
USE CASE - TWILIO CLIENT (VOIP)
NODE TWILIO
Return instructions for the call
![Page 18: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/18.jpg)
USE CASE - TWILIO CLIENT (VOIP)
BROWSER YOUR NANA
VoIP call connected!
![Page 19: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/19.jpg)
DEMO
![Page 20: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/20.jpg)
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
![Page 21: Designing Modules for the Browser and Node with Browserify](https://reader034.vdocuments.mx/reader034/viewer/2022052523/5560cc94d8b42a08088b4ac0/html5/thumbnails/21.jpg)
THANK YOU!@kevinwhinnery [email protected]
!
http://github.com/kwhinnery http://slideshare.net/kwhinnery