Cisco Spark Widgets Technical drill down

DEVNET-1891 Cisco Spark Widgets Technical drill down Adam Weeks, Engineer @CiscoSparkDev Stève Sfartz, API Evangelist @CiscoDevNet

Cisco Spark How Questions? Use Cisco Spark to communicate with the speaker after the session 1. Find this session in the Cisco Live Mobile App 2. Click Join the Discussion 3. Install Spark or go directly to the space 4. Enter messages/questions in the space cs.co/ciscolivebot#devnet-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public

Cisco Spark Widgets Technical drill down Introduction to Cisco Spark Widgets Embed into existing Web apps Injecting access tokens dynamically Customizing the React components CSS Customization Adding custom activities to the Space Widget Initializing the Recents Widget with custom Spaces Roadmap, Contributions

/Cisco/DevNet/SteveSfartz API Evangelist @CiscoDevNet stsfartz@cisco.com @SteveSfartz Cisco Spark API & Collaboration Endpoints xapi hosted @CiscoROI: Paris Innovation Center node.js mainly, a bit of #golang France and all around Europe github://objectisadvantag vision without execution is hallucination -- Thomas Edison 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public

Introduction to Cisco Spark Widgets

Easily embed Spark messaging, video and calling into your workflow Spark Widgets Leverage Spark UI/UX Spark SDKs Build your own UI DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 7

Benefits for the Developer Frictionless Embed video into your app in minutes Includes powerful libraries (Fast Lane, STUN) Render inside your mobile app No need for browser plugins - Efficiency Embedding collaboration increases the likelihood that the user will stay in the app Contextual communication DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 8

Spark SDK - Features Calling Call & Media Controls Other Functions Specs Calling Call Events Call Control Audio Control Video Control Persistent registration Feedback Push notifications ios SDK - Swift Android SDK JS SDK - WebRTC Chrome - current Firefox - current CODECS H264 Opus DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 9

Why Cisco Spark Widgets? Make it easy for our Strategic Partners to add collaboration capabilities inside their workflows with Cisco Spark look & feel. Embed Cisco Spark video & messaging inside any application Retain Cisco Spark branding & user experience Bring Cisco Spark clients & room system user experience to other business apps DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 11

Space Widget Audio & video 1:1 calling Space & 1:1 messaging Markdown support File sharing Message flags and ability to delete messages Read receipts Persistent chat DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 14

Demo: Space Widget

Recents Widget Recent Spark conversation list (spaces & people) Hooks to open a conversation with the Space Widget Unread space highlighting Event hooks for messages, calls, and memberships Incoming call notifications DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 16

DevNet Discover Learning Tracks CC Embedding Video https://learninglabs.cisco.com/tracks/devnet-express-cloud-collab-soft-dev Experiment Audio/Video Calling & Messaging with Cisco Spark Widgets 10 minutes DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 17

Embedding the Widget into existing apps via Global, Data and React

Experiment the Cisco Spark Widget https://github.com/objectisadvantag/hackathon-resources/tree/master/hackvivatech-paris/widgets DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 19

Demo: Listening to events

Injecting access tokens

Cisco Spark Implicit Grant Flow https://github.com/ciscospark/spark-jssdk/tree/master/packages/node_modules/samples/browser-auth-implicit DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 22

Cisco Spark Widget OAuth Example https://github.com/adamweeks/spark-widget-oauth-example Oauth flow initiated from a React application Try it live at https://trusting-kilby-6f8efe.netlify.com/ DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 23

Demo: Injecting Oauth granted tokens

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

Single Page Applications In a single page application, the bulk of your time will be spent keeping your data in-sync with your UI Manipulating the DOM is really REALLY slow. Working with HTML templates can be a pain DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 27

React Automatic UI State Management Lightning-fast DOM Manipulation In-memory Virtual DOM APIs to Create Truly 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-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 28

React Toolchain 1) Dealing with Javascript Babel JS compiler 2) Converting JSX Node.JS CI/CD toolchain Conversion at runtime DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 29

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

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-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 33

Demo: Your first React App

React Basics https://www.kirupa.com/react/building_your_first_react_app.htm 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 DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 35

Customizing the React components

Demo: CSS Customization

Demo: Adding custom activities to the Space Widget

Demo: Initializing the Recents Widget with custom Spaces

What s coming

Roadmap Mimic the experience of Cisco Spark clients Guest mode support Web Browsers Opensource project: Contributions welcome! DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 43

Please complete your Online Session Evaluations after each session Complete 4 Session Evaluations & the Overall Conference Evaluation (available from Thursday) to receive your Cisco Live T-shirt All surveys can be completed via the Cisco Live Mobile App or the Communication Stations Complete Your Online Session Evaluation Don t forget: Cisco Live sessions will be available for viewing on-demand after the event at www.ciscolive.com/global/on-demand-library/. 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public

Continue Your Education Demos in the Cisco campus Walk-in Self-Paced Labs Tech Circle Meet the Engineer 1:1 meetings Related sessions DEVNET-1891 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 46

Thank you