如何利用一個(gè)周末時(shí)間成為前端工程師的
2周前，我將 TravisLight 開(kāi)源了，這是一個(gè)建立監(jiān)控的工具，也是一個(gè)用于 Travis-CI 的構(gòu)件監(jiān)控工具。出于興趣，我用了一個(gè)周末的時(shí)間做了這個(gè)項(xiàng)目，而且我是以一個(gè)真正的前端開(kāi)發(fā)者的角色來(lái)做的。
當(dāng)我在 Nelmio 的時(shí)候，盡管我做了一些javascript的應(yīng)用，但我參與的更多是后臺(tái)開(kāi)發(fā)。大部分時(shí)間我是在寫API給前端調(diào)用，而且在工作中經(jīng)常會(huì)出現(xiàn)偏差。實(shí)際上，我認(rèn)為每一個(gè)做后臺(tái)的開(kāi)發(fā)者應(yīng)該花些時(shí)間在前段開(kāi)發(fā)上，補(bǔ)充一些前端知識(shí)，反之亦然。這是讓你明白在工作中自己真正需要做些什么的最好的方法之一。
我認(rèn)為一個(gè)前端工程師需要的唯一東西是一個(gè)好用的 API，和一個(gè)全面的文檔。作為一個(gè)后臺(tái)開(kāi)發(fā)者，你必須提供這兩個(gè)。所以，前端的工程師的水平取決于你。但是，不要迫使你的前端人員去使用你的工具。的確，Assetic 對(duì)于 PHP 是一個(gè)很好的開(kāi)發(fā)工具，但是它對(duì)于前端工程師來(lái)說(shuō)并不是一個(gè)好的工具。有許多更好的開(kāi)發(fā)工具可以編譯 JS/CSS 文件，寫 JavaScript，例如 Grunt。讓你前端工程師使用自己的工具吧！在一個(gè) Symfony2 項(xiàng)目中，我會(huì)命令把所有的 JS/CSS 文件都放在 web/ 的文件夾中，而不是放在 *Bundle/Resouces/public 這樣的文件夾中，這樣，前端就不用為了找 JS/CSS 文件夾而去瀏覽整個(gè)項(xiàng)目了。
但這不是我寫這篇文章的目的，讓我來(lái)解釋我為什么和怎樣寫出 TravisLight 和我發(fā)現(xiàn)的工具吧。
最初
我想學(xué)習(xí)一下Backbone.js，因此我著手閱讀了Backbone Fundamentals這本書。如果你對(duì)Backbone還不甚了解，那我給你介紹下，Backbone 是一個(gè)JavaScript 框架，它可以為你編寫Web程序提供一個(gè)架構(gòu).
眾所周知，在項(xiàng)目中實(shí)踐是最佳的編程學(xué)習(xí)方式，因此，我決定使用Travis-CI API去寫一個(gè)Backbone.js 應(yīng)用程序，也就是TravisLight 。TravisLight 正是那個(gè)我一直想要的，用來(lái)管理我的開(kāi)源項(xiàng)目的簡(jiǎn)明工具。這真是一個(gè)絕佳的起步項(xiàng)目，尤其適合在周末進(jìn)行。
我使用了Lo-Dash，一個(gè)Underscore.js的替代品，它具有風(fēng)格一致，定制靈活，性能優(yōu)越等優(yōu)點(diǎn)。同時(shí)，我也使用了RequireJS和Moment.js。這樣，我就需要一個(gè)工具去管理所有的這些依賴，因此我關(guān)注了下來(lái)自Twitter的Bower。
Bower,網(wǎng)頁(yè)包管理器
Bower是一個(gè)網(wǎng)頁(yè)包管理器，也就是JS/CSS庫(kù)包管理器。雖說(shuō)它現(xiàn)在是一個(gè)包下載器，但還是有必要用它來(lái)避免對(duì) jQuery, Twitter Bootstrap等進(jìn)行版本控制。你只需要一個(gè)像這樣的component.json文件：
- {
- "name": "travis-light",
- "dependencies": {
- "jquery": "~1.8.3"
- }
- }
運(yùn)行“bower install”把依賴關(guān)系安裝到組件或文件夾。 現(xiàn)在，我可以開(kāi)始著重弄我的應(yīng)用。每次我需要一個(gè)新的庫(kù)只要運(yùn)行“ bower install--save”來(lái)安裝和更新“component.json”文件就行了。 有時(shí)候，我需要使用一些工具幫助我在應(yīng)用上完成一些像運(yùn)行jshint或編譯文件的任務(wù)。于是我試了“Grunt”——一個(gè)Javascript編譯工具，感覺(jué)還不錯(cuò)哦。
Grunt, JavaScript 編譯工具
Grunt是一個(gè)基于任務(wù)的命令行 JavaScript 工程編譯工具. 第一眼看上去, 這個(gè)工具似乎難以使用，但是一旦你用了，它太棒了！你能夠驗(yàn)證(Lint)你的文件，縮小JS/CSS文件，運(yùn)行測(cè)試單元等等。
在TravisLight，我主要使用Grunt 打包應(yīng)用程序. 打包應(yīng)用程序意味著:
- 編譯JavaScript文件;
- 編譯 CSS 文件;
- 在 HTML 標(biāo)記中使用編譯好的文件;
- 復(fù)制依賴庫(kù).
編譯Javascript文件就是編譯 RequireJS 的依賴關(guān)系。幸虧有 grunt-contrib-requirejs插件，太簡(jiǎn)單了！
- requirejs: {
- compile: {
- options: {
- name: "main",
- baseUrl: "js/",
- mainConfigFile: "js/main.js",
- out: "dist/compiled.js"
- }
- }
- }
在TravisLight 里面編譯CSS有兩步：
首先、把CSS里面的所有圖片用grunt-image-embed 插件嵌進(jìn)來(lái)：
- imageEmbed: {
- application: {
- src: 'css/application.css',
- dest: 'dist/application-embed.css',
- deleteAfterEncoding : false
- }
- }
然后，用grunt-contrib-mincss 插件壓縮CSS文件；
- mincss: {
- compress: {
- files: {
- 'dist/compiled.css': [
- 'css/bootstrap.min.css',
- 'dist/application-embed.css'
- ]
- }
- }
- }
現(xiàn)在，為了使用那些編譯過(guò)的JS和CSS文件，我用 grunt-targethtml 插件編譯HTML。
- targethtml: {
- dist: {
- src: 'index.html',
- dest: 'dist/index.html'
- }
- }
index.html文件如下：
- <!doctype html>
- <html lang="en">
- ...
- <body data-api-url="https://api.travis-ci.org">
- <!--(if target dist)>
- <script data-main="compiled" src="js/require.js"></script>
- <!(endif)-->
- <!--(if target dummy)><!-->
- <script data-main="js/main" src="components/requirejs/require.js"></script>
- <!--<!(endif)-->
- </body>
- </html>
arget dummy 是用于開(kāi)發(fā)的一段默認(rèn)代碼。這是一種維持單個(gè)HTML文件從開(kāi)發(fā)到成品過(guò)程中（或其他任何你想實(shí)現(xiàn)的環(huán)境）不變的好方式。在找到這個(gè)插件之前我一直不知道該怎么辦。
最后，我又用 grunt-contrib-copy 插件實(shí)現(xiàn)復(fù)制一些文件到dist/ 文件夾。
- copy: {
- dist: {
- files: {
- 'dist/js/require.js': 'components/requirejs/require.js'
- }
- }
- }
運(yùn)行 grunt package 執(zhí)行所有任務(wù)。查看 TravisLight的 grunt.js 文件可以獲得更多細(xì)節(jié)尤其是一些別名。
這時(shí)候，我的Javascript應(yīng)用已經(jīng)跑起來(lái)了。我看了看一些Javascript測(cè)試庫(kù)。雖然我對(duì)QUnit 有所了解但我還是想用一些沒(méi)用過(guò)的，于是我是試了 Mocha 和 Chai。
#p#
測(cè)試Backbone.js主應(yīng)用
在Javascript世界里，有大量的測(cè)試庫(kù)像 QUnit, Mocha, Jasmine, Chai, Sinon.js, Expect.js, Should.js等等。
我試了Mocha 和 Chai。使用 NPM 和Node.js 包管理器可以安裝這些庫(kù)。NPM 需要一個(gè) package.json 文件維持項(xiàng)目列表的依賴關(guān)系和設(shè)備驅(qū)動(dòng)程序的依賴關(guān)系：
- {
- "name": "TravisLight",
- "version": "0.0.1",
- "dependencies": {
- },
- "devDependencies": {
- "mocha": "~1.7.4",
- "chai": "~1.4.0"
- }
- }
運(yùn)行npm install在node_modules/目錄下安裝Mocha 和 Chai。
現(xiàn)在你需要一個(gè) test/index.html 文件在瀏覽器中跑這個(gè)測(cè)試。
- TravisLight Test Suite
- <div>
- </div>
首先，在加載完jQuery 和 RequireJS后加載Mocha 和 Chai。然后加載一個(gè) setup.js 文件，它包含了Mocha 和 RequireJS 的配置文件，和在這個(gè)測(cè)試文件中用到的兩個(gè)全局變量assert 和 expect：
- var assert = chai.assert,
- expect = chai.expect;
- mocha.setup({
- ui: 'bdd'
- });
- require.config({
- baseUrl: '../js/',
- ...
- });
我決定嘗試行為驅(qū)動(dòng)開(kāi)發(fā)（BDD）模式，不過(guò)只只是一種嘗試。這里有一個(gè) TravisLight 路由測(cè)試文件的例子：
- define(
- [
- 'router'
- ],
- function (router) {
- "use script";
- describe('router', function () {
- it('should be an instance of Backbone.Router', function () {
- expect(router).to.be.an.instanceOf(Backbone.Router);
- });
- it('should have a routes property', function () {
- expect(router.routes).to.be.an('object');
- });
- });
- }
- );
要是你想了解更多，可以看看test/directory 目錄。
成功！哈，我寫了一個(gè)JavaScript應(yīng)用程序測(cè)試。
在Javascript項(xiàng)目中使用Travis-CI
我是Travis-CI的超級(jí)粉絲，我打算將TravisLight加入其中。而Grunt使得這變得非常簡(jiǎn)單。
grunt-mocha插件能夠使用Mocha和PhantomJS進(jìn)行測(cè)試。下面是這個(gè)插件在TravisLight中的配置：
- mocha: {
- all: [ 'test/index.html' ]
- }
一個(gè)簡(jiǎn)單的grunt mocha 示例如下（使用了PhantomJS）：
- $ grunt mocha
- Running "mocha:all" (mocha) task
- Testing index.html...................OK
- >> 19 assertions passed (0.14s)
- Done, without errors.
還不錯(cuò)。然而，Travis-CI需要通過(guò)一個(gè).travis.yml文件進(jìn)行配置。Javascript項(xiàng)目需要node_js環(huán)境來(lái)支持Travis-CI，并且需要通過(guò)Bower安裝一系列的庫(kù)來(lái)運(yùn)行應(yīng)用程序：
- language: node_js
- node_js:
- - 0.8
- before_script:
- - export PATH=$PATH:`npm bin`
- - bower install
Travis-CI 首先運(yùn)行npm install，然后運(yùn)行npm test。第二個(gè)命令需要在TravisLight的package.json中進(jìn)行配置
- {
- ...
- "scripts": {
- "test": "./node_modules/grunt/bin/grunt test"
- }
- }
結(jié)尾
我真的很享受作為一個(gè)前端工程師的經(jīng)歷，并且我愛(ài)上了JavaScript 社區(qū)。如今，有大量超贊的Javascript庫(kù)和框架，顯然我沒(méi)有足夠的時(shí)間去一一嘗試。
起初，我將這篇博客命名為JavaScript from the trenches，因?yàn)槲覜Q定將我所了解的Javascript內(nèi)容重新學(xué)習(xí)一遍。我從來(lái)不認(rèn)為自己是一個(gè)前端工程師，抑或Javascript開(kāi)發(fā)工程師。我總是頻繁地碰到這樣一類人，他們認(rèn)為JavaScript/CSS太簡(jiǎn)單了，不值得一學(xué)。我想他們誤入歧途了，我對(duì)真正的前端工程師總是懷著無(wú)比崇敬的心情。
總的來(lái)說(shuō)，這段經(jīng)歷改變了我對(duì)API的想法。此外，進(jìn)行一個(gè)真實(shí)的項(xiàng)目，盡管是像TravisLight這樣的小項(xiàng)目，使我的大腦更加靈活，我從來(lái)沒(méi)有這么快了解新事物。
順便說(shuō)一下，如果你發(fā)現(xiàn)任何錯(cuò)誤，請(qǐng)fork并且編輯這篇博客。非常感謝！
英文原文：Being A Frontend Developer For A WeekEnd
譯文鏈接：http://www.oschina.net/translate/being-a-frontend-developer-for-a-weekend
