
Embed Node.js on any website - boucher
http://blog.tonicdev.com/2015/09/30/embedded-tonic.html
======
iwaffles
Been using Tonic for a few months now and it's been very useful and incredibly
easy to test things out.

Tested out an idea quickly with Twilio, demoed an API in another notebook, and
prototyped a new feature from my iPad while on an airplane (that's my favorite
part).

It's been really useful for me and now that I can embed it into my blog posts
or in the documentation is going to be really helpful for the rest of our
team. Awesome work guys!

------
finance-geek
I looked at the docs at
[https://tonicdev.com/docs/embed#api](https://tonicdev.com/docs/embed#api) and
it seemed pretty sparse. I would suggest several simple use-cases that are
very very common across many websites, esp those that wouldnt have an active
back-end: 1\. Contact form catcher 2\. Grab user email for email list 3\.
Referral Form that saves to...say...parse or some standard backend?

------
taternuts
I actually used tonicdev last when I was messing around with promise chains
and trying to get better with bluebird, and was discouraged when things that
worked on my native REPL weren't working on the equivalent node version on
tonicdev. It's still a really awesome tool though.

~~~
ziad-saab
When the same thing happened to me, it turned out I had a `ReferenceError`
higher up in the code. Tonicdev notebook will stop evaluating code as soon as
an error occurs, like any regular JavaScript program would.

Even though your code blocks are separated, and text appears between them,
it's all one contiguous block of code.

~~~
tolmasky
Yeah, we are working on providing better errors, we know they can sometimes be
confusing. They're slightly better now but they should get substantially more
helpful soon.

------
flippyhead
Probably this is because I'm being daft but I honestly can't figure out what
Tonic even is. It seems like a data visualization framework, but then it seems
to be a package manager or something? I clicked around and tried to find a
simple few sentence summary and then gave up.

~~~
boucher
It's a REPL for Node.js.

It has data visualization features, and it also manages npm packages for you,
but those are just features. Another way to think of it is, a different
(hopefully better) version of the thing you'd get if you just typed "node" in
your terminal.

~~~
iwaffles
Great explanation!

------
_RPM
Ahh, so the browser isn't interpreting that code.

------
LukeB_UK
So does this exactly replicate behavior of node and V8 even in non-V8 engines?

~~~
tolmasky
It is a v8 engine, every embed is backed by node running in a container, so
you're getting the real deal, not an emulation environment.

That means your embeds can write to the filesystem, use _any_ npm package,
(even spin up child processes if that's what you want to show off!).

~~~
LukeB_UK
So it's not embedding node, it's embedding an interface that connects to a
remote node instance

~~~
tolmasky
Sorry for the confusion, not sure what a "true embed of node" on a webpage
would be. "Replicating node" certainly wouldn't be either, I suppose the only
thing that would be truly embedding node is compiling the node binary with
emscripten or NaCL? If that's what you were thinking then no, we are allowing
you to embed "node source code examples" into a webpage that users can run.

~~~
ericfrederich
Yes, it is confusing. Title should have been "interface with remote node.js
from any website"

~~~
chc
That's less clear. That sounds like it's just an API rather than allowing you
to put Node code on your page and have it run.

------
pcarion
Isn't that a TERRIBLE idea as you can run:

var fs = require('fs'); var content = fs.readFileSync('/etc/passwd');
console.log(content+'');

or look into any other file?

~~~
boucher
You can, and you should feel free to give it a shot. Everything is running in
its own sandbox, so there's no real issue with that.

------
moretti
Embed CSS on any website! ;-)

How do you specify npm dependencies. Does it "automagically" inspect your
`require` statements?

~~~
boucher
Yes, it's done automatically. We actually have every package installed, and we
parse your require() statements to create the appropriate links internally.

~~~
moretti
Cool, that looks really interesting...

------
thom_nic
I like the repl interface, and on the homepage screenshots make it look like
it's a native, client-side app. I would I would actually like to have a rich
node repl as a native app.

Just take the frontend code and replace the remote backend with electron?

~~~
boucher
That is definitely something we're considering.

------
bchociej
Would love to see this open sourced and able to run on my local machine (Tonic
as a whole, I mean).

------
z3t4
hmm, I wonder if it's possible to require modules in vanilla browser
JavaScript ... Both require() and module.export is valid JavaScript, so it
should be possible! You just need a service that will redirect a module name
to an on-line repository.

~~~
tolmasky
Services like browserify essentially do this for you, as long as you are
willing to compile ahead of time (and leave a lot of packages that don't "make
sense" on the browser behind).

The idea here of course is that all those packages are usable (so for example
if you want to show someone how to take files and zip them, you can).
Additionally, it is important not to forget that a package can actually be 20
packages thanks to nested dependencies. A lot of work went into making a
system that when you type require("package") works instantly and doesn't have
to go and fetch the nested dependencies -- not only that, but shrink-wrapping
in the background so that rerunning the notebook is 100% reproducible (not
constantly changing underneath you as versions change). With this we also get
the really cool ability to not only have every package on npm, but every
version of every package. If you look at this example, you'll see we can
easily compare two versions of the same package:
[https://tonicdev.com/tonic/api-diff-example](https://tonicdev.com/tonic/api-
diff-example)

------
benlower
this reminds me of iPython. similar?

~~~
kelvin0
It's the same, if you replace Python with JS, and have the Python running
remotely on a server/container somewhere (instead of it running locally).

~~~
tolmasky
We wrote a pretty in depth look at some of the key differences here:
[http://blog.tonicdev.com/2015/09/10/time-traveling-in-
node.j...](http://blog.tonicdev.com/2015/09/10/time-traveling-in-node.js-
notebooks.html) if you are interested in more detail.

------
mk00
No use case.

~~~
drhayes9
Education: show JavaScript examples with code the student can run.

Runbook: provide support staff executable blocks they can modify to record how
they are fixing a support fire.

API docs: show off that NPM package you built with real examples the user can
modify by putting in their own data.

That's off the top of my head.

