Some tips on Javascript programming

good-practices-concepts.md

Good practices general concepts

Abstraction and Encapsulation

Abstraction is a basic concept in programming: means isolating code so that the complexity is on a separate layer. You can go deeper into abstraction layers to get to the gritty complexity, or you can go up abstraction levels so that the code is more simple. The abstraction principle is a principle from which most other principles stem. https://en.wikipedia.org/wiki/Abstraction_principle_(computer_programming)

Encapsulation may seem similar to abstraction but it's not the same: encapsulation means isolating code so that some of it is out of reach, only used internally. Examples of this are object-oriented programming or libraries that expose APIs. https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)

Separation of concerns

Separation of concerns (SoC) is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program. – https://en.wikipedia.org/wiki/Separation_of_concerns

In web development:

• HTML's concern is content, semantics (html tags) and hierarchy of information.
• CSS's concern is style and presentation.
• JS's concern is behavior.

From this principle many good practices derive. Just to name a few:

• Don't use style prop in HTML.
• Don't put image bullet points with the <img> element in HTML. Use :before pseudo-element in CSS.
• Don't use CSS classes in HTML with presentational information (right-button) and instead use a semantic concept (action-button).
• Don't render HTML inside of JS. Ditto with CSS. (Of course all this goes off the roof with React.js, but the basic principle still stands)

This principle does not apply only to web development, but to all software development and probably other engineerings and things in life.

Don't Repeat Yourself (DRY)

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. – Andrew Hunt and David Thomas in "The Pragmatic Programmer".

Replace repetitive code with abstractions or using data normalization to avoid redundancy and to avoid having to change things in different places.

You Ain't Gonna Need It (YAGNI)

Don't add code "just in case" you need it in the future. Keep it simple. Less code is less cognitive load. Less code is less bugs.

Related blog post: https://blog.codinghorror.com/kiss-and-yagni/

Other tips

• https://pragprog.com/the-pragmatic-programmer/extracts/tips

good-practices-naming-conventions.md

Good practices on code styling and naming conventions in JavaScript

Naming conventions

"There are only two hard things in Computer Science: cache invalidation and naming things." — Phil Karlton

Grammar-based naming conventions

https://dev.to/somedood/a-grammar-based-naming-convention-13jf

• Variables, functions, parameters, and identifiers are written in camelCase.
• Constants (static value that does not depend on runtime variabilities) are written in SCREAMING_CASE
• Classes are written in PascalCase
• In most cases, numbers, strings, classes and individual objects are named with the most appropriate singular noun.
• The names for booleans are usually in the form of a yes-or-no question
• Arrays and other collection-like data structures are named with the most appropriate plural noun
• Functions are written with the intent to associate them with actions. Usually named as a combination of two parts: a transitive verb and a direct object (verb + noun).

Code styling

“Programs are meant to be read by humans and only incidentally for computers to execute.” — H. Abelson and G. Sussman

Why coding style matters (Nicholas C. Zakas)

https://www.smashingmagazine.com/2012/10/why-coding-style-matters/

Enforce through ESlint config.

Some examples taken from eslint-config-airbnb-base/style:

• enforce line breaks after opening and before closing array brackets https://eslint.org/docs/rules/array-bracket-newline
• enforce spacing inside array brackets https://eslint.org/docs/rules/array-element-newline
• require camel case names https://eslint.org/docs/rules/camelcase
• enforce spacing before and after comma https://eslint.org/docs/rules/comma-spacing
• enforce spacing between functions and their invocations https://eslint.org/docs/rules/func-call-spacing

Other interesting reads

The Shapes of Code

The shape of a piece of code can carry information by itself. Being able to decipher this information allows to glean indications about the code at a glance, even before starting to read it. https://www.fluentcpp.com/2020/01/14/the-shapes-of-code/

JavaScript Clean Code - Best Practices

Snippets of wisdom on how to name things. https://devinduct.com/blogpost/22/javascript-clean-code-best-practices