DEVNET-1444 JavaScript Essentials Stève Sfartz - Developer Experience Manager & API Design Lead at Cisco DevNet /Cisco/DevNet/SteveSfartz • Manager of a WW team of Developer Advocates • IoT, Collab, Cloud, DevOps • Application Developer Use Cases mailto: [email protected] • Technical lead for the Cisco « API Style Guide » github: ObjectIsAdvantag twitter: @SteveSfartz • API veteran, hobbyist coder, hands-On Architect • Contributor to DevNet CodeExchange • Code samples, developer tools, postman collections, “vision without awesome-webex, awesome-xapi… execution is • Based in France, DevNet Europe point of contact hallucination” -- Thomas Edison DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 3 Agenda • About JavaScript • Server-side JavaScript • Front-end JavaScript • Taking JavaScript to the next stage DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 4 Cisco Webex Teams Questions? Use Cisco Webex Teams (formerly Cisco Spark) to chat with the speaker after the session How 1 Find this session in the Cisco Events Mobile App 2 Click “Join the Discussion” 3 Install Webex Teams or go directly to the team space 4 Enter messages/questions in the team space cs.co/ciscolivebot#DEVNET-1444 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 5 About JavaScript About JavaScript • 1995: created to add dynamic behaviors for Web pages • Built in 10 days for Netscape Navigator 2.0 release • Very simple core API • Lots of flavors (ES5, ES6, coffeescript, flow,typescript) • Large ecosystem (libraries, npm) • Javascript is ubiquitous DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 7 JavaScript is Ubiquitous Web Desktop Mobile Apps Apps Apps DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 8 JavaScript is Ubiquitous Web Desktop Mobile APIs, Proxys CLI Apps Apps Apps DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 9 JavaScript is Ubiquitous Web Desktop Mobile Extensibility APIs, Proxys CLI Apps Apps Apps DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 10 Server-Side Javascript (Node.js) What is Node.js? • Node.js® is a JavaScript runtime built on Chrome's V8 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 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 12 Node.js runtime https://nodejs.org/en/ DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 13 https://www.javascript.com/learn/objects DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 14 NodeSchool https://nodeschool.io DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 15 NodeSchool - javascripting https://github.com/workshopper/javascripting • Learn the basics of the language • npm install --global javascripting DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 16 Building Node.js applications https://code.visualstudio.com/ • VSCODE DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 18 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 19 NodeSchool https://nodeschool.io DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 20 NodeSchool https://nodeschool.io DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 21 NodeSchool https://nodeschool.io DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 22 Simple HTTP Server DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 23 Webex Teams Bot Architecture . Register webhook events 1. interacts in spaces Webex • Messages / created via a Teams client cloud platform . Memberships / created Webex Teams . As events happen in spaces, User receive notifications from 2. posts notifications to registered Webhooks Webex 3. posts back messages as notifications fly in . Security tips . Select spaces to fire from via Publicly accessible a webhook filter bot endpoint . Check on user’s email domain in your code Your bot code running on-premises or on in the cloud . Check webhook payload signature via a shared secret DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 24 Webex Teams Webhook with Express DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 25 Webex Teams Webhook with Express DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 26 Webex Teams Webhook with Express DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 27 What is takes to code a bot? https://github.com/CiscoDevNet/botkit-template DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 28 Bot skills with Botkit https://github.com/CiscoDevNet/botkit-template/tree/master/skills DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 29 CLI Example https://github.com/ObjectIsAdvantag/webex-guestissuer DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 30 JavaScript is Ubiquitous Use cases for Server-side JavaScript at Cisco Server-side APIs, Proxys CLI Extensibility Webex ChatBots Webex Macros Webex Emulator Web Guest Issuer CLI DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 31 Webex Devices Extensibility DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 32 Button with widget id: DEVWKS-2074 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 33 CE xAPI mapped to a Webex Room Kit Embed code Pull Listen to data events DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 34 ADD MACRO 1 2 3 4 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 35 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 36 Dealing with non-blocking IO What is Node.js? • Node.js® is a JavaScript runtime built on Chrome's V8 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 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 38 Async with Callbacks (ES5) DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 39 Async with Promises (ES6) DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 40 Async with Async (ES8) DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 41 JavaScript Versions 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 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 43 ES5 Object/array methods and extensions, strings, dates, JSON, Dec 2009 immutable globals, strict mode ES6 - new syntax for writing complex applications: classes and modules, June 2015 - Python-style generators and generator expressions, arrow functions, binary data, typed arrays, collections (maps, sets and weak maps), iterators and for/of loops, - Promises, reflection, proxies (metaprogramming for virtual objects) ES7 - exponentiation operator (**) June 2016 - Array.prototype.includes ES8 - Includes await/async, which works using generators and promises. June 2017 ES9 RegExp enhancements, Promise.prototype finally, await on loops June 2018 declarations, spread properties DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 44 Node.js versions Even numbers stand for LTS https://github.com/nodejs/Release Long Term Support versions ES6 ES8 ES9 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 45 Node.js EcmaScript Support https://node.green DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 46 Client-side Javascript JavaScript in the Browser 2015 Today • Simply said, dynamic pages are event listeners Native and DOM manipulation…ending up with a lot of Native unmaintainable code. • Browser compatibility make things even more messy. jQuery jQuery • jQuery helps a lot… React Vue.js … unless you’re building Single Page Applications. Angular 1 Angular 2 DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 48 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 49 Traditional Web Apps SPA (server side Web) (Single Page Apps) https://www.kirupa.com/react/introducing_react.htm DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 50 jQuery Vue.js DEVNET-1444 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 51 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 © 2019 Cisco and/or its affiliates. All rights reserved.