返回
基础
分类

禁止转载,但是在移动平台这就是场噩梦

日期: 2020-02-01 04:45 浏览次数 : 144

我本人是HTML5的大粉丝,因为它可以给我带来满足我创造力的开发速度。

本文由 伯乐在线 - 刘忻沂必赢手机登录网址 , 翻译。未经许可,禁止转载!
英文出处:Yacine Rezgui。欢迎加入翻译组。

必赢手机登录网址 1

但自从移动平台崛起以来,这项技术所涉及的开发就开始变得复杂起来。在桌面平台看来,一切都非常清楚。网站开发就是一场不断持续的进化,即便如此还 是有人对其了如指掌。但是在移动平台这就是场噩梦。开发者们被各种开发HTML5移动应用的方法搞得晕头转向,所以我希望这个指南可以帮助他们。

我本人是HTML5的脑残粉,因为它可以给我带来满足我创造力的开发速度。

  对于大部分Web开发人员,HTMLCSS和 Java是他们最熟练的开发技能。然而,开发一个原生的移动App,对他们来说却是完全陌生的领域。因为开发Android,iOS 或 Windows Phone上的原生App,需要掌握完全不同的开发语言( Android使用Java,iOS app使用Objective-C或Swift,而Windows Phone则使用.NET),除此之外,你还需要使用完全不同的开发环境、IDE,并且掌握不同的开发框架,这些都成了杭州APP开发人员开发移动App的巨大障碍。

正如我在前一篇文章中提到过,如果想要实现一个移动应用的话,你首先得是一个web开发者。

但自从移动平台崛起以来,这项技术所涉及的开发就开始变得复杂起来。在桌面平台看来,一切都非常清楚。网站开发就是一场不断持续的进化,即便如此还是有人对其了如指掌。但是在移动平台这就是场噩梦。开发者们被各种开发HTML5移动应用的方法搞得晕头转向,所以我希望这个指南可以帮助他们。

  但随着技术的发展,我们已经看到许多基于Web技术的移动开发框架,现在你只需要牢固掌握HTML、CSS和Java技术就可以开发出一个移动App来。通过像PhoneGap这样的编译工具能够将你开发的Web应用转换为不同平台上的app,从而带来了极大的便携性。

在开始给大家介绍现有的不同平台和框架之前,我必须声明我并不认为Titanium Mobile是一个HTML5解决方案。如果想要知道为什么请参阅我的前一篇文章。

正如我在前一篇文章中提到过,如果想要实现一个移动应用的话,你首先得是一个web开发者。

  这里,来自技匠推荐最优秀的10个移动开发框架。如果你已经准备好做出下一个10亿级的app,那么就来看看下面的推荐吧!

目前有四个解决方案(其他新的解决方案也在不断出现,但都还处于初期状态)可以用于开发HTML5移动应用。

在开始给大家介绍现有的不同平台和框架之前,我必须声明我并不认为Titanium Mobile是一个HTML5解决方案。如果想要知道为什么请参阅我的前一篇文章。

必赢手机登录网址 2

Web App

这是最直白的方法。简单来说,就是一个通过浏览器访问的网站。Android和iOS都提供将网站链接添加到桌面的功能。这样的应用通过恰当的配置可以以全屏状态运行,并且配合Appcache可以实现离线运行。

更新:Daniel Appelquist提醒大家在Firefox OS,Android上的Firefox以及今后的Chrome都会为用户提供将web app添加到移动设备的功能。前提是你需要为你的web app声明一个配置清单。嗯,挺好。

对我来说,这并不是一个可靠的方案:

  • 首先,Appcache这东西实在是太恶心了:

  • ServiceWorker,这是一个Appcache的替代方案,虽然目前无法使用但是他的技术规格非常酷炫:

  • 目前HTML5 API在iOS以及Android 4.x之前版本的支持情况非常之不可靠。

  • 不支持推送消息(Firefox OS支持)

  • 无法与原生SDK交互(Firefox OS要做得稍微好些)

目前有四个解决方案(其他新的解决方案也在不断出现,但都还处于初期状态)可以用于开发HTML5移动应用。

  1. jQuery Mobile

利用Phonegap / Cordova 集成开发平台

这个是目前来讲,最有效的妥协方案。现在已经有一整套相关生态系统包括工具,论坛,开发者。你能通过它来利用HTML5的API以及原生API。到最后,你得到的会是一个真正的APP。此平台也遵从HTML5规范以协助web应用的转化。

 

  jQuery Mobile是一个非常健壮的跨平台app开发框架。它能够支持很多不同的平台,包括桌面应用、智能手机、平板、以及电子阅读器 如 Nook 或 Kindle。与它的同胞 jQuery UI 类似,jQuery Mobile也包含了一组UI组件,开发人员可以非常方便地使用它们来开发UI界面。而且,这些UI组件都已经为移动端进行了优化,能够为应用提供更好的性能。

手工接入本地环境

这个方案针对的是那些规模较大并对设备原生代码颇具了解的团队。很多大公司就采用的这种方式。它可以将高性能的原生UI组件与高灵活性的HTML搭配使用。

如果你感兴趣的话,你可以看看这些链接:

  • guide/webapps/webview.html

  • AppleApplications/Conceptual/SafariJSProgTopics/Tasks/ObjCFromJavaScript.html

  • true-javascript-uiwebview-integration-in-ios7

 

Web App

这是最直白的方法。简单来说,就是一个通过浏览器访问的网站。Android和iOS都提供将网站链接添加到桌面的功能。这样的应用通过恰当的配置可以以全屏状态运行,并且配合Appcache可以实现离线运行。

更新:Daniel Appelquist提醒大家在Firefox OS,Android上的Firefox以及今后的Chrome都会为用户提供将web app添加到移动设备的功能。前提是你需要为你的web app声明一个配置清单。嗯,挺好。

对我来说,这并不是一个可靠的方案:

  • 首先,Appcache这东西实在是太恶心了:
  • ServiceWorker,这是一个Appcache的替代方案,虽然目前无法使用但是他的技术规格非常酷炫:
  • 目前HTML5 API在iOS以及Android 4.x之前版本的支持情况非常之不可靠。
  • 不支持推送消息(Firefox OS支持)
  • 无法与原生SDK交互(Firefox OS要做得稍微好些)

 

必赢手机登录网址 3

使用Intel XDK基础开发环境

说实话我不能给这个方案一个准确的评价。在我第一次安装这个编辑器后,它的复杂程度让我惊呆了,所以我也没有动力再去研究它。就我所了解的,它和 Phonegap应该遵从的同样的精神不过他们专门打造了一个完整的IDE。我并不确切地知道具体地差别在哪。如果哪位在Intel工作的老兄读到这篇文 章,麻烦你给我提供一下更多相关细节好吧?

Phonegap / Cordova

这个是目前来讲,最有效的妥协方案。现在已经有一整套相关生态系统包括工具,论坛,开发者。你能通过它来利用HTML5的API以及原生API。到最后,你得到的会是一个真正的APP。此平台也遵从HTML5规范以协助web应用的转化。

 

  2. Cordova/ PhoneGap

原生HTML

这个是完美的解决方案。操作系统直接执行HTML5代码而不是通过桥接的方式链接HTML和原生代码。你能使用所有的API,debug工具也能完美的使用。而实际上,目前只有Firefox OSTizen拥有这样的系统。

------------------------------

现在你知道了这些不同的方案,我们可以摆一摆移动HTML5应用的八卦。当乔布斯在第一代iPhone发布会上宣布有移动HTML5之后,其相关开发就开始了。Safari和Firefox在当时是最好的HTML5浏览器(Google Chrome那时还没出来)。

但是一年之后,应用商店上线了,但是只能用Objective-C开发应用。该死的乔布斯。

之后没过多久,一帮开发者就创造了Phonegap。我还记得当时他们拿一个wiki当主页。它当时bug无数,虽然的确是个天才的想法。但问题是与此同时开发者们也纷纷开始制作移动HTML5应用。所以许多人被它搞得很恼火然后到处说它坏话。

自那以后,又发生了很多事情:智能手机的CPU越来越强大,CSS渲染可以通过GPU完成,HTML5的规范更加精准,浏览器引擎更加强大。

前端开发也同样有了很大的改进。我们的JS代码不再是一个巨大的$(document).ready函数。我们开始使用更加标准化的框架(AngularJS, BackboneJS, EmberJS, Polymer, ReactJS)而且我们的debug工具也不再弱于那些原生debug工具。我们也开始使用构建系统,包管理器,以及代码风格。

自主研发桥接

这个方案针对的是那些规模较大并对设备原生代码颇具了解的团队。很多大公司就采用的这种方式。它可以将高性能的原生UI组件与高灵活性的HTML搭配使用。

如果你感兴趣的话,你可以看看这些链接:

  • guide/webapps/webview.html
  • AppleApplications/Conceptual/SafariJSProgTopics/Tasks/ObjCFromJavaScript.html
  • true-javascript-uiwebview-integration-in-ios7

 

  PhoneGap是基于Cordova的。Cordova/PhoneGap提供了一组Java API,能够连接设备的底层功能,比如摄像、定位、通讯录、指南针等等。Cordova/PhoneGap使我们不需要使用任何原生程序语言,而直接利用像jQuery Mobile这样的开发框架进行移动应用的开发。最后,通过调用它的SDK将你的应用编译为不同平台上的app。这些平台包括 iOS,Android,Windows Phone,Blackberry和Web OS。

HTML5移动开发自2009年以后就完全变样了。

所以到最后,HTML5的问题是什么?就是UI

有些读者已经知道,我真的很讨厌jQuery Mobile,然而很不幸的是,大多数开发者都用它来做移动开发。Bootstrap也没法解决这个问题。它确实是响应式的但是并不是针对的移动平台。原生应用开发者用他们的原生组件来和HTML/CSS相比较,这明显是很不公平的。

原生平台提供很多“拖来就用”的组件,而且是经过全面的测试,优化,并已经包含了性能优势。iOS提供的原生长列表组件会自动隐藏那些看不到的元素,但是在HTML/CSS里面并非如此。

Web UI是开发者心中永远的痛因为Apple或Google从未提供过Web UI的框架。想像一下如果有种“Bootstrap”可以拥有所有原生组件的特性(性能,渐变,个性化等等)。他们本来可以做到,但这并不是他们优先考虑的。然而现在情况不同了。

Intel XDK

说实话我不能给这个方案一个准确的评价。在我第一次安装这个编辑器后,它的复杂程度让我惊呆了,所以我也没有动力再去研究它。就我所了解的,它和Phonegap应该遵从的同样的精神不过他们专门打造了一个完整的IDE。我并不确切地知道具体地差别在哪。如果哪位在Intel工作的老兄读到这篇文章,麻烦你给我提供一下更多相关细节好吧?

 

必赢手机登录网址 4

Windows Metro

微软是这方面第一让我有深刻印象的。他们的Metro UI无论是在C++,C# 还是 HTML里都有同样的特性:

HTML5中的ListView的一个例子:

必赢手机登录网址 5

原生HTML

这个是完美的解决方案。操作系统直接执行HTML5代码而不是通过桥接的方式链接HTML和原生代码。你能使用所有的API,debug工具也能完美的使用。而实际上,目前只有Firefox OSTizen拥有这样的系统。

 

------------------------------

现在你知道了这些不同的方案,我们可以摆一摆移动HTML5应用的八卦。当乔布斯在第一代iPhone发布会上宣布有移动HTML5之后,其相关开发就开始了。Safari和Firefox在当时是最好的HTML5浏览器(Google Chrome那时还没出来)。

但是一年之后,应用商店上线了,但是只能用Objective-C开发应用。草泥马乔布斯。

之后没过多久,一帮开发者就创造了Phonegap。我还记得当时他们拿一个wiki当主页。它当时bug无数,虽然的确是个天才的想法。但问题是与此同时开发者们也纷纷开始制作移动HTML5应用。所以许多人被它搞得很恼火然后到处说它坏话。
自那以后,又发生了很多事情:智能手机的CPU越来越强大,CSS渲染可以通过GPU完成,HTML5的规范更加精准,浏览器引擎更加强大。

前端开发也同样有了很大的改进。我们的JS代码不再是一个巨大的$(document).ready函数。我们开始使用更加标准化的框架(AngularJS, BackboneJS, EmberJS, Polymer, ReactJS)而且我们的debug工具也不再弱于那些原生debug工具。我们也开始使用构建系统,包管理器,以及代码风格。

 

  3. Sencha Touch

Firefox OS

Firefox OS更加有意思。Mozilla自己同第三方开发者使用同一套CSS。说实话这真是最棒的想法了。你可以直接去GitHub进行贡献:

必赢手机登录网址 6

HTML5移动开发自2009年以后就完全变样了。

 

所以到最后,HTML5的问题是什么?就是UI

有些读者已经知道,我真的很讨厌jQuery Mobile,然而很不幸的是,大多数开发者都用它来做移动开发。Bootstrap也没法解决这个问题。它确实是响应式的但是并不是针对的移动平台。原生应用开发者用他们的原生组件来和HTML/CSS相比较,这明显是很不公平的。

原生平台提供很多“拖来就用”的组件,而且是经过全面的测试,优化,并已经包含了性能优势。iOS提供的原生长列表组件会自动隐藏那些看不到的元素,但是在HTML/CSS里面并非如此。

Web UI是开发者心中永远的痛因为Apple或Google从未提供过Web UI的框架。想像一下如果有种“Bootstrap”可以拥有所有原生组件的特性(性能,渐变,个性化等等)。他们本来可以做到,但这并不是他们优先考虑的。然而现在情况不同了。

  Sencha Touch 是一个基于HTML5和CSS3的移动开发框架。同时它提供了一组能够支持不同移动平台的组件以及动效特性。Sencha Touch支持Cordova和PhoneGap.你能将你的应用编译成支持不同平台的app。除此之外,Sencha Touch还提供了一组主题,可以应用到iOS、Android、Blackberry、Windows Phone、Tizen 等平台中,让用户感觉它很像原生app.

那么Google呢?

Google是最后一个但也很不错。他们采用了另一种方式。他们给我们带来了AngularJS以及最新的Polymer。Polymer是是一个让你可以轻易创建web组件的框架。

在他们完成开发web应用底层结构之后,他们开始专注于UI。现在的成果就是Material Design(译注 这里是相关介绍),他们的想法是创造完全响应式的设计,而并不是简单的缩放元素大小,这样可以使得应用在每个屏幕尺寸上看起来都很性感。他们使用Polymer来提供这些组件。

必赢手机登录网址 7

同时现在还有其他的UI框架!

Windows Metro

微软是这方面第一让我有深刻印象的。他们的Metro UI无论是在C++,C# 还是 HTML里都有同样的特性:

HTML5中的ListView的一个例子:

必赢手机登录网址 8

 

 

必赢手机登录网址 9

Ionic Framework

这个是个人最爱。其设计与iOS很相近,但不像某些人,它在Android上看起来也很棒(看什么看我说的就是你jQuery Mobile)。他们带有AngularJS的指令集,现装现用,性能优化,自带动画,等等。简而言之,这货就是春哥附体。下拉刷新,侧边菜单,无限滑 滚,支持超长列表(没错,超过1000条元素),选项夹,等等。

必赢手机登录网址 10

这个截图是我正在开发的一个应用

Drifty,这个开发了Ionic Framework的公司,正在同其他开发者一起研发Angular Material,一个类似于Polymer中Material Design的东西不过是基于AngularJS。

还有其他更多不错选择,不过目前还达不到Ionic那么好。不过大家还是可以关注一下,我相信很快他们都会改进:

  • Onsen UI

  • Ratchet

  • TopCoat

  • HeartCSS

那么Apple呢?我觉得他们还是更倾向于迫使人们用Swift或者Obj-C进行原生开发。万幸的是,我之前提到的大多数框架都支持iOS。SB了吧,Tim!

我希望现在你对HTML5移动开发能够有了更多的了解。这个指南还没有完成,我只是想到哪写到哪。如果你发现我有什么地方写的不对,请尽管给我留言或者通过你方便的方式联系我:http://www.yrezgui.com

本文由 伯乐在线 - 刘忻沂 翻译自 Yacine Rezgui。

Firefox OS

Firefox OS更加有意思。Mozilla自己同第三方开发者使用同一套CSS。说实话这真是最棒的想法了。你可以直接去GitHub进行贡献:

必赢手机登录网址 11

 

  4. Ratchet

那么Google呢?

Google是最后一个但也很不错。他们采用了另一种方式。他们给我们带来了AngularJS以及最新的Polymer。Polymer是是一个让你可以轻易创建web组件的框架。

在他们完成开发web应用底层结构之后,他们开始专注于UI。现在的成果就是Material Design(译注 这里是相关介绍),他们的想法是创造完全响应式的设计,而并不是简单的缩放元素大小,这样可以使得应用在每个屏幕尺寸上看起来都很性感。他们使用Polymer来提供这些组件。

必赢手机登录网址 12

 

同时现在还有其他的UI框架!

  Ratchet最早是Twitter内部用于制作移动app原型的工具,后来Twitter将它开源并发布出来。Ratchet自带了一组用户界面组件和Java插件,可以用来创建一些简单的移动app。在2.0版本中,Ratche还自带了两套适用于iOS和Andriod平台的UI主题。

Ionic Framework

这个是个人最爱。其设计与iOS很相近,但不像某些人,它在Android上看起来也很棒(看什么看我说的就是你jQuery Mobile)。他们带有AngularJS的指令集,现装现用,性能优化,自带动画,等等。简而言之,这货就是春哥附体。下拉刷新,侧边菜单,无限滑滚,支持超长列表(没错,超过1000条元素),选项夹,等等。

必赢手机登录网址 13

这个截图是我正在开发的一个应用

Drifty,这个开发了Ionic Framework的公司,正在同其他开发者一起研发Angular Material,一个类似于Polymer中Material Design的东西不过是基于AngularJS。

 

还有其他更多不错选择,不过目前还达不到Ionic那么好。不过大家还是可以关注一下,我相信很快他们都会改进:

  • Onsen UI
  • Ratchet
  • TopCoat
  • HeartCSS

 

那么Apple呢?我觉得他们还是更倾向于迫使人们用Swift或者Obj-C进行原生开发。万幸的是,我之前提到的大多数框架都支持iOS。SB了吧,Tim!

我希望现在你对HTML5移动开发能够有了更多的了解。这个指南还没有完成,我只是想到哪写到哪。如果你发现我有什么地方写的不对,请尽管给我留言或者通过你方便的方式联系我:http://www.yrezgui.com

 

 

赞 收藏 评论

必赢手机登录网址 14

关于作者:刘忻沂

必赢手机登录网址 15

(新浪微博:@lyDASHsBOK) 个人主页 · 我的文章 · 10

  5. Ionic

  如果你对app的性能很关注的话,Ionic会是一个合适的框架。Ionic是一个基于HTML5的app开发框架,它不需要任何第三方Java库,他能与Angular.js组合在一起使用,开发出高性能、交互型的app。和Ratchet类似,Ionic也自带了一组优秀的font图标——Ionicons和可复用的HTML Classes来构建移动应用UI。

必赢手机登录网址 16

  6. Lungo

  Lungo是一个基于HTML5和CSS3的轻量级移动开发框架。它的默认样式非常漂亮,你可以直接使用在你的app中。除了包含一组UI组件之外,Lungo还提供了很多Java API,你可以利用这些接口来控制你的app。Lungo支持下面这些平台:iOS,Android,Blackberry和Firefox OS。

必赢手机登录网址 17

  7. jQT

  jQT的前身是就Qtouch,是一个很酷且高性能的Zepto/jQuery插件用来开发移动Web应用。它主要是为开发基于WebKit浏览器的应用而设计的。jQT非常容易被定制和扩展,它自带了一套UI主题,你可以通过修改Sass/Compass来对界面进行定制,你也可以使用CSS3的特性来渲染很酷的3D动画。

必赢手机登录网址 18

  8. Junior

  Junior和jQT一样,也是一个Zepto插件,但Junior依赖一些其他的第三方库来提供额外的功能,比如Backbone.js,Flickable.js和Ratchet。

必赢手机登录网址 19

  9. Jo

  Jo这个框架可用于开发支持HTML5的移动设备应用,如iOS,webOS, Android和Chrome OS等平台。它拥有标准,类原生的UI元素比如用于屏幕登录的Web表单控件,还有弹出小部件可用于在用户点击界面时提供一些额外的信息。

必赢手机登录网址 20

  10. Famo.us

  Famo.us提供了一个强有力的Java框架和大量的开发者工具,这些框架和工具被用来构建功能丰富、反应快速的Web应用程序。Famo为开发者提供视觉、布局、框架、用户界面、和用户体验的部件、主题、字体、和Java语言插件等功能,使网页开发者能进行多种设备应用的开发。其创造出来的动效和画面看上去非常轻快、自然。此外,框架所具备的最大优势在于能够严格维护模块化以保持画面动作的灵活性。最后,配合量身定制的服务端技术,开发者就能创建出高质量的App来。