Intro Notes on Web Development with Node & React

web-dev-node-react-javascript.md

Here are a few notes:

Node

• You don’t need anything else to create a web server on node. The most basic web server you can create is done in the following guide: https://nodejs.org/en/docs/guides/getting-started-guide/
• Although you don’t need anything else to create a webserver app on node, LOTS of packages/components are available and easily installable for node. They are almost all hosted on “npm” (https://www.npmjs.com) and installed with a tool also called npm. More on npm at https://docs.npmjs.com/getting-started/what-is-npm
• Most HTTP-server based apps use an library/framework called Express for servers. Tons of community/component extensions for it available. A basic introduction to express is at https://expressjs.com/en/starter/hello-world.html (it is almost the same as not using express, but you very quickly get lots of benefits by using express).

JavaScript

• Use Promises. Avoid callbacks:

  • Node is really all about asynchronous, non-blocking frameworks/patterns. The way they accomplished that originally was with callbacks. So nearly all of the node libraries have the pattern of passing a function to get called back when the function is complete. The first parameter of the function will be the error.
  • Promises are widely supported and scale better than callbacks in even simple cases. Callbacks lead to lots of boilerplate cerimony or unreadable code. There is absolutely no execuse for not using Promises with things like util.promisify
  • Optional note: Promises are beautiful but they're not magic, more of a convention.
  • Promises get even better with async and await syntax which is also now widely supported.

• Although I'm a TypeScript fan for LARGE applications, I think ES6 has some of the critical benefits (syntax for classes, sane modules, etc.) and it is widely supported by node, browsers, and libraries these days. The drawback of TypeScript (or choose your favorite transpiled language/extension) is that the tooling gets brittle and complex to manage fast. So avoid it until you really find your app getting difficult to maintain and develop (usually with multiple devs).

• Always prefer using ES6 Modules and import syntax (and not require(...)). In Node.js these days you can now use the import syntax as long as you run node with the --experimental-modules flag. A lot of node code does almost the same thing except uses the require syntax (so-called "CommonJS modules") instead of import. With the --experimental-modules flag All CommonJS, JSON, and C++ modules can be used with import.

Tools

• I feel like I'm getting old, but I think debugging in Node & Browsers is overrated. Its slow and sometimes hit or miss to set up and get working as projects get complex -which is when you need it- and when they are simple you don't need it. Use console.log.
• If using mac use homebrew to install and update node (and similar tools): https://brew.sh/
• I use VSCode these days as an editor. It is very good at node/javascript/react type things.
• https://kapeli.com/dash is amazing for documentation
• Mozilla has the best docs on core, standardized web technology (JavaScript, HTML, CSS, DOM API and other web-based APIs): https://developer.mozilla.org/en-US/docs/Web

React

• React's documentation and guides are very good. They have a great getting started tutorial at https://reactjs.org/tutorial/tutorial.html
• Next.js: React normally "renders" (generates HTML from JavaScript) on the client (in the browser) but Next.js is a very easy way to make it also render on the server (so the same React templates generate HTML on the server and then only send HTML to the client and not the JavaScript). Next.js has a wonderful tutorial at https://nextjs.org/learn/

Newb stuff

• I haven't gone through this and suspect it is probably very 101 stuff, but it might be interesting: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web