Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 mo...
DO I NEED TO BROWSERIFY?
Maybe, if your module:
• Has complimentary interfaces on client and
server (ws)
• Doesn’t just wo...
DESIGN TO BE BROWSERIFIED
• Expose a browser-specific entry point
• Define any custom shims for dependencies as
needed
• S...
DEMO
USE CASE - TWILIO CLIENT (VOIP)
• Enable VoIP calling between browsers, mobile
apps, and standard PSTN phones
• Requires b...
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://gi...
THANK YOU!
@kevinwhinnery
kw@twilio.com
!
http://github.com/kwhinnery
http://slideshare.net/kwhinnery
Designing Modules for the Browser and Node with Browserify
Nächste SlideShare
Wird geladen in …5
×

Designing Modules for the Browser and Node with Browserify

2.817 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×