JavaScript, Node.js, npm, Express, oh my…

Some time ago I became interested in Node.js. “Node.js is an open-source, cross-platform runtime environment for developing server-side web applications.” (Node.js. (2015, September 17). In Wikipedia, The Free Encyclopedia. Retrieved 09:43, September 20, 2015, from https://en.wikipedia.org/w/index.php?title=Node.js&oldid=681558515).

Well, I just became interested in Node.js because I tried Microsoft Visual Studio Code for programming in JavaScript, and Visual Studio Code supports Node.js out of the box. It looked interesting and I decided to give it a try.

I learned that to use Node.js, you need npm. Npm is the package manager for Node.js and other frameworks. Installing npm is easy. It has an installer package for Windows. Now that you have the npm package manager installed and have the Node.js runtime environment available, you will want a framework for building your applications.

I have decided to follow the recommendation in the Visual Studio Code documentation and use the Express application framework. With Express you can create an application skeleton very easy and you have a Node.js web server up and running in a few minutes. However, after that, you still have to figure out how all this works.

Having all this software installed, I feel a bit overwhelmed. There are tons of documentation, tutorials and answers to questions all over the web, of course. But where do I start? All this reminds me a bit of the time when I was working with Java. To use application x, you need framework y and to use framework y, you need library z, which has a dependency on application A and so on. I’m not sure if I like this.

The Plunker Web IDE

I have just discovered Plunker. “Plunker is an online community for creating, collaborating on and sharing your web development ideas.

  • Real-time code collaboration
  • Fully-featured, customizable syntax editor
  • Live previewing of code changes
  • As-you-type code linting
  • Forking, commenting and sharing of Plunks
  • Fully open-source on GitHub under the MIT license”

If you are doing web development, you might want to have a look at it. – http://plnkr.co/

Programmiersprache: Python 3.5 erschienen

“Ein neuer Operator für Matrix-Multiplikationen, eine Unpacking-Syntax für Containertypen, Coroutinen mit den Schlüsselwörtern async und await sowie einiges andere mehr sind in anderthalb Jahren Arbeit beim neuen größeren Python-Release zusammengekommen.” http://heise.de/-2811997

Defining JavaScript functions

In JavaScript, you can create a function in two ways. First way is to use a
function statement and it is similar to what is use in other programming
languages.

function hello() {
   alert("hello");
}
hello();

Here we define function hello and call the function after its definition. A
second way to create a function is by using a function expression. Here you
define a variable and assign a function to this variable.

var helloWorld = function() {
   alert("hello world");
}
helloWorld();

You can use function expressions when passing functions as function parameters.
For example like this.

var helloWorld = function() {
   alert("hello world");
}
function saySomething(f) {
   f();
}
saySomething(helloWorld);

Here we define a function with a function expression, then define a function
that takes a function as a parameter and pass the function we created as
parameter.

Read more about functions in the Mozilla JavaScript Guide.

Using Processing.js to draw in your browser

Today I had a look at the JavaScript library Processing.js. You can use this library to draw in your browser using the Processing language. For example, you create the following simple HTML page and save it as processing.htm.

<!DOCTYPE html>
<html>
  <head>
    http://processing-1.4.8.min.js
  </head>
  <body>
    <canvas data-processing-sources="hello.pde"></canvas>
  </body>
</html>

Then when you create a file hello.pde in the same directory as your HTML page with the following content.

size(400, 400);
rect(80, 70, 60, 240);
rect(280, 70, 60, 240);
rect(140, 170, 140, 40);

If you now load your HTML page in your browser. It should display a simple graphic. For me, this did not work in Chrome because the hello.pde file is loaded with XMLHttpRequest and creates a same-origin policy violation. But it worked in Firefox.

hello

I will continue exploring the Processing.js library.