JavaScript: Difference between revisions

Revision as of 01:24, 8 August 2019

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

Todo

Ole port

I forked Ole from its Boundless past to 2018, and writing about that process in my new Github Wiki.

Look at more

Web APIs and JavaScript generally seem to go together.
Bootstrap (need to work on this page)
OpenLayers (duh)
Parcel Bundler

Things to look at soonish

Hyperapp tiny framework with state management. So small even I might be able to understand and use it.
Preact https://dev.to/aalises/preact--typescript--parcel--redux-zero-rebuilding-the-qmenta-front-end-focusing-on-performance-and-minimalism-1lnp
React
Redux state management
Geolocation: See "HTML5 and JavaScript Web Apps", chapter 7.
Device Orientation API: "HTML5 and JavaScript Web Apps", chapter 8. Accelerometers, compasses, etc.

Using but don't want to know about

jquery
babel - An Ole dependency that translates JS code

Things to ignore for now

Ionic cross platform build thingie https://www.javascripttuts.com/the-ionic-build-process-tutorial/
Grunt, Bower, Yeoman
browserify, browserify-derequire, browserify-header
Angular, Dojo,
150 other app frameworks

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 intended 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

Automatically creates bundles and runs your app, does "hot module replacement", you can watch what's happening... beautiful. When you edit+save that Parcel sees the file change and triggers a rebuild. Sometimes I have to hit refresh in the browser.

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. I switched to Atom anyway.

Install it

npm install -g parcel-bundler

Add to PATH C:/Users/bwilson/AppData/Roaming/npm

Parcel + Emacs

Parcel HMR 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.

Building a standalone package

Okay but if I am NOT building an app and instead want to build a standalone module and want to test it in Parcel, how do I do that? I think I should look at https://parceljs.org/packagers.html

Which IDE for JavaScript?

Familiarity led me to work with VS for about a month, then I made the leap to Atom. I am now more comfortable using it for JavaScript but still use VS for Python, they still have a great debugger.

Which one? Short answer:

Atom: Better editor
VS: Better debugger

I find for my use that Atom wins out because I haven't been doing single line debugging in VS, I use the browser for debugging with Atom and so far it's been okay. VS is still there if I need it.

Atom editor

Customizing Atom

I found a lot of the autocomplete features burned too much CPU on my little Dell laptop at work. I might try them again in July when I will have a new computer.

Core package "autocomplete-plus" was driving me crazy until I tweaked the settings, changing the delay timeout to 250 and then changing "tab and enter" to "tab always, enter when suggestion explicitly selected".

I found this to be helpful. https://fullstackengine.net/recommended-atom-packages-react-js/

These are the ones I still use:

atom-save-all Save all changed files on ^-S.
color-picker (alt-ctl-C) THIS IS COOL!

I got REALLY tired of having to clean up quotes and brackets and found I could turn off "Autocomplete Brackets" in the core Bracket Matcher package. WHEW. Maybe if I had not learned to program 40 years ago I would need this little crutch? I can close my own quotes; thanks for thinking of me and allowing me to disable the feature.

I tried these and found some of them modestly useful:

atom-ternjs (javascript code intelligence)
atom-wrap-in-tag (Alt-Shift-W) I find I seldom use this one.
Autoclose HTML
autocomplete-modules (autocomplete require and import)
language-babel (autocomplete jsx and more)
sync-settings (uses github gist, ctl-shift-p Sync Settings:Backup or :Restore)

sync-settings

After putting in the token under settings,

Might want to look at Emmet

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

Debug in Chrome

Once the app is running (in Parcel or VS) in the browser you can set break points, single step, look at variables, all the good stuff. I use Chrome for development. See https://developers.google.com/web/tools/chrome-devtools/javascript/

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 browser. In a cmd window I type

npm start

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

Node + Visual Studio

I have a separate Node page now for more Node nodes.

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

NOTE if you have VS 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.

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

Done.

ESLint

YAY lint. I can run "npm run lint" to get output all at once in a terminal window and I can leave fast-eslint turned on all the time in atom to get help while editing.

In npm I installed globally

npm install eslint -g

and in each project needing lint I installed

npm install eslint-plugin-import -D
npm install eslint-plugin-node -D
npm install eslint-plugin-promise -D
npm install eslint-plugin-react -D
npm install eslint-plugin-react-hooks -D
npm install eslint-plugin-standard -D
npm install eslint-config-standard -D
npm install eslint-config-standard-react -D

In Atom I installed

apm install fast-eslint

My .eslint.js file looks like

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["eslint:recommended"],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
	"react-hooks"
    ],
    "rules": {
	"react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn"
    }
};

My .eslintignore file looks like

tasks/
dist/
build/
node_modules/

I add this line to scripts in package.json

"lint": "eslint .",

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. 3rd edition comes out in print in November 2018
JavaScript Garden
JavaScript Pocket Reference (O'Reilly)