一般来说,bootstrap只是对HTML增加了CSS进行美化。

而amaze ui则在bootstrap美化的基础上,主要增加JS添加了动态,以及更多样式。

例如

1
<button type="button" >basic</button>  就是常见的灰色的按钮

用bootstrap后,只需要一个css,就可以让按钮背景变成蓝色的,会漂亮很多

1
<button class="btn btn-primary" ></button>

而用amaze ui

1
<button type="button" class="am-btn am-btn-primary" data-am-button>...</button>

就可以让按钮不但漂亮而且还可以切换状态。基本上你不需要写JS代码。

如果不用amaze ui,那么可能自己需要通过JS判断,自己判断。如

if(button.enabled)

{

button.css="A";

}

else

{

button.css="B";

}

《近匠》Amaze UI:做最懂中国程序员的开源HTML5框架

发表于 2015-02-06 08:30| 15438次阅读| 来源 CSDN| 33 条评论| 作者 CSDN
移动开发 HTML5 开源 云适配 陈本峰 Amaze UI 近匠
摘要:《近匠》75期,HTML5的定稿以及Web组件化让移动Web开发到了异常火爆的地步,跨屏跨平台的开源HTML5开发框架Amaze UI强调移动优先,为国内的开发者提供最具本土特色的组件工具,降低开发门槛,让应用开发变得更简单。

Amaze UI是一款完全针对HTML5开发的轻量级、模块化、强调移动优先的开源跨屏前端框架,通过拆分、封装了一些常用的网页组件,让开发者只需复制代码便可将这些跨屏组件写入到自己的应用中。相比国外框架,Amaze UI更关注中文排版优化,强调浏览器兼容性,在GitHub上线半年的时间,便已获得2300+Star。而新版本发布的Amaze UI 2.2接入了微信支付,发布数日新增两万下载,是最初两个月下载总和。

云适配创始人CEO 陈本峰

CSDN:最初决定打造Amaze UI这样一框架有着哪些初衷和考虑?

陈本峰:Amaze UI是我们整个云适配产品的一部分,希望引领推广最新的技术,带领大家走向未来的趋势方向。现在在国外对于Web开发有一个非常热的理念,就是Web组件化,这是Google在2013年提出的新概念。开发者不需要再花费时间精力去编写日历等的代码,可以直接引用组件。

在开发云适配的过程中,我们积累了包括菜单、轮播图等在内的大量针对手机端的UI控件,但其兼容性维护及复杂的屏幕适配还需要花费很多时间去进行,而我们也希望能够与别人共享,所以最终决定将其开源,在共同形成这么一个库的同时,也让大家都能受益。

CSDN:在云适配的产品线中,Amaze UI有着什么样的定位?

陈本峰:首先,云适配可以说是Amaze UI的一个用户,它就等于把Amaze UI打包到整个云适配系统中。相对而言,云适配的产品定位是针对现在已有的PC网站,将这些PC网站转换为一个能同时支持手机、平板的跨屏网站,而Amaze UI则是直接帮助开发者开发一个跨屏跨平台的网站。

CSDN:作为开源项目,Amaze UI是如何吸引开发者参与代码提交和建立生态的?

陈本峰:在国外,开源是一项非常热门的运动,在GitHub上有着很多这种类型的开源贡献开发者。但我们确实也感觉到,开源这件事在中国还是处于早期的萌芽阶段,许多程序员可能并没有太多的时间去做贡献。当然,Amaze UI自出现以来,还是有挺多的开发者完全出于兴趣来贡献代码,主要的代码还是我们自己在更新维护,上线不到半年的时间,Amaze UI在GitHub上已经名列国内最受欢迎的开发框架TOP10,有了两千多的Star。

CSDN:您曾说“Amaze UI是最懂中国程序员的开源HTML5跨屏前端框架”,能否从其功能或设计等方面举例说明?

陈本峰:“最懂中国程序员”主要突出一个点,就是我们的本土化。国外有许多非常有名的HTML5框架,但他们的字体都是英文,对中文字体没有任何设置。而对开发者来说,做一个网页,如果不设置字体的话,那么在不同的浏览器或操作系统下,显示出来的效果就是完全是默认的,排版会特别糟糕,而Amaze UI则专门针对中文做了很多优化。

其次,浏览器的兼容性也是一大问题。Amaze UI强调移动优先,先考虑移动平台上的诸多浏览器。今时今日,浏览器的概念与过去IE、火狐等独立浏览器俨然不同,只要是能够打开HTML5页面的容器都可以叫浏览器,而现在最大的浏览器非微信莫属,但国外的框架根本不可能想到对微信做兼容。除此之外,我们还会对手机百度,以及UC、QQ、360、傲游等手机浏览器进行兼容,这些都是非常具有本土特色的。

Amaze UI还有很多非常具有中国特色的组件,比如说菜单,国外的移动端菜单一般都是上下横线,按IE的规则将菜单收起来,强调简单,而中国的很多手机网站菜单都是直接平铺出来,整个网页内容很丰富,而我们做的这些界面特色非常适合中国的程序员,云适配就是帮助企业将PC网站转换为手机端网站。截止目前,我们大概已经转换了十几万的企业网站,同时也接触了大量的企业客户,对中国的市场需求最为了解,所以,我们说自己是最懂中国程序员的开发框架,因为中国程序员开发一个网页,势必会碰到这些问题。

CSDN:与jQuery等其他框架相比,Amaze UI上手难易度如何?有哪些优势?

陈本峰:在上手难易度这块,我们比较大的优势就是官方文档都是中文的,而国外框架的官方文档虽然有人翻译,但并不能涵盖全部,此外,我们还会直接在页面及文档中为开发者提供社区支持,这也是一种本土化的考虑。

Amaze UI与jQuery并不矛盾,而是互补关系。jQuery主要是让开发者去调用浏览器顶层的JavaScript API,中间有一层是调用底层的浏览器API。jQuery也有一个UI框架——jQuery UI,主要针对PC端,不跨屏,UI风格也比较老派,还有很多类似于弧形3D的效果,但如今在移动端的整体设计趋于扁平化,无论是iOS还是Android,都是扁平化设计。Amaze UI不仅能直接跨屏,其设计风格也非常符合现在移动端的需求。

CSDN:支持跨平台,为Amaze UI本身的研发带来了哪些技术挑战?

陈本峰:Amaze UI不止是跨平台,我们把它叫做跨屏跨平台,跨屏是指不同屏幕。Amaze UI有一个很大的好处就是开发者的网站一旦完成,手机、平板、PC三个屏幕适配也就全都有了,不用开发者再劳心劳力地去开发三个网站,而跨平台相对来说是HTML5本身的优势。

说到技术挑战,Amaze UI采用响应式设计(Responsive Design),将屏幕切分成12个网格,而其风格与网格链数会随着屏幕大小而发生变化,这就是响应式设计的概念,我们在设计网格系统时,会考虑到很多因素,以中国社区更容易理解的方式,在各种应用场景下,网格系统如何才能更好地服务。

CSDN:前段时间HTML5的定稿对于开发者和类似Amaze UI等前端框架分别具备哪些意义?

陈本峰:Amaze UI是中国第一个HTML5开源框架,我们从很早以前就开始在推行HTML5,但那个时候,相对于Native App而言,HTML5还处于一个比较劣势的状态。但从2014年下半年开始,尤其到年底,整个HTML5市场关注度越来越高,越来越多的人去从事HTML5开发,主要类型为游戏和广告,在去年,诸如神经猫等的HTML5游戏刷爆了朋友圈,而HTML5广告也开始出现。相对于得靠耗钱刷榜才能跻身排行榜的各大应用商店而言,微信朋友圈已经成为了开发者们的一个重要战场,只要做一个比较有意思的内容,就会有很多人帮你传播,而其成本要低很多。

所以,现在越来越多的企业开始转向HTML5,尤其是去年年底的HTML5定稿,又大幅地增加了开发者们对于HTML5的信心。我们明显感觉到,大家对HTML5的关注度一下子提升了许多。这样对我们的框架肯定有着非常积极的促进作用,因为当开发者们都在开发HTML5应用时,Amaze UI能够帮助他们节省很多时间,并提高开发效率。

CSDN:2015年关于Amaze UI会有哪些进一步的举措?

陈本峰:在Google提出Web组件化不久,W3C便将其作为一个标准来制定,而Facebook、雅虎等巨头公司也都加入进来,我认为这个标准是大家都公认的,它将是未来Web开发的一个趋势。Amaze UI在2015年的重点工作就是Web组件,打造这么一个Web组件开发规范,将所有组件标准化。

此外,我们还将引入一种现下非常流行的Web App开发框架。网页开发分为Web App和Web Site两种不同的概念,网站是由一个个页面组成,而Web App则完全是App的体验,使用HTML5开发,未来的发展肯定会朝向Web App,因为这个体验更好,但目前相对而言开发门槛比较高,作为一款框架,Amaze UI将做一种最基础性的工作,降低门槛,让程序员开发Web App比以前更简单。

受访人陈本峰介绍:陈本峰,云适配创始人CEO,云适配技术的发明者,国际互联网标准联盟W3C中国区唯一HTML5布道官,专注互联网标准以及浏览器相关技术研究超过10年。

有了bootstrap,为什么还要做amaze ui相关推荐

  1. [Amaze UI] 如何推进 mobile first 的前端 Web 方案

    背景:云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点.在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡 ...

  2. 陈本峰:HTML5跨屏前端框架Amaze UI的开源之道

    编者按 \\ 对陈本峰的采访,源于技术圈内的一个饭局,虽然大家对他的云适配创业经历很感兴趣,但是他却在自我介绍中反复提到了"开源"和"Amaze UI",言谈举 ...

  3. 开源的HTML5前端框架Amaze UI发布,推进mobile first前端Web方案

    2014年6月,云适配发布了开源的HTML5前端框架Amaze UI,目前处于内测期.根据Amaze UI的官网介绍,该框架的特点是mobile first,解决Web应用从PC向多屏适配的问题,兼容 ...

  4. amaze 绝对位置 html,Amaze UI 兼容性列表

    由于Amaze UI 面向现代浏览器开发,因此,Amaze UI 对 IE 8/9 等浏览器只提供有限的支持. 注意: 请不要使用 IETester 这种不靠谱的工具测试: 按照微软官方的说法,IE ...

  5. 【框架】amaze ui学习(一)

    最近在看amazeui (妹子 UI ),最大的感觉就是移动端优先和扁平化的风格(和bootstrap很像). 简介: 为移动而生 Amaze UI 以移动优先(Mobile first)为理念,从小 ...

  6. html5 跨屏框架,Amaze UI优秀案例:跨屏H5前端框架

    Amaze UI 自上线以来,从一个纯粹的基于HTML5的开源框架产品到拥有丰富Web 组件和模板,吸引了国内外众多开发者的关注.在Github上,Amaze UI已经收获将近3000个Star,并一 ...

  7. 后端开发除了编码还要做什么_每个开发人员都应掌握的基本技能(除了编码)

    后端开发除了编码还要做什么 Whether you are learning to code, looking for a new job, or just want to improve your ...

  8. amaze ui响应式辅助

    amaze ui响应式辅助 响应式辅助 就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的 视口大小 .am-[show|hide]-[sm|md|lg][-up|-down| ...

  9. 跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2

    Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...

最新文章

  1. js 自带的三种弹框
  2. linux nfs搭建
  3. 苹果手机网络稳定性测试软件,如何进行iOS稳定性测试
  4. 用git rebase合并
  5. python_函数相关的各种参数定义和传递
  6. oracle易忘函数用法(5)
  7. 将redis加入到elk日志系统里
  8. java 递归从子节点删除父节点_LeetCode450. 删除二叉搜索树中的节点
  9. LeNet网络配置文件 lenet_train_test.prototxt
  10. 牛市该理智还是疯狂?python+BI可视化的股票分析,都是你想看的
  11. 连肝7个晚上,总结了66条计算机网络的知识点
  12. visio专业版svg图片裁剪
  13. 2011年Esri用户大会技术亮点总结之一:概览
  14. Ember copy array
  15. 哪些服务器适合使用固态硬盘,服务器用固态硬盘还是机械硬盘合适?
  16. YOLOv4: Optimal Speed and Accuracy of Object Detection
  17. 纯真IP数据库格式详解(转)
  18. Java添加、读取Excel公式
  19. 【win7】错误2203的解决方法
  20. 手把手教你移植 tinyriscv 到FPGA上

热门文章

  1. PTA13、随机生成密码 (10 分)
  2. idea部署tomcat并实现简单的web项目
  3. 计算机视觉专业要学什么课程,[08本]“计算机视觉基础”课程介绍和课件
  4. php5.2 array,详解php 5.2.x 数组操作实例
  5. 前端展示 字数过多 进行隐藏
  6. php 递归求得目录大小
  7. 诗与远方:无题(二十五)
  8. Spring自学日志01
  9. Springboot2 自定义异常处理
  10. 解决layui laydate动态创建多个时不起作用点击无效的问题