observablehq / stdlib

The Observable standard library.
https://observablehq.com/@observablehq/standard-library
ISC License
966 stars 83 forks source link

Great work guys. One question: Any desire to output pure Javascript? #25

Closed hpssjellis closed 6 years ago

hpssjellis commented 6 years ago

Just saw Observable for the first time and am very impressed. I have one question? Do you guys have any interest in being able to import and or export pure Javascript? Is this on the roadmap at all?

I am working on some Machine Learning simple Javascript tutorials and saw this great bit of code at

https://beta.observablehq.com/@nstrayer/reptile-meta-learning-example

I can definitely see the use for Observable but my present need is Javascript.

I assume an import function would be very hard to write, but an export to Javascript function might not be too difficult, hopefully not too bloated. Any opinions?

tmcw commented 6 years ago

Hey Jeremy!

Yep, interoperability/export with existing JavaScript is high on our list and something we're working on. More detail here:

JavaScript in Observable

Observable essentially runs a superset of JavaScript: if you take JavaScript from anywhere else - node.js, browser scripts, etc, and put it in { } a cell in Observable, it runs in your browser. The only things that might be different than ordinary JavaScript are:

That's pretty much it: it's JavaScript, with some reactive sugar, but nothing that makes it wildly different - stuff like viewof and mutable is strictly opt-in.

Observable in JavaScript

This is in the works - we'll do something similar to exporting an ES6 module that lets you integrate with code you wrote in Observable. It isn't purely 1:1, because the order and system in which Observable runs code isn't the same as a traditional top-down evaluation, but it'll be a pretty straightfoward abstraction that JavaScript developers will be used to.

hpssjellis commented 6 years ago

Thanks for taking the time to reply. I can see this really taking off. I got this HTML embedded deeplearnjs Javascript working in a few seconds.

html `

<script src="https://unpkg.com/deeplearn@0.5.1/dist/deeplearn.js"> </script> 

<input id="myButton04" type="button" value="Mean Square Difference" onclick="{

  (async function (){
     const myData = dl.tensor2d([1.0, 2.0, 3.0, 4.0],[2, 2]);
     const myLabels = dl.tensor1d([0,0,1,1]);
     const myUnknown = dl.tensor2d([0.0, 2.0, 4.0, 6.0],[2, 2]);

      const myDiff = dl.sub(myData, myUnknown);   
      const mySquaredDiff = dl.mul(myDiff, myDiff);
      const mySum = dl.sum(mySquaredDiff) 
      const mySize = dl.scalar(myData.size) 
      const myAverage = dl.div(mySum, mySize)

      document.getElementById('myDiv04').innerHTML =  'The average = ' + await myAverage.data()
   })()

}">

<div id="myDiv04">...</div><br>

`
hpssjellis commented 6 years ago

Good to hear exporting to JavaScript is on the roadmap Tom @tmcw. (Any idea of a time frame?) I am working on Javascript tutorials for Deep Learning with deeplearnjs and I can really see how Observables could help with people understanding the code.

My problem is that I need both JavaScript and an Observable for each idea I teach. Going from JavaScript to an Observable should be relatively easy but changing an Observable such as https://beta.observablehq.com/@nstrayer/reptile-meta-learning-example back to JavaScript is proving to be fairly difficult.

mbostock commented 6 years ago

This issue is more appropriate for a forum discussion rather than for the stdlib, so closing. To discuss this topic, please go to https://talk.observablehq.com.