移动开发者们,是时候使用HTML5了!

Html5喊了好多年了,至今仍没有被大规模的使用。依然记得2012年参加HTML5梦工厂(现在叫iWeb峰会)去了好多人,当时天真的以为,Html5真的开始流行起来了,于是就在会场卖书的地方买了本Html5的书来学。后来,大家知道的,Html5都是不温不火,但是我却没有减少对其关注的热情。

由于我一直做移动APP的开发,多终端同一套逻辑开发多次不说,同时开发人员还要和UI和产品多次沟通来实现,身为App开发者,这里面的苦,我有发言权。所以,特别希望看见一款跨平台的Framework能Cover住所有平台,真正能达到一次编写,所有移动终端运行的目的。中间接触了Hbuilder(这个是在14年iWeb峰会上看见的)、AppCan、WeX5、ApiCloud等。仅限于了解没有太深入,大致的结果如下表(对比结果都是本人实践的观点):


框架名称

优点

缺点
ApiCloud
号称重新定义移动开发有自己的BAAS服务,直接后台编辑数据库表,直接生

产了对应REST API,爽前所未有。有自己的Store,里面有一些第三方组件,

可以使用。


产品上为了和Baas结合有端API,服务端Api,得折

腾下才能跑起来,要学的东西稍多。对于没有Server

开发经验的人来说可以只看端Api。

AppCan
应该是自己研发的移动App跨平台开发引擎,应该对自己比较有信心,目前已

经开源,赞!对于喜欢折腾的人来说是一个福音。有商业案例,我下载了一个

吉祥航空如E行的案例运行了下,基本能满足需求。没仔细往下研究了。


从吉祥航空如E行 (2.0.3)这个APP来看,体验上还

有待加强,值得开发者试一下。

Hbuilder
使用html5plus来弥补原生Webview性能不足的问题;并且很好解决了如何

和Native通信的问题,在Js中可以实例化Native的组件等等。Demo运行起来

也比较流畅。是这四个里面体验最好的吧!有自己的Hbuilder编辑器好用。


文档、教程不是很完善。自己虽然有一个UI框架

但是对我这样的菜鸟来说上手还是一个问题。最终

做了一个简单的APP之后,接触的比较少了。

WeX5
号称真正的全平台,微信、安卓、IOS 网站,真正的一次开发到处运行啊。由

于文档教程不是很顺畅,没有深入研究。

文档不是很多,上手需要花点时间。

从上面的总结来看,Html5虽然没有来,对各个厂商来说都在磨拳擦掌,场面可以说是已经战火四起了。不过,对于开发者的我们来说是一个利好,我喜欢。不过今日我要介绍的不是上面的框架,而是国外一个比较流行的框架叫Ionic,其实要说跨平台开发上面的几个框架都能满足,不过性能和体验上的问题都是User Sensitive的,不得不考虑。这也是我推荐Ionic的原因,它专注体验极度优化,贴近原生。按照官方的教程和资源Step By Step 很快我就搭建了一个TODO的App~~~体验地址(安卓版)传送门-点击下载
APP截图:

***
好了,到此为止,下载体验过这个APP的如果觉得 体验上不够好可以不用往下看了。因为往下面说的都是关于Ionic的知识喽;如果您觉得体验很赞,想研究的,我把源码放在了github:前往ionic-todo APP 源码。有需要的自己可以下载编译,研究。

不好意思,说了那么久才进入正题,这也算是史上最长的开场白了吧!

什么是Ionic,它适合做什么?

ionic是一个专注于开发与构建Hybird模式跨平台的HMTL5框架。Hybird模式的APP相当于拥有访问本地设备接口(例如访问相机、文件系统,传感器)能力的并且运行在一个浏览器外壳的一个微型网站。因此Hybird模式开发的APP有许多原生APP所没有的优势;特别是在跨平台支持、快速开发以及快速访问第三方代码方面。
ionic可以想象为处理让APP拥有令人瞩目的UI交互体验以及漂亮的外观的一个前端框架。有点类似于Bootstrap for native,不过ionic支持更广泛和更贴近原生native mobile的组件。
和响应式框架不同的是,ionic与生俱来拥有已经存在的网页开发中所不存在的非常贴近于native mobile的样式和UI 组件、布局。并且还提供了一些可选的并且强大的方法去构建基于已经存在的Html5开发框架。
既然ionic是一个专注于体验和运行效率的HTML5开发框架,它需要一些类似于Cordova或者PhoneGap的一些包装器去作为一个原生APP运行。强烈推荐使用Cordova,ionic的一些工具都是基于Cordova的。

Ionic的由来

开发ionic的团队说,他们强烈的意识到HTML5将会一直运行在移动设备上,就像HTML5已经运行在PC电脑上一样。一旦计算机变的足够强大并且浏览器技术变的足够的先进,几乎所有的人都将被迫花费时间去和浏览器打交道。开发者已经开发了大量的Web站点和应用程序,近来由于移动领域开发技术的进步,手机、平板电脑目前也能运行这些Web应用程序了。
使用Ionic Html5框架,能够去构建基于nativie或者hybird app而非是用来开发移动站点的,因为目前市场上已经存在了大量的用来开发移动站点的开发工具。所以,Ionic app不是被设计用来运行在Chrome或者Safari,而是被设计运行在更低层次的被Cordova或者PhoneGap包装过的浏览器内核中,例如IOS的UIWebView或者安卓的WebView。

用Ionic开发Hybrid App

熟悉Web的开发者将会发现Ionic的程序结构和Web开发比较类似。从核心上说,一个Ionic App只不过是一个网友运行在一个Native App的壳里面。也就意味着,你可以用任何你熟悉的HTML、CSS、Javascript技术来是开发Ionic App。不同于网页通过url链接来跳转,使用Ionic是开发一个自容器(译者注:可以理解为单页应用程序,跳转是基于锚点的)的App的体验。
开发基于Ionic框架的APP需要使用HTML、CSS、Javascript,一些着急的开发者可能要深入到native层面去研究Corvoda插件或者Native代码,这对于开发一个伟大App是没有必要的(译者注:也可以去折腾)。

ionic性能

ionic性能比较好,体验很赞,这也是我写这篇文章的去推荐使用的目的。具体如何,看官们可以使用OneAPM的性能监控工具来(监控WebView功能)测试下,下面是一个监控百度首页加载的页面截图,

Ionic是构建Hybird App的一个相对较新的框架,版本刚从bate版本到1.0版本,其中1.0版本的修正版有好多个才推出正式版,可见已经足够稳定了。并且在github上被标星过17766次,fork过2386次了,足见其受欢迎程度。是时候拥抱H5了!

ionic介绍部分参考:The Ionic Book第一章

本文系OneAPM工程师原创文章。OneAPM是中国基础软件领域的新兴领军企业,能帮助企业用户和开发者轻松实现:缓慢的程序代码和SQL语句的实时抓取。想阅读更多技术文章,请访问OneAPM官方技术博客

时间: 2024-10-25 15:37:36

移动开发者们,是时候使用HTML5了!的相关文章

HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了

2007 年 W3C (万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下来,HTML5 将颠覆原生 App 世界.这听起来有点危言耸听,但若认真分析 HTML5 的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看 HTML5 为什么诞生.这 8 年是怎么过来的. 一. HTML5 的诞生 自 W3C 于 1999 年发布 HTML

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

Android软硬整合设计与框架揭秘: HAL&Framework &Native Service &App&HTML5架构设计与实战开发

掌握Android从底层开发到框架整合技术到上层App开发及HTML5的全部技术: 一次彻底的Android架构.思想和实战技术的洗礼: 彻底掌握Andorid HAL.Android Runtime.Android Framework.Android Native Service.Android Binder.Android App.Android Testing.HTML5技术的源泉和精髓等核心技术,不仅仅是技术和代码本身,更重要的是背后的设计思想和商业哲学. 一.课程特色 l  贯通And

HTML5的核心内容

开发者可以放心地使用html5的理由 兼容性.HTML5在老版本的浏览器可以正常运行,同时支持HTML5的新浏览器也能正常运行HTML4,用HTML4创建出来的网站不是必须全部重建的. 实用性.HTML5能够解决实际问题,HTML5内部只封装了切实有用的功能,不封装复杂而没有实际意义的功能 非革命性的发展.HTML5内部功能不是革命性的,只是发展性的.因为兼容性,所以是非革命的,不会推翻前面的标准.因为实用性,它具有发展意义的. html5想解决的问题 Web浏览器之间的兼容性很低.HTML5详

移动开发者必须了解的10大跨平台工具

2014-02-25 22:32 1105人阅读 评论(1) 收藏 举报 目录(?)[-] HTMLJavaScriptCSS篇 C篇 Lua篇 其他语言篇 游戏开发篇 在本文中,我们盘点了过去的一年里,最受开发者喜爱的跨平台应用及游戏开发工具,尤以HTML/JS/CSS为众,却也包含使用其他语言进行开发的工具,比如Xamarin,使用C#,就能开发出运行于各大主流移动平台上的原生App. 成本低.周期短,易于上手,不用重新设计,种种好处让跨平台开发风头无量,也让诸多跨平台开发工具趁势崛起.在本

HTML5定稿了(为什么原生APP界将被颠覆)

导语:HTML5将颠覆原生App世界,这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么

盘点:崛起中的九大HTML5开发工具

HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silverlight,HTML5为实现这些插件的功能提供了一种标准化的方式. 虽然HTML5标准尚未开发完成,但是随着开发者对HTML5的兴趣日渐浓厚,开发工具提供商也开始跟进.以下介绍的9款应用工具已经能够帮助开发者在程序中集成HTML5功能. 一.Adobe Edge 目前还处于预览阶段的Adobe Ed

html5 实现video标签的自定义播放进度条

现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5-Video-Player</title> <style type="text/css"> .vi

HTML5定稿

HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了 本文转载自: http://www.cnblogs.com/tuyile006/p/4103634.html(只作转载, 不代表本站和博主同意文中观点或证实文中信息) 2007 年 W3C (万维网联盟)立项  HTML5 ,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下来,HTML5 将颠覆原生 App

HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么诞生.这8年是怎么过来的. 作者简介:王安,数字天堂公司董事长,DCloud CEO. HTML5的诞生 自W3C于1999年发布HTM