JavaScript: Difference between revisions

Latest revision as of 16:21, 24 March 2022

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.

2019 was all about React but now I am jumping over to Svelte. The irony is that I spent time learning React and am moving away from it just as Esri adopts it for Experience Builder. So I will still be using React, but it won't be my focus.

Svelte

Let's just break down and make a page right now, Svelte.

React

I think I have a page for this, too. React

"Building Enterprise JavaScript Applications", see chapter 14

See the links at the bottom of this page https://github.com/react-component/react-component.github.io

Google maps in React

Redux

Maybe you don't need to know anything about Redux and can instead use contexts! That would be nice. https://blog.bitsrc.io/react-context-api-a-replacement-for-redux-6e20790492b3

Or maybe there are still reasons to use Redux: http://davidandsuzi.com/writing-a-basic-react-redux-app-in-2018/ Note the author says it's based on an article from 2015. ;-)

Ole port

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

Stupid caniuse-lite error

It suggests an npm command to fix it but the command does nothing. This has been bugging me for months. The fix is

npx browserslist@latest --update-db

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

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.

Parcel builder

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.

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?

VS Code won out on this, deleting all the old comments here! Just use VS Code.

Forget Atom and Visual Studio and whatever thing comes from JetBrains.

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.

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

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