Intro til JS

Intro til JS Fauna

Goal

Have some idea on how building a JS app works and some hints on getting started.

Learning a language is easy, learning the ecosystem is hard

I will try to give an overview of how a modern JS app work, from coding to production.

That will not mean a intro to the language itself, but also some words about the tools that are used.

The goal is to build a simple React app showing some simple graphs of real data.

Here is a sketch of the structure of the talk:

Intro (this)
Introduction to Javascript
Introduction to React
Introduction to the ecosystem
Introduction to a simple app

Introduction to Javascript

Introduction

Made by Brendan Eich while working at Netscape in 1995.

Semantics is inspired from Scheme, but the syntax is inspired by Java (which was popular at the time).

It is a prototype based language, which is a style of object-oriented programming different from the usual one with classes and inheritance. Instead, objects inherit from “prototypes”.

Here is an example:

const a = 2;
const b = 3;

function sumUsPlease(x, y) {
  return x + y;
}

console.log(sumUsPlease(a,b))

Here we modify the Array prototype:

Array.prototype.altSum = function() {
  let s = 0;
  for (let i = 0; i < this.length; i++) {
    s += Math.pow(-1, i) * this[i]
  }
  return s
}

return [1,2,3].altSum()

Changing the prototypes of global objects is generally frowned upon though (and is one of the most common security risks).

However, pure JS is not very fun. What gives it its utility is that it can interact with the browser DOM and other browser API’s (there are API’s for accessing web camera, audio interfaces, position, and much more).

The Document Object Model (DOM) and manipulating it

In one sentence: the DOM is the browser’s model of the web page it is showing.

It can be manipulated by Javascript.

Example in this file. Open it in a browser and compare with the source code.

This is an example of making something with pure JS, no extra type system, no build system, no packages, and so on.

This is good enough for very small apps, but for larger apps, we would want to use packages that provide ready-made good looking components, for example.

Introducing Typescript

In Javascript, anything goes. There is no enforced type system anywhere. A type system is useful for editor integration (better auto-complete, for example) and early catching of errors. Ideally, one would use the type system to avoid impossible states.

Typescript, developed by Microsoft, is basically “just” type annotations for Javascript.

But technically it is another language that can be compiled to Javascript.

So instead of this:

function a(a,b) {
  return a + b
}

We can write

function someFunction(a: string, b: string): string {
  return a + b
}

Typescript is much more than this, and in fact its type system is Turing complete.

Nowadays, almost all large Javascript projects would choose to use Typescript (or sometimes its somewhat older competitor Flow, developed by Facebook).

Introduction to React

React, developed by Facebook, is a Javascript library for building user interfaces.

The idea is that you build your UI out of components. A component can have internal state and “props” that are properties that are passed from other components.

Example:

function Button({color}) {
  const [clicked, setClicked] = React.useState(false)

  return <button style={{color: color}} onClick={ () => setClicked(true)}>
    { clicked ? "I have been clicked" : "I have not been clicked" }
  </button>
}

See the project in example-2 and the associated code.

It can be run by running npm install and then npm run dev. Then you can open a browser in localhost:3000.

The project was set up by using the scaffolding script from Vite.

Introduction to the fauna in a production app

The previous example showed how easy it was to get a simple React app up and running.

There are several things we might want to add in a production app:

Linting

Linting is the automated checking of your source code for programmatic and stylistic errors. In the Javascript fauna, the most used linter is eslint.

It catched things like doing `console.log` in code, warns you about unused code, and so on.

Formatting

In my opinion, if there ever are style discussions in a code project, install an auto-formatter (and enforce it in the CI), and end the discussion there.

A popular formatter in the Javascript world is Prettier.

Typechecking

Typescript, as already mentioned. Run typechecks by running tsc --noEmit in your project (the noEmit is to skip creating pure Javascript files from your Typescript files).

Component Library

Instead of writing all the HTML and CSS yourself, you will save a lot of time by using a component library.

For React, there are several popular ones:

MUI (formerly Material UI)
Chakra UI
Ant Design

I will be using MUI in my example below.

A Real World Demo

See the files in example-3-production-app/.

This is a project with Typescript, React and Material UI.

Resources

The official React Intro.

MDN Mozilla Foundation docs. Excellent JS docs.

MUI documentation. Excellent.

FredrikMeyer / javascript-fauna