前端开发者的跨平台移动应用开发策略及工具

愉悦的周五,早些回到家,冲澡吃饭照顾猫咪家务完毕已然超过九点的样子。登录博客后台,进入编辑页面,才觉得些许轻松安逸。不坏,一天里能有这么一会沉浸在这样的感觉里,足够了。

在之前的一篇文章中,我们曾经讨论过,对于交互和视觉设计相关职能的从业人员来说,从传统Web行业向移动应用领域转型的过程中需要学习和注意的问题。这篇文章中提到过“混合型应用”的概念,以及与之相关的两本开发指导书籍。今天这篇文章的英文原文,就是来自这两本书的作者——移动应用开发者Jonathan Stark。

本文中,他将站在传统Web前端开发人员的角度,为我们介绍一些在实际项目案例中总结出来的移动应用开发方法策略,以及几类具有代表性的用于打造跨平台移动应用的前端开发工具。

各位前端开发相关职能的同行们,扩展视野、提升技能、随“机”应变的时机已然成熟;衷心希望本文可以成为推动大家事业进步发展的一个催化点。不多说了,我们来看正文。

无论站在怎样的角度去衡量,移动互联网及客户端应用的发展势头都是非常迅猛的。日均使用量、智能手机的普及率、来自移动设备的订阅量、搜索引擎流量、广告呈现、应用售卖……所有这些都处于迅速上升的状态。可以预计,在不久的将来,移动设备将拥有足够的成熟度与普及率,并跻身于传统桌面电脑、笔记本等硬件平台的行列,成为我们日常生活的主要设备。

巨大的移动市场为传统Web设计开发人员带来了新的机遇与挑战。各类移动设备在爆发式增长的同时,也带来了前所未有的分裂与混乱的状况。如果需要同时为多平台设备进行客户端应用的开发、测试和维护,势必会消耗大量的资源与成本。

本文中,我们首先会对几种移动化解决方案进行比较和分析,然后将重点放在一些常见的用于跨平台移动应用开发的前端框架工具上;不过我不会在最后选出一个所谓的最优方案——开发方式的选择最终会取决于你的项目本身,包括业务模式、需求、目标市场、开发资源等多方面因素。本文的主要目标是提供一些有用的信息,帮助各位读者在实际项目中选择最合适的方法与工具。

Web应用(Web App)与原生客户端应用(Native App)

关于这两种移动化方案孰优孰劣的辩论已然有不少了。

我相信,如果你能以Web应用的方式打造移动化产品,那么你确实应该这样做;反之则不应该。..另外一种情况则介于两者之间,即通过HTML、CSS、Javascript等前端技术,结合移动设备原生开发方式,打造所谓的混合型应用。

看似废话,但重点在于“能”或“不能”。这里我们主要指具体的项目需求,而非技术开发能力。我所在的团队,做过的多数案例,都来自于企业级的客户。大公司,顾名思义,在人员、产品及服务等方面都具有相当的规模,他们所需要的移动化解决方案在跨平台方面的需求都很高。

当接手一个新的企业级移动化项目时,我会将Web App作为默认的首选方式,同时结合以下三个问题进行进一步评估:

功能方面,是否涉及那些只有本地应用才能利用的设备硬件资源?

比如,一款有条形码扫描功能的应用,必须配合设备的摄像头进行工作,而摄像头是浏览器无法获取的硬件资源,所以这款应用不能以Web App的形式存在;类似的功能还包括影像音频的录制传输、后台运行、消息推送等。如果该产品确实必须基于这些功能才能被正常使用,那么原生客户端应用便是不二之选。

该产品的用户是谁?

如果产品拥有大规模的公众用户群,那么原生或Web应用的方式都是可选的,前者可以通过平台官方的App Store或应用市场进行推广,后者的跨平台性更好。如果产品属于公司或组织内部使用的管理信息系统等类型,那么Ad hoc、类似Apperian这样的第三方App Store或Web App都是可选的。

该应用在系统资源消耗等方面的敏感度如何?

很多方面的因素会使移动设备浏览器占用过多的内存资源,从而影响Web App的执行效率及用户体验。这些因素包括半透明视觉效果及动画效果、大量的内容数据、文件加密和解码、基于地图的复杂交互方式等。

回答了这三个问题之后,对解决方案的选择便容易多了。举例说,比如我收到的需求是为企业员工设计开发一款B2E应用,用来管理他们的个人信息及收益情况,并且不需要使用移动设备提供的高级硬件功能,那么Web App的方式是最恰当的选择。另外一方面,如果需求是开发一款面向大众的虚拟地图应用,并需要配合手机的陀螺仪功能才可以工作,那么我们必须选择本地客户端的方式进行开发。

不过,正如我们之前提到的,在这两者之间,还有另外一种混血方案可以去考虑,也就是混合型客户端应用。

原生客户端应用(Native App)与混合型客户端应用(Hybrid App)

所谓混合型应用,就是在原生客户端中嵌入基于前端技术构建的页面视图;这种方式其实已经很常见了。本质上讲,页面视图就是HTML页面,但它不需要另外调用移动设备中的浏览器进行查看和操作。

混合型应用的典型实例其实是我们非常熟悉的:iPhone、iPad等iOS设备的本地App Store或iTunes,以及Twitter和Facebook的客户端等。

在混合型应用中,原生的部分其实只相当于一个架子或容器,应用的核心是基于HTML、CSS、JavaScrit或前端框架打造的页面视图。页面的静态文件资源可以存储在服务器端,动态数据通过Ajax的方式在页面视图与移动应用中传输。

所以,虽然从技术上讲,混合型应用是设备本地化的,但它们显然拥有两种不同的运作方式。下面是两个很常见的问题,在需求评估时经常会遇到。

Q:如果我有技术及资源去开发一套纯粹的原生客户端应用,那么有什么必要使用HTML等Web前端开发方式去打造混合型应用呢?

A:混合性应用的解决方案最主要的目的是解决跨平台的问题;对于每个平台,只需开发和维护“容器”性质的本地应用部分,而实际的内容功能则可以统一由一套页面视图来担当。

Q:那么干脆只做一套Web App好了,为什么还要使用原生客户端作为容器呢?

A:这个问题的答案包括两方面:

商业需求:对于很多客户案例来说,将应用通过App Store或Market推广出去,是一种商业方面的需求。比如,客户也许会希望自己的产品是付费应用,或者开发前的用户研究表明他们的用户多数是通过App Store安装本地客户端的。

硬件功能需求:混合型应用的一个优势在于,虽然本地化的框架只是作为页面视图的容器,但它毕竟是本地化的,在需要的时候,仍可提供访问硬件设备及相关功能的权限;这是单一的Web App所无法做到的。技术方面,可以通过JavaScript经由本地应用框架,与硬件功能进行通讯,例如控制摄像头等。

我确信,通过这种需求梳理,多数人会倾向于混合型应用的方式。其实这也正是本文接下来的主线——我们一起来看看有哪些前端开发工具是可以帮助我们进行混合型应用的开发的。我将它们分为四大类,接下来会分别进行介绍,并对它们的适用情况进行简单的对比。

跨平台的前端开发工具

这是第一大类,主要包括一些在传统Web前端开发方面比较常见的JS框架。它们在混合型应用的页面视图中可以起到同样重要的作用。

jQuery

jQuery显然是最有群众基础的JS库之一,为各种常见的JS功能需求提供了统一的API,包括DOM操作、Ajax、事件绑定等。它通过了A、B、C全部三个级别浏览器(包括桌面与移动版本)的严格测试,拥有庞大的开发者社区以及优质的文档资源,并且是完全开源的。

凡事有利必有弊,jQuery在浏览器方面的优异表现,一定程度上取决于它包含了大量用于修正桌面浏览器兼容性问题的代码;对于移动应用方面的开发来说,这方面的代码是没什么意义的。这让jQuery看起来有些重了。

对我个人来说,如果需要开发一个传统的、主要用于桌面设备浏览的网站,那么jQuery会是我的主要选择。但是对于网站移动化方面的项目或是混合型应用的开发,我不会选择它。

时间: 2024-08-01 21:50:49

前端开发者的跨平台移动应用开发策略及工具的相关文章

【译】前端开发者的基本要求

原文链接:http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ 本文在github上的链接:https://github.com/chyingp/blog/issues/1 备注:第一次翻译技术文章,标题都纠结了好久不知道肿么翻译,如发现翻译不当之处,可点击github链接提交评论,thx- 前几天我为一个项目写README文档,我希望其他开发者能够看到这个项目,并从中学到一些东西.突然我意识到,若放在几

大前端开发者需要了解的基础编译原理和语言知识

在我刚刚进入大学,从零开始学习 C 语言的时候,我就不断的从学长的口中听到一个又一个语言,比如 C++.Java.Python.JavaScript 这些大众的,也有 Lisp.Perl.Ruby 这些相对小众的.一般来说,当程序员讨论一门语言的时候,默认的上下文经常是:"用 xxx 语言来完成 xxx 任务".所以一直困扰着的我的一个问题就是,为什么完成某个任务,一定要选择特定的语言,比如安卓开发是 Java,前端要用 JavaScript,iOS 开发使用 Objective-C

9大跨平台移动 App 开发工具推荐

如今,移动应用开发已经变得越来越重要,开发人员面临最大的挑战之一就是在多个平台上运行应用程序.最新的应用程序代码支持"一次编写,到处运行"(WORA)的概念,即只要在一个平台上编写代码一次,就可以在多个平台运行.本文我们将为大家介绍 9 个优秀的移动 App 开发工具,帮你在短时间内设计出最前沿.最高效的应用. 9.移动应用开发工具 Codename One Codename One是一个针对移动应用开发者的.开源的.跨平台的Java工具,旨在帮助Java开发者通过单一代码库来针对所有

微信小程序会让前端开发者失业

这两天微信小程序的内测,被这个事件刷屏,让很多前端开发者感觉以后就是铁饭碗了.而我作为一个将近10年的前端开发者,恰恰看到了事情的另外一面,前端开发开发者的饭碗会被后端开发同学,设计师,产品经理以及其他想学习开发小程序的人占领,大部分低水平前端开发者面临失业.我为什么这样说,下面我来给大伙分析下原因: 我们想想在没有微信小程序的时候,前后端怎么来分工: 前端工程师 开发基础组件,页面的静态样式,交互 后端工程师 开发业务逻辑和把数据套在前端写好的静态页面上. 最不擅长是写页面布局,页面交互,开发

2017年6月前端开发者干货大合集

每个月的前端开发者干货素材大合集,相对而言更加专注于为网页设计师和前端开发者搜集相关的工具和素材,这次的大合集当中包含一款颇为有趣的屏幕录像软件,几款适用范围较广的基于Material Design的框架,还有一些性能测试库也非常好用.这些前端工具与素材功能各不相同,总会有一两款是你感兴趣,甚至正好想要的~ Kap Kap 是一款设计精巧的macOS 屏幕录像软件,它是基于Web技术来搭建的开源APP.这款应用中最令人着迷的是它的即时转码输出功能.Kap 是帮你记录APP的绝佳工具. Sizzy

《iOS App界面设计创意与实践》——快速提示:iOS开发策略

快速提示:iOS开发策略 iOS App界面设计创意与实践 在我们深入iOS UI.动画和手势背后的技术之前,掌握一些基础知识很重要.对于设计师而言,虽然不要求读完本书后能够编写代码,但是有一些标准的iOS开发策略,开发者或者必须在基于iOS SDK开发中遵循,或者应该作为最佳实践来遵循.作为设计师,了解这些因素对开发人员的影响,对于理解如何设计最佳用户体验是至关重要的.作为开发人员,快速温习一下最佳实践并没有害处. 模型-视图-控制器 当谈及编码原则时,模型-视图-控制器(MVC)是最基础的.

前端开发者,2017 年你应该学习什么

在当今的快节奏生态中,我们都倾向于花时间尝试最新的发明,然后在网络上进行激烈的辩论. 这里,我并不是说我们不能这样做.但我们的确应该把脚步放慢一些,并认真了解那些不会有很大变化的事情.这样不仅会提升我们的工作质量和我们所创造的价值 -- 还将切实地帮助我们更快理解这些新的工具. 本文融合了我的个人经历以及对新一年的希冀.正如我想热切表达自己想法一样,我也期待能在下方的评论表单中看到你的建议. 学习如何写出可读性高的代码 我们多数的工作并不是编写新代码,而是维护已有代码.这意味着你最终阅读代码的时

DB Solo v4.0发布 功能强大经济型跨平台数据库开发和管理工具

对数据库开发者和数据库管理员两者而言,DB Solo都是一款经济且http://www.aliyun.com/zixun/aggregation/17547.html">功能强大的跨平台数据库开发和管理工具(非开源).由于其丰富的功能设置,它与价格更高的其他同等级工具相比毫不逊色.DB Solo拥有直观的用户界面,能让你考察和管理数据库对象,也可执行你自己的ad-hoc查询.DB Solo支持现今各主流操作系统和DBMS产品. DB Solo - The SQL Query Tool is

站长蜕变记:万能的网站前端开发者

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 前面已经发布过了站长蜕变记的首篇文章:基础要素的构成.里面所讲述的都是准备阶段的事情,如果你没有看过而且也是刚刚入门的话,那么建议略读一下,可能会对下面的讲述在理解上面有所帮助.本篇的标题是:万能的网站前端开发者.是站长完美蜕变的第二阶段,也是非常重要的阶段.是的,这篇文章告诉你的就是,想要蜕变,你就必须成为一名优秀的网站前端开发者.下面,我