Should classes/interfaces/functions be consistently prefixed with the App acronym as a best practice?

As I delve into my Angular project, I find myself contemplating the idea of using the App acronym as a prefix for all Classes, Interfaces, and Functions. This practice is commonly seen in tag components, where adding the App acronym helps avoid conflicts in the DOM and enhances searchability.

For instance, if my app acronym is 'toh' (Tour of Heroes) and I create a filter component, its tag could be <toh-filter>.

While this approach works well for components, I'm curious to know if extending this prefixing to ALL aspects of the codebase is considered a best practice. By all aspects, I mean all Classes, Interfaces, exported functions, and constants.

Exploring the Pros & Cons of this approach is crucial to understanding its rationale and effectiveness.

It's worth noting that the application in question will only be used internally and not consumed by other apps as a library.

Here are some examples illustrating the difference between using prefixes and not using them:

// ./filter.component.ts
@Component() export class FilterComponent {}
@Component() export class TohFilterComponent {}

// ./some.service.ts
export class SomeService {}
export class TohSomeService {}

// ./utils.ts
export function deepCopy() {}
export function tohDeepCopy() {}

export function pipe() {}
export function tohPipe() {}

Thank you for your insights!

Answer №1

In my opinion, the use of prefixes in TS/JS code is unnecessary.

When working with code that is spread across multiple files, you have the flexibility to import classes from different locations and even rename them as needed.

Managing conflicts can be done without the addition of prefixes.

Angular, for example, appends suffixes to classes to adhere to their LIFT style requirement for quick identification. However, adding prefixes manually to every class does not offer any notable advantages.

Ultimately, there is no real benefit to using prefixes, so my recommendation is to avoid them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting rid of a texture in three.js

I am attempting to deallocate a texture once it has been loaded in three.js. The texture is loaded using var tex = THREE.ImageUtils.loadTexture("image.png"); and it is being displayed correctly. However, when I attempt to use: tex.dispose(); I consist ...

What is the best method to assign values to AngularJS controller variables using Python Selenium or the JavaScript console?

After utilizing Python Selenium and AngularJS for a few months, I am currently attempting to adjust certain AngJS variables (specifically the aslider filter from here) and refresh the page in order to extract some data. Below is the code I am using for thi ...

What is the best way to determine the variable height of a div in Angular 7?

I'm currently trying to use console.log in order to determine the height of a div based on the size of a table inside it. This information is crucial for me to be able to ascertain whether or not a scrollbar will be present, especially within a dialog ...

How can I retrieve information from PHP using json_encode and access it in JavaScript?

Currently in the process of developing a web app using Phonegap and XUI. Fetching data from an external domain through an http request with XUI. The retrieval process is successful, as I am able to receive JSON data in the following format: ({"first":"J ...

Exploring the mechanics behind optional chaining, known as the Elvis operator, in TypeScript. How does this feature operate within the

Can someone explain the concept of optional chaining (Elvis operator) in TypeScript and how it can be used effectively? public static getName(user: IUser){ if(user.firstName != null && user.firstName != ""){ return user.firstName; } ...

There was an issue encountered while attempting to differentiate an object in the Angular datatable results. The data table only accepts arrays and iterables

Looking to retrieve user data from an API using the httpClient post method in Angular 5, I faced a challenge as I couldn't properly display the retrieved information in a datatable. Below are snippets of the code that I have experimented with: User ...

Angular: Smooth transitions for ngif animations - Learn how to animate ngif elements seamlessly as one element is removed from the DOM

Is there a way to delay the execution of ngIf? I have a scenario where elements in a parent component fade out and are removed from the DOM using ngIf, followed by elements from a child component coming in. However, I am facing an issue with elements overl ...

Encountering a host configuration issue while trying to use next/image in a TypeScript environment

I understand that when using Next.js image components without TypeScript, the URL must be configured in next.config.js, but I'm unsure why this doesn't work with TypeScript. ..., is not set up under images in your next.config.js. Learn more her ...

Enlist a variety of Angular2 components to a Service for enhanced functionality

My goal is to establish communication between two Components using a Service that is triggered when another Component reacts to a DOM event. To achieve this, I intend to leverage the power of RxJS Subject Observable, or potentially its subclasses like Beh ...

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Recently, I encountered an issue with a simple code snippet that seems to produce inconsistent results. Take a look at the function below: addDays(date: Date, days: number): Date { console.log('adding ' + days + ' days'); con ...

Using Angular Ionic 3 to apply the disabled attribute

I have a situation in my main.ts where I need to disable a textarea in the HTML if an object is initialized. I've attempted various methods like: ng-attr-disabled="!myObj"; ng-attr-disabled="{myObj!= null}"; and also directly using ng-disabled. I e ...

experiencing challenges with jQuery event handlers in version 1.6, but not encountering the same issues in newer releases

Presently, I am using a version 1.6 of the Jquery library, which takes time to update. I am attempting to incorporate a Jquery event handler. I have a collection of divs that contain many buttons. These buttons are constantly being added dynamically, and ...

jQuery plugin: Dynamic text rotator with color transitions

For more information about the jQuery plugin, visit this page: https://github.com/peachananr/simple-text-rotator Here's a link to my Fiddle: https://jsfiddle.net/jzhang172/8msf91wa/ Make sure to check out my external Fiddle link, as the code here ma ...

Adding an object with a composite key to an IndexedDB object store is not permitted as the key already exists within the store. This limitation occurs when attempting to add an entry

I am facing an issue with my objectStore where adding an object with the same productId but a different shopName triggers an error in the transaction showing: ConstraintError: Key already exists in the object store.. This is how I initialized the objectSto ...

Is there a way to inform TypeScript that the process is defined rather than undefined?

When I execute the code line below: internalWhiteList = process.env.INTERNAL_IP_WHITELIST.split( ',' ) An error pops up indicating, Object is possibly undefined. The env variables are injected into process.env through the utilization of the mod ...

JavaScript event listener on the "change" event only triggers when changed manually [CodePen]

Check out this jsFiddle I created with all the data and information related to the issue. It should make it easier to understand what's happening: Take a look here: http://jsfiddle.net/lukinhasb/GuZq2/ $("#estado").val(unescape(resultadoCEP["uf"])); ...

What are some strategies for locally developing Angular 7 libraries that have dependencies on one another? (Troubleshooting npm linking)

I am managing two Angular library NPM packages: A contains basic components A-BC includes components that enhance the ones in A, with additional features to interact with the BC library Some components in A-BC are imported from A like import { MyThing } ...

Recursive type analysis indicates that the instantiation of the type is excessively deep and may lead to potential infinite loops

In the process of developing a Jest utility, I have created a solution where an object mock is lazily generated as properties are accessed or called. Essentially, when a property is invoked like a method, it will utilize a jest.fn() for that specific path ...

Employing Isotope/jQuery for organizing posts on Tumblr in columns with the ability to infinitely scroll

Alright so, here we have the classic dilemma where scripts are running before images load. And to make matters more complicated, on Tumblr, there's no way to access image dimensions before they're loaded into the DOM... $('#thumbnails&apos ...

Using Mocha in Node to make XMLHttprequests

Currently, I am experimenting with using node-xmlhttprequest. Here is an example of what I have been working on: // f.js (function() XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest xhr = new XMLHttpRequest() xhr.open('GET ...