ppt

View Github Repository Open presentation in a new window

apan1121

See all presentation from apan1121

ppt

0 0

ppt

On Github apan1121 / ppt

Language Manager
Project Demo
Report:Byron Chen
研鼎崧圖股份有限公司 GOYOURLIFE INC.
台北市114內湖區新湖三路189號6樓 6F., No.189, Xinhu 3rd Rd., Neihu Dist., Taipei City 114, Taiwan(R.O.C) Tel +886-2-8792-1567 Fax +886-2-8792-1167
Learning
  • Yii Framework
  • Backbone
  • RequireJS
  • Practice

Before learning...

M V C

M V C
  • 由 Trygve Reenskaug 提出
  • Xerox PARC - Smalltalk (1978)
  • 易於維護、擴充、重複利用
  • 概念適用於各種平台的中、大型專案
“MVC was conceived as a general solution to the problem of users controlling a large and complex data set.”
M V C - Flow
User Control Model View DB DB

M V C 超棒的...

PHP的開發者也來MVC...

2004 年 PHP MVC Framework 大量出現...

2004 年...????

PHP Intro
  • 由 Rasmus Lerdorf 在 1995 年開發的 Personal Home Page
  • 用 C 語言開發的 CGI 取代 Perl 的 Scripting Language
  • 從 C、Perl、Java、C++、Python 得到啟發
  • 1997 年改寫成 PHP 3，PHP: Hypertext Preprocessor
  • PHP 3 加入 Object ≒ value types
  • 2000 年改寫剖析器（ Zend 引擎 ），成為 PHP 4
  • 2004 年 PHP 5 : New Object Model -> 物件導向編程語言 
<?php
    print_r("Hello World");
?>
#!/usr/bin/env perl
print "Hello, world!\n";
“I don’t know how to stop it, there was never any intent to write a programming language ... I have absolutely no idea how to write a programming language, I just kept adding the next logical step on the way.”
PHP MVC
  • Laravel ( 2011 ~ )
  • Phalcon ( 2012 ~ )
  • Symfony ( 2005 ~ )
  • Yii ( 2008 ~ )
  • CodeIgniter ( 2006 ~ )
  • CakePHP ( 2005 ~ )
  • ...
2013 M V C
Yii
  • Control : 使用者操控頁面
  • Model : 連接 DB 與簡化 SQL
  • View : 樣板引擎
  • Library : 方便且多樣的資源庫
Yii - Flow
User
index.php
Control 1 Control 2 Control 2 Control 3 Control 3
Model 1 Model 1 Model 2 Model 2 Model 3 Model 3 Model 4 Model 4
View 1 View 1 View 2 View 2 View 3 View 3 View 4 View 4
Control 1 Control 1 Control 1 Control 1 Control 1 Control 1

M V C 讓 Server 端開發 變得簡單又方便

什麼？？ Client 端也想用？？

Client 端早就不像當年秀秀畫面這麼簡單

A J A X
  • Asynchronous JavaScript and XML
  • 1996 年 Microsoft Internet Explorer 提出 iFrame 標籤
  • 1999 年 Mozilla、Safari、Opera 開始使用 XMLHttpRequest
  • 2004 年 Google 大量使用標準化的XMLHttpRequest在各服務中
  • 2005 年 Jesse James Garrett 對於這技術，提出 AJAX 名詞概念Javascript、Document Object Model、XML 的混合應用
  • 減少傳輸流量、增加單頁功能，網頁朝應用程式發展
“Ajax: A New Approach to Web Applications”
A J A X - Flow
Page 天氣：陰 ( 2015 - 01 - 10) 天氣：晴 ( 2015 - 01 - 11)
get Data (JS) XML
Set DOM (JS)
C?
M?
V?

A J A X 的流程似乎很像 MVC

A J A X - M V C
  • AngularJS ( 2009 ~ )
  • Ember.js ( 2011 ~ )
  • JavaScriptMVC ( 2008 ~ )
  • Backbone.js ( 2010 ~ )
  • ...
Backbone.JS - Intro
  • 開發人 Jeremy Ashkenas
  • 輕量級的JS Framework (6.5kb)
  • 基於 underscore.js
  • 耦合性低
Backbone.JS - 功能
  • Model ：定義資料
  • Collection ：資料表集合
  • View ：樣板引擎
  • Router ：錨點記錄
Backbone.JS - Flow
User
Main
Get Func
Data
Collect
Set DOM
Backbone App
Router
Main2
#Page/1
root
MVC?
MVC?
MVP
M V P
Model–View–Presenter

Client 端工作越來越重

載入套件越來越多... 管理套件越來越難... 網頁載入越來越慢...

Html原生的限制 困受般的同步循序載入

JS 原生載入問題
  • 從上到下 循序載入
  • 無法看出載入插件之間的相依性
  • 可能載入不需要用到的插件...
  • 浪費等待時間與 Client 端效能

由 JS 接管載入 JS ...

A M D
  • Asynchronous
    平行載入、管理插件關連性
  • Module
    模組化載入的套件、關注點分離降低複雜度
  • Definition
    定義與標準化結構
Require JS - Flow
Page
Require.JS
Config 
require.config({
    baseUrl: baseUrl+ "/js/",
    path:{
        'jquery' :'jquery-1.11.2.min',
    },

    shim: {
        'jquery-1.11.2.min':{
        　　　exports: '$'
        },
        'underscore':{
        　　　exports: '_'
        },
        'backbone': {
            deps: ['underscore'],
            exports: 'Backbone'
        }
    }
});
jQuery underscore backbone 
require.config({
    baseUrl: baseUrl+ "/js/",
    path:{
        'jquery' :'jquery-1.11.2.min',
    },

    shim: {
        'jquery-1.11.2.min':{
        　　　exports: '$'
        },
        'underscore':{
        　　　exports: '_'
        },
        'backbone': {
            deps: ['underscore'],
            exports: 'Backbone'
        }
    }
});

After Learning...

Do Something

語言檔管理平台
  • 不同平台的語言檔格式皆不相同
  • 統一單一平台編輯
  • 清楚方便的分類管理模式
  • 可輸出與輸入語言檔
國際化 與 在地化
  • Internationalization and Localization
  • i18N、L10N
  • 國際化：軟體可適用於任何地方
  • 在地化：讓軟體可更適合於特定地區使用
  • 讓 語言、文化、書寫習慣 與程式本身拖勾
語言檔 概念
Page
Menu
Selector en-US zh-TW ja-JP
strMainPage_Menu
Menu
選單
メニュー
Menu
選單
en-US
zh-TW
在工程師手上的 code 裡

語言檔掌握在工程師手上

什麼...又英文拼錯了？（工程師 被打斷）

什麼...上次日文貼錯了？（工程師 嘆氣）

不是 BUG 的 BUG 真的不該打斷珍貴的工程師

語言檔 管理
Page Selector en-US zh-TW ja-JP
strMainPage_Menu
Menu
選單
メニュー
Menu
選單
メニュー
Menu
選單
メニュー
en-US
zh-TW
Manager
Menu
選單
メニュー

語言檔就該交由更專業的管理 ( 工程師開心了～ )

分析需求

DB 分析
Platform
Classify
String
Content
Lang Member
Log
動作 需求
  • Lang : 新增 修改 刪除
  • Platform : 新增 修改 刪除
  • Classify : 新增 修改 刪除
  • String : 新增 修改 刪除
  • Member : 新增 修改 刪除
  • Generate : 匯入 匯出
Lang 動作
User add Update Lang
Platform 動作
User add Update Platform
Classify 動作
User add Update Classify
select
Platform
String 動作
User add Update String
select select
Platform Classify
Content
Lang
Member 動作
User add Update Member
select
Platform Lang
Generate 匯出動作
User select select
Platform Classify
select
Lang Export
Zip
Generate 匯入動作
User select Get
Platform Lang Pack
Import
解析語言檔 ： PO
    • SourceMessages.c
    • en_US
      • messages.po
      • messages.mo
    • zh_TW
      • messages.po
      • messages.mo
    • ....
解析語言檔 ： PO
  • 清除換行 保留關鍵訊息 replace("","\"\n\"");
  • 循行正規化檢查特定關鍵字串 msgid、msgstr
  • msgid為空的下一個msgstr中，使用正規劃找 Language: (?P[a-z]{2}[-_][a-zA-Z]{2})
  • 循行正規化檢查，將 msgctxt 當分類，將 msgid 當StringID，將 msgstr 當文字內容，三個變數滿足後存入資料庫 
textdomain( "gggolife" );
pgettext("gggolife", "Sign up");
pgettext("gggolife", "About");
pgettext("gggolife", "Privacy");
pgettext("gggolife", "Terms");
pgettext("gggolife", "Feedback");
pgettext("gggolife", "Copyright");
pgettext("gg