Find how to build applications with Cisco: http://cs.co/cleur191444 ~ Get a broad overview of the Javascript language, platforms, and ecosystems, to better identify when to use the programming language, but also start creating your own scripts, and feel comfortable enough to run and extend existing scripts. If you have some basic programming skills and are looking forward to understanding more about Javascript, this session is for you! Expect lots of demos showing how Javascript is used at Cisco: from command line tools to custom scripts running on devices, dynamic Web pages, and Web APIs exposing enterprise data.

2. Stève Sfartz - Developer Experience Manager & API
Design Lead at Cisco DevNet
DEVNET-1444
JavaScript Essentials

3. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
/Cisco/DevNet/SteveSfartz
• Manager of aWW team of Developer Advocates
• IoT, Collab, Cloud, DevOps
• Application Developer Use Cases
• Technical lead for the Cisco « API Style Guide »
• API veteran, hobbyist coder, hands-On Architect
• Contributor to DevNet CodeExchange
• Code samples, developer tools, postman collections, awesome-
webex, awesome-xapi…
• Based in France, DevNet Europe point of contact
“vision without
execution is
hallucination”
-- Thomas Edison
mailto: stsfartz@cisco.com
github: ObjectIsAdvantag
twitter: @SteveSfartz
DEVNET-1444 3

4. Agenda
© 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
• About JavaScript
• Server-side JavaScript
• Front-end JavaScript
• Taking JavaScript to the next stage
DEVNET-1444 4

5. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Cisco WebexTeams
Questions?
Use Cisco Webex Teams (formerly Cisco Spark)
to chat with the speaker after the session
Find this session in the Cisco Events Mobile App
Click “Join the Discussion”
Install Webex Teams or go directly to the team space
Enter messages/questions in the team space
How
1
2
3
4
cs.co/ciscolivebot#DEVNET-1444
DEVNET-1444 5

6. About JavaScript

7. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
About JavaScript
• 1995: created to add dynamic behaviors forWeb pages
• Built in 10 days for Netscape Navigator 2.0 release
• Very simple coreAPI
• Lots of flavors (ES5, ES6, coffeescript, flow,typescript)
• Large ecosystem (libraries, npm)
• Javascript is ubiquitous
DEVNET-1444 7

8. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
Mobile
Apps
Desktop
Apps
DEVNET-1444 8

9. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
APIs, Proxys
Mobile
Apps
Desktop
Apps
CLI
DEVNET-1444 9

10. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
APIs, Proxys
Mobile
Apps
Extensibility
Desktop
Apps
CLI
DEVNET-1444 10

11. Server-Side Javascript
(Node.js)

12. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
What is Node.js?
• Node.js® is a JavaScript runtime built on Chrome'sV8 JavaScript engine
(https://v8.dev)
• V8 is Google’s open source high-performance JavaScript and WebAssembly
engine, written in C++.
• Runs on Windows 7 or later, MacOS 10.12+, and Linux systems
• Can run standalone, or can be embedded into any C++ application.
• V8 is used in Chrome and in Node.js.
• Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient.
DEVNET-1444 12

13. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Node.js runtime
https://nodejs.org/en/
DEVNET-1444 13

14. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 14DEVNET-1444
https://www.javascript.com/learn/objects

15. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
NodeSchool
https://nodeschool.io
DEVNET-1444 15

16. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
NodeSchool - javascripting
https://github.com/workshopper/javascripting
• Learn the basics of the language
• npm install --global javascripting
DEVNET-1444 16

17. Building Node.js
applications

18. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
https://code.visualstudio.com/
• VSCODE
DEVNET-1444 18

19. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1444 19

20. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
NodeSchool
https://nodeschool.io
DEVNET-1444 20

21. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
NodeSchool
https://nodeschool.io
DEVNET-1444 21

22. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
NodeSchool
https://nodeschool.io
DEVNET-1444 22

23. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Simple HTTP Server
DEVNET-1444 23

24. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
WebexTeams Bot Architecture
 Register webhook events
• Messages / created
 Memberships / created
 As events happen in spaces,
receive notifications from
Webex
 Security tips
 Select spaces to fire from via a
webhook filter
 Check on user’s email domain in
your code
 Check webhook payload
signature via a shared secret
Webex
cloud platform
1. interacts in spaces
via a Teams client
Webex Teams
User
Your bot code running
on-premises or on in the cloud
2. posts notifications to
registered Webhooks
3. posts back messages
as notifications fly in
Publicly accessible
bot endpoint
DEVNET-1444 24

25. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
WebexTeams Webhook with Express
DEVNET-1444 25

26. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
WebexTeams Webhook with Express
DEVNET-1444 26

27. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
WebexTeams Webhook with Express
DEVNET-1444 27

28. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
What is takes to code a bot?
https://github.com/CiscoDevNet/botkit-template
DEVNET-1444 28

29. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Bot skills with Botkit
https://github.com/CiscoDevNet/botkit-template/tree/master/skills
29DEVNET-1444

30. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
CLI Example
https://github.com/ObjectIsAdvantag/webex-guestissuer
DEVNET-1444 30

31. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Use cases for Server-side JavaScript at Cisco
APIs, Proxys ExtensibilityCLI
Server-side
Webex MacrosWebex ChatBots
Webex Emulator
Web Guest
Issuer CLI
DEVNET-1444 31

32. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Webex Devices Extensibility
32DEVNET-1444

33. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Button with widget id: DEVWKS-2074
33DEVNET-1444

34. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
CE xAPI mapped to a Webex Room Kit
34
Pull
data
Listen to
events
Embed
code
DEVNET-1444

35. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
ADD MACRO
35
1
2
3
4
DEVNET-1444

36. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 36DEVNET-1444

37. Dealing with
non-blocking IO

38. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
What is Node.js?
• Node.js® is a JavaScript runtime built on Chrome'sV8 JavaScript engine
(https://v8.dev)
• V8 is Google’s open source high-performance JavaScript and WebAssembly
engine, written in C++.
• Runs on Windows 7 or later, MacOS 10.12+, and Linux systems
• Can run standalone, or can be embedded into any C++ application.
• V8 is used in Chrome and in Node.js.
• Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient.
DEVNET-1444 38

39. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Async with Callbacks (ES5)
DEVNET-1444 39

40. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Async with Promises (ES6)
DEVNET-1444 40

41. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Async with Async (ES8)
41DEVNET-1444

42. JavaScriptVersions

43. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript standard and versions
• JavaScript:The commonly used name for implementations of the ECMAScript
standard
• ECMAScript: A language standardized by ECMA International and overseen by the
TC39 committee.
• ES5 (ECMAScript 5): 5th edition, standardized in December 2009
• ES6 (ECMAScript 6) - ES2015: 6th edition, standardized in June 2015
• ES7+ : yearly releases
• Standardized or scheduled to be standardized
• ES7/ES2016 (June 2016), ES8/ES2017 (June 2017), ES9/ES2018 (June 2018)
DEVNET-1444 43

44. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
ES5
Dec 2009
Object/array methods and extensions, strings, dates, JSON, immutable
globals, strict mode
ES6
June 2015
- new syntax for writing complex applications: classes and modules,
- Python-style generators and generator expressions, arrow functions, binary
binary data, typed arrays, collections (maps, sets and weak maps), iterators
ES7
June 2016
- exponentiation operator (**)
- Array.prototype.includes
ES8
June 2017
- Includes await/async, which works using generators and promises.
ES9
June 2018
RegExp enhancements, Promise.prototype finally, await on loops
declarations, spread properties
DEVNET-1444 44

45. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Node.js versions
https://github.com/nodejs/Release
Even numbers stand for LTS
Long Term Support versions
ES6
ES8
ES9
DEVNET-1444 45

46. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Node.js EcmaScript Support
https://node.green
DEVNET-1444 46

47. Client-side Javascript

48. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript in the Browser
• Simply said, dynamic pages are event listeners and
DOM manipulation…ending up with a lot of
unmaintainable code.
• Browser compatibility make things even more messy.
• jQuery helps a lot…
… unless you’re building Single Page Applications.
Native
jQuery
Angular 1
Native
jQuery
React
Vue.js
Angular 2
2015 Today
DEVNET-1444 48

49. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
DEVNET-1444 49

50. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
TraditionalWeb Apps
(server sideWeb)
SPA
(Single PageApps)
https://www.kirupa.com/react/introducing_react.htm
DEVNET-1444 50

51. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
jQuery Vue.js
DEVNET-1444 51

52. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
React Basics
• The render method takes two arguments:
1. The HTML-like elements (aka JSX) you wish to output
2. The location in the DOM that React will render the JSX into
1
2
DEVNET-1444 52

53. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
React Components
DEVNET-1444 53

54. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Building your React Application
https://www.kirupa.com/react/setting_up_react_environment.htm
DEVNET-1444 54

55. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Javascript versions
• ECMAScript 5 (ES5): Implemented in all modern browsers.
• ECMAScript 6 (ES6 / ES2015): Fairly implemented in modern browsers and IE11+. Secured
with Babel transpiling to ES5.
• ECMAScript 7+ (ES2016+): Babel transpiling required.
• canIuse.com
• Learn atTranspile to ES5 via babel, or inject dynamically thru polyfills.js
DEVNET-1444 55

56. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Babel
https://babeljs.io
• Babel is a JavaScript compiler
• https://babeljs.io/docs/en/learn
• https://babeljs.io/learn-es2015/
• Toolchain used to convert ES6+ code into a backwards compatible version
of JavaScript in current and older browsers or environments.
• http://kangax.github.io/compat-table/es6/
• Transform syntax, Polyfill features that are missing in your target
environment (through @babel/polyfill), Source code transformations
(codemods)
DEVNET-1444 56

57. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
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-1444 57

58. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Utility: 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-1444 58

59. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
React
• Since it came out in 2013, React has found its way into popular web sites
and apps that we use.
• At Cisco: Admin User Interfaces & Dashboards,WebexTeams Desktop
clients and developer.cisco.com
• 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
DEVNET-1444 59

60. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Recents
Space
WebexTeams Widgets
DEVNET-1444 60

61. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
https://github.com/CiscoDevNet/widget-samples
DEVNET-1444 61

62. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
React Map Starter Kit
https://github.com/ObjectIsAdvantag/roomkit-react-map
DEVNET-1444 62

63. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Webex Teams JavaScript Styleguide
https://github.com/webex/web-styleguide
DEVNET-1444 63

64. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
To go further
• Linter
• Static code analysis tool used in software development for checking if JavaScript source
code complies with coding rules.
• TypeScript
• Optional static type-checking
• Latest ECMAScript features
• Compiles to plain JavaScript
• https://www.typescriptlang.org/
• GraphQL
• query language for APIs and a runtime for fulfilling those queries
DEVNET-1444 64

65. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Wrapup
DEVNET-1444 65

66. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
APIs, Proxys
Mobile
Apps
Extensibility
Desktop
Apps
CLI
DEVNET-1444 66

67. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
Mobile
Apps
Desktop
Apps
Front End Apps
Extensibility
APIs, Proxys CLI
Server-side Apps
DEVNET-1444 67

68. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
JavaScript is Ubiquitous
Web
Apps
Mobile
Apps
Extensibility
Desktop
Apps
Front End Apps
AJAX, jQuery
React, Angular, Vue
Flutter.js
Electron
APIs, Proxys CLI
Server-side Apps
express
graphQL
npm
commander
duktape
DEVNET-1444 68

69. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Webex LearningTrack
https://learninglabs.cisco.com/lab/collab-tools-ide-vscode-sd/step/1
https://learninglabs.cisco.com/tracks/collab-cloud
DEVNET-1444 69

70. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Resources
• Node.js Coding 101 samples
• https://github.com/ObjectIsAdvantag/nodejs-coding-101
• awesome-webex
• https://github.com/CiscoDevNet/awesome-webex
• Webex learning track
• https://learninglabs.cisco.com/tracks/collab-cloud
70DEVNET-1444

71. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Cisco WebexTeams
Questions?
Use Cisco Webex Teams (formerly Cisco Spark)
to chat with the speaker after the session
Find this session in the Cisco Events Mobile App
Click “Join the Discussion”
Install Webex Teams or go directly to the team space
Enter messages/questions in the team space
How
1
2
3
4
DEVNET-1444 71

72. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Don’t forget: Cisco Live sessions will be available for viewing on
demand after the event at ciscolive.cisco.com
• Please complete your Online Session Survey
after each session
• Complete 4 Session Surveys & the Overall
Conference Survey (available fromThursday) to
receive your Cisco LiveT-shirt
• All surveys can be completed via the Cisco
Events Mobile App or the Communication
Stations
Complete your online
session survey
DEVNET-1444 72

73. © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public
Demos in
the Cisco
Showcase
Walk-in
self-paced
labs
Meet the
engineer
1:1
meetings
Related
sessions
ContinueYour Education
DEVNET-1444 73

74. Thank you