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

AngularJS 分享 - Bootstrap Grid system directive

這篇同樣分享一下之前實作的一個 AngularJS directive，這個 directive 是用來呈現一個 Bootstrap 的 Grid system

不知道什麼是 Bootstrap 的 Grid system 可以 >>看這邊<<

比較複雜的是 要如何用 AngularJS 現有的 directive 來組成一個可變動的 Grid

因為我不想直接用程式刻，所以都是通過 template 以及像是 ng-if，ng-init 以及 ng-repeat 這些 directive 來達成

當然實作的方式有好有壞啦，用程式刻我認為會稍微地好理解

但是你如果能充分利用原有的 direcitve 搭配 template 或許會讓你對 AngularJS directive 的開發更容易掌握

下圖是這次範例實作出來的結果(將所有的 products 以 grid system 呈現，每列三欄)：

GitHub + Shippable + Heroku : A continuous development way

本篇介紹該如何將你在 GitHub 上的專案透過 Shippable 和 Heroku 做有效的結合達成 continuous development

Continuous development 包含了很多的面向，譬如說比較常聽到的 Continuous delivery 或 Continuous deployment 等等。

而等等要介紹的 Shippable 和 Heroku 的運用確實可以達成上述的這些 term

Shippable 是一個強大的平台讓開發者能夠快速的做專案的整合(integrate)與建構(build)

它能夠自動同步你 GitHub 或是 Bitbucket 內的專案來進行建構，方便的是

假如你今天有一個專案在 GitHub 上，並且你也同步到了 Shippable

之後你如果有任何的程式提交 (commit) 到 GitHub 上，Shippable 都會自動的進行建構的動作

讓開發者能夠達到持續地提交，建構與測試。當然這個過程是開發者需要提供一些設定檔才能達成的

而 Shippable 更提供了幾個主流開發語言的環境，包括 Node.js, Java, Ruby, Scala, Python 等等

而 Heroku 則是一個 PaaS，它提供了很多種語言的 deploy (部署)與運行環境

簡單來說就是它能夠讓你部屬你的專案到 Heroku 的 Cloud 上，並透過它給你的 domain 進行結果的瀏覽

在進行接下來的教學前你需要有 GitHub 的帳號，並且在 GitHub 上有一些專案可以運用

所以 GitHub 的操作就不多說了，直接從 Shippable 開始

AngularJS 分享 - Pagnation Directive (分頁)

前陣子無聊就來練習一下 AngularJS 的 Directive (現在我還是覺得 AngularJS 的 Directive 和它的測試是真的有那麼一點複雜...)

之後稍微搞懂 Directive 之後就馬上順手寫了一個 AngularJS 的分頁元件

這個分頁 Directive 的樣式是基於 Bootstrap 3 的，程式內容不會介紹太多，純粹分享原始程式

React.js - an example with browserify and debowerify

前陣子在看 Facebook 的 react/flux 的架構中有注意到一點就是 browserify

在 browserify 的官網有講到它是一個能夠將 node module 的程式載入到前端的 JS 中

只要簡單的透過 require 函式即可，很像以前很常在用的 RequireJS

而恰好 flux 是被 Facebook 註冊為一個 npm 內的 node module

所以在 flux 的 TODO 範例中，他們就是用 browserify 來將 flux 的程式載入到前端

也順便地將 react 透過 browserify 載入，言下之意就是表示

react 和 flux 這兩個都是透過 npm install 進去的，可以透過 Github 上的 package.json 得知，如下



這樣我們在前端的 javascript 中就可以利用下面的方式引入 flux 或 react


但如果你習慣將前端的套件透過 Bower 來管理而不是 npm 的話

那麼在 Facebook 的 react/flux 架構中要怎達成呢? 這個問題馬上就浮現在我腦中...

AngularJS 教學 - Bootstrap dropdown directive

本篇用 AngularJS directive 實作了 一個 Bootstrap 的 dropdown (下拉式選單)

我有放在 GitHub、ngmodules.org，也有註冊在 Bower 上

GitHub 連結：https://github.com/AllenFang/angular-bootstrap-dropdown
ngmodules 連結：http://ngmodules.org/modules/angular-bootstrap-dropdown
Bower：可以透過以下指令安裝

$ bower install angular-bootstrap-dropdown --save

詳細的使用介紹可以看 GitHub 的 README.md 文件

之後會加上 multi select 的功能 (有時間的話...)

基本使用方式：
bs-dropdown-display 屬性設定 dropdown 要顯示的文字
bs-dropdown-items 屬性設定 dropdown 選單內的 options
ng-model 設定 dropdown 的預設值
ng-change 當 dropdown 的值變動的時候會呼叫 的 callback function
bs-dropdown-divider 指定 dropdown 的分隔線的位置，例如： bs-dropdown-divider="{{[2,5]}}".