Designing Modules for the Browser and Node with Browserify

2,566 views

Published on

JSConf presentation, how to design modules that work both in the browser and node.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,566
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing Modules for the Browser and Node with Browserify

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

×