2014年 Ember會(huì)帶來(lái)如何改變?
加入更多的包
Ember CLI提供bower支持,只需使用下面命令:
每隔幾個(gè)月的時(shí)間,Ember的核心團(tuán)隊(duì)就會(huì)聚在一起討論目前遇到的各種問(wèn)題,并決定下一季度需要優(yōu)先處理的各種事務(wù)。
這一次,在俄勒岡州的波特蘭,大家聚在一起,商討2014年的發(fā)展方向。
開(kāi)發(fā)工具 & 模塊
我們花了大量時(shí)間商討將ES6模塊和快速、強(qiáng)大、功能完備的開(kāi)發(fā)工具整合的事宜。
我喜歡Ember交流會(huì)議的原因之一是:它越是快速地在實(shí)際中應(yīng)用越能體現(xiàn)它的價(jià)值。對(duì)我們來(lái)說(shuō),解決問(wèn)題比提出解決方案更加重要,因?yàn)獒槍?duì)解決方案的不同解決措施不會(huì)隨著應(yīng)用的成長(zhǎng)而改變。
截止到目前為止,我們還沒(méi)有認(rèn)可任何一款特定的構(gòu)建工具,因?yàn)槲覀円呀?jīng)對(duì)它們都進(jìn)行了深入調(diào)查,目前可用的選擇都有使你應(yīng)用體積變大的致命缺陷,而這個(gè)缺陷會(huì)讓你使用時(shí)很不愉快。
許多人也問(wèn)過(guò)我們關(guān)于模塊的事情。當(dāng)我們啟動(dòng)Ember項(xiàng)目時(shí)還沒(méi)有流行的模塊格式。但自那以后,CommonJS的服務(wù)器端模塊以及AMD的瀏覽器模塊 爆炸式地普及開(kāi)來(lái)。雖然兩個(gè)都是不錯(cuò)的選擇,但它們的生態(tài)系統(tǒng)是斷開(kāi)的,而且它們的社區(qū)經(jīng)常在Emacs/vi風(fēng)格保持上爭(zhēng)吵不休。
幸運(yùn)的是,TC39——JavaScript的維護(hù)委員會(huì),認(rèn)識(shí)到了統(tǒng)一模塊系統(tǒng)的必要性。ES6模塊提供了AMD和CommonJS兩個(gè)模塊中最好的部分且被直接集成到語(yǔ)言中。
初始化
- ember new my-app
初始化Ember.js工程并創(chuàng)建根目錄,目錄包括app、router等。
開(kāi)啟開(kāi)發(fā)服務(wù)器
- ember server
運(yùn)行測(cè)試程序
- ember test
為了運(yùn)行Qunit測(cè)試程序,你需要Karma(瀏覽器端的PhantomJS插件),盡管我們正在計(jì)劃將其遷移入開(kāi)發(fā)程序以便更好地開(kāi)發(fā)。
你也可以通過(guò)運(yùn)行下面命令來(lái)啟動(dòng)QUnit測(cè)試:
- ember test:server
加入更多的包
Ember CLI提供bower支持,只需使用下面命令:
Ember中的通用Franca模塊是ES6模塊中的一部分,我們會(huì)確保bower模塊能通過(guò)AMD、CommonJS和瀏覽器的全局包的修正,自動(dòng)被Ember應(yīng)用所調(diào)用:
- 為AMD修正提供shim.json和shim目錄。
- 根據(jù)所在的文件系統(tǒng)位置命名木塊(包括版本)
- 在app.js中對(duì)模塊進(jìn)行關(guān)聯(lián) (根據(jù)資源地圖)
- 從bower集成資源地體 (需bower支持)
即便某個(gè)庫(kù)已被AMD所用,你仍可以將其作為ES6的模塊使用:
- import md from "markdown";
每當(dāng)文件發(fā)生改變,最終被瀏覽器載入的關(guān)聯(lián)文件(app.js, app.css等)都是被鎖定的,每個(gè)訪問(wèn)其的HTTP請(qǐng)求都會(huì)被掛起直到新版本被編譯完成。
加強(qiáng)檢查工具功能
如果你正在使用Ember CLI工具開(kāi)發(fā)你的應(yīng)用,Chrome和Firefox將成為你的首選。開(kāi)發(fā)服務(wù)器將會(huì)開(kāi)放一個(gè)接口讓檢查工具進(jìn)行連接,以便為瀏覽器提供額外的環(huán)境信息。
一旦在你的瀏覽器和開(kāi)發(fā)工具之間建立了鏈接,你就可以做出許多有意思的事,但是我們必須事先決定一些事:
- 看見(jiàn)一串bower包
- 看見(jiàn)運(yùn)行結(jié)果
- 審查代碼
- 使用可視化編輯器配置package.json
文件系統(tǒng)布局
下面是一個(gè)簡(jiǎn)略的例子展示了當(dāng)你通過(guò)CLI初始化一個(gè)新的Ember app時(shí)會(huì)看到的布局:
- app/
- controllers/
- models/
- fonts/
- …
- config/
- shim.json
- vendor/
- underscore.js // bower installed
- markdown.js
- lib/
- ember-histogram/ // incubator for packages
- skylight/
- bower.json
- modules/ // non-MVC stuff
- underscore.js
#p#
"Pod"目錄的結(jié)構(gòu)
到目前為止,許多Ember項(xiàng)目都采用Rails風(fēng)格的目錄布局,所有文件都按照類(lèi)型來(lái)分組:
- app/
- controllers/
- post.js
- posts.js
- index.js
- models/
- post.js
- user.js
- templates/
- post.handlebars
- posts.handlebars
- index.handlebars
我們討論出在"pods"功能里把相關(guān)特性歸到一組的布局:
- app/
- config/
- application.js
- serializers/
- models/
- post.js
- user.js
- mixins/
- pods/
- post/
- controller.js
- template.handlebars
- posts/
- controller.js
- template.handlebars
- index/
- controller.js
- template.handlebars
- components/
- google-map/
- component.handlebars
- component.js
- component.css
這個(gè)提議的目錄結(jié)構(gòu)還有待更多的討論。我們通過(guò)觀察現(xiàn)實(shí)世界中許多的不同的app來(lái)看它是否能使Ember app的源代碼管理變得更加容易。
精簡(jiǎn)Ember.js
我們相信在Ember的基礎(chǔ)代碼中依然存在著許多潛在的可以被精簡(jiǎn)的部分。我們會(huì)選取一個(gè)目標(biāo)大小并力爭(zhēng)將整個(gè)工程精簡(jiǎn)至目標(biāo)大小之下。
目前為止我們還未決定到底這個(gè)目標(biāo)大小是多大,但是我們大約劃定了50k的范圍。我們將會(huì)深入探討這些候選要被精簡(jiǎn)的模塊。
分布式組件
在分布式重用、第三方組件和庫(kù)方面仍有一些開(kāi)放性問(wèn)題有待解決。通常我們會(huì)遵從Web組件說(shuō)明書(shū)的指示,但說(shuō)明書(shū)中也存在一些地方并未給出任何指導(dǎo)和提示。當(dāng)處理這些問(wèn)題的時(shí)候,我們會(huì)第一時(shí)間將其反饋給說(shuō)明文檔的作者,并詳細(xì)闡述我們解決問(wèn)題的方法。
還有一些限制是基于對(duì)舊瀏覽器的不支持而引起的,我們正在全力解決這方面的問(wèn)題以便您能在所有瀏覽器中體驗(yàn)Web組件的強(qiáng)大。
命名空間
目前為止,Ember組件共享一個(gè)全局命名空間。如果我有一個(gè)組件叫做area-graphand你也有一個(gè)叫做area-graphand我想在我的app里使用你的組件,那將會(huì)發(fā)生沖突。
不久的將來(lái),在包里的組件將會(huì)按照完全限定路徑尋址。
下面是一個(gè)概念性的面積圖組件:
- {{area-graph@d3 xValue=responseTimes}}
如果你發(fā)現(xiàn)你經(jīng)常會(huì)輸入完全限定路徑,你可以在Handlebars模板的詞法作用域內(nèi)給helper起別名:
- {{import "area-graph" from "d3"}}
我們也可以添加一個(gè)語(yǔ)法讓在一個(gè)包里的 所有helper可用:
- {{import "d3"}}
模板版本/編輯
Handlebars將模板編輯成了一個(gè)中間版本AST. AST在不同的Handlebars版本之間切換。 另外,Handlebars的語(yǔ)法有可能在2.0版本中被擴(kuò)展。
既然這些組件都提供在bower中了,它們是否需要通過(guò)模板預(yù)編譯進(jìn)行精簡(jiǎn)?或是不去理會(huì)直到需要的時(shí)候再去編譯它?
目前為止,我們正在學(xué)習(xí)如何將這些模板精簡(jiǎn)到其原始形式,但我們?nèi)孕韪钜徊降恼{(diào)查。
審查 CSS
今天,許多瀏覽器已經(jīng)不再支持”格式審查“了。分布式組件將會(huì)為其分配相關(guān)的uuid,所有的CSS規(guī)則都將封裝在一個(gè)選擇器中并通過(guò)uuid格式化相應(yīng)的頁(yè)面元素。
目標(biāo)控制
相比于使用{{#each itemController="postItem"}}來(lái)控制目標(biāo),你只需要定義App.PostsItemController(or theapp/controllers/posts-itemmodule),然后它會(huì)自動(dòng)生效。
#p#
HTMLBars
我們?nèi)栽诟櫆y(cè)試HTMLBars,它很有可能在明年與大家見(jiàn)面。Yehuda 、Kris Selden 和Alex Matchneer花費(fèi)了很多時(shí)間在HTMLBar的部署上,他們正在逐步將HTMLBar整合進(jìn)Ember中。
如果你對(duì)HTMLBar并不熟悉,其實(shí)它就是個(gè)HTML5和Handlebar語(yǔ)法組成的組件,它的重要性主要體現(xiàn)在兩個(gè)方面:
首先,它允許我們拋棄{{bind-attr}}Handlebars幫助,而不是下面這種寫(xiě)法:
- <img {{bind-attr src=imageUrl}}>
你可以這樣:
- <img src="{{imageUrl}}">
其次,它使我們可以淘汰掉笨重的metamorph.js 腳本標(biāo)簽,現(xiàn)階段我們使用這些標(biāo)簽追蹤DOM中反饋的值。
在 HTMLBars之前,DOM看起來(lái)是下面這個(gè)樣子:
在運(yùn)用HTMLBars之后:
消除 jQuery 依賴
一旦我們轉(zhuǎn)移到 HTMLBars,Ember.js 和 DOM 之間的相互作用就越小。我們可以把 jQuery 當(dāng)作是一個(gè)可選的依賴,只有通過(guò)全局變量或者 AMD 模塊才能使用它。在力所能及的范圍內(nèi),我們只想確保通過(guò) jQuery 來(lái)刪除組件或者視圖,所以,jQuery UI 部件把存儲(chǔ)在 DOM 上的數(shù)據(jù)通過(guò) jQuery.data() 合理的清理掉。
動(dòng)畫(huà)
我們?nèi)匀辉谧鲋С謩?dòng)畫(huà)的框架,但是現(xiàn)在我們并沒(méi)有特定的 API 建議可以分享。一如既往,我們會(huì)優(yōu)先考慮 API 的正確性而不是在后面的版本重做 API。
支持 IE8
盡管 Windows XP 的生命即將到達(dá)盡頭,我們還是會(huì)繼續(xù)支持 Internet Explorer 8 。我們知道很多 Ember.js 用戶仍然需要目標(biāo)企業(yè)和教育客戶,他們還需要使用 IE8 一段時(shí)間。
EmberConf
EmberConf 2014:正在進(jìn)行中,不久之后我們會(huì)提供更多細(xì)節(jié),但是我想說(shuō),盡可能免費(fèi)到三月。
EmberDart
只是在開(kāi)玩笑!
你能做些什么
如我們之前所說(shuō),Ember是一個(gè)完全的社區(qū)驅(qū)動(dòng)的項(xiàng)目。這里我想感謝團(tuán)隊(duì)的所有核心成員們,他們自掏腰包支付路費(fèi)和住宿費(fèi)用前來(lái)參加這次大會(huì)。
看到Ember社區(qū)的成長(zhǎng)是非常有意義的,并且看到它呈現(xiàn)出JavaScript社區(qū)的領(lǐng)導(dǎo)地位。
我們需要你的幫助共同拓展在瀏覽器上一切可能的疆域。如果你愿意幫助,請(qǐng)通過(guò)#emberjs-devon Freenode加入我們,在那里我們樂(lè)于幫助的社區(qū)可以把你指向正確的方向。(如果你僅僅只想獲得開(kāi)發(fā)Ember app方面的幫助,請(qǐng)?jiān)?emberjs提交你的問(wèn)題)。
如果我們?cè)谶@里忘記提及某些方面,請(qǐng)?jiān)谟锌盏臅r(shí)候在下面的評(píng)論中讓我們知道。
原文鏈接:http://emberjs.com/blog/2013/12/17/whats-coming-in-ember-in-2014.html
譯文鏈接:http://www.oschina.net/translate/whats-coming-in-ember-in-2014