JS Everywhere
Georgy Bunin
Agenda
● Current state of JS
● Motivation
● Where can I use JS?
● [...slides]
● Summary
Current state of JS
Javascript is most popular language on the world
https://madnight.github.io/githut/#/pull_requests/2020/3
Current state of JS
https://2019.stateofjs.com/overview/
Current state of JS
Motivation
Why?
● Hobby
● Pet project
● Learning
Where can I use JS? - Everywhere!
Web
Basic:
React, Angular, Vue, Vanilla JS, TypeScript
Less popular:
WebComponents, Svelte, Ember, Polymer, lit-html
Exotic:
Elm, ClojureScript (Closure), ReasonML (OCaml)
High Performance Web
asm.js:
https://developer.mozilla.org/en-
US/docs/Games/Tools/asm.js
WebAssembly:
https://engineering.q42.nl/webassembly/
Mobile
Native:
ReactNative, NativeScript
Hybrid:
Cordova, PhoneGap, Ionic, PWA
Adaptive web sites:
Angular, React, etc.
Desktop Application
Electron
(VSCode, Slack, Figma) - https://www.electronjs.org/apps
Node-webkit
https://nwjs.io/
Proton
https://proton-native.js.org/#/ (with React Syntax)
Testing and Software Automation
Testing
Unit, E2E, tools, selenium, cypress, puppeteer
Automation
ifttt, OS Scripting, CI, CD scripts, Selenium
Data processing
data scraping, parsers, OCR, format converters, task runners
Static content generators
Why
Blog, Docs, Notes, Readme, Wiki, Demos, Slides, Write your own book,
Podcast Show Notes
Tools
Hexo, Gatsby, Gitbook, Next.js, ReactStatic
Compare
https://www.staticgen.com/
Server frameworks
Popular:
Express, Koa, NestJS, HAPI
Less popular:
Meteor, MEAN
https://www.airpair.com/node.js/posts/nodejs-framework-comparison-express-koa-hapi
http://nodeframework.com/
Cloud (Serverless)
Function as a service (FaaS):
Google App Engine, AWS Lambda, Azure Functions, IBM Cloud Functions
Cloud DB
Firebase
Azure Data Lake
MLab (MongoDB Atlas)
Databases (JSON based)
JSON ⇒ JavaScript Object Notation
Databases:
MongoDb
Redis
CouchDB / PouchDB
RethinkDB
Server / CLI / Scripting
Basic:
Nodejs (V8), Deno
Advanced:
https://en.wikipedia.org/wiki/JavaScript_engine
https://github.com/a0viedo/demystifying-js-engines
https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
RealTime Data Streaming
Browser:
SSE / WebRTC
TCP based:
WebSocket / MQ (PubSub)
Queue
SQS (https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/sqs-
examples-using-queues.html)
Cartography / GIS / GeoData
Most popular:
Google Maps, OpenStreetMaps, OpenLayers
Enterprise:
ESRI, ArcGIS, Cesium
Less popular:
Bing, Baidu, Leafletjs, Mapbox
https://medium.com/flatlogic/top-javascript-maps-api-and-libraries-162523cef967
https://en.wikipedia.org/wiki/Cartography
Data Visualization (ton of libraries)
Most common:
D3
Charts:
Amcharts,
Highcharts
Data table:
AgGrid, React-table, Material Table
https://en.wikipedia.org/wiki/Data_visualization
https://grafana.com/
IOT
C4I - command, control, communications, computers, and intelligence
Devices and sensors:
https://www.postscapes.com/javascript-and-the-internet-of-things/
https://iotjs.net/
https://analyticsindiamag.com/top-10-javascript-frameworks-to-use-in-your-iot-project/
https://blog.bitsrc.io/10-javascript-iot-libraries-to-use-in-your-next-projects-bef5f9136f83
https://www.iotforall.com/javascript-iot
https://en.wikipedia.org/wiki/Internet_of_Things
Web Bluetooth and Uri Shaked
Hardware / Robotics
● http://johnny-five.io/
● https://www.espruino.com/
● https://livebook.manning.com/book/javascript-on-things/chapter-1/
● https://www.smashingmagazine.com/2016/02/hardware-hacking-with-javascript-internet-of-things/
Interesting thing: JS in Cosmos
SpaceX Crew Dragon Touchscreen UI Uses JavaScript and Chromium
● https://fullstackfeed.com/spacex-crew-dragon-touchscreen-ui-uses-javascript-and-chromium/
● https://dev.to/realabbas/spacex-and-javascript-3d78
Virtual world (VR / AR)
WebVR
● https://webvr.info/
● https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR
● https://aframe.io/
● https://medium.com/@kristen.carter/build-your-next-ar-vr-web-app-using-javascript-32d3252e5756
● https://www.youtube.com/watch?v=_UsGt8KI6uk
AR
● https://www.argonjs.io/
● https://augmented.reality.news/news/free-open-source-javascript-solution-for-augmented-reality-
comes-life-mobile-0176311/
Gaming and physics engine
Physics Engine 2D (Canvas/SVG):
● https://brm.io/matter-js/
● https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics
● https://piqnt.com/planck.js/
● https://www.npmjs.com/search?q=physics%20engine
● https://blog.bitsrc.io/9-top-js-gaming-engines-and-libraries-for-2020-81707d9f095
3D (JS + WebGL):
● https://www.babylonjs.com/
● https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web
● https://threejs.org/
● http://webglsamples.org/
● https://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954
● http://webglsamples.org/dynamic-cubemap/dynamic-cubemap.html
● https://www.awwwards.com/22-experimental-webgl-demo-examples.html
WebOS
Mobile:
Tizen (https://en.wikipedia.org/wiki/Tizen)
Laptop:
Chrome OS (https://en.wikipedia.org/wiki/Chrome_OS)
Embedded devices:
WebOS (https://www.webosose.org/)
Kiosk mode browser (Chrome / Edge)
https://docs.microsoft.com/en-us/deployedge/microsoft-edge-kiosk-mode
Motivation
Why?
● Hobby
● Pet project
● Learning
Summary
Is JS most popular language? Yes!
Where we can find JS - everywhere!
Thanks
questions?

Js everywhere (Georgy Bunin)

  • 1.
  • 2.
    Agenda ● Current stateof JS ● Motivation ● Where can I use JS? ● [...slides] ● Summary
  • 3.
    Current state ofJS Javascript is most popular language on the world https://madnight.github.io/githut/#/pull_requests/2020/3
  • 4.
  • 5.
  • 6.
  • 7.
    Where can Iuse JS? - Everywhere!
  • 8.
    Web Basic: React, Angular, Vue,Vanilla JS, TypeScript Less popular: WebComponents, Svelte, Ember, Polymer, lit-html Exotic: Elm, ClojureScript (Closure), ReasonML (OCaml)
  • 9.
  • 10.
    Mobile Native: ReactNative, NativeScript Hybrid: Cordova, PhoneGap,Ionic, PWA Adaptive web sites: Angular, React, etc.
  • 11.
    Desktop Application Electron (VSCode, Slack,Figma) - https://www.electronjs.org/apps Node-webkit https://nwjs.io/ Proton https://proton-native.js.org/#/ (with React Syntax)
  • 12.
    Testing and SoftwareAutomation Testing Unit, E2E, tools, selenium, cypress, puppeteer Automation ifttt, OS Scripting, CI, CD scripts, Selenium Data processing data scraping, parsers, OCR, format converters, task runners
  • 13.
    Static content generators Why Blog,Docs, Notes, Readme, Wiki, Demos, Slides, Write your own book, Podcast Show Notes Tools Hexo, Gatsby, Gitbook, Next.js, ReactStatic Compare https://www.staticgen.com/
  • 14.
    Server frameworks Popular: Express, Koa,NestJS, HAPI Less popular: Meteor, MEAN https://www.airpair.com/node.js/posts/nodejs-framework-comparison-express-koa-hapi http://nodeframework.com/
  • 15.
    Cloud (Serverless) Function asa service (FaaS): Google App Engine, AWS Lambda, Azure Functions, IBM Cloud Functions Cloud DB Firebase Azure Data Lake MLab (MongoDB Atlas)
  • 16.
    Databases (JSON based) JSON⇒ JavaScript Object Notation Databases: MongoDb Redis CouchDB / PouchDB RethinkDB
  • 17.
    Server / CLI/ Scripting Basic: Nodejs (V8), Deno Advanced: https://en.wikipedia.org/wiki/JavaScript_engine https://github.com/a0viedo/demystifying-js-engines https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
  • 18.
    RealTime Data Streaming Browser: SSE/ WebRTC TCP based: WebSocket / MQ (PubSub) Queue SQS (https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/sqs- examples-using-queues.html)
  • 19.
    Cartography / GIS/ GeoData Most popular: Google Maps, OpenStreetMaps, OpenLayers Enterprise: ESRI, ArcGIS, Cesium Less popular: Bing, Baidu, Leafletjs, Mapbox https://medium.com/flatlogic/top-javascript-maps-api-and-libraries-162523cef967 https://en.wikipedia.org/wiki/Cartography
  • 20.
    Data Visualization (tonof libraries) Most common: D3 Charts: Amcharts, Highcharts Data table: AgGrid, React-table, Material Table https://en.wikipedia.org/wiki/Data_visualization https://grafana.com/
  • 21.
    IOT C4I - command,control, communications, computers, and intelligence Devices and sensors: https://www.postscapes.com/javascript-and-the-internet-of-things/ https://iotjs.net/ https://analyticsindiamag.com/top-10-javascript-frameworks-to-use-in-your-iot-project/ https://blog.bitsrc.io/10-javascript-iot-libraries-to-use-in-your-next-projects-bef5f9136f83 https://www.iotforall.com/javascript-iot https://en.wikipedia.org/wiki/Internet_of_Things Web Bluetooth and Uri Shaked
  • 22.
    Hardware / Robotics ●http://johnny-five.io/ ● https://www.espruino.com/ ● https://livebook.manning.com/book/javascript-on-things/chapter-1/ ● https://www.smashingmagazine.com/2016/02/hardware-hacking-with-javascript-internet-of-things/ Interesting thing: JS in Cosmos SpaceX Crew Dragon Touchscreen UI Uses JavaScript and Chromium ● https://fullstackfeed.com/spacex-crew-dragon-touchscreen-ui-uses-javascript-and-chromium/ ● https://dev.to/realabbas/spacex-and-javascript-3d78
  • 23.
    Virtual world (VR/ AR) WebVR ● https://webvr.info/ ● https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR ● https://aframe.io/ ● https://medium.com/@kristen.carter/build-your-next-ar-vr-web-app-using-javascript-32d3252e5756 ● https://www.youtube.com/watch?v=_UsGt8KI6uk AR ● https://www.argonjs.io/ ● https://augmented.reality.news/news/free-open-source-javascript-solution-for-augmented-reality- comes-life-mobile-0176311/
  • 24.
    Gaming and physicsengine Physics Engine 2D (Canvas/SVG): ● https://brm.io/matter-js/ ● https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics ● https://piqnt.com/planck.js/ ● https://www.npmjs.com/search?q=physics%20engine ● https://blog.bitsrc.io/9-top-js-gaming-engines-and-libraries-for-2020-81707d9f095 3D (JS + WebGL): ● https://www.babylonjs.com/ ● https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web ● https://threejs.org/ ● http://webglsamples.org/ ● https://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954 ● http://webglsamples.org/dynamic-cubemap/dynamic-cubemap.html ● https://www.awwwards.com/22-experimental-webgl-demo-examples.html
  • 25.
    WebOS Mobile: Tizen (https://en.wikipedia.org/wiki/Tizen) Laptop: Chrome OS(https://en.wikipedia.org/wiki/Chrome_OS) Embedded devices: WebOS (https://www.webosose.org/) Kiosk mode browser (Chrome / Edge) https://docs.microsoft.com/en-us/deployedge/microsoft-edge-kiosk-mode
  • 26.
  • 27.
    Summary Is JS mostpopular language? Yes! Where we can find JS - everywhere!
  • 28.

Editor's Notes