S I T E S P O L I G L O T A S

N A W E B M O D E R N A

Guilherme OderdengeDESENVOLVEDOR FRONT-END NA CHUTEhttp://github.com/chiefgui/

Por que o seu site ou app deve ser multi-idiomático?

language label string

pt_br hello_world Olá, mundo!

en_us hello_world Hello, world!

TABELA “CONTENTS”

SELECT `label`, `string` FROM `contents`WHERE `language` = $userLanguage AND `label` = $label;

<h1><?php echo $content[‘hello_world’]; ?></h1>

<header><h1>Hello, world!</h1>

</header>

h1 {color: yellow;

}

<header><h1>Hello, world!</h1>

</header>

<div><h1>Why so serious?</h1>

</div>

header h1 {color: yellow;

}

div h1 {color: cyan;

}

A realidade é que nós contextualizamos as coisas…

<header id=“main”><h1 class=“header-title”>Hello, world!</h1>

</header>

<div class=“content”><h1 class=“content-title”>Why so serious?</h1>

</div>

.header-title {color: yellow;

}

.content-title {color: cyan;

}

$.ajax({url: ‘/endpoint/’,dataType: ‘JSON’,success: function (response) {

}});

A “não-contextualização” atinge também o JavaScript:

$(‘h1’).html(response.data.title);$(‘.header-title’).html(response.data.title);

Mas o que isso tem a ver com multi-idiomas?Em 2015, tudo.

DESIGN ATÔMICO. COMPONENTIZAÇÃO. MODULARIZAÇÃO. DESACOPLAMENTO.

MANUTENABILIDADE. ESCALABILIDADE. INDEPENDÊNCIA.

language label string

pt_br hello_world Olá, mundo!

en_us hello_world Hello, world!

Lembram da tabela “CONTENTS”?…

Tão anos 2000, não acham?

LANGUAGE TITLE SUBTITLE CHEERS

pt_br Olá, mundo! Por que tão sério? Saúde!

en_us Hello, world! Why so serious? Cheers!

Tabela “HomeTranslations”

Tabela “ContactTranslations”Tabela “DashboardTranslations”

Tabela “CartTranslations”

http://whysoserious.com/

HomeTranslations.sql

JSON

{“title”: “Hello, world!”,“subtitle”: “Why so serious?”

}

Para o inglês:

{“title”: “Olá, mundo!”,“subtitle”: “Por que tão sério?”

}

Para o português:

Como solicitar o idioma correto?Como renderizar a palavra correta, no lugar correto?

Como solicitar o idioma correto?

Linguagem de preferência

var DEFAULT_VALUE = ‘en’;

var PREFERRED_LANGUAGE = navigator.language || navigator.userLanguage|| navigator.browserLanguage || navigator.systemLanguage|| DEFAULT_VALUE;

Linguagem pré-definida http://whysoserious.com/en/Linguagem por geolocalização

Como solicitar o idioma correto?

$.ajax({url: ‘/’,data: { language: PREFERRED_LANGUAGE },dataType: ‘JSON’,success: function (response) {}

});

var DEFAULT_VALUE = ‘en’;

var PREFERRED_LANGUAGE = navigator.language || navigator.userLanguage|| navigator.browserLanguage || navigator.systemLanguage|| DEFAULT_VALUE;

Ninguém conhece o seu usuário melhor que o seu browser.Lembre-se:

Como solicitar o idioma correto?Como renderizar a palavra correta, no lugar correto?

Are you watching closely?

$.ajax({url: ‘/’,data: { },dataType: ‘JSON’,success: function (response) {

}});

$(‘ ’).html( );response.data.title===

“Hello, world!” ou

“Olá, mundo!”

.header-title

referência

language: PREFERRED_LANGUAGE

‘en’/‘en-us’ ou ‘pt’/‘pt-br’

$(‘.header-title’).html(response.data.title);$(‘.content-title’).html(response.data.subtitle);

Afinal, e a manutenabilidade?

Don’t Repeat Yourself

Desacoplamento de responsabilidades

Modularização

Baixa curva de aprendizado

Don’t repeat yourself? WHAT?

new HomeView ({ model: HomeTranslation });

var data = {title: 'Hello, world!',subtitle: 'Why so serious?'

};

var HomeTranslation = new Backbone.Model(data);

var HomeView = Backbone.View.extend({el: $('#home'),template: _.template($('#home-template').html()),initialize: function () {this.render();

},render: function () {var template = this.template({ t: homeTranslation });this.$el.html(template);

}});

<div id="home"><script type="text/template" id="home-template"><header id="main"><h1 class="header-title"><%= t.get('title') %></h1>

</header>

<div class="content"><h1 class="content-title"><%= t.get('subtitle') %></h1>

</div></script>

</div>

http://jsfiddle.net/pwuq9bn9/

E as variáveis?{

“welcome”: “Welcome, {username}!”}

t.get(‘welcome’).replace(‘{username}’, );user.get(‘name’)

E a pluralização?

{“users_label”: “user”,“users_count”: “{count} {word} online”

}

var usersLabel = > 1 ? t.get(‘users_label’) + ’s’ : t.get(‘users_label’);

users.lengtht.get(‘users_count’).replace(‘{count}’, );.replace(‘{word}’, usersLabel);

users.length

E a performance de se utilizar o DOM como referência?

polyglot.js, da Airbnb

pluralize, de Blake Embrey

linguistic.js, por mim

{“last_thing”: “Questions?”

}

{“last_thing”: “Perguntas?”

}