I have recently made the jump from developing using the Django framework to vue.js. One thing I am having a hard time wrapping my head around is the workflow for adding translations.
In Django, my workflow felt very intuitive:
Annotate my code with translation hooks.
Pull out the translation hooks into a .po (gettext) file
Translate the messages into the desired locale, i.e. do work in the .po file
Compile the .po file
In the context where all of my work needs to be translated, this workflow was very convenient and fool-proof.
I am excited about the move over to vue.js but I am afraid the difference in translation workflow might be a deal-breaker. Or perhaps, there is something I am missing? Here is my understanding of the vue.js/i18n workflow
Annotate my code with translation hooks. Unlike the Django process, I am using a Translation ID to link messages and translations.
Manually add those translation ids to a JSON file, e.g. en.json
Mirror that json file to that of a different locale, e.g., fr.json
I understand that I can use a tool like BabelEdit to manage the last step. While this seems like a great tool, it is the second step that I am really having a hard time getting my head around. Without a function like the django-admin/gettext makemessages this seems like it would be a tedious and inefficient task.
What am I getting wrong here? I imagine I am not the only one with these needs, so what are the translation workflows that are working for others developing with vue.js?
Thanks in advance.
I believe that you can use https://github.com/pixari/vue-i18n-extract on step 2. I think that BabelEdit can only help if you keep your translations as <i18n> section in your Vue components (in which case you will need https://github.com/intlify/vue-i18n-loader)
Related
I want to know what is the best way to order the folders and other components in a vue.js project so that it can be easily maintained and scalable
Like the comments already say there are a lot of ways and opinions of how to structure your vue project.
Like tony19 already said it's a good start to use the vue-cli to generate a project.
If you want to see a real world example of a project you could try this one: https://github.com/gothinkster/vue-realworld-example-app
gothinkster actually has an example of the same project in a lot of different frontends and backends. just look at their repos.
If you plan to use vuetify as your ui library i can also recommand to have a look at their free templates
https://vuetifyjs.com/en/themes/premium/
There are plenty others of course. You might want to search for "vue real world example" or something similar on google.
For scaleability i would say to split things into smaller files and components is a good practice.
For example when creating a vuex module you could have a file for the complete vuex storage or a file for each module or even split each modules into an actions.js, mutations.js getters.js state.js and an index.js which combines those 4.
Please keep in mind that all of the above is my opinion and others might think differently.
I'd advice you to go for the standard cli-structure - but remember that you can still add sub-folders everywhere and don't get caught putting in 200 files under modules or something like that.
If you're about to make a module - add a folder.
If you're about to add a component - add a folder
and so on.
This also counts for the store, which can get pretty big at times.
If you want to split your store because you know it will be too big, add sub-folders for actions, mutations and so on seperately and then add in the files like 'actions/actions_user.vue' '..actions_items.vue' and so on - or leave out the 'actions_' if you're more comfortable with that (they are in the actions folder now anyway, but it could make it harder to search for them if you're not using the file-tree).
For how to split up actions (and the other content of the store) into multiple files, please look up my answer here
there are also the options to add modules in the store or even adding multiple stores, which contributes to scaleability, but - in my opinion - can get finicky and harder to read than it being useful in the end.
I am using a command line tool (ng-xi18n) to extract the i18n strings from an angular 2 app I wrote. The output of this command is a messages.xlf file. Coming from a .po background, and being not familiar with .xlf, I assumed that this file is the equivalent to the .pot file (correct me if I am wrong).
I then assumed that if I want to translate my app, I had to cp messages.xlf messages.de.xlf to have a copy (messages.de.xlf) of the template file (messages.xlf) where I can translate each message into German (hence the .de.xlf).
After translating some dummy texts and running the app, I saw that it worked as expected, so I quit translating and continued developing the app. After some time, I added more i18n strings, and eventually thought that I had to update my template. And this is where things got hardly maintainable. I updated the template messages.xlf file, and quickly was wondering how I could update the new strings to my already translated messages.de.xlf file without loosing my progress.
When I was developing using .po files, this was no problem thanks to good tools like poEdit, but I didn't find anything comparable for .xlf. After trying some tools, I thought that the best choice would be Lokalize, but I didn't find a possibility to merge the template file to already translated (but outdated) files either.
Up to now, this was rather an essay than a question, so here's a quick summary:
Is the workflow of dealing with .xlf files really comparable to .po as I initially thought (described above), or is it completely different?
How am I suppose to update my already translated files?
What are the best practices dealing with .xlf files?
What are proof of concept tools to work with .xlf?
Sidenotes:
The Lokalize handbook was not helpful at all. I see a lot of functions that sound promising, like:
"File" > "Update file from template". I did not find anything in the handbook to explain this function. If I click on this, nothing happens.
"Sync" > "Open file for sync/merge". This seems to be a function to merge two similar files (by multiple translators) rather than a tool to update the translation file from a template. Even though there is a tooltip in Lokalize's primary sync tab, notifying me about "x unmatched entries", I just couldn't find anything to append those unmatched entries to my .de.xlf file.
[Update] Turns out, I had similar issues as in this question. After downgrading my version of Lokalize to the suggested one, many issues (including the ones mentioned in the question) disappeared. However, now the "Update file from template" option is greyed out, and I don't know why.
I also tried OmegaT, which does not work at all on my platform (Ubuntu 16.04).
[Update] Virtaal works great for merging new strings from a template, but the UI in general is very poorly designed...
Googling did not help, as every hit seems to be related to XCode or something.
Thanks for any help in advance, I really appreciate it
I wrote a small npm command line tool called xliffmerge.
In principle it does the same, that Roland Oldengarm does with his gulp tasks described in his blog article.
It is free and you can have a look at it at https://github.com/martinroob/ngx-i18nsupport#readme
The best workflow automation solution I have seen described so far is from Roland Oldengarm's blog entry "Angular 2: Automated i18n workflow using gulp". To summarize, in a few dozen lines of Gulp code he created the tooling to handle some of the challenges you faced. Specifically it runs ng-xi18n to extract the messages; creates an English translation with sources copied to targets; updates existing translations by adding new trans-units, keeping existing ones, and removing missing ones; and then exposes all xlf files as TypeScript string constants. These last strings can then be imported to supply the bootstrapModule with its translation provider options.
Caveat: I have not used this exact solution (and code) myself, but I was able to expose generated xlf as TypeScript strings and use them in an app in a manner similar to what he described. As for maintaining translations, I have leveraged IntelliJ IDEA (WebStorm) file comparison features and Counterparts Lite (for Mac) for that. My own efforts are still in early stages but are working end to end for an application that is in active development.
Official Angular docs are now updated for Internationalization (i18n) at https://angular.io/docs/ts/latest/cookbook/i18n.html including a section specifically for creating a translation source file with the ng-xi18n tool.
Im new to i18n and when I typed it in the search bar i18next is in the top results.
I already did my research regarding i18n and how to use it. But it still not clear to me. All I know is that to be able to make your web app available to other language, you need to do a json file that contains the keys and value of your app, and you need to add a script for the i18n.
The rest is still confusing for me. This might sound a stupid question for you, but I just cant understand how it works.
1) Im not sure but based on my observation, you only create a json translation for those that have a value or text that will be shown in the page. Correct? Assuming in the html file, I have a text that is not inside a label or innerhtml, example:
<html>
<body>
**How are we going to translate this text? What key am I going to use?**
</body>
</html>
What do I need to do to translate this text?
2) What should we use as the key? id? class? tag? Because I've seen different examples and it uses different any of these. When is the right time to use these?
3) regarding the key-value pair, what if the pair is coming from the server? what's the syntax for this?
4) When do we need a multi line json?
i18n is a big topic, with a lot of solutions depending on what kind of web app you are trying to internationalize / localize. Unfortunately, i18next's documentation is not very good, and it has next to nothing in way of tutorials.
That said, you might be best off taking a look at the sample app on i18next.js's github repository here: https://github.com/jamuhl/i18next/tree/master/sample/static. It does give some examples of how i18next can be used to replace html text with localized versions of the same. To answer some of your questions:
There are a few ways of doing this. The sample script replaces much of the data by using the jQuery .text call -- something like this: $('#MyHTMLID').text($.t('ns.common:MyLocalizedTextForMyHTMLID'));. Any html inside the id "MyHTMLID" is replaced by the localized data for the key "MyLocalizedTextForMyHTMLID' by the i18next .t call.
A lot of these decisions are just convention. Keep it simple, be consistent.
Normally in a web app the json file is on the server, in a locales subdirectory of the directory where your html resides. Take a look at that i18next example for how it's laid out.
When you're first building your web app, use a multi-line json file to be able to troubleshoot. You can compress it later using something like http://jsonformatter.curiousconcept.com/.
Hope this helps get you started!
I'm new to MODx, but am quite impressed with its power and flexibility. There's only one caveat, and I'm hoping it's just because I don't know any better.
I'm a frontend dev, and I'm used to building websites of all sizes. But I usually work with files and version control. How would I keep this paradigm with MODx?
From my poking around so far, the only way I found to use an IDE, is to keep static files with my code, to later on copy/paste into MODx Manager. Far from ideal.
I'm aware that a lot of people use an "include" snippet, to include snippets, chunks, etc. Does this work for MODx specific tags? For example, if I include a file as a snippet, and I have a template variable defined in there (or a resource link), would that be properly rendered?
Also, is there a performance hit using a snippet by including a file, vs having the snippet code entered into MODx Manager?
Bottom line, how do you develop sites on MODx? Where do you enter your code? Is there a feature like the "Import HTML" but for snippets and chunks? Is there a way to create new Templates, Documents, Chunks, TVs, etc. without going through the Manager?
Thanks in advance!
there is a whole documentation site for developing in modx, http://rtfm.modx.com/display/revolution20/Home - though it mostly concerns extending it - not customization & modification. The short answer is no, there is no version control for your snippets & such, yes, you will have to maintain them manually. [I wish that was not the case]
Most of your php code will go into either a snippet or a plugin, and yes you can include static files in either of those resource types, no, I on't know if there is a performance gain/loss, but I would imagine "no" if your include is cache-able.
for the includes you can do something like this:
include_once $modx->config['base_path'].'_path_to_my.php_';
-sean
There is VersionX for revolution that will allow you version control of chunks, snippets, resources and so on.
There is package called Auditor that will allow you to implement version control in Modx
EDIT
Sorry just noticed your question is tagged Revolution, Auditor is for Evo. I don't think there's a solution available yet although I believe it is on the Roadmap
Suppose I am working on exposing some of my server-side classes to a GWT application, but certain parts could be done much better using GWT-specific components (like JSNI, for instance).
What are some techniques for doing so without being too hacky?
For instance, I am aware of using a subpackage and using the <super-source/> tag, but this requires the package names to be different, which causes eclipse to complain. The general solution in the community is to then tell eclipse to use that as a source folder, but then eclipse complains about there being two classes with the same name.
Ideally, there would just be a way to keep everything in a single source tree, and actually have different classes which apply the alternate implementations. This would feel like a more OO approach.
I would like to add a suffix to a class like _gwt which accomplishes this automatically, and I know I could write a script to do this kind of transformation, but that is a kludge for sure.
I've been considering using Google's GIN/GUICE libraries for my projects in general, and I think there might be some kind of a solution there, but I am not sure as I have not thoroughly investigated it.
What are some solutions you have tried in the past on GWT projects?
The easiest way to have split implementations is to use super-source code, but only enough to instantiate a uniquely-named instance or dispatch to a different method. Ideally, the super-source implementation is just a few lines long, and not so bad that you can't roll it by hand.
To work around the Eclipse / javac double-mapping and package name issues, the GWT source uses two top-level roots for user code: user/src and user/super. For example, the AutoBeans package has a split-implementation of JSON quoting and evaluation, one for the JVM and one for the browser.
There's really no non-kludgy way to implement super-source, as this is a feature way outside what you can specify in the language. There's nothing that lets you say "use this implementation in this environment" without the use of some external tool.