在 2010 COSCUP 主講「建立前端開發團隊」

此篇文章最近更新時間為2010-08-11 13:06:46 目前共有11篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

日期:8/14
時間:16:00 - 16:30
主題:Frontend Development Enviornment
地址:中央研究院人文社會科學館,國際會議廳(台北市南港區研究院路二段128號)

P8140818
(from othree: http://www.flickr.com/photos/othree/4890487927/)

投影片:
檢討
跟在北京 WebRebuild 相比、覺得在 COSCUP 這一次講的不是很好。一方面是自己沒做好時間控管(原本 Slide 是講一小時)、以致後面越講越趕;另一方面可能跟聽眾也有關係,畢竟 WebRebuild 來的聽眾全部都是對前端開發有興趣的,COSCUP 聽眾族群比較多。但無論如何,講者自己本身應該去對觀眾與時間做好調整才是。

講題概念
大概講一下推廣此主題的原因:由於目前像 jQuery 或 YUI 這類 JavaScript 函式庫被應用地越來越廣泛,但是大部分開發者對於 HTML/CSS/JavaScript 仍然缺乏結構化的寫法、較不重視前端程式的維護性。與後端程式常會有的 MVC 設計架構相比,實在有差距。

鬆散的前端開發模式如果只是在單人開發的小專案上,或許沒有太大的影響。但是對於整個團隊來說,就會是相當痛苦的一件事情:像是... 你的 JavaScript 究竟放在哪邊?為什麼 HTML 要這樣切?你我在同個專案 Function 及變數的命名方式不一樣!在忙碌加上得過且過的心態下,前端的程式就會越來越來維護、造成所謂的疊床架屋...
而在這主題所建議的方式,是以模組化、自動化來克服上述的問題(WebRebuild 時則加上 Fiddler 工具的使用)。

模組化的部份有:
1. 模組的定義(不考慮重複使用性、只考慮其意義,將頁面上的所有區塊切開)
2. 一個模組有相伴著自己的 HTML, CSS, JavaScript 三個檔案。
3. 解決檔案太多造成的問題。(透過工具及設定解決)
4. 建立 JavaScript Platform
4. 解決 JavaScript 跨模組溝通的問題。
5. 用模組的概念設計多國語系。

自動化的部份有:
1. HTML, CSS, JavaScript 規範的訂立。
2. 用 JSLint 與 PHP CodeSniffer 實作規範。
3. 於 Git Commit 時自動做 JSLint, CodeSniffer 的檢查,讓每個團隊成員習慣程式規範。
4. 圖檔最佳化的自動化
5. 在程式佈署 Deploy 時將 JavaScript/CSS 檔案合併、最小化、加上 MD5 Stamping、修改 PHP 設定檔、將 CSS 中的背景圖檔全部置換為 DataURI (MHTML)。
以上只有「將 CSS 背景圖檔轉成 DataURI/MHTML 尚未實作」

相關連結:
1. 模組化範例網站(開發):http://josephj.com/project/javascript-platform-yui-demo/
這個網站示範了 JavaScript 跨模組的溝通。(GitHub: http://github.com/josephj/javascript-platform-yui-demo, http://github.com/josephj/javascript-platform-yui)
2. 模組化範例網站(經過 Deploy 流程): http://modev.josephj.com/
基本上跟上述網站一模一樣,只是將 CSS & JavaScript 合併並最小化、修改 PHP StaticFile 的設定。
3. 在 D-Link 撰寫的前端開發規範:http://josephj.com/event/coscup-2010/guideline.zip
這一塊似乎是 COSCUP 大家比較感興趣的部份。感謝我老闆同意將開發規範與大家分享,不過目前都是草創,希望大家別失望。多多 Feedback 可以讓整體開發環境更好的。
4. 前端多國語系的實作:http://josephj.com/project/javascript-platform-yui-demo/lang.php
將 YUI Intl 整合到 JavaScript Platform 上,可以用 on-demand 下載的方式、動態切換 JavaScript 語系檔。

基本上,所有工具都會陸續修改、放到我的 github上,有興趣的人請去關注囉 ^^


Comments

  1. 掏此 2011-07-31 10:30:42
    我後來仔細想了一下,為什麼你的不直接使用yui3裡的YUI().add新增一個module?
    在用一個物件 or sandbox register下來,想去執行excute那個module時,在用YUI().use直接執行就好勒?
  2. 毛头明月耍大刀 2010-11-25 22:56:05
    惦记了好久你的 guideline 啦,一直想看但没好开口要,无私的分享,太有爱了!!
  3. CALLAHAN21MELISA 2010-09-02 10:38:22
    Do you need special issue such as <a href="http://www.essaysbank.com/essays/sports">sports essays</a>? I can't see some problem because of it. You just can utilize expert essays writing service to buy <a href="http://www.essaysbank.com">essays</a>.
  4. Rock 2010-08-30 11:20:28
    @josephj:謝謝喔
  5. josephj 2010-08-28 10:41:01
    Rock:
    是 Mac 上的 Keynote,我還是用不慣 PTT XD
  6. Rock 2010-08-27 10:02:20
    請問你的slide是用什麼軟體做的呢?
  7. josephj 2010-08-22 17:01:56
    Ray,
    沒這麼厲害啦 XD
    就只是個簡單的 Shell Script :p
    要讓您失望了

    medic,
    就請直接下載囉 ^^

    裕波,
    我 Slideshare 上的已經換成去北京的了
  8. Ray 2010-08-21 23:52:25
    請問投影片中提到的pkg_create & pkg_deploy是哪套工具?應該不是freebsd的pkg tool吧?問些笨問題,還請知道的前輩不吝指教,謝謝!@@a
  9. medic 2010-08-16 22:49:27
    站長您好
    前天在COSCUP聽了您的演講,您有提到您進公司先制定了許多guideline來輔助執行相關的規定,現場有聽眾提問guideline的細節您有說可以事後跟您詢問,不知道是否能和站長您索取呢?先謝謝您 :)
  10. 裕波 2010-08-12 02:44:49
    blog上的形象照片可以换了,哈哈
    换成来北京的照片
  11. 裕波 2010-08-12 02:44:14
    哈哈,帅呆了
    加油!
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment