So, what is Tonic? Think of it as a better REPL for Node.js, or a scrapbook for your code. Let's try it: just click on the box below and press "shift + return" on your keyboard.
var four = 2 + 2;
Not surprisingly, we get the answer. Every code cell gets executed in order, and each has access to the work produced in earlier cells. Think of it as inserting logs in one big file, rather than executing a bunch of separate programs. You can even download and run everything locally in node.
Ok, printing the result of adding two numbers isn't remarkable. How about something more complex?
var Canvas = require('canvas')
var canvas = new Canvas(700,300)
var ctx = canvas.getContext('2d');
function drawTree(x1, y1,length,angle,n)
{
var x2 = x1 + length * Math.cos(angle*Math.PI/180);//new x2
var y2 = y1 - length * Math.sin(angle*Math.PI/180);//new y2
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle = n < 2 ? "green" : "brown";
ctx.lineWidth = n-1;
ctx.stroke();
if(n > 0)// recursion
{
drawTree(x2,y2,length*0.75,angle+70,n-1);
drawTree(x2,y2,length*0.75,angle-70,n-1);
}
}
drawTree(350.5, 300, 100, 90, 10)
canvas.toBuffer()
When you evaluate code, whatever value is returned on the last line of a "code block" will be printed below it. Here that value was an image, so we displayed it that way. Tonic has the full JavaScript language at our disposal, and also includes every package on npm.
We've also gone a step further and implemented an upcoming feature of ES7 called "await" that makes it super simple to work with promises and async code.
var issNowAPI = 'http://api.open-notify.org/iss-now.json';
// [await] on a request. ES7!
var response = await require("request-promise").get(issNowAPI);
JSON.parse(response).iss_position
Tonic detected that this was a coordinate object, and chose to show you a map representation by default. You can always use the drop down to view to see the original "raw" object of course, but the viewers can often give you more insight.
The viewers can often be used in to experiment as well. Look at what happens when we use a regex:
var emailRegex = /([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})/g;
If you type in the textfield above, you can actually test your regex to see how it works! Matches will be highlighted. This way you can keep modifying it until you get it just right.
So far we've just been including packages we know about, but you can actually search them all very easily if you don't know exactly what you need. Any time you are in a code cell, you can hit ctrl-space to bring up the package search (or you can click the button in the top right). Try it here:
// type ctrl-space to search for modules
This is just a brief overview of everything you can do with Tonic. You can find more information about keyboard shortcuts, viewers, and other docs, or send us feedback at any time, by clicking the "?" icon in the sidebar.
That's it for now, have fun and let us know what you think!
no comments
sign in to comment