JavaScript: Difference between revisions

From Wildsong
Jump to navigationJump to search
← Older edit
VisualWikitext
Brian Wilson (talk | contribs)
Bureaucrats, restrict, Administrators, uploaders
11,533 edits
Brian Wilson (talk | contribs)
Bureaucrats, restrict, Administrators, uploaders
11,533 edits
mNo edit summary
 
(26 intermediate revisions by the same user not shown)
Line 2: Line 2:
my Web development skills with Javascript, React, Node and friends.
my Web development skills with Javascript, React, Node and friends.


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


=== Read more books (and book-like things) ===
== Read more books (and book-like things) ==
 
2022-01-28 Learning Svelte and Sveltekit. I still really like Parcel; should I use it or whatever Sveltekit does?
* Svelte https://svelte.dev/ and Sveltekit https://kit.svelte.dev/
* "Practical Svelte", Alex Libby, great book. https://learning.oreilly.com/library/view/practical-svelte-create/9781484273746/
 
2019-02-01
* "React In Action" and Redux in Action"
* "Building Enterprise JavaScript Applications"
 
* [https://github.com/getify/You-Dont-Know-JS You Don't Know JS] by Kyle Simpson (this is mostly true)
* [http://exploringjs.com/ Axel Rauschmayer's books] and [http://2ality.com/index.html blog]
* [http://eloquentjavascript.net Eloquent Javascript], 3rd edition by Marijn Haverbeke
* [https://www.andreasreiterer.at/ Andreas Reiterer's blog] has articles about React.


* [https://www.w3schools.com/ W3 Schools]
* [https://www.w3schools.com/ W3 Schools]
Line 10: Line 25:
** [https://www.w3schools.com/bootstrap Bootstrap 3 tutorial]
** [https://www.w3schools.com/bootstrap Bootstrap 3 tutorial]
** lots more incl SQL, HTML, CSS, PHP, ...
** lots more incl SQL, HTML, CSS, PHP, ...
* [http://eloquentjavascript.net Eloquent Javascript], 3rd edition
* [https://hpbn.co/ High Performance Browser Networking]
* [https://hpbn.co/ High Performance Browser Networking]
* [https://nolanlawson.com/2017/01/09/how-to-write-a-javascript-package-for-both-node-and-the-browser/ How to write a JavaScript package...] and other blog posts
* [https://nolanlawson.com/2017/01/09/how-to-write-a-javascript-package-for-both-node-and-the-browser/ How to write a JavaScript package...] and other blog posts
Line 17: Line 31:
** [https://0-proquest.safaribooksonline.com.marinet.lib.ca.us/book/programming/javascript/9781788395540 Learning Node.js Development] may be out of date already  
** [https://0-proquest.safaribooksonline.com.marinet.lib.ca.us/book/programming/javascript/9781788395540 Learning Node.js Development] may be out of date already  
* or some as yet unidentified Node book, there are hundreds.
* or some as yet unidentified Node book, there are hundreds.
* I have a bunch of eBooks on JavaScript, HTML5, [[React]], etc.
* I own a bunch of eBooks on JavaScript, HTML5, [[React]], etc.
 
* [https://www.manning.com/books/react-quickly React Quickly] is dated (eg React 15 instead of 16). (Skip it.)
 
== 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
 
[https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ 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 ===
=== Ole port ===
Line 24: Line 63:
[https://github.com/boundlessgeo/ole Boundless past] to 2018,  
[https://github.com/boundlessgeo/ole Boundless past] to 2018,  
and writing about that process in my new [https://github.com/brian32768/ole/wiki Github Wiki].
and writing about that process in my new [https://github.com/brian32768/ole/wiki 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 ===
=== Look at more ===
Line 32: Line 78:


=== Things to look at soonish ===
=== Things to look at soonish ===
* [https://github.com/jorgebucaran/hyperapp 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.
* Geolocation: See "HTML5 and JavaScript Web Apps", chapter 7.
* Device Orientation API: "HTML5 and JavaScript Web Apps", chapter  8. Accelerometers, compasses, etc.
* Device Orientation API: "HTML5 and JavaScript Web Apps", chapter  8. Accelerometers, compasses, etc.
Line 47: Line 90:
* Grunt, Bower, Yeoman
* Grunt, Bower, Yeoman
* browserify, browserify-derequire, browserify-header
* browserify, browserify-derequire, browserify-header
* babel, babelify
* Angular, Dojo,  
* Angular, Dojo,  
* 150 other app frameworks
* 150 other app frameworks
Line 56: Line 98:
Read the first part, stop reading when you get to the section on Bower. Time has marched on and now there is Parcel.
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.
[[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.  
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.


== Using Parcel bundler ==
=== Install it ===


Automatically creates bundles and runs your app, does "hot module replacement", you can watch what's happening... beautiful.
npm install -g parcel-bundler
That means when you edit+save that Parcel (node really) 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.
Add to PATH C:/Users/bwilson/AppData/Roaming/npm


=== Parcel + Emacs ===
=== Parcel + Emacs ===
Line 73: Line 120:


I like backup files but I like '''hot module replacement''' even more.
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 ===
=== Building a standalone package ===
Line 81: Line 126:
how do I do that? I think I should look at https://parceljs.org/packagers.html
how do I do that? I think I should look at https://parceljs.org/packagers.html


== Using Visual Studio ==
== Which IDE for JavaScript? ==  


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.
VS Code won out on this, deleting all the old comments here! Just use VS Code.


I installed the Node.JS workload in VS
Forget Atom and Visual Studio and whatever thing comes from JetBrains.  
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.
Parcel gives you "hot module replacement" and you don't have to write and maintain a server.js, the server is built in.


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


<pre>
Running "npm run build" creates a deployment bundle in the dist/ folder, copy that to a server and voila! Deployed.
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) {
== ESLint ==
   
    pathname = base + req.url;
    if (req.url === '/') {
        pathname = base + '/index.html';
    }
    console.log(pathname);


    if (fs.exists(pathname)) {
YAY lint. I can run "npm run lint" to get output all at once in a terminal window
        res.writeHead(404);
and I can leave fast-eslint turned on all the time in atom to get help while editing.
        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);
In npm I installed globally


console.log("Server running on port ", port);
npm install eslint -g
</pre>


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.
and in each project needing lint I installed
I can edit the index.html and hit reload in the browser and ta-da! there's my updated page.
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


=== Debugging the client ===
In Atom I installed
apm install fast-eslint


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.
My .eslint.js file looks like
<pre>
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"
    }
};
</pre>


==== Parcel ====
My .eslintignore file looks like
 
<pre>
Parcel gives you "hot module replacement" and you don't have to write and maintain a server.js, the server is built in.
tasks/
 
dist/
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
build/
 
node_modules/
npm test
</pre>
 
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: [https://blogs.msdn.microsoft.com/webdev/2018/06/29/changes-to-script-debugging-in-visual-studio-15-7/ 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:
[http://lostindetails.com/blog/post/JavaScript-debugging-in-VisualStudio-with-Chrome JavaScript debugging in VisualStudio with Chrome]
and [https://chromedevtools.github.io/devtools-protocol/ Chrome's page on the subject.]


# Start chrome in remote debug mode: chrome.exe --remote-debugging-port=9222
I add this line to scripts in package.json
# Attach Visual Studio: "Debug" -> "Attach to Process..." -> select the chrome instance
"lint": "eslint .",
Done.


== Links ==
== Some links ==


* [https://juristr.com/blog/2014/08/node-grunt-yeoman-bower/ Blog about Node]
* [https://juristr.com/blog/2014/08/node-grunt-yeoman-bower/ Blog about Node]
Line 173: Line 213:


[[Category: JavaScript]]
[[Category: JavaScript]]
[[Category: Web]]

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.

Read more books (and book-like things)

2022-01-28 Learning Svelte and Sveltekit. I still really like Parcel; should I use it or whatever Sveltekit does?

2019-02-01

  • "React In Action" and Redux in Action"
  • "Building Enterprise JavaScript Applications"

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

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

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

Retrieved from "https://wiki.wildsong.biz//index.php?title=JavaScript&oldid=13225"