Embed Node.js on any website

http://blog.tonicdev.com/2015/09/30/embedded-tonic.html

by boucher • 11 years ago

156 42 11 years ago

blog.tonicdev.com

iwaffles2• 11 years ago

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!

taternuts2• 11 years ago

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.

boucher7• 11 years ago

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.

taternuts2• 11 years ago

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

ziad-saab• 11 years ago

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.

tolmasky5• 11 years ago

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.

mk00• 11 years ago

No use case.

philtar• 11 years ago

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

tlrobinson• 11 years ago

Less space than a Nomad. Lame.

drhayes92• 11 years ago

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.

LukeB_UK2• 11 years ago

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

boucher7• 11 years ago

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

tolmasky5• 11 years ago

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_UK2• 11 years ago

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

deckar01• 11 years ago

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.

moretti2• 11 years ago

Embed CSS on any website! ;-)

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

boucher7• 11 years ago

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

moretti2• 11 years ago

Cool, that looks really interesting...

benlower• 11 years ago

this reminds me of iPython. similar?

kelvin0• 11 years ago

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

tolmasky5• 11 years ago

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.

pcarion• 11 years ago

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?

boucher7• 11 years ago

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.

drhayes92• 11 years ago

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

bchociej• 11 years ago

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

thom_nic• 11 years ago

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?

boucher7• 11 years ago

That is definitely something we're considering.

finance-geek• 11 years ago

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?

z3t4• 11 years ago

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.

tolmasky5• 11 years ago

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

_RPM• 11 years ago

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

flippyhead• 11 years ago

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.

boucher7• 11 years ago

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.

iwaffles2• 11 years ago

Great explanation!

Embed Node.js on any website

Related Stories