Web移动应用开发框架的8个技术构想

简介:   之前我们已经介绍过四大主流移动Web开发框架,今天我们再次深入,探讨Web移动应用框架需要具备的技术特性和理念。目前虽然已经有诸如iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit等Web移动应用开发框架,但在移动这个领域毕竟刚刚起步,需要更多技术人员对其修正和思辨。

  之前我们已经介绍过四大主流移动Web开发框架,今天我们再次深入,探讨Web移动应用框架需要具备的技术特性和理念。目前虽然已经有诸如iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit等Web移动应用开发框架,但在移动这个领域毕竟刚刚起步,需要更多技术人员对其修正和思辨。下面这篇文章来自腾讯WSD团队博客,为我们梳理了移动Web开发框架的技术构想。

  iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹web移动应用充斥着各种各样框架与类库的时候,其实各大web框架才刚刚开始他们的移动领域:Yahoo的YUI3.2的Touch版、jQuery的 jQueryMobile、ExtJS整合JQTouch和Raphaël库推出的Sencha Touch框架。

  ExtJs更名为Sencha的确让我震惊不少,毕竟自己也曾是ExtJs框架的粉丝,如此重量级的框架忽然掉头往mobile touch的方向发展,确实不是一件易事,我们也不禁惊叹移动应用所带来的重大改变。

  在这里我并不是想跟大家介绍各种web移动应用框架的用法介绍和性能对比。只是受ExtJs的影响,以及想知道自己到底去到一个什么程度,以及更好的积累沉淀下前端的经验,于是我开始构想一个好的web移动应用框架应该如何如何,并开始尝试着手实现。重复造轮子只是强迫自己更深入地去了解这个领域,并不是自大到要挑战什么。于是分析对比了下,总结如下:

  1.轻量级

  这个应该是移动应用框架里最重要的一点,不要想着3G的普及还有wifi啥的,国情就是国情,要大部门用户在3秒内下载完你那100K的css和js文件是强人所难。因此我们的移动应用框架必须尽可能的轻量化,所有的命名和函数实现方法都要尽可能的简练和高度压缩。抛掉那些PC上web应用的特效和组件吧,不要为了一个菜单效果把7,80K的jQuery.js加在你的页面上。

  2.主流手机浏览器兼容性

  面对如此多的手机平台和浏览器,要你的移动应用在所有浏览器上表现如一是很困难的,有时候你需要对不同浏览器加载不同的样式文件,又或是运行不一样的函数来实现效果。因此我们的框架必须有能识别各种主流浏览器的方法,具体点,你的框架必须能区分如iPhone、iPad、Android、Windows Phone等,OK,再国情化一点,QQ手机浏览器和UCWeb。最后要注意的是这里尽量不用UA的方法来判断,因为各浏览器的 avigator.userAgent都很不可靠,这里可以参考下mooltools判断浏览器的思路,应用到我们的移动领域上。

  3.强大的选择器

  选择器可以说是一个框架灵魂,在将来的web移动应用中会大量使用CSS3的高级伪类,因此我们的框架必须能尽快遍历定位到尽可能多的HTML5标签和CSS3的伪类,哪怕是像E:first-of-type这种jquery选择器都不支持的结构。

  4.页面动画效果

  与桌面web应用不同的是,移动应用在页面的切换效果方面要炫的多,比如:滑动切换,遮罩弹出,渐入渐出,闪屏,iPhone上的zoomin,zoomout效果等。看看CSS关于fadein和zoomin动画的定义:

  再看看JS端对页面切换的处理:

  5.Ajax解析

  移动设备浏览器受性能和带宽限制,ajax的应用也与桌面应用有较大的区别,因此低带宽和易用性就成了ajax应用的目标,最典型的例子就是翻页,哈,一丝一毫的带宽都不能放过,这方面可以参考下iUI的思想。

  6.手势操作

  这就是Touch,一个给移动互联网带来革命的事件。把mouseOut、mouseover这些桌面相关的鼠标事件从你的移动框架里去除吧,与之替换的是各种Touch和Gesture(手势)事件:

◆touchstart : 手指放在屏幕上时触发

◆touchend : 手指离开屏幕时触发

◆touchmove : 手指在屏幕上移动时触发

◆touchcancel : 取消Touch事件(这个貌似是系统触发的)

◆gesturestart : 开始手势事件

◆gestureend : 停止手势事件

◆gesturechange : 改变手势事件

  监控Touch操作,我们需要利用Touch事件相对于整个页面视图的X轴和Y轴位置来定位(PageX、PageY),并重载默认的Touch事件来扩展我们的需求,对于没有Touch支持的浏览器,我们依然可以重载相应Mouse事件,而Gesture(手势)事件由于需要两根手指触发的放大、缩小、旋转,鼠标是无法模拟,比如下面使用CSS3的webkitTransform样式属性缩放和旋转一个对象Box:

  7.重力感应

  当然,一般的应用很少会用到重力感应,它更适应于游戏方面。对于浏览器更多的是正屏与侧屏的区分。我们要做的就是重载浏览器默认的resize监控事件并对正屏和侧屏做出相应的操作处理。

  8.离线存储

  由于手机网络的特殊性,离线存储技术就变得相当重要,相关的API可以看看W3C提供的有关Client-Side的描述。Client-Side提供了3种离线存储的方案:

◆Database storage : 数据库

◆Local storage : 本地储存

◆Session storage : 区段储存

  我们的框架必须能很好的封装这3种离线存储方式,提供一个方便易扩展的API,比如storage能直接储存JSON参数数据段,就好像下面的Demo:

  以上这些构想可以整理成下面的框架结构图:

  当然,这仅仅是个开始,关于移动应用框架的构思还待我们进一步深入挖掘。

目录
相关文章
|
5月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
583 1
|
4月前
|
开发框架 前端开发 Go
【GoGin】(0)基于Go的WEB开发框架,GO Gin是什么?怎么启动?本文给你答案
Gin:Go语言编写的Web框架,以更好的性能实现类似Martini框架的APInet/http、Beego:开源的高性能Go语言Web框架、Iris:最快的Go语言Web框架,完备的MVC支持。
476 1
|
8月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
8月前
|
开发框架 安全 前端开发
Go Web开发框架实践:模板渲染与静态资源服务
Gin 是一个功能强大的 Go Web 框架,不仅适用于构建 API 服务,还支持 HTML 模板渲染和静态资源托管。它可以帮助开发者快速搭建中小型网站,并提供灵活的模板语法、自定义函数、静态文件映射等功能,同时兼容 Go 的 html/template 引擎,具备高效且安全的页面渲染能力。
|
8月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
8月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
268 1
|
10月前
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
1408 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
9月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
361 7
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
697 67
|
机器学习/深度学习 人工智能 Android开发
移动应用开发与操作系统的协同进化:探索现代技术融合之道###
随着移动互联网的迅猛发展,移动应用已成为人们日常生活中不可或缺的一部分。本文深入探讨了移动应用开发的最新趋势、关键技术以及移动操作系统的发展如何相互促进,共同推动移动互联网的创新与变革。通过分析当前市场动态和技术挑战,本文旨在为开发者提供有价值的见解和指导,帮助他们在竞争激烈的市场中脱颖而出。

热门文章

最新文章