using pandas-js in front end via cdn?

[aspiringguru]

Just found this, not seeing a deployment via cdn or similar. Was hoping to load via a url.

Are there plans to re[ackage from a node package to a standalone favascript file to loading via a url? (suspect there is a fair bit of work to repackage to enable this.)

[Coming from R & Python land, so this question might appear dumb :) ]

[CalebM1987]

@aspiringguru You can clone this repo and host the dist folder with your JS App (but rename dist to pandas). Then you can simply load with the <script> tag to the relative path.

[aspiringguru]

Thanks. I not sure how far out of my depth I am as normally I can do things.

npm init npm install pandas-js

verify pandas-js installed within node_modules

ls node_modules/pandas-js/dist/

node

Welcome to Node.js v12.14.1. Type ".help" for more information.

import { Series, DataFrame } from 'pandas-js'; Thrown: import { Series, DataFrame } from 'pandas-js'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

I also had a look at this method of converting node packages to javascript files for use in html.

https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072

got the basic demo there to work. Could not translate this to pandas-js. Feel like I've regressed.

obviously I'm doing a very basic environment setup thing wrong. Weird tho as I've used other npm install packages before.

[CalebM1987]

I will see if I can save you some time and confusion. Coming from a Python background, looking at the JavaScript landscape right now would understandably be very confusing. I myself had a primarily Python background before doing a lot of JS stuff.

The problem you are experiencing has to do with the two most common ways JavaScript apps are created. The first way you mentioned with looking for a CDN distribution of the library is what I would call the "traditional" way of creating an app where you're working in an HTML file and adding a <script> tag for your JavaScript, or are calling on a series of .js files relatively pathed from the HTML file. This is typically going to use ECMAScript 5 (or es5), which is understood by all browsers.

The other way, which is becoming more common is to use Node.js and npm to develop the application and use tooling to run the app from a local dev server and actually build the distribution files for your app when it is ready for production (I call this the "modern" way). The import statement won't be understood by your browser because it is actually a feature of ECMAScript 6 or es6 and will require tools such as babel and WebPack to transpile your es6 code to es5 so it can be interpreted by all browsers. Think of this as your Python interpreter compiling .py files to .pyc (not really, but kind of). What webpack will do is bundle all of your dependencies with the JS code you write. One other concept, is that where you created your package.json (created from npm init) and node_modules are like a requirements.txt and a virtualenv in Python.

When you see code samples that are using import instead of require or cdn calls, along with const and let instead of var, you're looking at es6 code.

In your situation, looks like you already have node since you were able to npm install pandas-js. You can look at some examples on how to configure and use webpack (and babel), or you can recreate your app with a JavaScript Framework, since many of these will abstract the webpack configuration and you can just plug and play. I use Vue.js which has a cli that will do all that stuff for you. I would strongly recommend using a Framework such as React or Vue.js as that will make your life much easier.

I hope this helps and good luck!