HTML5性能不输原生app,用拼积木方式做HTML5产品

   2015-06-24 0
核心提示:可能你已经发现了,一个好玩有趣的HTML5页面在微信朋友圈里获得的用户关注度会远超过那些普通的独立应用。在移动应用越来越多,推广越来越难做的情况下,你的产品是不是也应该有一个HTML5页面?

 

HTML5性能不输原生app,用拼积木方式做HTML5产品

可能你已经发现了,一个好玩有趣的HTML5页面在微信朋友圈里获得的用户关注度会远超过那些普通的独立应用。在移动应用越来越多,推广越来越难做的情况下,你的产品是不是也应该有一个HTML5页面?

如果答案是肯定的,那么或许可以试试Amaze UI这套开源的HTML5前端框架,利用它提供的Web组件、JS插件和层叠样式表(CSS),你可以快速的搭建出一款HTML5产品。

对于那些经常在移动设备上访问Web页面的用户来说,你可能已经注意到了,一个Web页面基本可以分为菜单、标题栏、图片画廊、内容列表、分割线这几大块。在Amaze UI里面,官方提供了各种各样的Web组件,你甚至可以像拼积木那样来搭建HTML5产品。

除了上面提到的那几个 主要网页组件之外,像折叠面板、页头、页脚、图片轮播、选项卡、简介、段落这些都是Amaze UI中开发者可以直接使用的Web组件。由于Amaze UI是一款开源产品,所以一些第三方的开发者也在不断向其贡献特色化的组件。比如来说,在涉及到地理位置的时候,用户可能会需要一个地图指引,这时你就可 以集成“百度地图”的组件;在文章下面你可能需要评论体系,这时又可以用“多说”的组件;一些服务性的网页又可能需要客服,这时“美洽客服”组件自然也就 派上用场了。

当然,可能有些开发者会说,这些元素只是Web站点的一部分,当你真正来做一个Web站点时,你可能还需要各种各样的交互效果和文字排班样式。这时Amaze UI的JS组件和CSS组件的用处就显现出来了。

通过JS组件,开发者可以获得一系列的UI增强效果,比如,警告框、平滑滚动、加载进度条、弹出框、模态窗口、下拉组件、按钮交互等等。通过CSS组件,开发者既可以直接集成像按钮、表单、表格这样的HTML元素,又可以使用小徽章、面包屑导航、按钮组这样的页面组件。

目前,Amaze UI总共有近20个CSS组件、10个JS组件和17款包含近60个主题的Web组件,按照CEO陈本峰的说法,和国外的一些Web前端框架相 比,Amaze UI会更多的考虑中文用户的需求。比如在字体排版上,Bootstrap这套前端框架就没有定义中文字体,这样你的网页在不同的系统和浏览器下的展示效果 可能都是不一样的,但Amaze UI中由于定义了中文字体而且针对国内市场份额比较高的浏览器做了优化,所以就可以避免出现这样的情况。

对于那些正在尝试做 HTML5产品的公司来说,你可能还停留在Facebook、LinkedIn等大公司从HTML5 app“叛逃”到原生app的阴影中,因为即使到了今天,一些人在谈到HTML5时还会举上面的例子。不过一位曾经在Chrome团队工作的工程师 Shinji Ikari告诉PingWest,Facebook当初之所以会把HTML5 app做的那么慢,这更多的是Facebook自身的原因,而不是由于HTML5不行。因为从技术上来说,HTML5的缺陷不是慢,而是不能Scale。 当时,Facebook的HTML app还在用XML,所以可以说他们的技术是相当落后的。

为了证明HTML5 app的性能不输给原生应用,Google的两位工程师专门做了一个Fastbook的HTML5 app来表明Facebook的“叛逃”并不是HTML5的错。按照Shinji Ikari说法,两年前HTML5 app的性能就可以赶上原生app了,何况现在!

那么你或许会好奇,既然HTML5的性能不输给原生app,那么我们平时看到的优质HTML5 app为什么这么少呢?对于这一点陈本峰觉得这更多的还是这一领域开发人员的技术积累不足。

Shinji Ikari也表示,对于很多应用来讲,写成原生app几乎是必然的,如果你在写一个3D游戏,而不需要任何的DOM(文档对象模型),那么根本没有任何理 由使用HTML。使用JavaScript不仅不会简化你的工作,还会让你的项目推进变得更糟糕。但是,像Facebook的这样手机应用,就是一个列 表,没有什么可以超出HTML5的范围的内容,使用HTML5应该会得心应手,所以很多时候大公司对于技术的选择没有太大的借鉴价值。

好了,在解释了HTML5并不像人们想象的那么弱之后,也许你会觉得Amaze UI里的这些组件还不足于做出自己想要的产品,这也是Amaze UI选择开源的原因之一—让社区为其贡献更多的内容。如果你现在正在打算做HTML5产品,那么即便不选择Amaze UI框架,也不要让Facebook、LinkedIn这样的案例成为你的绊脚石。

【责
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Handlebars模板引擎介绍和开发指南
    Handlebars是一个Javascript模板引擎,能让你轻松高效的编写语义化模板,它是Mustache模板引擎的一个扩展,Handlebars和Mustache都是弱逻辑的模板引擎,能将Web前端的视图和代码分离,降低两者之间耦合。
    06-26
  • KendoUI2014移动调查报告:HTML5vs原生之辩
    KendoUI2014移动调查报告:HTML5vs原生之辩
    Telerik Kendo UI一直比较关心移动开发领域的使用情况,在最新的2014 HTML5全球开发者调查中,Kendo UI面向3500+个开发者,从普通程序员到CIO/CTO,从大型企业到小型企业,对他们的移动开发偏好展开了调查。
    06-26
  • WebComponents-面向未来的组件标准
    WebComponents-面向未来的组件标准
    对于前端开发者而言,W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而 不是“渔”,开发者在需求无法满足的情况下通过现有技术创造了各种组件,虽然短期满足了需求但是由于严重缺乏标准,导致同一个组件有成千上万的相似实现但 它们却无法相互重用,这很大程度上制约了组件化的最大价值-重用,Web Components则在组件标准化方面向前迈了一大步。
    06-26
  • AppCan:HybridApp技术已经成熟
    AppCan:HybridApp技术已经成熟
    在移动开发技术里,Native App和Web App之争一直没有停息,而介于Native和Web之间的Hybrid混合App异军突起,以其接近Web App开发简单、跨平台能力,以及接近Native App功能和性能表现逐渐为开发者们所接受,那么,现在Hybrid App发展到了什么程度呢?正益无线技术支持总监邱革节在接受51CTO记者采访时表示,Hybrid App技术已经成熟。
    06-26
  • 什么是ShadowDom?
    什么是ShadowDom?
    如果我需要把每个自定义的按钮都放到iframe里,你是什么感觉,会不会疯掉?所以,我们需要一些更好的东西。事实上,大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。
    06-26
  • 使用ShadowDOM创建Web组件
    使用ShadowDOM创建Web组件
    Web Components(组件)标准是一系列最新推出的标准,它可以被用来创建可被复用的Web部件,当页面中所使用的Web部件被更新为新版本时不必修改 页面中其他任何代码。这里所说的部件,是一种可实现与用户之间的交互的可视化组件,开发者可以使用HTML代码与JavaScript脚本代码来开发这些 部件。Web Componnts标准定义如何开发这些部件。
    06-26
  • GooglePolymer以及WebUI框架的未来
    开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同。他认为Polymer这样高互操作性的设计才应该是Web开发的未来。
    06-26
  • WebComponents实例:移动UI组件库GMU介绍
    GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,具有代码体积小、简单、易用等特点,组件内部处理了很多移动端的bug,覆盖机型广,能大大减少开发交互型组件的工作量,非常适合移动端网站项目。
    06-26
  • 移动应用新趋势:离线WebApp
    移动业界已经最终放弃了不分时间、不分地点为用户提供互联网连接服务的幻想。我们也看到了一系列新型产品与服务,它们的兴起标志着我们将以更为灵活的方式在无法接入网络时继续享受功能与便利。
    06-26
  • 2014年Web开发的7个转变方向
    2014年Web开发的7个转变方向
    很多读者喜欢预测网页设计趋势,让自己能够在网页设计、甚至网络发展中保持先机。找准每一年的发展趋势很重要。那么,2014年会有怎样的发展?我们一起来分析。
    06-26
点击排行