构建移动Web运行程序的技术堆栈

编写web运行程序时，有很多的技术决策。笔者最近回来编写现代Web运行程序，并宿愿总结一些曾经在开发周期环节中做了记载零散的想法。这篇文章是关于一套对笔者最近开发的名目有协助的框架。笔者重温了一些最关键的框架类型，其中每一个可以开展来写一篇文章。这并不是一个宽泛的现有产品相比，只是一个笔者最近经常使用的局部技术。

只管笔者的重点是移动优先， 笔者以为，这套技术可以运行在普通的web运行程序。 笔者的选择和数据支持思考了几个要求：

基于JavaScript(CoffeeScript，Dart，相对值得仔细看看，但我想防止惹起保守选用)

必定在现代阅读器上班良好(IOS ***ndroid 4)

筛选一个MVC框架

在本地UI的运行程序开发中模型视图控制器形式曾经经常使用了几十年。其基本思绪是分开示意层(用户界面，动画，输入)和数据层(存储，通信，数据)。有其余相似的形式，如MVVM的(模型视图的ViewModel)，但关键的想法是在展现和数据层之间有定义良好的分别，为了更洁净的代码和常年的保养：

有许多JavaScript模型视图控制器框架的产品。有一些如Backbone.js和Spine.js是用纯代码编写的，而其余像Knockout.js和Angular依托DOM数据属性绑定。那些依赖HTML5数据DOM属性的分别视图和数据的MVC系统被以为是不对的。这不包含Knockout.js和Angular框架。 spine.js比 CoffeeScript更容易，依据我最后的要求扫除了CoffeeScript。

backbone.js比大少数框架更受欢迎(兴许除JavaScriptMVC外，仿佛像一个死的名目)，还设有一个生长的开源社区。关于笔者的运行程序栈，笔者选用了Backbone.js。欲了解更多无关筛选一个MVC的消息，检出TodoMVC，它经常使用不同的MVC框架成功相反的Todo运行程序。还可以看到这个MVC框架的比拟，它剧烈赞成Ember.js，一个出现相对较晚的框架。笔者尚未无时机经常使用它，但它在我的清单上。

选用一个模板引擎

要在网络上树立一个谨严的运行程序，你无法防止地要树立大型的DOM树。假设经常使用JavaScript API来操作DOM，不如经常使用基于字符串的模板编写html来得更繁难高效。JS模板曾经逐渐构成一个奇异的商定，嵌入模板的内容到脚本标志内：。经常使用一切的模板引擎的基本做法是作为一个字符串来加载模板，构建模板参数，而后经过模板引擎模板和参数运转。

backbone.js依赖于Underscore.js，它有一个有些局限的有详细语法的模板引擎。有其余可供选用，包含jQuery模板，Handlebars.js，Mustache.js和许多其余的。 jQuery模板曾经被jQuery团队预备废除了，所以我没有思考这个选项。Mustache是一个跨言语的模板系统，具备繁难和成熟的选择，以支持尽或者少的逻辑。理想上，在Mustache最复杂的结构是遍历一个对象数组的方式。 handlebars.js建于Mustache之上，参与一些不错的配置，如预编译模板和模板表白式。关于笔者而言，并不须要这些额外的配置，而后选用了笔者的模板平台Mustache.js。

在普通状况下，笔者的印象是，现有的模板框架可比拟的配置是很少的，因此选择在很大水平上是团体喜好的疑问。

选用一个CSS框架

CSS框架是必无法少的工具，用来裁减CSS如变量等繁难的配置集，创立分层的CSS选用器的方式，以及一些更先进的配置。这实质上是创立了一个新的言语：CSS的增强版本(权且称之为它的CSS++)。为便于开发，一些框架在阅读器中成功了一个JavaScript的CSS+ +解释器，而一些其余框架让你监控一个CSS+ +文件，并每当有更改就编译它。一切的CSS框架应提供命令行工具来编译CSS++成CSS给开发。

像模板言语一样，也有很多选用。笔者的选用是出于团体的语法偏好，笔者更青睐SCSS，由于它防止了像@怪异的语法。 SCSS的一个缺陷是，它并没有附带一个JavaScript解释器(有一个非官网的，笔者还没有试过)，但可用命令行监督器。还有其余相似的CSS框架，包含LESS和Stylus。

如何规划视图Views

HTML5提供了多种方式来规划内容，MVC框架对这些规划技术的经常使用无要求，留给开发者你一点艰巨。

普通来说，对documents相对位置是适合的，但对apps除外。应防止相对定位，像tables。许多Web开发人员曾经转向经常使用float属性对准元素的，但是这只是第二理想的构建运行程序的观念，由于它没有相似运行程序的规划，造成许多奇异的疑问和臭名昭著的clearfix hacks。

经过多年来的规划与各种网络技术的试验，笔者以为一个固定的定位和flex box的模型相联合是移动互联网运行的理想选用。笔者经常使用的是将屏幕上的界面元素(页眉，侧边栏，页脚等)固定定位。flex box 模型对在页面上规划重叠视图(Stacked views)是很棒的(水平或垂直的)。只要CSS盒模型显著地对界面设计启动了提升，十分相似Android的LinearLayout 治理器。关于无关flex box模型的更多消息，请阅读保罗的文章，并留意该规范正在由一个新的，非向后兼容的版本取代。

自顺应Web运行程序

***一节，在这个疑问上：笔者鼎力倡议创树立施特定的用户界面。这象征着为不同的方式屏幕从新编写视图代码局部。幸运的是，MVC形式，使得它比拟容易为多个视图(如平板电脑和手机)重用业务逻辑model。

iOS Flipboard演示了这个想法很好，它为平板电脑和手机用户提供了为每个设施形状高度定制的体验。手机用户界面特意为垂直点击启动了提升，准许单手经常使用。平板的UI让两手反面持有设施上班良好。

输入的思考

移动用户与您的运行程序启动交互的关键方式是经过用手指触摸屏幕。这与基于鼠标的互动相当不同，由于有额外9点在跟踪屏幕，这象征着开发人员编写移动运行程序时，须要放弃移动鼠标事情。此外，在移动鼠标事情有300ms提前点击的疑问(有一个驰名的触摸式的处置方法)。在移动阅读器经常使用这些事情的详细消息，请参阅我的触摸事情的文章。

只要S /mousedown/ touchstart/一切的事情处置程序是不够的。有 一套全新的用户等候的触摸设施手势，如点击、经过阅读图像列表导航。只管苹果公司有一个不为人知的手势API，但没有在网页上做手势检测的放开规范。咱们真的须要一个JavaScript手势检测库，去处置一些较经常出现的手势。

如何使其离线上班

关于一个运行程序脱机上班，你须要确保两件事情实在：

Assets资产可用(经过AppCache，文件系统API等)

数据是可用的(经过LocalStorage，WebSQL，IndexedDB等)

通常中，在网络上树立离线运行是一个辣手的疑问。普通来说脱机配置应从一开局就参与你的运行程序。让现有Web运行程序没有显着的重写代码运转在离线形态下是特意艰巨的。此外，脱机技术还有各种未知的存储限度，而且未知超出限度时会出现什么不确定的行为。***，在离线的技术堆栈还有一些技术疑问，最显着的是AppCache，正如我在以前的文章提到。

写真正的离线配置的运行程序是一个十分幽默的方法是“离线优先”。换句话说，假设没有互联网衔接所有写入本地，当存在互联网衔接，成功同步数据同步层。在Backbone.js MVC模型，这可以很好地顺应自定义Backbone.sync适配器。

单元测试

单元测试您的UI是有艰巨的。但是，由于你经常使用MVC的模型，它是齐全隔离的UI和数据结果，因此，可繁难测试。QUnit是一个相当不错的选用，特意是由于它准许经常使用它的start()和stop()方法单元测试异步代码。

总结

总之，笔者经常使用Backbone.js 作为 MVC 框架，Mustache.js做为模板，SCSS作为CSS框架，CSS的Flex box展现界面views，自定义触摸事情和QUnit单元测试工具，来写笔者的移动Web运行程序。脱机支持，笔者依然尝试用各种技术，并宿愿未来继续写篇文章。只管笔者剧烈置信有必要在这里列出每种工具(如MVC)，笔者也置信，笔者在这里形容的许多详细的技术是可以调换的(如Handlebars 和 Mustache)。

还有一件事：2012年1月17日，Thorax发表颁布。这是一个基于Backbone一套开发库，十分相似我在这篇文章里形容的思维。笔者还没有在任何深度钻研，但称号是平凡的:)

经常使用一套相似的框架吗?有你最青睐的?感觉笔者缺少一个关键的框架吗?让笔者知道!

起源： 英文原文 ，中文编译： IT瘾 。