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