Coding Guidelines - YunusEmreCMD/blokTech GitHub Wiki

Het is belangrijk om je code zo overzichtelijk mogelijk te schrijven, niet alleen voor nu en jezelf is dit handig, Maar ook voor later en anderen. Het is goed om te weten wat je precies schrijft er waar je mee bezig bent. Je wilt je code niet alleen nu, maar ook jaren later kunnen en willen begrijpen. En niet alleen jij wilt dat, anderen willen dat ook, vooral als je open-source werkt waarbij anderen je code bekijken. Het is essentieel dat je zorgvuldig en clean te werk gaat.

In dit artikel ga ik het hebben over een aantal onderwerpen die belangrijk zijn om aan te houden en goed op orde te hebben. Ik ga een aantal voorbeelden van mijn eigen code weer geven om te laten zien, maar ook van anderen wat goed en fout is.

Variabele

Gebruik betekenisvolle en uitspreekbare variabele namen.

fout

var filterKnop = document.getElementById("filter-knop");

goed

var knnopppp = document.getElementById("filter-knop");

Functie moet maar 1 actie hebben

Dit is 1 van de belangrijkste regels onder developers. Wanneer functies meer dan 1 ding doen zijn ze harder te composen en testen. Daarom is het handig om functies apart te schrijven, dit maakt de code wat cleaner.

fout

function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

goed

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

Functie namen

Functie namen moeten aangeven wat ze doen.

fout

var filterKnop = document.getElementById("filter-knop");

goed

function openen() {
  document.body.classList.toggle("filterOverlayOpenen");
}

Verwijder onnodige/oude code

Dubbele, ook wel soms dode code genoemd heeft geen reden om in je code te staan. Als deze niet aangeroepen wordt, of er wordt niks mee gedaan kan je deze gewoon verwijderen. Als je het toch ooit nodig hebt heb je alles op Github staan. (Ik heb alles omgezet naar dynamische content, dus alle statische content kan weg.)

fout

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const dotenv = require('dotenv').config();
const { MongoClient } = require('mongodb');
const port = 3000;


// Array voor statische content
const gebruikers = [
  {naam: "Yunus Emre Alkan", soortGebruiker: "Werkzoekende", opleidingsniveau: "Hbo", leerjaar: 2, functie: "Creative designer", dienstverband: "Stage"},
  {naam: "Ali", soortGebruiker: "Werkzoekende", opleidingsniveau: "Universiteit", leerjaar: 3, functie: "Architect", dienstverband: "Stage"},
  {naam: "Lisa", soortGebruiker: "Werkzoekende", opleidingsniveau: "Mbo", leerjaar: 1, functie: "Apotheek assistente", dienstverband: "Part-time"}
]

goed

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const dotenv = require('dotenv').config();
const { MongoClient } = require('mongodb');
const port = 3000;

// statische content verwijderd

Error handeling

Probeer errors altijd weer te geven, en probeer na te denken over de errors die kunnen ontstaan.

fout

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

goed

try {
  functionThatMightThrow();
} catch (error) {
  // One option (more noisy than console.log):
  console.error(error);
  // Another option:
  notifyUserOfError(error);
  // Another option:
  reportErrorToService(error);
  // OR do all three!
}

Consistent zijn

Je kunt variabelen en functions zo aanmaken hoe jij het wilt, anderen kunnen het net iets anders doen, bijvoorbeeld met Camelcase of alleen kleineletters of alleen HOOFDLETTERS. Ondanks dat er een aantal richtlijnen zijn, maakt niet echt uit hoe je het precies doet. Wel is hierbij belangrijk dat je **consistent ** blijft.

fout

const DAYS_IN_WEEK = 7;
const daysInMonth = 30;

const songs = ["Back In Black", "Stairway to Heaven", "Hey Jude"];
const Artists = ["ACDC", "Led Zeppelin", "The Beatles"];

function eraseDatabase() {}
function restore_database() {}

class animal {}
class Alpaca {}

goed

const DAYS_IN_WEEK = 7;
const DAYS_IN_MONTH = 30;

const SONGS = ["Back In Black", "Stairway to Heaven", "Hey Jude"];
const ARTISTS = ["ACDC", "Led Zeppelin", "The Beatles"];

function eraseDatabase() {}
function restoreDatabase() {}

class Animal {}
class Alpaca {}

Commentaar

Commentaar is belangrijk, alleen niet overal hoeft commentaar bij te staan, vaak documenteert de code zelf. Daarom is het beter om commentaar te plaatsen bij stukken code die complex zijn om moeilijk te begrijpen zijn.

fout

// variabele db aanmken met de waarde null
let db = null;
// functie om de database te connecten
async function connectDB () {
  // URI van de .env file ophalen
  const uri = process.env.DB_URI
  // connectie maken met de database
  const options = { useUnifiedTopology: true };
  const client = new MongoClient(uri, options)
  // wachten totdat er geconnect wordt
  await client.connect();
  // haalt de db naam op
  db = await client.db(process.env.DB_NAME)
}
connectDB()
  .then(() => {
    // succes om te verbinden
    console.log('Feest!')
  })
  .catch( error => {
    // geen succes om te verbinden
    console.log(error)
  });

goed

let db = null;
// functie om de database te connecten
async function connectDB () {
  const uri = process.env.DB_URI
  // connectie maken met de database
  const options = { useUnifiedTopology: true };
  const client = new MongoClient(uri, options)
  await client.connect();
  db = await client.db(process.env.DB_NAME)
}
connectDB()
  .then(() => {
    // succes om te verbinden
    console.log('Feest!')
  })
  .catch( error => {
    // geen succes om te verbinden
    console.log(error)
  });

Formatters

Door formatters te gebruiken kan je je code opschonen. Onnodige spaties worden weggehaald, quotes worden recht getrokken, inspringen wordt gefixt en let wordt verandert naar const zo nodig.

fout

function hoi (    naam   ){
var age=10;
}

let age=12  ;

var array = ['singleQuote',   "doubleQuote"   ];

goed

function hoi (naam) {
   const age = 10;
}

const age = 12;

const array = ['singleQuote', 'doubleQuote'];

Bronnen

Clean code Javascript