去年年初给自己定了一个学习javascript前端开发的计划,这个计划和其它的新年计划一样,随着一月份的忙碌,已经被我抛到九霄云外了。转眼间到了年末,心想还是2014,还有机会,于是在圣诞期间摸了摸Javascript,当然,一周的时间只能学个皮毛,但是好在开了头了,万事开头难,开了头了,后面就好开始搞了。
在讨论具体技术之前,我想先说说自己作为一个标准的中间件程序猿为啥要搞前端技术。第一个理由就是每个攻城狮都有一个Full Stack Developer的梦。其实这个理由说来有些好笑。Javascript和前端技术的逆袭其实就是这几年的事,想想上一代的程序员,哪个不是Full Stack Developer啊。那时候像ASP, JSP啥的都是服务端渲染,哪有啥前端工程师啊?只是这几年随着软件开发这个行业的发展,人多了,不得不把软件开发分开,所谓术业有专攻,其实也是只有这样才能让更多人从事程序猿这个坑爹的行业。
第二个理由就是受够了单位那些所谓前端程序员的气。在单位,前端程序员天生高贵,不需要了解业务逻辑,设计有专门的UX设计师,每天可以堂而皇之的纠结这个下拉菜单是放在左边好,还是右边好,这种没节操的问题。一旦要求他们写个业务逻辑,他们就冠冕堂皇的用我是做界面的来回绝你。做起项目来,界面可以先简单做一个,看客户反馈,即使简单做也需要很长时间,因为我们要调试CSS啦,不像你们搞中间件的,就是从数据库里读个数据,没有技术含量。这种话听多了,总是想哪天老子也做个界面,老子做得肯定比你们快也比你们好。这种黑前端程序员的心态,也是一种很好的动力。
第三个理由说来惭愧,就是自己实在没啥事。单位的活,不想干,干了一年了,烦了。外面天寒地冻的,懒得出门。研究中间件和后端技术吧,这个搞了一年了,想吐了,鱼翅也不能天天吃啊。
上面废了半天话,下面进入正题。现在主流的前端开发都是single page+javascript框架+CSS配合后端Json based restful service的形式。在开发环境中,以node.js为主流。下面是一些常用的node工具:
1. npm - node下的dependency management工具
2. bower - node下的第三方javascript的dependency management工具
3. gulp - node下的build工具,它的前任是grunt。区别和Maven与Gradle差不多。Grunt和Maven一样,是基于配置的。gulp和Gradle类似,是基于代码的。当然gulp是基于javascript代码,而不是Groovy。
4. static - 对于大多数single page网页,我们只需要一个可以支持传输静态页面的web服务器就够了。static刚刚好,这里的选择很多,从apache,到express,到python。static相对比较方便,零代码,直接命令行运行就好,够用了。
5. gulp-livereload - 这是一个gulp的插件,特别推荐,和chrome和firefox的livereload插件配合使用,在本地修改网页存储后,浏览器会直接刷新,省去了F5。省事舒心。
开发IDE方面,推荐Sublime Text。虽然不支持auto complete,但是这个家伙短小精悍,用起来省心。更高级的话用webstorm。
我用到的几个javascript包:
1. backbone.js - 没有选择Angular.js,是因为Angular实在比较麻烦,一般做个网页啥的完全用不到这么复杂的MVC框架。当然,Angular学起来也远比backbone要费时间,从实用的角度,backbone已经完全可以满足我的需要了。
2. underscore.js - 这个东西是backbone的dependency,所以用backbone就一定要有。在处理数据的时候,underscore就像java的guava collection和.net的linq一样,方便,而且让代码更好懂。
3. bootstrap - 这个严格来说不是javascript包,而是css包,用起来方便省心。
4. require.js - require.js上手比较别扭,不过用多了,就好了。
5. qunit.js - 虽然比不上Mocha啥的,不够用惯了。和gulp集成,挺方便的。
整体环境搭下来,给我的感觉是真的挺好用的,整个环境相当轻量和简洁,不像Java开发环境,感觉很笨重,当然现在Gradle什么的也挺好,只是基于Java的工具启动好慢,不像gulp,运行了把窗口放在那里就好了。从工具的角度来说,前端工程师是有瞧不起中间件程序员的资本的,不过不是锅好,就能炒出好菜的。
作为学习的副产品,做了一个简单的界面,通过现有的API,整合了单位项目github,teamcity,和jira的信息,打开界面项目的情况一目了然。后面计划整合一个health check的界面,把最近开发的几个web service的health check都搬过来,这样管理非生产环境可以方便一点。
从前端技术上,下面想看的是backbone与react的整合。