今天首先给大家隆重推荐一款移动端WebApp开发神器：Framework7。当然啦，这篇带有比较强烈的主观意识偏好，并且建立在一个必要的前提之上：你希望快速开发一款移动端的WebApp，但是团队里并没有资深的前端工程师。

Framework7 是什么

Framework7 - 是一款开源免费的移动端 HTML 框架， 用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps。当然你也可以把它当成一款快速制作高保真APP原型的工具。

Framework7 的主要目标是让你能够轻松地使用 HTML, CSS and JavaScript 开发iOS 或 Android 应用。Framework7 是非常灵活的。 它并不会限制你的想象力或者强制搭配某些架构方案。 Framework7 给你最大程度的自由。

Framework7 并不打算兼容所有平台。 它主要专注 iOS 和 Google Material design 以带来最好的用户体验并保持简单。

如果你打算开发 iOS 或 Android 平台下接近原生系统应用外观和体验的 hybrid app (PhoneGap) 或者 web app 的话 Framework7 绝对适合你。

像做网站一样超级简单

使用 Framework7 开发 iOS 应用就像开发传统网站一样简单。 试着上手实践一下你就会发现它惊人的简单。你只需要一个简单的HTML页面并引入 Framework7 的 CSS 和 JS 文件即可。Framework7 并不强迫你写那些需要JS处理的自定义标签（不像Angular或React）。 也并强迫你把所有内容都写在 JavaScript (或JSON)里面。 仅仅是普通的HTML，你在HTML里面写什么就是什么。没有黑魔法，没有MVVM，没有复杂高深的理论或者工具需要学习。

侧重 iOS

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

Material 皮肤

Framework7 Material 皮肤严格按照 Google Material 设计规范实现， 像素级精确实现了 Material 特性 - 包括视觉设计、配色和交互效果。那么现在， Framework7 也是创建拥有原生 Material 界面和体验的 Android 应用的一个不错选择了。

UI组件

Framework7 自带很多可以直接使用的UI组件和插件，比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。前面提到的大部分组件都完全不需要你写任何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 不依赖任何第三方框架。所以它很轻量、高性能且灵活。

简洁的JS API

使用Framework7不需要学习任何新的知识，她的JS接口非常简洁易用并且功能强大。比如，当你需要弹出一个alert的时候你只需要 app.alert("Hello World!")。

高性能的动画

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应用实例

Sprint Social

开发者： Click Innovate Ltd

TeamSpender

开发者： Andrey Voronin

Series Seven

开发者： iDangero.us

Monday Delights

开发者： Yevart

PolyGen

开发者： Bartlomiej Niemtur

Wonder Polls

开发者： Tim Busbee

更多实例请移步 实例展示

开源免费

Framework7 是完全免费并开源的 (MIT 协议)。 下载 快速上手 文档 贡献代码

为什么最适合小团队

上面说了这么多，其实也都是把官网翻译了一下，那么为什么这个框架最适合小团队呢？我得出这个结论的主要原因如下：

1. 完备的UI组件 基本上初期的产品不会有太强的自定义需求，很长一段时间都在围绕系统控件排列组合，从需求的源头上来看特别常见的就是嫌弃系统默认的alert之类的太丑，总是希望达到原生应用的效果。而Framework7完美地解决了这个问题，几乎所有的系统控件都已经实现了，复制粘贴代码片段就可以用了。只要不是太奇葩的产品形态，基本就是堆积木一样的速度了。
2. 极低的上手难度 在这个前端技术爆炸性进化的年代，你要是搞个框架出来不自带打包工具，不支持自定义元素，不整点MVVM之类的高大上架构方案你都不好意思跟人打招呼。然而越来越高大上的方案意味着更高的上手难度，你真的能保证高大上的前端MVVM能被那些培训班突击了不到半年的新员工领悟并正确地用在合适的场景吗？你那些看上去很自动化很强大的打包工具真的没有把事情搞复杂吗？咱能简单点吗？我就是想在手机上做两个页面而已啊！Framework7 在这方面做得足够简单，再传统不过的HTML，如果你不喜欢LESS也可以直接改CSS，对于广大只熟悉jQuery的“伪前端”来说也完全没有学习成本，拿来就用。但是该有的AJAX、router、模板引擎一样不少。
3. 最接近原生的体验 其实对于广大不那么牛逼的“前端工程师”来说不是做不出来页面或者实现不了某些效果，而是做出来的效果实在差太远，自己都不好意思拿出手，老板就更不满意了。Framework7 在这方面提供了很多关键性的特性，动态导航、滑动返回、下拉刷新都是特别常见而新人往往又做不好的部分，现在好了，直接照着文档套进去就完事儿了。
4. 单页面的体验多页面的实现 手机的屏幕就只有那么大，所以现在的WebApp多数都会以分屏的方式来实现更复杂的功能。而传统的页面跳转体验显然不那么好，在网络条件不那么理想的情况下每跳转一次页面都会白屏一阵儿。于是乎各种各样的 SPA （Sing Page Application）解决方案层出不穷，相信一定有人试过Angular或者React之类的解决方案，然而现实终究会很残酷地证明这些重型框架不适合移动端，再怎么搞性能优化都无济于事。何况性能优化也不是谁都能做得好的啊。Framework7在这方面就很取巧，该是页面还是页面，该是链接还是链接，只是通过AJAX和router做到了无刷新加载，这样页面仔在写页面的时候就可以比较简单的区分不同的页面。

弱点

1. 这个框架最初只支持iOS，最近新加的 Material 皮肤也还有一些滑动返回之类的特征未实现
2. JS文件没有模块化的解决方案，几乎所有的业务逻辑都只能写在一个JS文件里面，如果应用比较大逻辑比较复杂的话，可维护性是个问题。

中文资源

国内的阿里巴巴国际UED团队曾经翻译过该框架1.2.0版的官方文档 http://framework7.taobao.org/

不需要这么复杂的功能？

如果你的应用并不需要这么复杂的交互，也用不上那么多的UI控件，那么你可以试试Ratchet ，同样支持iOS和Android两种风格，非常轻量，依赖的JS代码量非常小且均为纯原生JS。Twitter出品，跟大名鼎鼎的Bootstrap一脉相承。更重要的是代码风格非常棒，如果你打算自己造个新轮子的话，那么这个 Ratchet 绝对是你最好的参考对象没有之一。

有没有介于两者之间的？

还真有，哈哈。我们上面提到过的阿里巴巴国际UED团队，在综合了前两者的基础之上，改良了一个很适合中国国情的轮子： SUI Mobile。跟阿里的其它前端开源项目一样，直接提供带combo功能的CDN版本。这下连自己部署都省了，直接引用就可以开始了。这个新造的轮子没有Android版皮肤，但是加入了中国省市联动选择器这种中国特色的组件，不过我个人曾经写过一个基于百度地图API的地址选择器，体验会更好些，回头开源出来给大家玩儿。

关注我们

本文原文：http://wx.h5.vc/post/2015-12-21 可看视频。

我们专注于H5技术生态的改善，如有兴趣合作请联系 support@h5.vc

欢迎有兴趣的同行一起来玩儿：https://github.com/h5vc/wx.h5.vc