[Tips on Ember 2] 如未嘗試 angle-bracket component

Ruby China 的朋友大概都知道我很喜歡 Ember，然而我用 Ember 的經歷其實遠比不上 Angular 那麼豐富（Ember 業餘愛好，Angular 作正兒八經的項目）。最近我換工做了，終於能夠在新的項目裏主導使用 Ember 來開發 Web App，恰逢 Ember 進入了 2.0 時代，許多東西和當初本身瞎玩的時候相比變化都很大。因而我就想把接下來在實際工做中的一些經驗技巧都記錄下來發在 Ruby China，但願對喜歡 Ember，關注前端開發的朋友們有所幫助。

來到新的公司新的團隊，終於能夠不折不扣的使用 Ember 了，因爲接下來有了發揮的空間和自由，因此我特別想先嚐試嘗試那些「傳說中了很久」的新特性，第一個想到的就是 angle-bracket component（也就是尖括號形式的 component，寫起來如同 HTML 同樣，這也是 Angular／React 等框架創造 component 的形式，一度是 Angular 的主推賣點）。

雖然 Ember 2.0 已經發布了，可是 angle-bracket component 還要等到 ~2.1 才能在正式版本里出現，若是如今就想嚐鮮的話就得使用 canary 版本了，這主要是由於 Ember 的新特性須要手動開啓 | 44135dc37db6e69bf4a7cd78398c5a340 | 才能嘗試，而目前只有 canary 版本容許你開啓 Feature Flags（當前可使用的 feature flags 有一份列表可查）。

⚠警告：canary 版本是很不穩定的，並不推薦使用於要上線的應用。若是你要嘗試新的特性，要麼是新建一個測試用的 Ember App，要麼是你的應用離正式上線還早而且你（和你的團隊）折騰得起。就我的經驗來講 canary 版本自己還算穩定（畢竟有測試），但問題主要出在：1）API 的變化沒有文檔，你須要本身去跟蹤 issues；2）周邊工具會收到影響（好比我在嘗試 angle-bracket component 的時候，ember inspector 就有 bug 了，會影響正常的開發）

下面簡要列舉開啓 angle-bracket component 相關的 feature flags 的步驟：

升級 ember 和 ember-data（可選）至 canary 版本

更改 bower.json 文件內相關的部分爲：

"dependencies": {
  "ember": "components/ember#canary",
  "ember-data": "components/ember-data#canary"
}

而後執行 $ bower uninstall ember && bower uninstall ember-data && bower install，或者你也能夠不去 uninstall 直接嘗試 bower install，可是有時候會須要解決煩人的依賴問題。

開啓相關的 feature flags

編輯 config/environment.js，在 ENV.EmberENV.FEATURE 下添加下面的代碼：

var ENV = {
  // ...
  EmberENV: {
    FEATURES: {
        'ember-htmlbars-attribute-syntax': true,
        'ember-htmlbars-inline-if-helper': true,
        'ember-htmlbars-component-generation': true
    }
  // ...
  }
}

重寫舊的 components

舊的 components 都是 Ember.Component 的子類，而 angle-bracket component 則是 Ember.GlimmerComponent 的子類，因此你只須要保證這一點就能夠完成轉換了。一個新建立的 angle-bracket component 的代碼看起來是這樣的：

import Ember from 'ember'

export default Ember.GlimmerComponent.extend({
})

不出意外的話我認爲當正式版本發佈後，如今的 Ember.Component 將被 Ember.GlimmerComponent 取代，因此之後可能還得改回來（這應該還有段日子的）。內部其餘的 API 目前仍是以 Ember.Component 的文檔爲準，將來有什麼變化之後再看吧。

如今重要的是 component template 的寫法，我在測試的時候把一個登陸表單封裝成了 component，如下是其 template 的寫法和使用的方法：

<!-- components/signin-form/template.hbs -->

<form>
  <div class="form-group">
    <label for="username">帳號</label>
    <input class="form-control" id="username" name="username" value={{attrs.credential.username}}>
  </div>
  <div class="form-group">
    <label for="password">密碼</label>
    <input class="form-control" id="password" name="password" type="password" value={{attrs.credential.password}}>
  </div>
  <div class="form-group">
    <button type="submit" class="button-submit">登陸</button>
  </div>
</form>

<signin-form credential={{model}}></signin-form>

如上，能夠看到新的模版語法裏給 component 傳遞數據和訪問數據的一些寫法上的變化，這些變化實際上是依賴於 'ember-htmlbars-attribute-syntax' 這個 feature flag 的。

修復一個 deprecation warning

觀察修改後的應用，能夠看到這樣的警告：

修補這個問題的代碼很簡單：

Ember.GlimmerComponent.reopenClass({
  isComponentFactory: true
})

這段代碼能夠插入到 app/app.js 文件裏，在應用初始化的時候即時生效。在此功能正式發佈以後應該是不須要這段補丁代碼的，目前來講也不會影響使用。

結束

就是這樣了，從如今開始你可使用新的語法來建立 components，除此以外還有新的 htmlbars-attribute-syntax（上例所示）和 htmlbars-inline-if-helpers 特性。HTMLBars 對於模版語法帶來的改變，能夠參考這篇總結性的文章：http://colintoh.com/blog/htmlbars

下一篇我打算講講 Sass 在 Ember CLI 裏面的一些最佳方案，其中包括如何整合 Bootstrap 的 Sass 版（而不是直接 import 它的 css 版本），以及如何在此基礎上使用其餘的 Sass 庫／框架等等。這個選題是由於新團隊裏的夥伴們對這件事情有些爭執，因此我就肯定了一個最佳方案，宗旨是：1）保證最大的靈活性和定製性；2）在此基礎上讓設置步驟足夠簡單。

我也樂意聽聽你們的反饋，若是有什麼事情是你以爲很想了解的，或是你已經作到了可是以爲還不足夠好的，能夠回覆我，等我有了答案以後我也會如此整理出來和你們分享。

關於 Ember Inspector 的 bug

目前使用 canary 版本的時候，ember inspector 會有一個隱蔽的 bug，其表現是：當你在 ember inspector 開啓的狀態下（開發者工具打開而且當前的 tab 是 Ember）刷新當前應用時頁面會變空白，此時你能夠在 console 下看到這樣的警告：

這個問題其實和你的應用無關，是 ember inspector 在刷新後從新初始化的時候形成的，經我的測試只在最近的 canary 版本里存在，估計 ember inspector 更新之後會修復吧。有一個簡單的臨時解決辦法就是關閉開發者工具而後再刷新就行了，以後再開啓開發者工具以後 ember inspector 還能夠用。其實你只要保證刷新的時候 ember inspector 不處於當前激活的 tab 就行了，開發者工具能夠不關的。

---

原文首發於 Ruby China 社區，轉載請註明。