For so many years I've seen a lot of different applications and different approaches to managing texts in SPAs. At the beginning, the most used method was just hardcoded string in JS or HTML :_D, but step by step some better methods appeared. Definition of constants at the top of the file where the variables will be used, creation of the constants/resources file in the component/feature folder and importation of constants for the usage, and the one I like most is the simple creation of locale folder with en-us.js inside which contains all the text strings used in the app.
So in this post, I'm gonna focus on the last method because from my point of view it has a lot of benefits.
- just one import, forget to import each used string
- all the text strings you define can be reused around the app most of the IDEs have an indexation, so with just click on the variable you get directly to its definition
- you have everything in the same place
- easy to maintain
- easy to translate the app to any language
The mess could come on the definition of constants, so let's talk about it.
The content of our en-es.js will be a simple exposed object.
export const locale = {awesome: 'Awesome'};
Good name for the thing will save much time in the future.
People see naming as a simple thing. Just write the first idea that comes to your mind, because there is no naming convention or even if there is, its easy to get distracted one day and just invent a new creation of name and so on... So the naming is probably the hardest thing you will find in this article :)
A lot of times I just created a file and for me, it was obvious the naming, but not for the others, and more when the file gets bigger and you have some troubling cases that you have never had before, so at that point, you just decide something because you need to hurry with the delivering... The seed of monster creation has been planted! Baaad! Bad! You hope one day you will fix it, but then that day never comes... at this point, my suggestion is to not hurry up and check at least the most used cases.
So let's check them. I tried to cover all the cases I imagined, but probably on the way, you will find some more.
const locale = {
WhateverXX = 'Whatever %0', //XX is the indication that this string has a parameter (you will need a method to replace it)
WhateverXXandXX = 'Whatever %0 and %1', //same case with more parameters
SuperLongStringTextXX = 'Super long long long %0 very long string', //another example
WhateverYouDoUserUnderscoreNameColonXX: 'Whatever you do user_name: XX', // "Underscore" and "Colon" inside the name, for some specific cases you can use it, but I wouldn't do it in long text, so it is a matter of common sense
UserName = 'User name', //for simple text
UserNameLC = 'user name', //LC an indication that the whole string is in lower case
//UserNameLowercase = 'user name', //another way to do the same
UserNameCC = 'User Name', //CC - whole string in camel case
UserNameUC = 'USER NAME', //UC - whole string in upper case
UserNameColon = 'User name:', //Colon an indication of colon at the end, common usage in forms
UserNameCCColon = 'User Name:', // or you can use UserName and in the use add ":"
AboutUsText1 = 'Cool very long paragraph about us', // you can use descriptive name for some long texts
AboutUsText2 = 'Another awesome paragraph about us', // another example
IfyouHaveASuperLongTextIDontKnowWhatIsTheProblemOnUseItInThisWay = '...', //its not a bad idea to use long text, but its quite ugly and is too descriptive, so if you change it, then you will have to replace all the usages in the app and it is painful. I suggest you to use the definition above, its easier to maintain.
};
Right now I'm working on a project where we had strings files defined in almost every component's folder and a bunch of hardcoded strings in the APP. So we started the migration some months ago and right now we have already 1k+ strings ordered alphabetically and our team is happier :)
This is basically all, I hope you have gained something useful. Comments are welcome.
Top comments (0)