iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
5
Modern Web

前端工程師養成手冊系列 第 24

善用工具提昇開發效率

在石器時代,原始人必須很辛苦用鑽木取火的方式來生火,而古代的人開始會用打火石。隨著時代的演進,也開始有打火機、火柴等工具,而在現代,只要有瓦斯充足,你的火源想燃燒多久都可以,且不費吹灰之力。

從此可以看出任何工具都會隨著科技進步而跟著演化,寫程式也是一樣的道理,我們隨時都必須觀察是否有更實用的工具來提升寫 CODE 效率。

程式編輯器的演化史

以編輯器來說好了,它就是一個很好觀察出科技在進步的過程,在十幾年前大家寫 HTML 都是用記事本來撰寫,接著開始有「可視化」的編輯器,像是 FrontPage、Dreamweaver,讓想學網頁的人不會因為看到密密麻麻的程式碼而卻步。直到近幾年才又開始有 Sublime Text 3、ATOM、Visual Studio Code 這類的文字編輯器,與記事本相比,這種專門寫程式的編輯器可是強大的多了,每位開發者都可以為編輯器寫套件,讓其它人都可以安裝套件,你可以自己打造適合自己開發習慣的編輯器介面、熱鍵、顏色高亮、coding style、自動除錯等等。

它幫助開發者能夠聚焦在程式開發上,甚至能用自動化檢查的方式幫助你自動除錯,就以我自己來說 我的網頁編輯器操作歷史則是 FrontPage > Dreamweaver > Sublime Text 2、3 > Visual Studio Code,幾乎每隔兩三年我就會換編輯器來讓自己變得更強。

持續優化自己的模版架構

一開始學前端的時候,HTML 結構非常單純,頂多有插入一隻 CSS,網頁也只有一兩頁,但隨著你會的東西越來越多,架構也會跟著變大,如果每次在開發時,都要從零開始慢慢建構不是很辛苦嗎?首先要新增 HTML、CSS 檔,去 JS 框架官網下載最新版本,CSS 又必須重新寫過,每個細節如果不小心漏掉就又很麻煩。

所以你可以思考建構自己的 boilerplate,什麼是 boilerplate 呢?就是設計一個乾淨的開發環境,每當有新專案時,你就複製那個開發環境下來,裡頭就有你慣用的 JS 框架、前端任務工具 (Gulp、Webpack)、以及常用的 Sass Mixin 結構等等,讓你能夠專心在開發新程式上面,不會覺得每次開發都像是重新開始一樣。觀念又很像是你在大學上繳交報告給教授時被退回,因為你沒 follow 他的 word 標準格式,例如標題要 18px,行距要 1.5倍,所以教授提供給你一個 word 範例,裡面的各個設定都設好了,不要自己慢慢建立,只要遵守規範就有符合教授作業的規則是一樣的。

像是在 Github 上你關鍵字搜尋 boilerplate ,也可以看到許多開發者的建構環境,而我也會建議你在 Github 上面試著放自己的 boilerplate,當你有新專案時便透過 Git 指令 clone 下來就方便多了。

不要有鄙視心態,自己用的順手最重要

業界會有個鄙視鍊的玩笑,就以編輯器來說,連結裡也附註一段:「用 Vim 的工程師鄙視用 Emacs 的工程師,用 Emacs 的工程師鄙視用 Vim 的工程師,無論是用 Vim 或 Emacs 的工程師都鄙視所有用其他編輯器的工程師;用 Atom、Notepad++、Sublime Text 的工程師鄙視用 Windows 記事本的工程師。」。

這裡會建議不要鄙視別人用的工具,有些時候工程師用起來就是很不順手,像是以前我用 Dreamweaver 時,那時我就在想該選 notepad++ 還是 Sublime Text 2,後來我用了一陣子覺得 Sublime 用得比較順手,但周遭也有人選擇了 notepad,這中間其實又關係到自己的人格特質、喜好偏愛、操作習慣等等。

我自己也常遇到這種問題,例如有時候別人推薦的工具我聽他講完也覺得非常讚,但是我實際去用總是覺得哪裡卡卡的,最後硬用幾天宣告放棄,過幾天後發現另外個類似服務,一使用發現喜歡得不得了,甚至就直接註冊付費版,但真要我說兩者的差異我自己也說不上來。所以真的自己用得順手最重要。

工具用得好,工作效率自然高

不要小看這些工具運用的累積效用,就以 HTML 標籤來說,目前的熱門編輯器都有支援一個強大的套件叫做 emmet,你可以思考看看自己打以下程式碼需要多少時間,如果自己手打起碼也要一分鐘以上吧?但我用 emmet 只要 10 秒不到就可以打出來了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="all.css">
  <script src="all.js"></script>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
  </div>
</body>
</html>

如果一整年我跟你每天都會打一次這個語法,我就比你還多了整整五個小時做其它的事情,你說驚不驚人?專業的工程師為了讓自己更懶惰,自然會去找各種工具來提升寫 CODE 效率,讓自己擁有更多的時間專注在他想投入的事情上。

那麼到底該如何觀察自己的哪些環節可以用工具來輔助呢?最後也丟出一些檢核列表給你參考:

  • 每個專案都會寫到的功能,但手寫又很花時間的就可以設計成 snippet (程式碼片段)
  • 思考日常生活中會花你超過五分鐘以上的工作,就思考如何讓它自動化完成(推薦連結)
  • 如果每次在寫一個程式都會卡在一個抽象觀念上時,你就必須花時間瞭解它整體脈絡
  • 思考一個禮拜或一個月的頻率上都固定會去做一件 30~60 分鐘的工作時,就有優化的空間(申請文件範本、自動化銀行帳單繳款取代臨櫃)

上一篇
前端篇:你可曾思考離職後尋求更好的自己?
下一篇
前端工程師要不要接案?如何報價?
系列文
前端工程師養成手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
r567tw
iT邦研究生 5 級 ‧ 2017-12-27 01:35:41

"如果每次在寫一個程式都會卡在一個抽象觀念上時,你就必須花時間瞭解它整體脈絡",這句好像有點不太看得懂.... 不知道大大可否解釋 或舉例來說明一下?

廖洧杰 iT邦高手 2 級 ‧ 2017-12-27 01:54:38 檢舉

舉例來說用 flexbox 好了,你在操作他進行網頁排版時,時常出來的結果不如你的預期,於是你就亂 try 試圖得到對的結果,就算被你矇對了,功能也被你用出來,但其實你觀念還是不清楚的。

有些人會用專案忙而逃避觀念,以為應該再也不會碰到,但出來混遲早要還的,與其如此不如將它融會貫通,才能幫自己紮穩基礎,繼續往下個方向邁進哩。

konekoya iT邦新手 5 級 ‧ 2017-12-27 09:23:56 檢舉

回答的太好了

0
564219
iT邦新手 5 級 ‧ 2017-12-27 09:16:18

超同意老師說的順手最重要,像我自己則是除了學程式之外都沒看過課本
學語言是聽廣播和看原文小說、學畫畫是看畫冊,目前想的到最誇張的就是用平假名學俄文吧XD

廖洧杰 iT邦高手 2 級 ‧ 2017-12-27 10:09:19 檢舉

/images/emoticon/emoticon01.gif

0
konekoya
iT邦新手 5 級 ‧ 2017-12-27 09:24:22

鄙視鏈也太有趣了XD

廖洧杰 iT邦高手 2 級 ‧ 2017-12-27 10:09:40 檢舉

/images/emoticon/emoticon08.gif

我要留言

立即登入留言