今天首先给大家隆重推荐一款移动端WebApp开发神器：Framework7。当然啦，这篇带有比较强烈的主观意识偏好，并且建立在一个必要的前提之上：你希望快速开发一款移动端的WebApp，但是团队里并没有资深的前端工程师。Framework7是什么Framework7-是一款开源免费的移动端HTML框架，用于开发接近原生iOS或Android系统外观和体验的hybridmobileapps或webapps。当然你也可以把它当成一款快速制作高保真APP原型的工具。Framework7的主要目标是让你能够轻松地使用HTML,CSSandJavaScript开发iOS或Android应用。Framework7是非常灵活的。它并不会限制你的想象力或者强制搭配某些架构方案。Framework7给你最大程度的自由。Framework7并不打算兼容所有平台。它主要专注iOS和GoogleMaterialdesign以带来最好的用户体验并保持简单。如果你打算开发iOS或Android平台下接近原生系统应用外观和体验的hybridapp(PhoneGap)或者webapp的话Framework7绝对适合你。像做网站一样超级简单使用Framework7开发iOS应用就像开发传统网站一样简单。试着上手实践一下你就会发现它惊人的简单。你只需要一个简单的HTML页面并引入Framework7的CSS和JS文件即可。Framework7并不强迫你写那些需要JS处理的自定义标签（不像Angular或React）。也并强迫你把所有内容都写在JavaScript(或JSON)里面。仅仅是普通的HTML，你在HTML里面写什么就是什么。没有黑魔法，没有MVVM，没有复杂高深的理论或者工具需要学习。

侧重iOS上面已经提到Framework7是一款侧重iOS的框架。从一开始，就考虑到如何最方便快捷地实现iOS平台上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互。所以Framework7是你实现像素级精确iOS应用的最佳选择。

Material皮肤Framework7Material皮肤严格按照GoogleMaterial设计规范实现，像素级精确实现了Material特性-包括视觉设计、配色和交互效果。那么现在，Framework7也是创建拥有原生Material界面和体验的Android应用的一个不错选择了。UI组件Framework7自带很多可以直接使用的UI组件和插件，比如modals,popup,actionsheet,popover,listviews,medialists,tabs,sidepanels,layoutgrid,preloader,formelements等。前面提到的大部分组件都完全不需要你写任何JS代码。

杀手锏仅仅具备上述特征的话其实很多框架都具备，然而让我如此推崇这款框架的主要原因是它的几个独有的杀手锏功能。滑动返回Framework7的一个最大特色就是提供了的滑动返回功能，当你从屏幕左侧向右滑动的时候可以返回到上一个页面。并且，这不是一个A-B动画，她完全跟随你的手指触摸而移动。滑动操作是不是希望你的应用能像在邮件中一样向左滑动一条消息就可以删除？Framework7的列表元素有相同的功能，并且有同样平滑的动画和触控交互。动态导航栏就像上面说过的，Framework7让一切都有iOS7的体验。其中一个重要的特点就是动态导航栏。当你切换页面的时候可以清楚地看到导航栏的元素是如何滑动并渐变的。下拉刷新Framework7可能是第一且唯一一个使用原生滚动条实现下拉刷新功能的框架。这就是为什么Framework7的下拉刷新组件可以和原生的iOS应用相媲美的根本原因。聊天组件Framework7有一个非常强大的”聊天“组件，你可以很容易定制并集成到你的app中，然后通过实时同步推送数据服务（比如pusher或者PubNub）来实现不同用户之间发送消息。容易定制Framework7的一切都是非常简单的，所有的样式都被拆分成了模块化的小.less文件，所以定制自己的样式非常容易。实例展示里可以看到基于Framework7开发的已上架iOS和Android应用:

更多特色原生滚动条Framework7最大的特点之一就是使用了原生的滚动条。所以你的滚动条会有原生滚动条一样的加速度和回弹，没有任何bug和性能问题。多屏视图Framework7支持多个独立的视图(view)。并且你可以不用写任何JS，只需要在链接上加一个data-view就可以控制每一个视图。不依赖第三方框架Framework7不依赖任何第三方框架。所以它很轻量、高性能且灵活。简洁的JSAPI使用Framework7不需要学习任何新的知识，她的JS接口非常简洁易用并且功能强大。比如，当你需要弹出一个alert的时候你只需要app.alert("HelloWorld!")。高性能的动画Framework7只使用带硬件加速的CSS动画以达到最好的性能。页面动画Framework7最主要目标之一就是让你的Web应用和iOS本地应用有相同的外观和交互体验。并且Framework7是唯一一个坐到了1:1精确平滑的页面切换动画的框架。XHR+Caching+History+Preloading这几个功能的组合可以让你的应用的路由功能变得非常强大。Framework7通过Ajax来加载新页面，并且可以通过缓存配置让页面的加载速度变得非常快。她会在一定的时间内缓存Ajax请求的结果（默认是10分钟），在缓存有效期内不会发送新的请求而是直接从缓存中取出结果。Dom7-自定义的DOM库Framework7不依赖任何第三方框架，包括dom操作，包括jquery。她有一个自带的高性能dom库-DOM7。并且，你不需要因为DOM7而学习任何新的知识，因为DOM7的接口和大名鼎鼎的jQuery几乎是一样的，也支持链式语法。使用Framework7开发的iOS应用实例

SprintSocial开发者：ClickInnovateLtd

TeamSpender开发者：AndreyVoronin

SeriesSeven开发者：iDangero.us

MondayDelights开发者：Yevart

PolyGen开发者：BartlomiejNiemtur

WonderPolls开发者：TimBusbee更多实例请移步实例展示开源免费Framework7是完全免费并开源的(MIT协议)。下载快速上手文档贡献代码为什么最适合小团队上面说了这么多，

其实也都是把官网翻译了一下，那么为什么这个框架最适合小团队呢？我得出这个结论的主要原因如下：完备的UI组件基本上初期的产品不会有太强的自定义需求，很长一段时间都在围绕系统控件排列组合，

从需求的源头上来看特别常见的就是嫌弃系统默认的alert之类的太丑，总是希望达到原生应用的效果。而Framework7完美地解决了这个问题，几乎所有的系统控件都已经实现了，复制粘贴代码片段就可以用了。

只要不是太奇葩的产品形态，基本就是堆积木一样的速度了。极低的上手难度在这个前端技术爆炸性进化的年代，你要是搞个框架出来不自带打包工具，不支持自定义元素，不整点MVVM之类的高大上架构方案你都不好意思跟人打招呼。

然而越来越高大上的方案意味着更高的上手难度，你真的能保证高大上的前端MVVM能被那些培训班突击了不到半年的新员工领悟并正确地用在合适的场景吗？你那些看上去很自动化很强大的打包工具真的没有把事情搞复杂吗？咱能简单点吗？

我就是想在手机上做两个页面而已啊！Framework7在这方面做得足够简单，再传统不过的HTML，如果你不喜欢LESS也可以直接改CSS，对于广大只熟悉jQuery的“伪前端”来说也完全没有学习成本，拿来就用。但是该有的AJAX、router、模板引擎一样不少。最接近原生的体验其实对于广大不那么牛逼的“前端工程师”来说不是做不出来页面或者实现不了某些效果，而是做出来的效果实在差太远，自己都不好意思拿出手，老板就更不满意了。Framework7在这方面提供了很多关键性的特性，动态导航、滑动返回、下拉刷新都是特别常见而新人往往又做不好的部分，现在好了，直接照着文档套进去就完事儿了。单页面的体验多页面的实现手机的屏幕就只有那么大，所以现在的WebApp多数都会以分屏的方式来实现更复杂的功能。而传统的页面跳转体验显然不那么好，在网络条件不那么理想的情况下每跳转一次页面都会白屏一阵儿。于是乎各种各样的SPA（SingPageApplication）解决方案层出不穷，相信一定有人试过Angular或者React之类的解决方案，然而现实终究会很残酷地证明这些重型框架不适合移动端，再怎么搞性能优化都无济于事。何况性能优化也不是谁都能做得好的啊。Framework7在这方面就很取巧，该是页面还是页面，该是链接还是链接，只是通过AJAX和router做到了无刷新加载，这样页面仔在写页面的时候就可以比较简单的区分不同的页面。弱点这个框架最初只支持iOS，最近新加的Material皮肤也还有一些滑动返回之类的特征未实现JS文件没有模块化的解决方案，几乎所有的业务逻辑都只能写在一个JS文件里面，如果应用比较大逻辑比较复杂的话，可维护性是个问题。中文资源国内的阿里巴巴国际UED团队曾经翻译过该框架1.2.0版的官方文档//framework7.taobao.org/不需要这么复杂的功能？如果你的应用并不需要这么复杂的交互，也用不上那么多的UI控件，那么你可以试试Ratchet，同样支持iOS和Android两种风格，非常轻量，依赖的JS代码量非常小且均为纯原生JS。Twitter出品，跟大名鼎鼎的Bootstrap一脉相承。更重要的是代码风格非常棒，如果你打算自己造个新轮子的话，那么这个Ratchet绝对是你最好的参考对象没有之一。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！