如何利用一个周末时间成为前端工程师的

开发 前端
我认为一个前端工程师需要的唯一东西是一个好用的 API,和一个全面的文档。作为一个后台开发者,你必须提供这两个。所以,前端的工程师的水平取决于你。但是,不要迫使你的前端人员去使用你的工具。

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文件:

  1. {  
  2.   "name": "travis-light",  
  3.   "dependencies": {  
  4.     "jquery": "~1.8.3"  
  5.   }  

运行“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插件,太简单了!

  1. requirejs: {  
  2.     compile: {  
  3.         options: {  
  4.             name: "main",  
  5.             baseUrl: "js/",  
  6.             mainConfigFile: "js/main.js",  
  7.             out: "dist/compiled.js"  
  8.         }  
  9.     }  

在TravisLight 里面编译CSS有两步: 

首先、把CSS里面的所有图片用grunt-image-embed 插件嵌进来:

  1. imageEmbed: {  
  2.     application: {  
  3.         src: 'css/application.css',  
  4.         dest: 'dist/application-embed.css',  
  5.         deleteAfterEncoding : false  
  6.     }  

然后,用grunt-contrib-mincss  插件压缩CSS文件;

  1. mincss: {  
  2.     compress: {  
  3.         files: {  
  4.             'dist/compiled.css': [  
  5.                 'css/bootstrap.min.css',  
  6.                 'dist/application-embed.css'  
  7.             ]  
  8.         }  
  9.     }  

现在,为了使用那些编译过的JS和CSS文件,我用 grunt-targethtml 插件编译HTML。

  1. targethtml: {  
  2.     dist: {  
  3.         src: 'index.html',  
  4.         dest: 'dist/index.html'  
  5.     }  

index.html文件如下:

  1. <!doctype html> 
  2. <html lang="en"> 
  3.     ...  
  4.  
  5.     <body data-api-url="https://api.travis-ci.org"> 
  6.         <!--(if target dist)> 
  7.         <script data-main="compiled" src="js/require.js"></script> 
  8.         <!(endif)--> 
  9.         <!--(if target dummy)><!--> 
  10.         <script data-main="js/main" src="components/requirejs/require.js"></script> 
  11.         <!--<!(endif)--> 
  12.     </body> 
  13. </html> 

arget dummy 是用于开发的一段默认代码。这是一种维持单个HTML文件从开发到成品过程中(或其他任何你想实现的环境)不变的好方式。在找到这个插件之前我一直不知道该怎么办。

最后,我又用 grunt-contrib-copy 插件实现复制一些文件到dist/ 文件夹。

  1. copy: {  
  2.     dist: {  
  3.         files: {  
  4.             'dist/js/require.js': 'components/requirejs/require.js'  
  5.         }  
  6.     }  

运行 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。使用 NPMNode.js 包管理器可以安装这些库。NPM 需要一个 package.json 文件维持项目列表的依赖关系和设备驱动程序的依赖关系:

  1. {  
  2.   "name""TravisLight",  
  3.   "version""0.0.1",  
  4.   "dependencies": {  
  5.   },  
  6.   "devDependencies": {  
  7.     "mocha""~1.7.4",  
  8.     "chai""~1.4.0" 
  9.   }  

运行npm install在node_modules/目录下安装Mocha 和 Chai。

现在你需要一个 test/index.html 文件在浏览器中跑这个测试。

  1. TravisLight Test Suite  
  2.  
  3.    
  4.    
  5.  <div> 
  6.       
  7.  
  8.    
  9.    
  10.  </div> 

首先,在加载完jQuery 和 RequireJS后加载Mocha 和 Chai。然后加载一个 setup.js 文件,它包含了Mocha 和 RequireJS 的配置文件,和在这个测试文件中用到的两个全局变量assert 和 expect:

  1. var assert = chai.assert,  
  2.     expect = chai.expect;  
  3.  
  4. mocha.setup({  
  5.     ui: 'bdd' 
  6. });  
  7.  
  8. require.config({  
  9.     baseUrl: '../js/',  
  10.  
  11.     ...  
  12. }); 

我决定尝试行为驱动开发(BDD)模式,不过只只是一种尝试。这里有一个 TravisLight 路由测试文件的例子:

  1. define(  
  2.     [  
  3.         'router' 
  4.     ],  
  5.     function (router) {  
  6.         "use script";  
  7.  
  8.         describe('router'function () {  
  9.             it('should be an instance of Backbone.Router'function () {  
  10.                 expect(router).to.be.an.instanceOf(Backbone.Router);  
  11.             });  
  12.  
  13.             it('should have a routes property'function () {  
  14.                 expect(router.routes).to.be.an('object');  
  15.             });  
  16.         });  
  17.     }  
  18. );  

要是你想了解更多,可以看看test/directory 目录。

成功!哈,我写了一个JavaScript应用程序测试。

在Javascript项目中使用Travis-CI

我是Travis-CI的超级粉丝,我打算将TravisLight加入其中。而Grunt使得这变得非常简单。

grunt-mocha插件能够使用MochaPhantomJS进行测试。下面是这个插件在TravisLight中的配置

  1. mocha: {  
  2.     all: [ 'test/index.html' ]  

一个简单的grunt mocha 示例如下(使用了PhantomJS):

  1. $ grunt mocha  
  2. Running "mocha:all" (mocha) task  
  3. Testing index.html...................OK  
  4. >> 19 assertions passed (0.14s)  
  5.  
  6. Done, without errors. 

还不错。然而,Travis-CI需要通过一个.travis.yml文件进行配置。Javascript项目需要node_js环境来支持Travis-CI,并且需要通过Bower安装一系列的库来运行应用程序:

  1. language: node_js  
  2.  
  3. node_js:  
  4.     - 0.8  
  5.  
  6. before_script:  
  7.     - export PATH=$PATH:`npm bin`  
  8.     - bower install 

Travis-CI 首先运行npm install,然后运行npm test。第二个命令需要在TravisLight的package.json中进行配置

  1. {  
  2.   ...  
  3.  
  4.   "scripts": {  
  5.     "test": "./node_modules/grunt/bin/grunt test"  
  6.   }  

结尾

我真的很享受作为一个前端工程师的经历,并且我爱上了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

责任编辑:林师授 来源: OSCHINA
相关推荐

2015-08-24 09:02:49

前端工程师

2015-08-17 10:32:06

前端工程师优秀

2021-01-31 17:36:07

前端工程师职位

2016-01-28 11:18:09

卓越前端工程师

2013-01-14 09:51:56

架构设计前端重构工程师

2012-11-29 10:05:20

2021-02-01 22:23:06

前端工程师开发

2021-01-18 09:00:00

人工智能机器学习工程师

2016-09-22 16:14:45

前端设计Photoshop

2009-03-20 09:32:52

系统集成工程师素质

2018-03-29 11:23:25

IT人员云计算工程师

2019-06-24 09:40:17

前端前端工程师开发工具

2020-12-17 12:43:43

前端gup4.0webpack

2019-03-05 09:57:08

php编程语言工程师

2016-02-25 11:42:19

2023-08-29 23:50:48

2015-08-26 14:18:25

Web前端工程师价值

2017-04-14 10:37:21

2014-05-13 13:42:54

工程师流程管理

2013-08-01 10:58:53

点赞
收藏

51CTO技术栈公众号