[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 社区，转载请注明。