Embed Node.js on any website | Hacker News Reader

Embed Node.js on any website

blog.tonicdev.com

156 pointsboucher42 comments

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!

I looked at the docs at 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?

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.

Sorry about that. Do you remember what you were having trouble with (or have a link to the document?); feel free to email me at rboucher@gmail.com.

I went back to find the document in question to make sure it wasn't user error, and I think ziad-saab was correct, I removed a cell above it and I got the correct response. The cell above it didn't have any error indications though so I assumed it was working OK

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.

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.

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.

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.

Great explanation!

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

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

It doesn't replicate anything, it's actually running the code in node and sending the result back.

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!).

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

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.

To me, "embedded" would not rely on a remote backend.

We're using the word "embed" in what I feel like is a pretty generically understood web term of "take this external thing and embed it in your page".

The actual thing you are embedding is a version of our app, Tonic, which yes interfaces remotely with Node.js. I think this title is the best way of getting the idea across in a few words though.

a "true embed" would be something like Electron, that's running a node instance on the client, and can work independently without any interaction with a server.

My first thought was that it compiles node (+native modules) with emscripten to asm.js and lets me run everything in the browser

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

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.

something is amiss here: don't you already get a javascript runtime free with every browser already?

It doesn't seem to be running in the client's JavaScript engine. It sounds like they are sending the source to an API, evaluating, and returning the result.

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?

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.

That was one of the first things I tried when I found the service: https://tonicdev.com/drhayes/fun-with-fs

Embed CSS on any website! ;-)

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

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

Cool, that looks really interesting...

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?

That is definitely something we're considering.

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

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.

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

this reminds me of iPython. similar?

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).

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... if you are interested in more detail.

No use case.

No use case that you or I can think of. Must be useful though.

Less space than a Nomad. Lame.

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.

Reply on news.ycombinator.com