文档章节

移动web开发框架研究

数通畅联
 数通畅联
发布于 2015/02/27 10:55
字数 2227
阅读 665
收藏 32
点赞 0
评论 0

    原文网址链接:http://blog.csdn.net/xyz_lmn/article/details/41052977

    纯粹的总结一下移动web开发框架,移动web开发框架有jQueryMobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架,项目中也有应用。国内也有公司,像BAT巨头也在探索和实现了适合自己的移动web框架。

1jQuery Mobile  

wKiom1Tv0vKRCULOAAA-jiJHm30122.jpg

    jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件jQuery Mobile继承了jQuery的优势,并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。wKioL1Tv1Efg_MeGAAFgddAar2w270.jpg

1.1 jQuery mobile flat-ui 主题

https://github.com/ququplay/jquery-mobile-flat-ui-theme

   wKiom1Tv02nS5s-qAAJjtetIctY115.jpgwKioL1Tv1IqzO5ZVAAJjtetIctY888.jpg

1.2jQuery mobile Bootstrap 主题

 https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

 wKiom1Tv08CDUUyzAALcFX3unBA402.jpg 

 2、Sencha Touch

 wKiom1Tv1AHTBGEeAAA6uG8WGe8830.jpg 

    Sencha Touch做的Web App看起来更像NativeApp,用户界面组件和丰富的数据管理,全部基于最新的HTML 5和CSS3的 WEB标准,全面兼容Android和iOS设备。Sencha Touch提供了超过50个组件。

 wKiom1Tv1BmzH-SIAAHsLuowcWQ434.jpg 

3、阿里系web框架

 wKiom1Tv1EXx3dJeAAAsR4t1PIM834.jpgwKioL1Tv1WqQpyPeAABls1YF0CU742.jpg   

    Kissy是阿里前端自己开发的前端框架,KISSY 是一款跨终端、模块化、使用简单的 JavaScript 框架。除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等,KISSY 还面向团队协作做了独特设计,提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY 为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。KISSY Mobile是一套面向移动端的功能特性集合,实现灵活配置的转场动画和View的解偶。KISSY5.0已经全面支持移动端。Kissy架构可以参考这里。Kissy架构图:

wKiom1Tv1IODV2AdAAOBonDPGH4136.jpg 

4、百度移动web框架

    百度移动web框架有三个了解了一下。

4.1 GMU  

    GMUGlobal Mobile UI是百度前端通用组开发的移动端组件库,具有代码体积小、简单、易用等特点,组件内部处理了很多移动端的bug,覆盖机型广,能大大减少开发交互型组件的工作量,非常适合移动端网站项目。该组件基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件!

wKiom1Tv1PijgveyAANSgS9rU44045.jpg

4.2 Clouda+ 

wKioL1Tv1kDS-IUOAABQfw_91EY552.jpg

    Clouda+是移动web应用开发整体解决方案,并特别针对百度轻应用场景进行了优化,旨在让webapp体验和交互媲美Native应用。

4.3 efe   

    efe百度商业体系前端团队推出的web框架,efe有如优势。

4.3.1模块化、组合式的移动前端框架

4.3.2基于 Stylus 的移动端样式库

    他是提供了 JavaScript 模块、CSS 样式库与开发平台的完整前端解决方案。擅长移动端 SPA 项目、轻应用。

    他是专为移动端设计的 Mixin 风格样式工具库。在其基础上创建了 Rider UI,一个灵活的 UI 样式库。

 wKioL1Tv11GQmS3dAAMku5OtmDk202.jpg 

5、tencent

5.1 Spirit

    Spirit并不是一个具体的框架或者工具,但是她是移动端一系列解决方案的整合与聚拢。她是Alloyteam开发团队在移动开发项目中通过大量实践、归纳、总结提炼而成,最终沉淀下来的一个体系,真正建立一套移动Web开发的集成解决方案。Spirit主要由5个部分组成:移动Web开发规范、JM、JMUI、Mobug、Mars。

wKiom1Tv1nvDXH86AAROMLvH_Cg699.jpg 

5.2 Frozen UI

    Frozen UI是腾讯ISUX团队(社交用户体验设计团队)根据最新的手机QQ设计规范制作的移动端Web框架,包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库。为了方便记忆和增添趣味性,腾讯ISUX团队为它取了动画片《冰雪奇缘》的英文名,并把Elsa女王作为该项目的卡通代言人。

    项目主页http://frozenui.github.io

    Github代码托管地址https://github.com/frozenui/frozenui

 wKioL1Tv18azkCRBAAMACS86Kdk180.jpg

6、ionic

    Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性应用。基于Sass构建和AngularJS 优化。

    Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展。

    Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 github

 wKiom1Tv10eT2GsVAAMBUprRczU189.jpg 

7、Amaze UI

    Amaze UI 采用业内先进的 Mobile first 理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web组件,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。

wKiom1Tv13jTeoToAAEotsrPAjg953.jpg

8、CardKit

    CardKit 是来自豆瓣的一个移动 UI 框架,使用 Card\Unit\Component 概念快速构建移动 Web 应用。应用外观跟原生应用无异。

 wKiom1Tv16LQ8ZaKAAZqpuhtNcc746.jpg 

 9、App.js

    App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 Web 应用,应用的外观跟原生的应用相同,性能也近乎一致。

特点:

跨平台,支持 Android 2.2+ 和 iOS 4.3+

Widgets 和自定义主题

页面调整管理

wKioL1Tv2OqjqnrgAADohws-q6U516.jpg

 10、Junior

    Junior前端框架,用来构建基于HTML5的移动Web应用,外观与行为跟本地应用相似。它采用针对移动性能优化的CSS3转换,支持旋转灯箱效果,包含多样的Ratchet UI组件。整个框架使用Zepto(类似jQuery语法的轻量级移动设备js类库),且整合了backbone.js的视图和路由。Junior十分易于使用,且提供详细的文档及案例,便于学习。 

11、Jingle

    Jingle是一个SPA(Single Page Application)开发框架,用来开发移动端的html5应用,在体验上尽量去靠近native应用,希望有一天html5能够做到与native一样的操作体验。提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件,简单适用。

12、mui

    性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

    mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

13、Polymer

    Google给我们带来了Polymer。Polymer是是一个让你可以轻易创建web组件的框架。
在他们完成开发web应用底层结构之后,他们开始专注于UI。Polymer 是 material design 在 web 平台的实现. Polymer 团队与 material design 设计团队合作非常的紧密。事实上, Polymer 在 material design 的研发阶段扮演着关键性的角色: 它被用于快速原型化和重现设计的概念。

本文转载自:http://blog.csdn.net/xyz_lmn/article/details/41052977

共有 人打赏支持
数通畅联
粉丝 83
博文 203
码字总数 195353
作品 6
沈阳
架构师
步入研二,迷茫中,搞底层框架研究(或者linux内核)还是做上层应用前途哪个好呢!?

本人现已步入研二,想抓紧再学一些新技术,不知道往什么方向啊? 我研究生的方向是,移动终端的性能和能耗的评测。现在对android的整体框架已有点了解,但是要全部搞懂感觉压力好大;对linux...

wangxigui
2013/09/23
3.1K
11
IT增值服务,客户案例(一)--山东青岛在职人士,2年.Net经验,转Java开发半年

客户总体情况:2年.Net开发经验,2014年刚刚转Java半年。对Java的若干问题不是非常清楚,仅仅是对JSP/Servlet/JavaBean Spring、SpringMVC、Mybatis有点基础性的认识。 项目中就主要用到了上...

技术mix呢
2017/11/09
0
0
【译】MobileSOFT · Theme and Topics

原文 主题 会议是要呈现出新的挑战与方法,我们对如下新领域表示关切: 1. 针对多类型、各种各样的设备(由不同产商生产的手机、平板、笔记本电脑)创造、部署以及管理一套应用程序,同时能够...

jxfactor
2015/10/19
0
0
关注移动Web应用性能问题(上)

移动平台逐渐成为客户端应用的主流载体之一,为了消除应用在不同移动平台的兼容性,采用Web形式开发移动应用成为潮流(当然特别依赖于原生功能和 性能的应用,如游戏可能例外)。随着Web移动...

墙头草
2011/04/02
0
0
PyTorch 1.0 正式公开,Caffe2并入PyTorch实现AI研究和生产一条龙

今天,Facebook正式公布PyTorch 1.0,这是将基于Python的PyTorch与Caffe2合并的一个新版本的框架,让开发者可以无缝地将AI模型从研究转到生产,而无需处理迁移 “现在,你只需要使用PyTorch...

技术小能手
05/03
0
0
融合 Caffe2、ONNX 的新版 PyTorch 发布在即,能否赶超 TensorFlow?

雷锋网(公众号:雷锋网) AI 研习社按,上个月,Caffe2 代码正式并入 PyTorch,就在今天,Facebook AI 系统与平台部(AI Infra and Platform)副总 Bill Jia 发文表示,PyTorch 1.0 发布在即,...

思颖
05/03
0
0
基于Android平台简易即时通讯的研究与设计

1 Android平台简介 Android是Google公司于2007年11月5日推出的手机操作系统,经过2年多的发展,Android平台在智能移动领域占有不小的份额,由Google为首的40多家移动通信领域的领军企业组成开...

今幕明
2014/12/11
0
0
mobile web 前端研发流程 【转载】

接触Mobile WEB前端开发将近一年时间了,在这不算短的时间里,通过吸取圆心、沉鱼等前辈们的经验以及不断的摸索和实战,总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是...

石秋风
2012/04/18
0
2
OSChina 技术周刊第五期

每周技术抢先看,总有你想要的! 移动开发 【软件】Android 测试框架 RoboSpock 前端开发 【翻译】7 个 Bootstrap 在线编辑器用于快速开发响应式网站 【翻译】Browserify vs. Webpack 【软件...

OSC编辑部
2014/10/19
5.1K
5
重磅!Facebook 贾扬清发文,Caffe2go 将开源

【导读】Caffe作者,Facebook研究科学家贾扬清11月8日在Facebook官方网站上发文,介绍了他在Facebook 最新的机器学习研究成果——Caffe2go。这一款规模更小但训练速度更快、对计算性能要求较...

达尔文
2016/11/10
5.5K
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
18分钟前
0
0
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
48分钟前
4
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
59分钟前
40
5
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部