首页 > 专访 > 关键词 > Bootstrap最新资讯 > 正文

从Bootstrap到 Amaze UI 跨屏适配兼容更精彩

2014-07-25 10:07 · 稿源:InfoQ

近日云适配发布了开源的HTML5前端框架AmazeUI,目前处于内测期。根据Amaze UI的官网介绍,该框架的特点是mobile first,解决Web应用从PC向多屏适配的问题,兼容国内主流浏览器和平台,并且专注解决中文排版优化问题。

InfoQ中文站跟云适配CEO陈本峰进行了交流,了解有关AmazeUI框架的更多细节。

InfoQ:现在前端框架这么多,为什么还要开发Amaze UI

陈本峰:国内前端框架确实不少,但能解决浏览器存在的跨屏适配和兼容性问题的技术却很少。再加上国内对开源技术的思想意识不够,很多成熟的技术主要封闭在自己的公司内,这样造成整个产业链在技术上很难互惠互通。

与此同时,移动、跨屏已经成为了的当下互联网最热门的技术,而前端开发者在开发网页时,时常会陷入重复解决繁复的跨屏、适配问题,耗费精力,影响工作效率,产品开发进度慢这样的恶性循环中。

InfoQ:跟Amaze UI功能类似的之前的框架有哪些?你觉得它们什么地方不好用?

陈本峰:目前功能相似的能解决同类需求的主要是国外的开源框架,如Bootstrap、Foundation、Semantic UI。

Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示,其核心就是基于Less框架构建的CSS。Bootstrap框架拥有美观的样式和封装完善的JQ插件,使用方便,基于Bootstrap的扩展也很多,这是其他框架所无法比拟的,也是其最受欢迎的条件之一。

Foundation宣称是世界最好的响应式前端框架,默认支持5种网格布局,是三款框架中最复杂也是最灵活的。Bootstrap默认支持四种网格布局,Pure默认支持一种。

Semantic UI是语义化设计的前端框架,开发更加直观,UI组建可实时调试输出,其最大的特点是充分利用CSS3动画特效,简洁实用漂亮的样式。

以上各种产品我们也用过,当时我们发现全球有将近6%的网站是基于Bootstrap做的。不过对于中国开发者来说,Bootstrap门槛仍然较高,而且本土化支持不够好。首先,Bootstrap只支持英文字体,并没有对中文字体做设置。在不同操作系统、不同浏览器下,默认的中文字体可能是不一样的,这样会导致网页在某些时候显示得不太好看。而且英文字号和中文字号的大小也不一样,直接用Bootstrap来做文字排版并不能达到最好的效果。另外,国内浏览器种类繁多,Bootstrap也无法照顾到对国内浏览器的支持,我们希望不断加强对各种本土浏览器的支持,帮助广大前端开发者从最繁琐痛苦的浏览器性问题中解脱出来。其次,Bootstrap还没有把重点放在丰富界面组件上,而Amaze UI非常注重提高开发者的效率,我们会不断增加跨屏的界面组件,让开发者尽量少些代码。第三,Bootstrap 因为最早是从PC端开始做的,所以有些地方是先PC后移动,而Amaze UI的思路是先移动后PC。例如,Bootstrap使用了jQuery库,而Amaze UI使用了Zepto.js,Zepto.js的体积不到jQuery的1/3,对移动端的性能很大提升。因此,一个针对中国市场的、移动优先的跨屏前端开发框架开发者有很强的需求,也是一个行业的空白。

Amaze UI

Amaze UI应该是中国首个HTML5跨屏前端开发框架,其不仅兼容前几者的优势,还具有以下优势:

1. 加入更多符合中国市场特性的元素:中文排版更优化,兼容中国本土主流浏览器

2. 更轻量化,不仅适用于桌面端,更适合移动端

3. 包含一些封装好的Widgets,其他框架则没有

InfoQ:Amaze UI针对上述痛点,提出了什么不同的解决思路?

陈本峰:解决思路上,通过拆分、封装一些常用的网页组件,以规范化通过云适配平台开发的移动网站,统一用户体验。

具体措施上:

语义化。Amaze UI开发遵循语义化原则,意图通过类名(class)等信息直观传达元素的功能角色,同时关注结构、样式、行为分离,降低各部分的耦合程度,提高开发效率和可维护性。

移动优先,跨屏适配。遵循“移动优先(Mobile First)”、“渐进增强(Progressive enhancement)”的理念,可先从移动设备开始开发网站,逐步在扩展的更大屏幕的设备上,专注于最重要的内容和交互,适应移动互联潮流。轻松创建跨屏适配的网页。

模块化,按需定制。AMUI使用LESS编写样式,结构良好,易扩展,易维护;使用Seajs模块化开发、组织 JavaScript,自然、优雅。

专注于HTML5。AMUI 基于轻量的Zepto.js开发,有效减少为兼容旧浏览器的臃肿代码;基于 CSS3 的交互效果,平滑、高效。AMUI专注于现代浏览器(支持HTML5),不再为过时的浏览器耗费资源,为更有价值的用户提高更好的体验。

本地化支持:相比国外的前端框架,Amaze UI专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版效果;针对国内主流浏览器及App内置浏览器提供更好的兼容性支持,为你节省大量兼容性调试时间。

InfoQ:Amaze UI开发多久了?有几个人在开发?

陈本峰:这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品,Amaze UI能帮我们降低开发时间和成本,用标准化作业流程,能有更高的产出。

从云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境。在最近几个月,我们投入人力将这个项目整理成一个开源产品。目前有2个软件工程师全职在开发这个产品,还有一个设计,一个PM也在尽力配合。产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。

InfoQ:Amaze UI现在在内测期,有什么期待和下一步计划?

陈本峰:Amaze UI目前处在内测期,希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法,与广大优秀前端开发者共同完善Amaze UI 的功能,推动中国移动跨屏前端技术的发展。

下一步计划:AmazeUI的目标是帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页。 Amaze UI 将会在所有测试反馈处理工作结束后,内部进一步完善和丰富功能,满足更多开发者的需求,届时会正式以开源形式向众多开发者免费开放。Amaze UI是云适配成功转向PaaS后一项重要的战略部署,除了Amaze UI,云适配将会陆续开放其他产品使之成为前端开发的标配工具,供开发者使用,使更多的前端开发者不再受前端复杂代码困扰。

目前 Amaze UI 正在内测中,感兴趣的开发者可以点击这里进入内测申请。

相关阅读

云适配

是一项网站跨平台适配的移动化技术,由前微软美国总部技术专家陈本峰(原微软IE浏览器核心研发团队成员 参与了Html5的标准定制讨论)在美国西雅图研发,是指只需在原网站中插入一行代码,实现网址不变、内容实时更新的网站移动化适配技术,不仅帮助PC网站打开移动营销的入口,而且能降低95%以上的手机网站创建和运维成本。

Amaze UI

针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,随心所欲且节约成本的DIY移动版本。

网友热搜:

  • 相关推荐
  • 大家在看
  • 著名开源项目Apache Doris开发者徐冬奇加入微博广告技术团队

    著名开源项目、在线分析型分布式数据库Apache Doris的主要开发者,原百度凤巢广告系统高级架构师、阿里巴巴数据智能商业化技术负责人徐冬奇,已于近日入职微博广告技术团队,担任微博广告技术总架构师。据百度内部人士爆料,Doris最初是只为解决凤巢广告报表需求而设计的专用系统。2012年徐冬奇在前百度首席架构师James Peng(前Google 核心工程师,现自动驾驶独角兽小马智行CEO)指导下,作为Dor

  • 苹果将向开发者开放U1超宽带芯片 并推出“近距离交互”框架

    【TechWeb】6月24日消息,据国外媒体报道,苹果已经宣布,它将向开发者开放U1超宽带芯片,并在iOS 14中推出一个新的“近距离交互”(Nearby Interaction)框架。苹果外媒报道称,“近距离交互”框架可以帮助搭载U1芯片的设备感知彼此的距离和相对方向。在当前的版本中,超宽带(UWB)技术确实有一些限制。例如,苹果指出,要使该功能正常运行,两台iPhone设备必须是纵向的,以确保距离和方向的准确测量,否则可能会限制测量能力。

  • 华为新专利:相机UI移到侧边屏幕

    DoNews 6月16日消息(记者 刘文轩)LetsGoDigital发现华为的一项侧边触摸UI设计专利,并且有望应用到预计今年推出的Mate 40系列中。华为在专利中描述了一种侧边屏幕的触控方案,涵盖调节参数设置的±、闪光灯、白平衡、翻转摄像头图标,以及一个虚拟快门按钮。另一套方案则是从参数设置±图标开始,之后分别是HDR、闪光灯、白平衡、PIC图库。其实华为已经为Mate 30带来侧边虚拟快门键,不方便点按屏幕正下方的快门键时,可以将手指

  • openEA专访丨浅谈开源的未来:中国开源社区建立是关键

    摘要:今天,openea.net重新上线,这次社区会给我们哪些便利呢?未来的发展方向又是什么呢?听说这次改版增加很多额外价值包!开源君独家采访了社区建设与运营相关负责人,现在带大家一起走进openEA开源社区吧。openEA开源社区(ID:openEA)| 出品小夕 | 编辑Dream | 作者开源君 | 采访openEA运营部 | 受访开源,天生带有“共享精神”的基因,开源生态同时也是被验证过的商业模式。目前国内领先的互联网企业也在开源领域争相布局:

  • 苹果调整应用审核流程,开发者可以“挑战”App Store规则

    ​苹果本周一表示,将允许软件开发商"挑战"管理其应用程序审查流程的指导方针,并将停止因轻微违规而阻止修复常规漏洞的做法。

  • 苹果服软了:调整应用审批政策 开发者可挑战App Store规则

    在应用开发者上周纷纷对苹果App Store规则表达愤怒之情后,苹果周一表示,从今年夏天开始,将对其应用审批政策做出两处调整。作为苹果应用审核系统的一部分,所有iPhone应用都需要接受苹果员工的审核,以便检查这些应用是否违反了苹果的“指导方针”,然后确定应用能否在App Store上架,或者是否让开发者进行修复。根据苹果周一公布的新闻稿,从今年夏天开始,苹?

  • 案例 : AppGallery Connect 开放67项服务,到底为开发者解决了哪些难题?

    作为面向开发者应用的一站式服务平台,华为应用市场AppGallery Connect致力于为开发者提供应用创意、开发、分发、运营、分析等全生命周期的服务,构建全场景智慧化的应用生态。

  • “打”两份工还独自成功开发APP,这位女工程师经历了什么?

    今天要跟大家分享的是女性独立开发者Jen Yip的创业故事。Jen Yip是一个女工程师,在推特有 4 年的工作经验,后来在硅谷和合伙人共同创办了一家宠物健康初创公司。由于厌倦了硅谷的生活,她决定周游世界,旅游结束后再也没有正经上班,而是当一个自由自由职业者,并独立开发一款基于订阅的个人理财和预算的web app——Lunch Money。

  • 微软Power Platform在中国正式商用:像PPT一样开发App

    6月10日,微软宣布,云时代的低代码商业应用开发平台、由世纪互联运营的Power Platform已经正式在中国市场商用。作为微软推出的统一低代码开发平台,Power Platform提供了完全可视化、低代码的

  • 华为新专利泄密:新UI方案 为全触控屏手机准备?

    据LetsGoDigital最新透露消息看,华为最新申请的专利显示,他们正在打造一款更惊艳的新机,其可能正面全是屏幕。从专利图片上看,专利中华为新机正面有两个版本,一个是打孔屏用来安放前置摄像

  • 三星被发现在One UI中插入广告

    DoNews 6月9日消息(记者 刘文轩)一些中国手机厂商会在它们的定制版Android系统中插入广告,比如小米的MIUI就常常被用户吐槽为“ADUI”,不过一直以来,这种现象很少在国外手机厂商的设备中出现。然而三星最近也开始在韩国测试One UI的广告内容了。在三星官方论坛上,有用户抱怨手机内置的天气应用内出现一块面积不小的广告横幅。还有用户上传截图称,三星把广告投放到手机的锁屏画面中,用户需要等待15秒,广告才会结束播放,不?

  • OPPO 加入 OpenChain,与谷歌微软共建开源许可标准

    据外媒彭博新闻社 10 日报道,2020 年 5 月 27 日,OPPO 正式成为内地首家OpenChain 白金会员,与谷歌、微软、ARM等行业领军企业一起,参与开源许可标准的制定,共建更加健康的全球开源体系。 OpenChain 作为 Linux 基金会下的项目,旨在制定开源软件供应链标准,帮助各种组织更高效地解决开源许可证一致性地问题。通过 OpenChain 认证后,开源许可流程将更为轻松。目前 ARM、微软、谷歌、高通等各领域巨头纷纷加入 OpenChain,为

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 30天如何实现超级APP从0到1开发?京东mPaaS EMOP最佳示范来了

    程序四大开发框架开发跨平台移动APP的最大挑战之一就是开发框架,每个移动平台都有着自己的原生语言和软件开发包(SDK),Android端一套代码,iOS端一套代码、小程序一套代码。过去,企业需要开发多个不同应用程序以实现与多个平台、设备的兼容性,但这可能会耗费数月甚至超过一年的开发时间,30 天内完成移动开发几乎是不可能完成的任务。对此,京东mPaaS平台同时提供原生、跨端、H5、小程序四大成熟稳定功能强大的开发框架,可结

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 苹果宣布全新macOS Big Sur:近两年最大UI升级

    除了移动端最受关注的iOS 14、iPadOS 14,苹果还更新了桌面版的macOS操作系统,全新版本代号“Big Sur”(大瑟尔)。一如既往,这个代号也是风景地名,位于美国加利福尼亚州西部的优美

  • 大众汽车将向固态电池开发商QuantumScape追加2亿美元投资

    【TechWeb】6月17日消息,据国外媒体报道,当地时间周二,大众汽车表示,它将向固态电池开发商QuantumScape追加2亿美元投资,以推动固态电池技术的发展。固态电池被认为是用于下一代电动汽车的最有前途的技术,这项技术在未来有望大幅增加电动汽车的续航里程,并进一步缩短电动汽车的充电时间,但固态电池的成本一直是一个难以克服的障碍。目前,宝马、本田、现代、日产和丰田是投资研发固态电池技术的少数汽车制造商。自2012年以

  • 外媒:三星One UI 2.5截图泄露 看15秒广告才能解锁

    手机广告一直是人们所诟病的,虽然大部分手机厂商在手机中都会内置广告,但是基本上都可以手动关闭。而三星的一个新系统似乎显示了不一样的广告功能。6月8日,据notebookcheck消息,偶然发现了

  • 早期红利不等人,开源征信助你把握信用经济财富先机

    古人说:“人无信不立,业无信不兴”。在如今信用经济时代,个人信用就更显重要,无论是就业升职、资格审查、出国签证、评先评优,还是买房买车办贷款,都绕不开征信,因此,建立与健全个人征信体系已经成为经济发展的要求之一。然而,目前我国的征信体系建设并不全面,一个完整的征信产业链应当包含前端的征信业务,中端的信用监测和后端的信用修复,相比于火热的前端市场,我国信用修复业务却发展缓慢,成为整个征信系统建设的薄

  • openEuler开源社区成立Ceph SIG

    「中国,深圳, 2020 年 6 月 16 日」今天,openEuler开源社区(以下简称“openEuler社区”)正式成立Ceph SIG(Special Interest Group 特别兴趣小组),完善openEuler操作系统在分布式存储场景的适配。openEuler社区参与者和用户可获得由专业存储团队维护的稳定的Ceph版本构建分布式存储系统,并通过openEuler社区获得技术支持。 Ceph是一个具备高性能、可靠性和可扩展性的分布式存储解决方案,可以同时提供块、文件和对象三种服务

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议