Tweet
Tweet

Slide 1

Slide 1 text

打造国际化产品 Strikingly 的 I18n 实践 龚凌晖, Strikingly Twitter: @danielglh Github: danielglh

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

• ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文

Slide 5

Slide 5 text

• ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文 • 2016年年4⽉月正式推出 • ⽤用户主要来⾃自中国⼤大陆 • 本⼟土化的产品特性 • 产品界⾯面和客户服务 • % 简体中⽂文 • 独⽴立于 Strikingly 的品牌 • 代码⾼高度重⽤用

Slide 6

Slide 6 text

i18n

Slide 7

Slide 7 text

i18n

Slide 8

Slide 8 text

-> internationalization i18n

Slide 9

Slide 9 text

国际化(I18n) 设计和实现软件，使之⽆无需通过修改代 码即可适应不不同语⾔言和地区的需要。

Slide 10

Slide 10 text

国际化 v.s. 本地化

Slide 11

Slide 11 text

内容提要 • 本地化的益处 • Strikingly 的 i18n 解决⽅方案 • 上线了了带来的挑战

Slide 12

Slide 12 text

为什什么需要本地化？

Slide 13

Slide 13 text

本地化的益处

Slide 14

Slide 14 text

本地化的益处 • 改善⽤用户体验

Slide 15

Slide 15 text

本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率

Slide 16

Slide 16 text

本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率

Slide 17

Slide 17 text

本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有

Slide 18

Slide 18 text

本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有

Slide 19

Slide 19 text

Strikingly的i18n 解决⽅方案

Slide 20

Slide 20 text

I18n in Strikingly Platform Workflow People Technology

Slide 21

Slide 21 text

I18n in Strikingly Technology

Slide 22

Slide 22 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Technology

Slide 23

Slide 23 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

Slide 24

Slide 24 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

Slide 25

Slide 25 text

Ruby I18n • Ruby i18n • Github repo: https://github.com/svenfuchs/i18n • Ruby Gem 提供 i18n ⽀支持的标准 • devise • doorkeeper • simple_form • Rails i18n • Rails i18n API: http://guides.rubyonrails.org/i18n.html • ⾃自Rails 2.2开始包含 Ruby i18n gem • Active Record • Active Support

Slide 26

Slide 26 text

I18n.translate I18n.t

Slide 27

Slide 27 text

I18n.t

Slide 28

Slide 28 text

I18n.t “plans.pro_yearly”

Slide 29

Slide 29 text

I18n.t “plans.pro_yearly”

Slide 30

Slide 30 text

I18n.localize I18n.l

Slide 31

Slide 31 text

I18n.l

Slide 32

Slide 32 text

I18n.l Date.today,format: :long

Slide 33

Slide 33 text

I18n.l Date.today,format: :long

Slide 34

Slide 34 text

I18n.l Date.today,format: :long “九⽉月 23, 2016”

Slide 35

Slide 35 text

I18n.l Date.today,format: :long “九⽉月 23, 2016”

Slide 36

Slide 36 text

I18n.l Date.today,format: :long “2016年年9⽉月23⽇日”

Slide 37

Slide 37 text

Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server

Slide 38

Slide 38 text

Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext I18n: Server

Slide 39

Slide 39 text

Gettext

Slide 40

Slide 40 text

Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持

Slide 41

Slide 41 text

Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现

Slide 42

Slide 42 text

Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现 • 各种主流语⾔言都有gettext的实现 • Ruby Gettext: https://github.com/mutoh/gettext • Ruby FastGettext: https://github.com/grosser/fast_gettext

Slide 43

Slide 43 text

_(“RubyConf China”)

Slide 44

Slide 44 text

_(“RubyConf China”)

Slide 45

Slide 45 text

gettext v.s. fast_gettext

Slide 46

Slide 46 text

gettext + fast_gettext

Slide 47

Slide 47 text

city = “Chengdu, China” _(city)

Slide 48

Slide 48 text

city = “Chengdu, China” _(city) city = “Chengdu, China” _(city) => “Chengdu, China”

Slide 49

Slide 49 text

city = N_(“Chengdu, China”) city => “Chengdu, China” _(city)

Slide 50

Slide 50 text

city = N_(“Chengdu, China”) city => “Chengdu, China” _(city) => “中国成都”

Slide 51

Slide 51 text

_(“Order”)

Slide 52

Slide 52 text

_(“Order”)

Slide 53

Slide 53 text

s_(“Ecommerce|Order”)

Slide 54

Slide 54 text

s_(“Ecommerce|Order”) “订单” 中⽂文

Slide 55

Slide 55 text

s_(“Ecommerce|Order”) “订单” 中⽂文 “Order” ⽇日语

Slide 56

Slide 56 text

I18n的⼀一般流程

Slide 57

Slide 57 text

I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本

Slide 58

Slide 58 text

I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本

Slide 59

Slide 59 text

I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典

Slide 60

Slide 60 text

I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典 • 程序运⾏行行时，根据词典将message id翻译为⽬目标语 ⾔言⽂文本

Slide 61

Slide 61 text

Ruby I18n v.s. Gettext Ruby I18n Gettext ID “errors.not_authorized” "Not authorized to complete the action." 提取 N/A ⾃自动提取 可读性 代码可读性⼀一般 代码可读性强 适⽤用场景 Rails组件，Ruby gem的i18n⽀支持 其他

Slide 62

Slide 62 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser

Slide 63

Slide 63 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser

Slide 64

Slide 64 text

为什什么 Javascript 代码⾥里里会⽤用到 Ruby i18n 的实现？

Slide 65

Slide 65 text

为什什么我们要对两代架构采⽤用 不不同的 i18n 实现？

Slide 66

Slide 66 text

I18n: Browser • I18n-js • https://github.com/fnando/i18n-js • 遵循 Ruby i18n 的规范 • 类似 Ruby i18n 的API • 可以导⼊入和重⽤用 Ruby/Rails 的词典⽂文件

Slide 67

Slide 67 text

I18n: Browser • Gettext (jsxgettext + Jed) • jsxgettext • https://github.com/zaach/jsxgettext • 从 js ⽂文件及各种 js 模板⽂文件中提取字符串串 • Jed • https://slexaxton.github.io/Jed/ • Gettext 的⼀一个 Javascript ⾼高效实现

Slide 68

Slide 68 text

服务器器端 浏览器器端 提取 gettext gem jsxgettext 翻译 fast_gettext gem Jed

Slide 69

Slide 69 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile

Slide 70

Slide 70 text

Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile

Slide 71

Slide 71 text

I18n in Strikingly Platform Workflow People Technology

Slide 72

Slide 72 text

I18n in Strikingly Platform

Slide 73

Slide 73 text

OneSky • 上传待翻译的词条 • 下载已翻译的词典 • 词条翻译管理理界⾯面 • 兼容不不同i18n标准 • 良好的API⽀支持 • 第三⽅方翻译⼈人员招募

Slide 74

Slide 74 text

I18n in Strikingly Platform Workflow People Technology

Slide 75

Slide 75 text

I18n in Strikingly People

Slide 76

Slide 76 text

I18n: People

Slide 77

Slide 77 text

I18n: People • 翻译⼈人员要求

Slide 78

Slide 78 text

I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语

Slide 79

Slide 79 text

I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解

Slide 80

Slide 80 text

I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解 • 了了解产品中需要翻译的特定部分

Slide 81

Slide 81 text

I18n: People

Slide 82

Slide 82 text

I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐

Slide 83

Slide 83 text

I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐 • ⾃自有翻译团队 • 客服团队兼任 • 从粉丝⽤用户中招募 • 客户服务＋翻译

Slide 84

Slide 84 text

I18n in Strikingly Platform Workflow People Technology

Slide 85

Slide 85 text

I18n in Strikingly Workflow

Slide 86

Slide 86 text

I18n: Workflow • 常⻅见场景 • 添加新产品特性 • 改进已有产品特性 • 添加新语⾔言⽀支持

Slide 87

Slide 87 text

添加新产品特性 开发 发布给英 语⽤用户 翻译成 中⽂文 发布给中 ⽂文⽤用户 。。。

Slide 88

Slide 88 text

改进已有产品特性 开发 翻译成所 有语⾔言 开放给所 有⽤用户

Slide 89

Slide 89 text

添加新语⾔言⽀支持 招募 客服 培训 翻译 发布 新语⾔言

Slide 90

Slide 90 text

I18n in Strikingly Platform Workflow People Technology

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

“上线了了”带来的挑战

Slide 94

Slide 94 text

“上线了了”带来的挑战 • 99%的代码重⽤用 • 全新的本地化品牌 • 上线了了 ≠ Strikingly简体中⽂文版 • 品牌名称置换：Strikingly -> 上线了了 • 不不同⻛风格的⽤用词：“发布” v.s. “上线” • 上线了了未来可能⽀支持英语和其他外语

Slide 95

Slide 95 text

解决⽅方案 • MultiI18n • 分离 Strikingly 和上线了了的 i18n 词典 • 在翻译平台上创建上线了了的 i18n 项⽬目 • 修改 rake task 分别处理理两个产品的数据上传／下载 • 系统启动时，根据环境变量量中设置的产品代号动态加 载对应的配置⽂文件和词典

Slide 96

Slide 96 text

总结 • I18n是⼀一项系统性的⼯工程 • 软件设计 • I18n ⼯工具链（⾃自⼰己开发，第三⽅方提供） • 产品开发和发布流程 • 翻译团队招募和培训

Slide 97

Slide 97 text

联系我们！

Slide 98

Slide 98 text

联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业

Slide 99

Slide 99 text

联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业 • [上海海] [成都] 我们在招聘！ • Email: jobs@strikingly.com • 如应聘成都职位，请在邮件标题注明