2015 年度回顧

忙碌的 2015 年終於到了尾聲,該總結一下今年的心得了。2015 年,對網頁程式設計是個重要的年度!HTML5 和 ECMAScript 2015 (ES2015) 標準化了,終於可以揮別 IE 迎接美好新世界。在今年是 React 蓬勃發展的一年,有幸的我也搭上這順風車一起隨著 React 成長,React 改變了我的寫程式的思考方式,這衝擊非常的大!如果你邏輯清楚,你必會愛上 React!沒錯…一整年我都在學 React,到了下半年終於比較理解,可以帶領其他人一起加入 React 的行列。

React

一個由 Facebook 提出的前端 View framework,特色是:

  1. One-way data flow

    由狀態(state)決定畫面要怎麼呈現,同一種狀態,只會有一種畫面存在。如果搭配 Flux flow 的話可以有更清楚的data flow。可以徹底解決用 jQuery 開發會遇到的問題(邏輯散布世界各地)

  2. Virtual DOM

    因為瀏覽器對 DOM 的處理的效能非常的差,而 JavaScript 運算相對來說非常的快,因此 Facebook 很聰明的用 JavaScript 模擬 DOM tree,每次的變動都會先在 JavaScript 計算完變動,在一次更新 DOM,Facebook 在 diff 演算法的部分下了不少心思,因此 React 的效能非常的好!

  3. ES2015 friendly

    React 是可以直接使用 ES2015 的語法在寫的,ES2015 提供了許多好用且簡潔的原生語法,讓開發者可以用更少的程式碼達成相同的功能!

  4. Component-based Development

    React 鼓勵開發者把大東西切割成許多的小 Component,簡化每個 Component 做的事情,並且大量的 reuse 這些 Component。

  5. Learn Once Write Everywhere

    React 的野心不是只有 web 這一塊,而是放眼整個軟體工程,React 在 0.14 版把 DOM 管理從 React 抽離出來,變成 React-DOM,同時也繼續發展 React-Native(用 JavaScript 寫原生 App),也有別人開發出 React-canvas、React-D3 等等,學會了 React 未來有 React-anything 可以讓你使用!

特色講了這麼多,老話一句,越神奇的功能背後付出的代價越高,接著講講缺點吧!

  1. JSX

    JSX 是搭配著 React 一起推出的,目的是為了提供 HTML-like 的語法在 JavaScript 中,確實簡化了 JavaScript 的語法,不過新加入的開發者則要付出較高的學習成本,且 JSX 並不能直接和 HTML 完全對上(例如 class 不能直接使用,而要用 className)。另外瀏覽器並不懂JSX,所以 JSX 需要轉譯成 JavaScript 才可以被瀏覽器執行。

  2. 開發環境

    開心的用了 JSX 語法照著 React 官方的範例寫,放到瀏覽器裡執行,直接 SyntaxError,看到這裡一定覺得非常的傷心…接著會告訴你需要經過 babel 轉譯 JSX 成為 JavaScript,babel 沒辦法直接用,而是必須要透過 babel-cli、grunt、gulp、browserify 或 webpack才可以,然後又遇到了 Component 太多了,需要 bundle 起來的問題,然後每次存檔都 reload 才能看結果太麻煩了,所以就找到了 react-hot-loader 卻又發現他已經 deprecate 了,所以你找了react-transform-hmr,然後又有 babel5 還是 babel6 的問題,簡單的說呢…一團混亂!

  3. Browser unfriendly

    絕大多數開發好的 React framework,都只能在 Node 上開發,整個網站都要用 React 來開發才可以,想要單獨抽出來給既有的網站使用,是有難度的!

今年不是只有 React 蓬勃發展而已,Vue和 riot 也都是不容小覷的對手,Vue 算是個輕量化的 React,因為很簡單所以受到很多人喜愛,而 riot 則是提供 human-readable 的語法也受到不少人關注。

Flux

Flux 是 React 實現 one-way data flow 最重要的一環,下面是 Flux 與 傳統 MVC 的比較

因為本人琢磨不多,就不詳細介紹了…

Redux

Redux 是 Flux flow 演變而來的

其特色如下

  1. One store

    Redux 有別於傳統的 Flux 有多個 stores,Redux 把所有的 state 存在一個 store 裡面,並且透過多個 reducer 各自管理自己的狀態。

  2. Functional programing

    Redux 確保 reducer 是 pure function,做任何事情沒有任何的side effect!

  3. Immutable

    Redux 要求 reducer 裡面不可以修改到 state,且每次都必須要 return 完整的 state。

Redux 就等到下一篇文章再仔細介紹吧…

Test

前面都是介紹有關 JavaScript 的生態,來說說和程式密不可分的測試吧!測試其實已經注意很久了,但是一直沒有機會有高手帶領,只能慢慢看著高手的分享文學習,基礎知識已經有了,再來就是時做了,有寫測試和沒寫測試最大的差別就在於,你敢不敢大聲的說你程式沒有問題!沒有問題的依據是甚麼?另外就是可以減少量大 debug 的時間!雖然才剛開始,覆蓋率連 10% 都不到,但是慢慢累積,遲早有一天可以過半的!最終朝向 100% 覆蓋率。

結語

雖然幾乎都是在介紹 JavaScript,但是其實對CSS、PHP 的關注依然沒有減少,PHP 7 發布確實令人振奮,但是…看的到吃不到,有點無奈…,CSS 的部分開始在轉型了,大家漸漸靠攏 postCSS 與 CSSNext,當然 SASS、LESS、Stylus都還是有很多人再繼續開發與使用,只可惜我 CSS 部分並未成長許多,受限於 IE8、IE9 的影響,無法使用 flex、column、row等排版技術。懇請各位頻繁的更新瀏覽器,他不會吃掉你的…最後,一起享受美好的網路生活體驗。