Based on the live broadcast of “Front-end Internationalization” by Chen Ning, senior front-end r&d engineer of Shence Data, this paper mainly contains the following contents:

· Overview of internationalization

· International technology requirements

· Internationalized technology model

· Internationalized technical model implementation

I. Overview of internationalization

Internationalization is a framework to help implement localization quickly. The design implementation of the framework determines the efficiency and quality of localization. So what is localization? Localization is to enable products to serve the habits of local customers in a specific language and culture. In many overseas business of the company, there will be a special international department, or in the local has a team to maintain the company overseas promotion and overseas delivery of the products and services, overseas promotion need to burnish the internationalization of product quality, when overseas clients access products, can provide customers’ language and culture background of service; In addition to providing quality service, overseas delivery also requires rapid optimization of delivery when localization issues arise. The essence of internationalization is efficiency and quality. Efficiency is the efficiency of horizontal support localization, and quality is the quality of implementation localization. How has internationalization evolved over time? Manpower stage: In the early stage, the FORM of IT products was not complex and there was less overseas demand. In internationalization, the r&d staff often maintained localized resources by modifying the code. Tool stage: As globalization continues to advance and product forms become more and more complex with IT development, almost all products need to be internationalized. In order to improve efficiency, r&d will use scripts to process localized resources in batches, and agree on the working process with products and external translation. Platform stage: In a company with a large business scale and many products need to be internationalized, an international platform in line with the company’s business should be designed and developed to be responsible for the production and maintenance of international resources and the working process of products, external translation and testing, so as to unify the internationalization capability with the platform.

Ii. International technology needs

The core of internationalization framework is the processing of internationalization resources, including: writing, collecting, storing, and maintaining. Improve the efficiency of these activities through frameworks.

1. Write international resources

Two questions are addressed here: How to identify? How to modularize?

The signage is the basic requirement for processing, and modularity is to be able to classify the signage, provide business significance, and provide the carrier for batch processing.

We give each resource a separate ID for identification, then how to design the ID?

Shenze’s early solution was to mark them with notes, such as “test.” The ID at this point is not specified by the display, but indicated by a specific writing format. After the code scanning tool, to achieve the batch collection and batch write files. This is a set of feasible technical implementation, but the efficiency is not good, any change needs to modify the code for release, copywriting logo is not modular, it is not easy to manage.

The technical community provides international tools for mainstream UI libraries: Vue-IL18N, React-Intl. They identify resources with declarative ids, such as “intl(‘ test ‘)”, and collect and summarize resources with code scanning tools. These solutions are very practical, but there are still some problems that cannot be solved: The English ID is not intuitive, for the front end, the Chinese copy in the view is helpful to quickly understand the code structure; Modularity is not provided directly.

The two above represent two types of writing: structural ID and declarative ID. It is obvious that declarative ID is better. On this basis, also need to solve: copywriting intuitive, modular issues. Since Chinese is more intuitive, can you use Chinese directly? Better not, Chinese will have the problem of multiple translation of one word. Can be identified with declarative short character ID+ Chinese comment, compatible with the advantages of declarative ID and structural. The annotated parts can be updated to the latest Chinese language in real time through scripts.Modularity requires additional support, and having a module in the ID is one way to do it, but it is error prone to maintenance and difficult to troubleshoot. Modules can be added later from the script collection level through configuration files

2. Collect international resources

Once written in code, the flow of international resource information cannot only exist in the form of scattered code, but needs another flexible carrier. So resources need to be pulled out of the code to get context information. How do you collect resources? Manual maintenance is definitely not good, the volume is large, low efficiency, need to collect through some tool scripts, through the addition of code scanning tools to collect copywriting from the code. A good idea is to collect dependencies through the build process, which iterates through all valid code, using AST processing capabilities like Babel to get the context of the resource identity. In addition, you can also write their own parser to achieve, as simple as regular.

3. Internationalized storage of resources

After we collect resources, when the script runs, the resource information exists in the form of memory, memory output, can be in the form of a file. If files are used as the carrier, information can be transferred between research and development, testing and translation, but there will be transmission efficiency and operation cost. The files need to be forwarded through chat tools and exist in chat records of chat tools. The contents of the files need to be written back into the code to take effect. These are costs, and reducing costs leads to efficiency. A fixed pivot point is a much more efficient thing to do than a file. If the pivot point is to be used cheaply, then a Web project with an internationalized resource maintenance function is required. Resources go from the code to the resource maintenance service, and resources are injected from the maintenance service into the code runtime. The interaction is done through fixed APIS.

4. International resource maintenance

The maintenance is based on storage. After the resource service is used to store international resources, the maintenance efficiency is improved. The maintenance location is fixed, which is more optimal than that of files. The maintenance process includes: adding a language, batch translation, single point translation, change copy, etc. Among them, the translation of resources is the focus, and improving the translation efficiency of resources can further improve the internationalization efficiency. The translation efficiency of the resources depends on the ability of the translator, but we can also provide some additional information to assist translation, such as: machine translation, professional lexicon, translation memory, cross translation, translation confirmation, etc.

Third, internationalization technology model

According to the decomposition content in the previous chapter, the technical model of internationalization can be given directly.

1. The runtime

For the front end, the runtime is a front-end module that exports capabilities that are summed up in two categories: identifying resources and completing language switching.

2. Identify the resource

Identify the resources in the code by internationalizing the API exported by the runtime module. The API includes single identifiers and batch identifiers to support the writing of template strings, which can be dynamically generated at run time.

3. Convert resources

The prerequisite for resource transformation is to have resources, so you need to have an API for resource injection. Through this API, you can complete the injection of international resources, which can come from a network request. Once you have resources, you need to have some conversion capabilities, including basic string conversion, unit conversion, time conversion, color conversion, etc. When making the transformation, you need to know the target language. The above memory can be done through a unified “setup configuration” API.

4. Translate the context

The front end can be rendered for resource identification, which provides a key capability for internationalization: The ability to complete the internationalization modification on the product interface is a must for internationalization verification. The actual product function interface can provide complete context, which is not necessary for batch translation, but is very important for translation proofreading and can help improve translation quality.So how does that work?

Essentially, you write a component for the resource identifier, and you do the extension. The runtime transformation process input is the resource identifier, and the output is a string, but for the front end, you can extend the output to a front-end component, and you can perform more capabilities within the component, such as interacting with the resource server.Behind internationalization is configurationization, which can be generalized to local customization of the front-end interface after adding certain constraints.

5. Script toolset

The capabilities of scripting tools are to associate code and internationalize resource services. One operation path is: resource collection, modularization, upload to copywriting service. Another resource path is, local debug, read translation from resource server, write file to local, local dependency.Scripting tools can exist in the form of cli or IDE plugins.

6. Internationalize resource services

The International Resource Service is a single platform that acts as a fixed operations center for various roles.

The functional modules of the platform include: CRUD of resources, resource query (module, version), machine translation, professional lexis, translation memory, etc.

The underlying layer also provides the corresponding httpAPI to call to the third party.

Iii. Realization of internationalization technology model

1. Shence international technology panorama

As shown in the picture above, Shence developed several functional modules:

Intl Runtime: Used for resource identification, resource conversion, rendering extension.

Vscode plug-in: it is used to integrate internationalization scripts, complete resource collection, resource modularization, resource upload, local translation synchronization, etc.

Online services: complete resource management, machine translation, professional lexicon capabilities, and also have the ability to output resource packages by module. Micro front-end framework: call intL Runtime, load resources, target language, etc. Also responsible for external international resource pack load, achieve no release update internationalization. Because it is a private deployment, Shenze does not deploy its services to the extranet.

2. Deploy resource services as a SaaS service

For Web products that can access the extranet, you can deploy your own resource services to the extranet and make the resource acquisition into CDN for your own products to access, as shown in the figure below:For APP enablements, the same goes for CDN, but the local cache of the APP can reduce CDN requests.