开发富应用和单页面应用须要的知识

版权声明：转载时请以超连接形式标明文章原始出处和做者信息及本声明
http://www.blogbus.com/monw3c-logs/221368642.html

这个题目有点大, 由于对于开发富应用和SPA(单页面应用, Single Page Application), 一个前端工程师须要掌握太多太多知识和工具了. 这里只说我本身最近半年在摸索和研究前端富应用和SPA相关技术的过程当中的一些经验和总结.

选择合适的开发IDE

一个好的IDE可让你敲键盘的次数大大减小, 我我的推荐使用Sublime Text, 速递快, 功能强大, 可扩充, 这也是我目前正在使用的IDE.

选择合适的开发语言

呃, 难道还有别的选择? 开发前端应用不都是用Javascript么? 对的, 由于如今有了CoffeeScript. 相比于Javascript的类C++/Java静态语言语法, CoffeeScript提供了更贴近天然语言的动态语言语法, 更少的代码, 更少的语法漏洞, 更好的代码可读性.

选择合适的Javascript前端MVC框架

Javascript 程序很难调试, 特别是当代码行数超过必定量级以后. 为了让程序逻辑更有条例, 与服务器端的web框架相似, 前端也有不少Javascript库或者框架提供了MVC或类MVC架构. 按照MVC架构进行设计, 能够很清晰地将Module(数据模块), View(页面展现), Controller(用户行为响应控制)进行分离. 对于小型web应用来讲, 这可能可有可无, 甚至MVC带来的弊端会掩盖它的优势, 但对于一个超过上千行的web应用来讲, 一个清晰的程序架构能够极大地减小模块间的耦合性.

你们能够仔细看一下Top 10 Javascript MVC框架的对比. 我我的感受, Backbone的代码更紧凑一些, 开发社区也比较活跃.

模块定义与加载管理

Javascript 语言自身不提供代码的加载管理, 当JavaScript代码分红多个模块, 处于不一样文件中时, 如何管理模块之间的依赖关系以及文件的加载顺序, 就会变成一个很是棘手的事情. 而且JavaScript自身不提供名字空间的管理, 不一样模块, 不一样的JavaScript库之间的都有可能出现命名冲突.

AMD(Asynchronous Module Definition)是用来规范如何定义模块及其依赖项, 以及如何异步加载模块. 你们能够参考Addy Osmani的博文Writing Modular JavaScript With AMD, CommonJS & ES Harmony来了解具体的细节.

目前前端使用最普遍的前端AMD库应当是RequireJS.固然还有淘宝玉伯的Seajs.

代码质量静态检查

Javascript代码的书写格式很是自由, 甚至带着错都能运行下去, 这也是为何JavaScript代码很难调试的缘由之一.

进行代码质量的静态检查能够极大减小因为语法漏洞或者拼写疏忽带来的这些额外错误, 推荐使用jshint. 若是使用CoffeeScript, 这步能够省略了, CoffeeScript编译后的代码都能经过jshint的检测.

单元测试

单元测试是一个很是大的话题, 我没有办法用简短的一段话或者一篇文章将单元测试涉及到的方法和工具都介绍清楚.

技术大牛们都不肯意作单元测试, 固然, 不多有软件工程师愿意认可本身不是技术大牛:). 由于人员, 时间或者其余各类因素, 不少软件工程师们都愿意首先舍弃单元测试, 去保证功能的实现.

这 里我不想挑起争论, 但个人经验的确是, 从我的角度上看, 单元测试能很大加深程序员对代码的理解程度, 加速我的能力的提高; 从项目角度上看, 技术经理须要权衡当前的开发, 回归测试和后继的代码维护成本之间的平衡, 而后决定是否实施单元测试, 以及多少程度的单元测试, 这是技术经理的职责.

在前端web应用中比较经常使用的单元测试框架包括：

• Jasmine
• QUnit
• Mocha

Mock库能够采用SinonJS. 若是愿意, 还能够采用Should, Expect, Chai等Assertion库.

另外, 若是但愿在持续集成中加入对测试的支持, 还须要加入Non-GUI浏览器的支持, 目前采用比较多的方案是:

• PhantomJS
• Zombie

因为Zombie当前的版本还不能支持RequireJS, 所以我更倾向于使用PhantomJS.

Minification & Concatenation

为了提升web应用的加载速度, 必须对Javascript文件, CSS文件进行Minification和Concatenation, 根据经验, 优化后的代码加载速度比优化前的要提升数倍.

经常使用的工具包括:

• YUI Compressor
• Google Closure Compiler
• UglifyJS

大部分开源的JavaScript构建工具都集成了对这些工具的支持, 所以不必在这些工具上面花太多精力. 使用了RequireJS的应用, 能够直接使用其自带的r.js进行代码优化.

构建和部署

任 何web应用工程都须要构建和部署, 一个自动化的构建和部署脚本能让编程人员更加专一于应用自己, 而不被繁琐的流程所困扰. 自动化的构建和部署是一个web前端项目最基本的要求, 当项目开始的时候, 项目组最好能在头两个迭代周期就完成自动化的构建和部署脚本的开发.

目前使用比较多的构建工具备:

• js-build-tools
• jake
• CoffeeScript自带的cake
• make
• grunt

我我的比较倾向于grunt, 若是工程中用了RequireJS, bbb(grunt扩展)是更好的选择.

在网络地址本例子工程中, 我使用grunt/bbb开发了构建和部署脚本, 能够完成:

• 文件的复制和清除
• CoffeeScript的编译
• JSHint
• Minification & Concatenation
• 在Phantom环境下运行Jasmine单元测试
• Debug/Release Web服务器

感兴趣的人能够去看看上述例子工程的grunt.js配置文件, 也能够将这个例子工程做为web前端项目的模板.

下面的几点感触和具体的技术细节无关, 可是我我的以为, 对于每一个想以编程做为本身职业规划的程序员来讲, 这几点尤为重要.

了解业界的技术发展动态

软件技术发展很快, 对于热爱技术的程序员来讲, 必须常常更新本身的知识, 才能保证本身不会落伍. 所以, 天天都须要花必定时间去阅读, 了解行业最新的技术发展动态.

个人习惯是用Google Reader订阅几个常常更新的前端技术相关的RSS:

• Addy Osmani’s Blog
• DailyJS
• HTML5研究小组

另外, 有些邮件周报也很不错:

• JavaScript Weekly
• HTML5 Weekly

多阅读开源代码, 最好参与感兴趣的开源项目

GitHub是一个很是有用的站点, 在上面能看到那些大牛们是怎么讨论问题, 如何思考问题, 以及如何实现或者修正的. 阅读开源项目的文档能了解概要, 若是须要了解细节, 最有效的方式是阅读代码, 特别是看针对问题的提交记录.

善于利用互联网工具

遇到问题的时候, 要知道如何去寻找问题的答案

StackOverflow是一个很是有名的编程问答站点, 我所遇到的大部分编程问题都能在上面找到答案, 即使没有答案, 也能找到其余人对这个问题的考虑. 另外, 别忘了强大的Google Search. 若是Google被墙, 能够考虑用Bing. 我不喜欢百度, 由于其搜索的命中率过低了.

善于使用云端的工具

选择合适的工具对于软件项目来讲, 能够极大地提升工做效率, 起到事半功倍的效果. 好的商业软件大多须要支付巨额的费用, 而且搞很差还水土不服. 为了控制成本, 能够多尝试尝试云端的工具. 在知乎上有关于这些工具的讨论, 你们有兴趣能够去看看别人怎么作的.

多参与技术社区活动, 学会分享

多参加技术社区的活动, 包括线上的技术解答, 以及线下的技术讲座等. 分享越多, 得到也就越多.