The React library for Webex Teams (formally Cisco Spark) allows developers to easily incorporate Cisco Cloud Collaboration capabitilies into your application. Throughout this session, we'll describe the architecture of the Webex Widgets, and detail how to start from the existing React opensource project on github to create a customized version of the Webex Teams Widgets. DEVNET-3891 https://www.ciscolive.com/us/learn/sessions/session-catalog/?search=DEVNET-3891

1. #CLUS
Stève Sfartz, API Evangelist
DEVNET-3891
WebexTeamsWidgets
Technical Drill down

2. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
/Cisco/DevNet/SteveSfartz
• API Evangelist @CiscoDevNet
• API Design,Architecture and Operations
• WebexTeams & xAPI developer
• hosted @CiscoROI: Paris Innovation Center
• Node.js mainly, a bit of #golang
• Europe and all over the world
• github: //ObjectIsAdvantag
“vision without
execution is
hallucination”
-- Thomas Edison
mailto: stsfartz@cisco.com
twitter: @SteveSfartz
DEVNET-3891 2

3. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Agenda
• Meet theWidgets
• Embedding inWeb applications
• CSS customization
• Introduction to React
• Injecting access tokens dynamically
• Adding custom activities to the ‘Space’Widget
• Interacting with « Permanent guests »
• Roadmap,Contributions, Q&A
Beginner
Advanced
Intermediate
DEVNET-3891 3

4. Meet the
WebexTeamsWidgets

5. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 5

6. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
‘Recents’
DEVNET-3891 6

7. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
‘Space’
DEVNET-3891 7

8. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Recents
Space
DEVNET-3891 8

9. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
WebexTeams
Secure & Open
Complete & Simple
Webex for Developers
User Integrations, APIs/SDKs, etc.
Spark Hybrid Services
Cloud + Prem
Partner Services
Interconnect
Message Meeting Call
1:1 and Team messaging
in virtual spaces
A cloud-based phone systemAudio, Video, and web meetings
DEVNET-3891 9

10. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Make it easy for our developers
to add collaboration capabilities inside their apps
with Webex Teams look & feel.
EmbedWebex video &
messaging inside any
application
RetainWebexTeams
branding & user
experience
BringWebexTeams &
Devices features and user
experience to other
business apps
WhyWidgets?
Teams Widgets
– Leverage Webex Teams
User Experience
Teams SDKs
– Build your own User
Interfaces
DEVNET-3891 10

11. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://developer.webex.com/widgets.html
DEVNET-3891 11

12. SpaceWidget Demo

13. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://developer.webex.com/sdk-for-browsers.html
DEVNET-3891 13

14. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Calling
• Calling
• Call Events
Specs
iOS SDK - Swift
Android SDK
JS SDK - WebRTC
• Chrome, Firefox
CODECS
• H264, Opus
Call &
Media Controls
• Call Control
• AudioControl
• VideoControl
Other
Functions
• Persistent
registration
• Feedback
• Push
notifications
WebexTeams SDKs
DEVNET-3891 14

15. Embedding theWidget
into existing apps
via Global, Data and React

16. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://github.com/CiscoDevNet/widget-samples
16DEVNET-3891

17. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Learning labs
https://learninglabs.cisco.com/tracks/collab-cloud
17DEVNET-3891

18. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Widgets Reference Documentation –Webex for Developers
• https://developer.webex.com/widgets.html
• WebexTeamsWidget Demo
• https://code.s4d.io/widget-space/latest/demo/index.html
• Widget samples at DevNet
• https://github.com/CiscoDevNet/widget-samples
• ‘SpaceGrid’ source code
• https://github.com/harborhoffer/spark-space-grid
DEVNET-3891 18

19. A bit of React
https://www.kirupa.com
/react/introducing_react.htm

20. Traditional Web Apps
(server side Web)
SPA
(single page applications)

21. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
React
• Automatic UI State Management
• Lightning-fast DOM Manipulation
• In-memoryVirtual DOM
• APIs to CreateTruly Composable Uis
• Visuals Defined Entirely in JavaScript
• no framework-specific templating command
• Since it came out in 2013, found its way into
popular web sites and apps
https://github.com/facebook/react/wiki/Sites-Using-React
DEVNET-3891 21

22. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
React Basics
• The render method takes two arguments:
• The HTML-like elements (aka JSX) you wish to output
• The location in the DOM that React will render the JSX into
https://www.kirupa.com/react/building_your_first_react_app.htm
22DEVNET-3891

23. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 23

24. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 24

25. Widgets as composite React Components

26. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 26

27. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Code Editor React JSX Web App
DEVNET-3891 27

28. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 28

29. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 29

30. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://www.kirupa.com/react
/setting_up_react_environment.htm
DEVNET-3891 30

31. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
WebPack
https://github.com/webpack
• Module bundler for Javascript applications
• Takes in various assets (JS, CSS, Fonts, Images, HTML…)
• Transforms, minifies and optimizes to serve one bundle to the browser
• JS library with an extensible architecture (loaders & plugins)
• Builds a dependency graph from webpack.config.js
DEVNET-3891 31

32. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
> npm install -g create-react-app
> create-react-app helloworld
> cd helloworld
# for development
> npm start #
# for packaging
> npm run build
DEVNET-3891 32

33. Injecting OAuth granted
access tokens

34. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://trusting-kilby-6f8efe.netlify.com/
DEVNET-3891 34

35. Live demo
https://trusting-kilby-6f8efe.netlify.com

36. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://trusting-kilby-6f8efe.netlify.com/
https://github.com/adamweeks/spark-widget-oauth-example
DEVNET-3891 36

37. Customizing
the React components

38. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 39

39. Live demo
https://amazing-swirles-9518e6.netlify.com

40. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 41

41. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://github.com/adamweeks/spark-widget-custom-menu
DEVNET-3891 42

42. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Webex Teams JavaScript Styleguide
https://github.com/webex/web-styleguide
DEVNET-3891 43

43. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Teams Widget OAuth Example
• https://github.com/adamweeks/spark-widget-oauth-example
• Teams Widget Custom Activities Example
• https://github.com/adamweeks/spark-widget-custom-menu
• ImplicitGrant Flow example
• https://github.com/webex/spark-js-
sdk/tree/master/packages/node_modules/samples/browser-auth-implicit
• Learning lab: “EmbeddingVideo into existing applications”
• https://learninglabs.cisco.com/tracks/collab-cloud
• Web Style guide
• https://github.com/webex/web-styleguide/tree/master/javascript
44DEVNET-3891

44. What if your app users
don’t have aWebex
account ?

45. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Persistent Guests for Spark SDK
Connect consumers or non-Cisco enterprise users with Cisco Spark paid users via
calling or messaging on browser & mobile custom apps through Spark platform
Capabilities
Guest identities are managed by the developer
Call history and messages are persistent
Terms of service:
• Included in all Spark paid offers. No additional cost.
• Guest can reach only paid Spark users
• Guest to Guest is forbidden
• Guests are created by developers part of paid Org
use cases:
- for patients to tele-doctor
on healthcare mobile app.
- for consumers to support
helpline on retail website.
DEVNET-3891 46

46. Persistent Guest Demo
https://amazing-swirles-9518e6.netlify.com

47. What’s coming

48. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Roadmap
• Strategy: mimic the user experience ofWebexTeams apps
• MoreWeb Browsers
• Even better developer experience
• Opensource project: Contributions welcome!
DEVNET-3891 49

49. © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Widgets documentation
• https://developer.webex.com/widgets.html
• Widgets source code
• https://github.com/CiscoWebex/react-ciscospark
• Widgets examples
• https://github.com/CiscoDevNet/widget-samples
• React tutorials
• https://www.kirupa.com/react/introducing_react.htm
• https://reactjs.org/docs/thinking-in-react.html
• Learning lab: “EmbeddingVideo into existing applications”
• https://learninglabs.cisco.com/tracks/collab-cloud
DEVNET-3891 50

50. Complete your online session evaluation
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Give us your feedback to be entered into a
Daily Survey Drawing.
Complete your session surveys through the
Cisco Live mobile app or on
www.CiscoLive.com/us.
Don’t forget: Cisco Live sessions will be available for viewing on
demand after the event at www.CiscoLive.com/Online.
DEVNET-3891 51

51. Q&A

52. Thank you
#CLUS

53. #CLUS