JavaScript

Maybe it's spelled "Javascript", I can never keep it straight.

I will be developing new county GIS Web applications using OpenLayers and that means updating my Web development skills with Node, Javascript, and friends.

Using Node

There is a nice blog post here that explains all the stuff I learned painfully slowly over the last month. Read the first part, stop reading when you get to the section on Bower. Time has marched on and now there is Parcel.

Node was originally inteded to be for server side Javascript but ends up being a great development tool for client side applications. I have not actually used it on a server yet.

Using Parcel bundler

Runs code, does "hot module replacement", you can watch what's happening... beautiful.

Except - does not work in Visual Studio -- after saving from VS, parcel does not always see changes. Occasionally it does, I get excited, then it stops.

Does not work with Emacs until you turn off autobackup files with this in your .emacs:

(setq make-backup-files nil)

I like backup files but I like hot module replacement even more.

A month in and I find I use emacs 90% of the time instead of using VS. Code completion in VS is great but so is the quick edit/debug cycle with emacs.

Using Visual Studio

As I said before I started using Parcel I used Microsoft Visual Studio. Visual Studio Code looks nice but I don't feel a need to develop new skills right now.

I installed the Node.JS workload in VS and installed the (standalone) portable Node.JS package.

Now in VS I can create a web Node.JS project, and I can run and test the complete app on my desktop so I don't need any access to a real web server.

In my VS project, I have to set the Node.exe path to C:\Users\bwilson\Portable\node-v8.11.3-win-x64\node.exe Once I do that it can find the other tools like npm too.

My typical server.js looks like this; I keep it in a VS template at github to make project creation easier.

var http = require('http');
var port = process.env.PORT || 1337;
var path = require('path'),
    fs = require('fs');
var base = 'C:/GeoModel/WebMaps/OpenlayersApp';

http.createServer(function (req, res) {
    
    pathname = base + req.url;
    if (req.url === '/') {
        pathname = base + '/index.html';
    }
    console.log(pathname);

    if (fs.exists(pathname)) {
        res.writeHead(404);
        res.write('Page not found 404\n');
        res.end();
    } else {
        res.setHeader('Content-Type', 'text/html');
        res.statusCode = 200;
        var file = fs.createReadStream(pathname);
        file.on("open", function () {
            file.pipe(res);
        });
    }

}).listen(port);

console.log("Server running on port ", port);

When I run the project, it launches server js and in turn launches a browser and serves up my index.html. I can click local links therein. I can edit the index.html and hit reload in the browser and ta-da! there's my updated page.

Debugging the client

Basically either way you run a tiny server on your desktop and watch output in a cmd window and use F12 to open the console in the browser.

Parcel

Parcel gives you "hot module replacement" and you don't have to write and maintain a server.js, the server is built in.

I have a script set up in package.json to launch parcel and it in turn launches a chrome browser. In a cmd window I type

npm test

Note I use a cmd window not a git bash shell, because I found that npm started node.exe processes that exit in a cmd window but just live on forever eating memory in bash. I had to kill them off manually.

Running "npm run-script build" creates a deployment bundle in the dist/ folder, copy that to a server and voila! Deployed.

Node

Refer to https://docs.microsoft.com/en-us/visualstudio/debugger/client-side-script-debugging

NOTE if you have 15.7 installed: Change in 15.7

I was able to change my default browser to IE and get that going. Good news. Now I need to make it work in Chrome, this guy's page helped me: JavaScript debugging in VisualStudio with Chrome and Chrome's page on the subject.

1. Start chrome in remote debug mode: chrome.exe --remote-debugging-port=9222
2. Attach Visual Studio: "Debug" -> "Attach to Process..." -> select the chrome instance

Done.

Links

• Blog about Node
• Parcel docs
• Speaking Javascript : An In-Depth Guide for Programmers by Dr. Axel Rauschmayer
• Eloquent Javascript, third edition Written by Marijn Haverbeke.
• JavaScript Garden
• JavaScript Pocket Reference (O'Reilly)