javascript-localization.pug

extends pug/layout.pug

block head
  title JavaScript localization: A step-by-step introductory guide
  link(rel="canonical", href="/javascript-localization.html")

block headDescription
  meta(name='description', content='JavaScript Localization: In this article we provide a step-by-step guide to internationalize (i18n) your javascript applications using different approaches.')
  meta(property='og:title', content='JavaScript localization: A step-by-step introductory guide')
  meta(property='og:description', content='JavaScript Localization: In this article we provide a step-by-step guide to internationalize (i18n) your javascript applications using different approaches.')
  meta(name='twitter:title', content='JavaScript localization: A step-by-step introductory guide')
  meta(name='twitter:description', content='JavaScript Localization: In this article we provide a step-by-step guide to internationalize (i18n) your javascript applications using different approaches.')


block content
  section.section-white#introduction(style="padding-bottom:0")
    .container
      .row
        .col-md-6
          .section-heading
            h1
              | JavaScript localization:
              br
              | A step-by-step introductory guide
            p The process of converting your JavaScript code to multiple languages during the internationalization of your project. I18N means to design software in the way it can handle multiple locations, languages or regions. 

            p There are a lot of possibilities out there, but we have definitely the most advanced platform for any use-case of i18n.
            br
            br
            p This step-by-step-guide helps you to start your software-localization project based on a JavaScript environment. 
            br
            br
            h3 Table of contents
            ul.nav 
              li.nav-item
                a.nav-link(href='#start') Prepare your app
              li.nav-item
                a.nav-link(href='#library') Choose your framework
              li.nav-item
                a.nav-link(href='#bestpractices') Best practices
              li.nav-item
                a.nav-link(href='#internationalize') Checklist multiple languages
              li.nav-item
                a.nav-link(href='#automate') Automate translation work
              li.nav-item
                a.nav-link(href='#faq') Frequently asked questions
              //- li.nav-item
              //-   a.nav-link(href='#conclusion') Conclusion
        .col-md-6
          img.img-responsive(src='img/localization/javascript-localization.png', alt='javascript localization', loading='lazy')      

  
  section.section-white.gettingstarted#start(style="padding:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Prepare your app
            p
              | locize can be used with any i18n framework. Even with no i18n framework at all, for example with the locizify script.
            h3 Example by i18next
            p
              | Below we will continue with i18next as i18n framework.
              | If you're curious to know why we suggest i18next, have a look at 
              a(href='/i18next.html') this page
              | .
            br
            p
              | To have multiple languages on your website or application with 
              i18next
              | , follow the below steps. First install the dependencies, use the following <a href="https://www.npmjs.com/package/i18next" title="npm package">npm package</a> or use a script tag load umd, esm or cjs from unkpg or cdnjs.com CDN.
            br
            br
            pre
              code
                | # npm
                | $ npm install i18next --save
                | 
                | # yarn
                | $ yarn add i18next
            br
            br
            h3 Localization in JavaScript example
            p
              | These lines of code give you a brief overview about localization in JavaScript can work and what functions are available in 18next
              | . If you want to use the library for JavaScript production please refer to the detailed instructions of each framework in our resources. There is a much easier integration than with innerHTML.

              br
              br
            
              pre
                code
                  | import i18next from 'i18next';
                  |
                  | i18next.init({
                  |   lng: 'en',
                  |   debug: true,
                  |   resources: {
                  |     en: {
                  |       translation: {
                  |         "key": "hello world"
                  |       }
                  |     }
                  |   }
                  | }, (err, t) => {
                  |   // initialized and ready to go!
                  |   document.getElementById('output').innerHTML = i18next.t('key');
                  | });

              br
              p
                | Check out the 
                a(href='https://www.i18next.com/overview/getting-started', target='_blank') i18n 
                |  getting started guide on the i18next page.

            h3 Do you already know i18next?
            h4
              | Then just use 
              a(href="https://github.com/locize/i18next-locize-backend", target="_blank") i18next-locize-backend
              |  as i18next backend.

            figure
              pre
                code
                  | import i18next from 'i18next';
                  | import Backend from 'i18next-locize-backend';
                  | 
                  | i18next
                  |   .use(Backend)
                  |   .init({
                  |     // ...other options
                  |     backend: {
                  |       projectId: '[PROJECT_ID]',
                  |       apiKey: '[API_KEY]',
                  |       referenceLng: '[LNG]'
                  |     }
                  |   });

  section.section-tertiary.library#library.text-center
    .container
      .row
        .col-lg-12.text-center
          .section-heading(style="margin-bottom: 20px;")
            h2 Choose your framework
            p.head(style="margin-bottom: 20px;")
              | For famous JavaScript frameworks locize is very easy to integrate through the 
              <a href="https://www.i18next.com/" title="javascript-localization-library">JavaScript localization library</a> i18next.

            .embed-responsive.embed-responsive-16by9.yt-video
              div(data-service="youtube" data-autoscale data-id="SA_9i4TtxLQ")
            hr
      .row
        .col-md-12
          .container-fluid
            .row
              .col-md-6
                img.img-responsive(src='img/localization/react.png', alt='javascript localization react', style='max-width: 250px', loading='lazy')
                br
                br
                p.text-left Read the detailed instructions for using <a href="https://react.i18next.com/" title="i18next react">react-i18next</a> for your project.
                br
                br
                p.text-left Basic procedure of using React:
                br
                ul.nav.text-left
                  li.nav-item 1. Installation of i18next package needed
                  li.nav-item 2. Add react-i18next to expand the functionality
                  li.nav-item 3. Add a new file i18n.js inside same directory as index.js
                  li.nav-item 4. Translate the content with "hook", "HOC" or "render prop"
                br
                p.text-left
                  | For more detailed instructions on how to properly internationalize a React app, check out 
                  a(href="/blog/react-i18next/") this tutorial blog post about React localization
                  | .
                
              .col-md-6
                img.img-responsive(src='img/localization/angular.png', alt='angular', style='max-width: 250px', loading='lazy')
                br
                br
                p.text-left Read the detailed instructions for using <a href="https://github.com/Romanchuk/angular-i18next" title="i18next angular">angular-i18next</a> for your project.
                br
                br
                p.text-left Basic procedure of using Angular:
                br
                ul.nav.text-left
                  li.nav-item 1. Installation of i18next and angular-i18next package needed
                  li.nav-item 2. Import I18NextModule to AppModule
                  li.nav-item
                    | 3. Import I18NextModule.forRoot() to App Module
                    br
                    | and setup provider with "init"
                  li.nav-item 4. Use i18next pipe to translate key
                br
                p.text-left
                  | To unleash the full power of 
                  a(href="https://github.com/Romanchuk/angular-i18next", target="_blank") angular-i18next
                  |  check out 
                  a(href="/blog/angular-i18next/") this tutorial blog post about Angular localization
                  | .

            .row(style="margin-top: 80px;")
              .col-md-6
                img.img-responsive(src='img/localization/vue.png', alt='vue', style='max-width: 250px', loading='lazy')
                br
                br
                p.text-left Read the detailed instructions for using <a href="https://i18next.github.io/i18next-vue/" title="i18next vue">i18next-vue</a> for your project.
                br
                br
                p.text-left Basic procedure of using Vue:
                br
                ul.nav.text-left
                  li.nav-item 1. Installation of <code style="font-size: 75%;">i18next</code> and <code style="font-size: 75%;">i18next-vue</code>
                  li.nav-item 2. Initialize i18next
                  li.nav-item 3. Initial setup with <code style="font-size: 75%;">app.use(I18NextVue, {i18next})</code>
                  li.nav-item 4. Set up a view
                br
                p.text-left
                  | For more detailed instructions on how to properly internationalize a Vue app, check out 
                  a(href="/blog/i18next-vue/") this tutorial blog post about Vue localization
                  | .
                p.text-left
                  | As an alternative to 
                  a(href="https://github.com/i18next/i18next-vue", target="_blank") i18next-vue
                  | , you can try 
                  a(href="https://kazupon.github.io/vue-i18n/", target="_blank") vue-i18n
                  |  like described in 
                  a(href="/blog/give-vue-i18n-more-superpowers/") this tutorial blog post
                  | .

              .col-md-6
                img.img-responsive(src='img/localization/supported-frameworks.png', alt='supported frameworks', style='max-height: 250px', loading='lazy')
                br
                br
                p.text-left
                  | There are more 
                  a(href="https://www.i18next.com/overview/supported-frameworks", title="i18next vue") supported frameworks
                  |  like .Net, 
                  a(href="/blog/next-i18next/", target="_blank") Next.js
                  | , Svelte, Elm and more. Check them out now.
                br
                p.text-left
                  | i18next can also be used on server side...
                  br
                  | In  
                  a(href="/blog/how-does-server-side-internationalization-look-like/", target="_blank") this tutorial blog post
                  |  you can check out how this works.
                p.text-left
                  | On 
                  a(href="https://docs-old.locize.com/integration/instrumenting-your-code#other-options") this page
                  |  you'll find also non i18next aproaches.

  section.section-white.bestpractices#bestpractices(style="padding-bottom:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Checklist best practices
            p These questions will help you to find the best setup to internationalize with JavaScript.
            div(style="background:#b7cbd4;padding:3rem;margin:2rem 0")
              ul(style="list-style-type:none;color:black;margin:1rem 0;")
                li(style="margin:1rem 0;") <i style="font-size:3rem;" class="far fa-square"></i> For which javascript-environment are you looking for an i18n solution?
                li(style="margin:1rem 0;") <i style="font-size:3rem;" class="far fa-square"></i> Do you need a language detector for your environment?
                li(style="margin:1rem 0;") <i style="font-size:3rem;" class="far fa-square"></i> Do you want to bundle the translations with your app?
                li(style="margin:1rem 0;") <i style="font-size:3rem;" class="far fa-square"></i> Do you want to load the translations separate from your app via http?
                li(style="margin:1rem 0;") <i style="font-size:3rem;" class="far fa-square"></i> Do you want to manage your translations with an awesome translation management system?
            p 
                | There is also a more detailed
                a(href="https://www.i18next.com/overview/supported-frameworks", title="i18next vue")  guide for first setup help
                |  at i18next directly, which covers also more than just javascript.



  section.section-white.internationalize#internationalize(style="padding:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Step-by-step code implementation (the manual way)
            p This process is based on how to implement multiple languages for a sample React app.
            p
              | For more detailed instructions on how to properly internationalize your project, shown with the help of a React app example, check out this tutorial blog post: 
              a(href="/blog/react-i18next/", target="_blank") "How to properly internationalize a React application using i18next"
            br
            ul.text-left
              li Install i18next and appropriate framework package
              li Install the browser language-detector
              li Prepare the i18next configuration
              li Translate the content with "hook", "HOC" or "render prop"
              li Create a language switcher
              li Add translations for other languages
              li Use pluralization and interpolation
              li Use packages for date and time formatting with interpolation
              li Use the context function for gender specific translations
              li Separate translations from code, for web applications use i18next-locize-backend
            
            br
            br
            p But there is more.... 
            p Take a minute and read about <b>automating</b> this process with a <b>smart translation</b> management system below. For extensive projects using just a library may too inefficient. 


  section.section-white.automate#automate(style="padding:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Automate translation work (the smart way)
            p Congratulations you have decided to read about a robotic way to switch the language for any type of software. So this is for you. It's awesome which functionalities you can unleash for a small amount of money. Watch our videos and admire what you get from only five USD per month.

            br
            br
            .div(style="display:flex;flex-wrap:wrap;align-items: stretch;")
              .div(style="width:500px;margin: 2rem;")
                .embed-responsive.embed-responsive-16by9.yt-video
                  div(data-service="youtube" data-autoscale data-id="osScyaGMVqo")

              .div(style="width:500px;padding: 2rem;")
                p Use the full power of the i18next library together with locize, a <a href="/" title="localization management platform">localization management platform</a> by the founders of i18next, which can automate the translation workflow in the locize app.

              .div(style="width:500px;margin: 2rem;")
                .embed-responsive.embed-responsive-16by9.yt-video
                  div(data-service="youtube" data-autoscale data-id="VfxBpSXarlU")
              
              .div(style="width:500px;padding: 2rem;")
                p
                  | The machine /&nbsp;
                  a(href='/ai.html') generative AI
                  | &nbsp;translation feature enables every new content to get automatically translated into all other defined target languages (like Google Translate, Deepl, Open AI, Mistral AI).
                div(style="border-left: 5px solid red")
                  p(style="margin: 1rem;") <a href="https://www.locize.app/register" title="Register for free">Register for free</a> and unlock everything for a 14 days trial period.


  section.section-white.faq#faq(style="padding:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Frequently asked questions

            h3 What is JavaScript localization?
            p Read the <a href="#introduction" title="introduction">introduction</a> to this page about internationalization (also known as i18n) of JavaScript software (client or server side). Localization (also known as l10n) is more about the content. The translator, developer or project manager prepares texts, graphics, sounds etc. so you can target a specific language or region.

            h3 How to make my JavaScript app multilingual (open source)?
            p Use an i18n framework (like i18next) of your choice and instrument your code respectively. Navigate to the <a href="#internationalize" title="detailed checklist">detailed checklist</a> to know how to make a JavaScript application multilingual.

            h3 What is i18n (internationalization)?
            p Software products are primarily prepared for your main-market and -language. During the internationalization of a software product new market targets will be added. Adjusting your software to handle this new markets with languages, locales and regions is called i18n process. Learn more about internationalization and what is used for in our complete guide with the title <a href="/blog/what-is-i18n/" title="what is i18n">"what is i18n"</a>.

            h3 How can I have multiple languages on my website?
            p Decide which JavaScript framework to use. Then install the i18next npm-package and next add the "i18next.init" code to your application. Follow the <a href="#start" title="javascript example">JavaScript example</a> to take your first steps with i18next. Or just read our article about <a href="/blog/website-localization/" title="website localiaztion">website localization</a>. 


  section.section-white.conclusion#conclusion(style="padding:0")
    .container
      .row
        .col-lg-12
          .section-heading
            h2 Now it's your turn
            p We hope this step-by-step-guide was helpful... <b>Best for javascript localization</b> is to start with the <a href="#bestpractices" title="best practices questions">best practices questions</a> we provided above. There are several methods to choose from in order to successfully localize your project with JavaScript: First of all, if you only need to switch the language for an application, it might be easier to use a javascript translation library like i18next or our locizify script. If you have a huge project with various components to be internationalized and you want to keep up with time, then it might be a good opportunity to use a complete translation management solution like locize. 
            br
            div(style="border-left: 5px solid red")
                    p(style="margin: 1rem;") Since we're offering you a free 14-day trial for locize, there might be a good chance to test all included features anyway. <a href="https://www.locize.app/register" title="Register now for the free">Register now for the free</a> trial period and start your best experience with localizing an application. 
                    p(style="margin: 1rem;") Or if you can't make the decision to register right away, visit our <a href="/website-localization-services.html" title="website localization service">website localization service</a> page for more information on how to manage website-localization.
            br
            p If you decide that you do not need a translation-management, you should follow the guides and video instructions for the specified framework (react, angular or vue).
            br
            p In any case <b>the javascript-library to choose</b> is "i18next" because of the following properties: 
            br
            ul 
              li Richness (splitting translations to multiple files, string interpolation, plugins for <b>detect language</b>)
              li Maturity (for any use-case) 
              li Extensibility (for all modern javascript framework, jquery, laravel and more). 

            br

            p Now we like to invite you to share that to any developer, project manager or business this would help.
            
            p Recommend our step-by-step-guide on 
              a(href='https://www.facebook.com/sharer/sharer.php?u=https://locize.com/javascript-localization.html', target='_blank')
                i.fa-brands.fa-facebook(style="font-size:2.5rem")

              a(href='https://x.com/intent/tweet?url=https://locize.com/javascript-localization.html', target='_blank')
                i.fa-brands.fa-x-twitter(style="font-size:2.5rem")

  script.
    window.enableCookiesHook = function () {
      $('.yt-video').show();
      $('.watch-yt-video-btn').hide();
    };
    window.disableCookiesHook = function () {
      $('.yt-video').hide();
      $('.watch-yt-video-btn').show();
    };

  script(type="application/ld+json").
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://locize.com/javascript-localization.html"
      },
      "headline": "JavaScript localization: A step-by-step introductory guide",
      "image": "https://locize.com/img/localization/javascript-localization.png",  
      "author": {
        "@type": "Person",
        "name": "Sandro Huber"
      },  
      "publisher": {
        "@type": "Organization",
        "name": "inweso GmbH",
        "logo": {
          "@type": "ImageObject",
          "url": "https://locize.com/img/locize_white.svg"
        }
      },
      "datePublished": "2021-05-14",
      "dateModified": "2021-05-19"
    }

  script(type="application/ld+json").
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "What is JavaScript localization?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Read the introduction to this page about internationalization (also known as i18n) of JavaScript software (client or server side). Localization (also known as l10n) is more about the content. The translator, developer or project manager prepares texts, graphics, sounds etc. so you can target a specific language or region."
        }
      },{
        "@type": "Question",
        "name": "How to make my JavaScript app multilingual (open source)?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Use an i18n framework (like i18next) of your choice and instrument your code respectively. Navigate to the detailed checklist to know how to make a JavaScript application multilingual."
        }
      },{
        "@type": "Question",
        "name": "What is i18n (internationalization)?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Software products are primarily prepared for your main-market and -language. During the internationalization of a software product new market targets will be added. Adjusting your software to handle this new markets with languages, locales and regions is called i18n process. Learn more about internationalization and what is used for in our complete guide with the title 'what is i18n'."
        }
      },{
        "@type": "Question",
        "name": "How can I have multiple languages on my website?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Decide which JavaScript framework to use. Then install the i18next npm-package and next add the 'i18next.init' code to your application. Follow the JavaScript example to take your first steps with i18next. Or just read our article about website localization."
        }
      }]
    }