ShopBack Engineering Blog

Following is official Shopback Engineering Blog on Medium

Shopback Engineering Blog on Medium

Please follow it and I will publish some tech articles on irregular basis.

Thanks.

Certified Spark Developer

Certified Spark Developer 是一張由 Databricks 提供的 Apache Spark 開發者的認證考試

關於 Certified Spark Developer 資料可以看這裡，另外這張認證是由 Oreilly 處理考試過程，詳細的考試資訊可以看 這裡

建議考前幾天要注意電腦設備和環境是否符合要求，要詳細閱讀這份文件

在這裡分享一下我的考前準備

Learning Spark 要熟讀

我把 Learning Spark 從頭到尾讀了三遍，最後在考試之前再快速複習重點一次。

不過在最後一個章節 Machine Learning with MLlib 我花較少的時間，畢竟這要有點相關知識，讀起來才比較順


Scala 與 Python 基礎語法

在考前我有把 Scala 與 Python 的基本語法搞清楚，基本上迴圈操作，類別宣告與函式定義都需要了解

另外最重要的就是集合物件的操作必須要熟悉

我本身最熟 Java，所以花在 Scala 與 Python 比較多時間


程式實作

在準備考試之前已經有寫過一些 Spark 的程式了，考前一樣有寫一些關於 RDD 與 Spark SQL 的程式

但我比較著重在 Learning Spark 的第三章與第四章的程式實作，基本上每一個 RDD 的 operation 我都有寫過至少一遍

原則上不是去背這些 RDD，是觀察這些 RDD 的結果會是什麼，例如：

rdd1.union(rdd2) 的結果資料會不會重覆，rdd1.intersection(rdd2) 的資料是否會重覆 等等的

比較複雜的是第四章，需要多花點時間去看這些 RDD 的結果會是怎樣。

另外 Java 有很多的 Interface，我也花了蠻多時間去背。

React.js - Stateless principal in react

之前為了建立一個複雜的 react 和 flux 的大型應用，花了不少時間把很多關於 react 和 flux 的文章看過一遍

要整合 react 和 flux，並不是用了這兩樣東西就讓你的前端應用完好無缺

這篇先從 react 的角度來看前端元件的開發準則，之後有空再寫點我對 flux 更深入的見解

首先為什麼要用 react 來開發前端，因為前端的所有東西都是元件 (Everything is component)

這也是 react 專注的重點，讓你能夠容易快速的建構一個前端應用

所以當我們透過 react 開發並且把焦點關注在元件(Component)開發上時，有幾個原則是盡量要遵循的

• Composable
• Reusable
• Maintainable
• Testable

在 Facebook 還沒 open react.js 之前，我只認為 jQuery 是最容易做到上述四點的

雖然後續有很多前端的框架 Backbone, Angular, Ember 等等，它們的重點多半是在 MV* 身上

對於一個前端的元件開發而言，它們都並不是非常好用或是友善的。

所以當你在用 React.js 開發前端的時候，也須謹記上述四點，才能讓你用 react 的價值發揮到最大

而除了這四點之外，還有一點是相當重要的，就是 Stateless component

什麼是 Stateless component ?

簡單說就是元件盡量是無狀態的，它不需要處理資料或UI狀態的變化，只要接收資料並呈現就好


所謂的資料就是領域模型(domain model)的資料，例如 Product。這些資料多半是透過 Ajax 或是 RESTful 從後端獲得的。

至於 UI狀態，就是用來"記錄" UI 目前的狀態，比方說哪一個 tab 被選擇，或是哪一個 dialog 被打開 等等。

React.js in es6

React.js 在 v0.13.0 版之後開始支援 ES6 的語法，如果想學習 ES6 語法的人可以看一下這些教學

• ECMAScript 6入门
• Learn ES6

對於最新 ES6 的 React.js 寫法，一個最基本的範例就是建立一個 Component

React Component

以往 ES5 我們會利用類似如下的寫法來建立一個 Component

首先在 ES5 我們會用 require 來引入你需要的模組，再來利用 React.createClass 建立一個 Component

最後透過 module.exports 來 export 一個 Component

至於要如何用 ES6 的語法建立一個 React 的 Component 呢?　如下：

我們可以看到原本的 require 換成了 import {} from "" 而 module.exports 換成了 export default

最重要的是，利用了 ES6 定義的 class 來達到基本的 prototype-based 的 object oriented pattern

所以在 ES6 語法中我們就可以把一個 React 的 Component 透過 class 的定義並繼承 React.Component 來建立一個 Component 的類別

當然大多數 React 所定義的方法都沒有變動，包括 render, componentWillMount, componentDidMount...等等

React.js - using Jest and Babel to test ES6 code

本偏介紹一下如果你是用 ES6 的語法寫的 React.js 應用程式，如果利用 Jest 測試時要住意那些部份

原則上測試的過程不外乎 Jest 官網介紹的 >>here<<

如果你是用 ES6 語法進行開發的話，你需要注意的是利用 react-tools 作 transform 時需要指定你的 JS 語法是 ES6

設定方式就是透過 preprocessor.js 讓 react-tools 在 transform 的時候可以將 ES6 語法 enabled 起來

根據 react-tools 的官方介紹，如同上述的方式加入 harmony 並指定為 true 就可以了

此外我再額外介紹一種方式就是利用 babel 來進行 transform 的動作

babel 本身就可以對 ES6 的語法以及 JSX 的進行轉換，所以你也不用擔心 babel 不認得 React.js

透過 npm install babel --save-dev 安裝 babel 之後

修改你的 preprocessor.js，如下所示：

React.js - Bootstrap table

I created a Bootstrap Table rebuilt for React.js, current version is 0.3.0.

Home page is here: React-bootstrap-table

You can visit Github on here: react-bootstrap-table

The features on react-bootstrap-table

• Column align
• Basic table style: striped, hover, condensed, border..
• Scrolling
• Table sort
• Column format
• Pagination
• Row selection 
• Cell Edit

You can reference more examples on here.

In the future, I will provide more function on ReactBsTable, like  table event or some change on table.

If you like it, give it a star on github, Thanks

----------------------------------------------------------------------------------

最近用了空閒時間寫了一個基於 React.js 的 Bootstrap table 元件

首頁在這邊: React-bootstrap-table

Github: react-bootstrap-table

ReactBsTable 支援基本的 Bootstrap table classes

例如： .table-striped, .table-hover, .table-condensed ... 等

另外也支援了欄位的 排序(sort), 格式(format), 對齊(align), 分頁等

可以在這邊看到所有的範例： here

之後我也會繼續提供更多的功能以及事件

如果你喜歡的話，可以到GitHub react-bootstrap-table 給個 Star

我會更有動力繼續改善的，感謝!!!!

browserify 與 watchify 分享

本篇來分享一下在 gulp 的建構環境中如何使用 browserify 以及 watchify

如果對 gulp 與 browserify 不熟的的建議要先學習一下，browserify 之前的文章都有提到過了

而 gulp 則是一個目前盛行於 javascript 的建構工具，相較於 Grunt 而言，實在是好用太多了 ^.^

至於為什麼要介紹 browserify 與 watchify，其目的在於希望能夠再開發的過程中

如果一有程式的變動，就能夠自動執行 browserify 建構的動作，基於這個因素就需要 watchify 的協助

對 gulp 有初步了解的開發者可能也知道 gulp 本身自帶有 gulp.watch 的功能

也是一個能夠自動監控檔案，當檔案發生變化時會自動執行開發者指定的函式，例如：

但 gulp.watch 的功能與 browserify 的整合比較困難，畢竟一個 javascript 的 dependency 是相當複雜的

如果利用 watchify 好處就是它只會 rebuild (重新建構) 有需要重新建構的程式

所以接下來就來分享一下，如何利用 browserify 與 watchify 來達成這樣子的一個目標

React.js - a flux example with ES6 and Babel

這篇介紹一下用最新的 ECMAScript 6 的語法並搭配 Babel 來開發一個簡單的 react/flux 的程式

同樣這次的範例程式會放在 GitHub 上 >>在這裡<<

不知道 react/flux 的可以看我>>上一篇的教學<< 有寫一個簡單的 react/flux app

對 flux 有疑問或不清楚的可以 google 找一下資料，而我之前也有寫一篇對 flux 的>>心得分享<<

接下來回到主題，ECMAScript 6 以下都會簡稱 ES6，在2014確定了所有的新功能與語法

預定在今年 2015 6月左右會正式發佈，接下來瀏覽器會慢慢完全支援 ES6 的語法

所以這篇就用 ES6 來重寫一次 react/flux 的程式

雖然目前瀏覽器並沒有完全支援 ES6 的語法，不過我們可以透過 Babel 這個工具進行轉換

Babel 的原名叫做 6to5，也就是一個能夠將 ES6 轉換為 ES5 的工具，所以也不用擔心瀏覽器對 es6 的相容性問題了

至於為什麼要這麼快用 ES6 來開發程式？如果看過 ES6 的新功能之後，確實是蠻讓人期待的，之後有空再來介紹

另外也是因為有了 Babel 這類的工具，讓目前尚未完全支援 ES6 的情況下

可以開始專攻 ES6，等到之後 ES6 完全被瀏覽器支援後，你也不用考慮要重新寫程式了，因為你已經是在寫 ES6了

React.js - react/flux 範例

本篇教學範例的完整原始碼在 >>這裡<<

如果對 Flux 的架構和細節有不清楚的，網路資源很多可以查，建議看英文比較好

我之前有寫一篇關於 Flux 的架構分想也可以參考 >>Facebook/Flux 架構分享<<

這邊在用最簡單的方式介紹一下 Flux 的架構

原則上 Flux 是一個資料流只有單一方向的設計原則，並且把原件區分為 View, Action, Store, Dispatcher

以下用一張簡單的圖來說明

第一張圖是 Flux 的架構圖，我有簡化過，因為我是認為 Flux 的原圖會讓人誤會

第二張圖是實際的運行中的資料流

Facebook/Flux 架構分享

現在 react/flux 在網路上的分享或教學已經很多了，有興趣的可以上網找一些相關的資訊

react 與 flux 的搭配算是目前正興起的一像前端開發手法

flux 是 Facebook 提供的一套前端設計模式，也可以說是一個架構

react 就不多說了，之前有文章介紹過了，去年看到 flux 的架構設計之後

特別有看到 Facebook 的介紹有提到，他們認為 flux 的架構設計是比較適合大型的前端應用的

另外也有提到前端 MVC 架構中的一些缺點，我是有部分認同他們給出來的一張圖

上面這個例子或許是大多數大型前端應用會遇到的難題，這已經跟 MVC 用不用得好沒關係了

在這之前曾經寫過大型的 backbone 程式，寫到最後(Model & View)就真的跟上面有點╰(〒皿〒)╯

雖然後續我認為 backbone 不能很根本地稱做 MVC，至少要額外加入 marionette 與 stickit

透過 marionette 補足 Controller， 並利用 stickit 來實現 Model 與 View 之間的 two-way binding