Framework7 - 是一款开源免费的移动端 HTML 框架

今天首先给你们隆重推荐一款移动端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的地址选择器，体验会更好些，回头开源出来给你们玩儿。