Tools Prerequisite

Some tools and technologies greatly help the developer’s work, like code quality control, automatic formatting utilities and browser’s developer tools.

Text Editor

One need a decent text editor with at least those features :

Some good editors

Web Browser Developer tools

A good project has to be tested on all major browsers. It is however difficult to do it during development. Tip: change your default browser every week or so.

Dev-channels and Developer-dedicated browsers

Main browsers provide versions of browser with latest features and/or tuned for developers.

Developer tools

Mostly same features in all browsers (without plugin)

Server-side Javascript

Appart from JS console in browsers, several interpreters are available. Node.js is a JS runtime build on Chrome’s JS engine (V8).

The node (or nodejs) command is a command line interactive interpreter a.k.a. a REPL (Read–eval–print loop):

$ node
> var oh = {my: 'dear'}
undefined
> oh.my
'dear'
>

The node command can also run scripts (node my_script.js).

Node.js is associated with NPM (Node Package Manager). The NPM project manages packages written for Node.js, resolves dependencies between packages and help building new projects. NPM is also a repository where all the Node.js packages are registered at https://npmjs.org.

mkdir myProject && cd myProject
npm init # initialize your project!
npm search lodash
npm install --save lodash

Install Node.js

On préférera l’installation via le gestionnaire de paquet de votre OS https://nodejs.org/en/download/package-manager/ ou bien via nvm.

sudo apt-get install curl build-essential
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Code Quality Control

JavaScript is an interpreted language. No compilation. Errors are raised at runtime. A syntactic analysis usually helps. Several tools help controlling your code quality:

Most editor can include such tools.

Code Formatting

Quickly Test and exchange code

Code Versioning

Any project should be hosted on a versioning system. Free services like Github, BitBucket, GitLab, etc., are used to:

Support des TP pour le cours de WEB-IHM

Le TP de ce cours sont hébergé sur un gestionnaire de projet GIT. Les TP sont a faire en clonant le dépôt d’origine. Le dépôt se fait en faisant un pull/merge request sur le dépôt d’origine.

On utilise la forge de l’université du Havre (c’est une instance Gitlab): https://www-apps.univ-lehavre.fr/forge.