iT邦幫忙

7

「JS 開發過程大絕全都露」文章評比

本週討論「JS 開發過程大絕全都露」相關系列文章,來看看評比結果吧!:)
大概是這週的主題比較龐複,本週只有一篇挑戰文章,
由 vitaminx 發表的「 Grunt.js用在前端開發上」。

http://ithelp.ithome.com.tw/question/10120425

本來大會在評審考量上是有獎項從缺的空間,但經過評選後筆者認為這篇文章對於 Grunt 這個開發工具提供了詳盡的入門指引與個人經驗,另外也能夠確實滿足開發過程大絕(快速即時編譯增加開發功力)的主題,所以決定給獎。:)

過去我們常常在前端 resource 需要倚賴各種不同工具,像是 yui-compressor 等,需要各自設定不同規則,而在現代我們則有新的諸如 coffee/less/sass 等各種 resource 編譯需求。

雖然Grunt 許多人是因為 jQuery 核心採用 grunt 編譯已經聽過他的名字,但可能一直還沒有機會入門,Grunt 可以透過 plugin 跟設定 task 的方式將其一體化的透過命令列、nodejs 環境,將這些操作跨平台的整合在一起,這篇文章是個相當好的介紹。


既然這週文章比較少,藉評審文也提供自身對於所謂開發過程大絕的一些個人經驗:

(從核心專案需求到上層前端技術,前面滿足要優先於後面的)

@ 首先真要快速開發,明確的需求是首當其衝的

prototype/mock 等資料先行的開發模式是建議的,需求快速變動的情況下,再強的開發大絕都會變成啞彈。

@ 接下來要講究得是團隊合作的協調性,好的專案編譯工具(ex. grunt )是不可或缺的。

可以快速節省專案每次開發、過版的時間。最忌諱就是每次過版時都需要倚賴特定人員的專業知識跟龐複 SOP 流程,與其倚賴人一一照步驟去操作十數個步驟不出錯,倒不如讓指令自動化,建立出可信任的過版流程。

@ 好的版本控制系統(常見選擇有 svn,git,mercurial 等) 也是必要的

如果你的專案還沒有用版本控制系統,那你會需要很大顆的心臟。

@ 不用花太多時間就可以馬上建立的預設開發環境

根據不同專案環境,一般而言會建立 dev branch 作為開發者進入時,幾乎不用特別設定額外資訊的版本系統,另一方面如果有需要安裝程式,盡可能的調整成一鍵安裝,避免因為複雜的安裝流程折損環境重建或新成員加入的時間。

@ 好的專案目錄結構

JS/css/image 等靜態 resource 應該有明確的規劃,像是 js 資料夾跟 css 資料夾應該獨自分割成資料夾,最忌諱所有檔案包含 html或 jsp/php 等檔全部混在一起。這樣在編輯或修改時很容易找不到目標檔案,浪費大量的腦力在讓大腦自己跑檔案的 filter ,砍檔案時也容易手誤砍錯出事。

@ 好的 IDE (整合開發環境)

一般 IDE 比較倚賴 server side 的語言,所以主要開發環境比較難有一致性的推薦,但有一些共同的重點在於:
1.能夠快速的切換至需要檔案
2.syntax highlighter / 文字不會太小太大中文可以正常顯示 / 即時 error report (少打 > 會馬上 feedback)
3.能提供好的 content assistant/word complete 功能

一般而言我們會使用一個主 IDE 跟一個專門用來編輯文字檔的 editor ,主 IDE 用於專案整體開發, editor 則用於臨時需要調整設定檔或是處理一些雜物之類的。

editor 的部份目前 sublime text 非常流行,notepad++ 也是老牌夠用的選項之一,如果你是命令列的玩家,vim 或 emacs 你可能會有興趣。

@ 明確的頁面流程跟易測試路徑

專案在開發之前盡量要有明確的頁面流程也要考慮到測試需求,這裡說得測試需求並不是叫你寫 unit test (but it's strongly recommended if you could),而是考慮到頁面點擊很辛苦,盡量在設計時不要讓點擊的路徑太久或是留有可以明確用來測試的 url 。

因為每個連結在測試時都可能點上幾十上百次,想辦法讓測試變得容易點不是壞事。
(其實這一步,換句話說其實也是在增進使用者體驗。)

@ 好的專案程式碼架構

每個專案如何去設計哪些前端程式、哪些前端元件,會根據每個專案不一樣,要根據專案的需要去引用適合的專案工具,通常大家會想聽到的大絕是解決這個階段的問題,但是這個階段其實沒什麼一致性的大絕。

如果你 UI 真的會非常複雜(複雜指的是事件多跟事件處理流程複雜,不是畫面很亂)或是 single page website,採用一個已經有架構的元件系統(ex. extJS ) 會是強力推薦的。

其他 UI 比較不複雜的狀況下:

UI 部份可以採用 Bootstrap 元件作為打底,在上面疊出自己需要的客製頁面。
JS 部份可以採用 RequireJS 或是 asset pipeline (Rails 限定) 協助管理 JS resource,並引入 jQuery 作為頁面操作的核心函式庫。

至於 page script 跟 meta script 的設計技巧,就有機會再另外專章討論,這裡寫不完了,原則上沒有什麼大絕招是通行所有專案的,所以真的是 case-by-case。

對於這個主題大概的分享就到這為止,並且在最後再度恭喜本週的得獎人,
由 vitaminx 發表的「 Grunt.js用在前端開發上」 。
http://ithelp.ithome.com.tw/question/10120425


0
我是老皮
iT邦新手 4 級 ‧ 2013-05-15 15:56:40

tony1223提到:
過版的時間

什麼叫過版 疑惑

0
tony1223
iT邦新手 2 級 ‧ 2013-05-15 15:59:43

常見同義字有:deploy 、更版、換板、改版,指將開發環境的開發產出放到 production server 上的一個步驟。

當然有些公司並沒有過版流程,而是直接在 production server 上進行開發,開發同時也等於在異動 production server,但這樣的操作方式異常危險而且很容易出現意外,算是專案開發致命毒藥的十大之首。

0
appleboy
iT邦新手 4 級 ‧ 2013-05-16 09:56:18

Grunt.js 可以參考我3月寫得一篇介紹

http://blog.wu-boy.com/2013/03/javascript-command-line-tool-gruntjs/

XDD

我要留言

立即登入留言